【CSS】CSS 选择器 ① ( CSS 选择器作用 |
您所在的位置：网站首页 › css浮动的用法 › 【CSS】CSS 选择器 ① ( CSS 选择器作用 |
【CSS】CSS 选择器 ① ( CSS 选择器作用
|
文章目录一、CSS 选择器作用二、CSS 选择器分类三、标签选择器1、简介2、代码示例四、类选择器1、简介2、类名规范3、代码示例4、div 与 span 标签① span 标签② div 标签5、多类名选择器 一、CSS 选择器作用 CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置 style 样式 ; h3 { color: blue; font-size:20px; }CSS 选择器 作用 : 在 HTML 文件 中 选择 符合特定规则的 标签 ; 二、CSS 选择器分类 CSS 选择器 主要分为 : 基础选择器复合选择器两种类型 ;
CSS 基础选择器 主要分为以下几类 : 标签选择器类选择器id 选择器通配符选择器三、标签选择器1、简介
标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器 可以 将 HTML 中 某个类型的标签全部选择出来 , 并应用 CSS 样式 ;
标签选择器 优缺点 : 优点 : 可以 快速为 HTML 页面的 某个类型的标签统一样式风格 ;缺点 : 不能进行差异化的样式风格设置 ;标签选择器语法 : HTML标签名 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; }2、代码示例
代码示例 : 在下面的代码中 , HTML 如果引入了该 CSS 样式 , 则 所有的 h3 标签 中的 文字都设置成 蓝色 , 20 像素 大小 ; h3 { color: blue; font-size:20px; }四、类选择器1、简介
CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ;
CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;标签内容 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 ;.name { color: blue; font-size:20px; }
CSS 类选择器 优点 : 可以选择指定的若干标签 ; 2、类名规范
类名规范 : 多个单词组成的类名 , 推荐使用 - 隔开 ;不要使用 纯数字 , 纯中文 作为类名 ;3、代码示例
按照下图的颜色 , 将 Google 写出来 , 注意每个字母的颜色需要与图片中一致 ;
代码示例 : Google .blue { color: blue; font-size: 80px; } .red { color: red; font-size: 80px; } .orange { color: orange; font-size: 80px; } .green { color: green; font-size: 80px; } G o o g l e运行效果 :
4、div 与 span 标签 ① span 标签 span 标签 如果 没有使用 br 换行 , 则 多个 span 标签会在同一行中 Google
div 标签会自动换行 Google
5、多类名选择器
在上面的 HTML 代码的 CSS 样式中 , 每个 类选择器 下的样式中都设置了 font-size: 80px; 样式 , 该样式可以被抽取出来 , 作为一个新的类 ; 原代码 : .blue { color: blue; font-size: 80px; } .red { color: red; font-size: 80px; } .orange { color: orange; font-size: 80px; } .green { color: green; font-size: 80px; }新代码 : .fontsize80 { font-size: 80px; } .blue { color: blue; } .red { color: red; } .orange { color: orange; } .green { color: green; }同时 , 在每个标签下 , 可以定义多个类 , 多个类名之间使用 空格隔开 ; G
完整代码示例 : Google .fontsize80 { font-size: 80px; } .blue { color: blue; } .red { color: red; } .orange { color: orange; } .green { color: green; } G o o g l e运行效果 :
|
【本文地址】
今日新闻 |
推荐新闻 |