1、标签(类型)选择符:就是针对html文档中的标签(哪些html标签应用哪些css样式)
标签{属性:值}
例如:p{font-size:12px;}
div{background:blue;}
2、类选择符:可以自己定义样式,应用于一个或多个网页元素,类在网页中可以出现多次,用于定义重复的样式。
类以英文点“.”开头,后面的名字自己定义,类定义后还需要在网页中加入class=”类名称“,加以调用。
在样式中
.类名称{属性:值}
在body中
<标签 class=“类名称”>......</标签>
例如:
.warning{属性:值}
<p class="warning">......</p>
同时给某个元素应用多个类,类之间用空格隔开
<标签 class=“类名称1 类名称2”>......</标签>
例如:
<p class="a1 a2">......</p>
3、id 选择符:与类相似,只是以英文“#”开头,因为id具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式。
在样式中
#id名称{属性:值}
在body中
<标签 id=“id名称”>......</标签>
例如:
#warning{属性:值}
<p id="warning">......</p>
同时给某个元素应用多个类与id,
<标签 class=“类名称1 类名称2” id=“id名称”>......</标签>
例如:
<p class="a1 a2" id="a6">......</p>
4、通配选择符:用于定义所有html元素
*{ 属性:值}
5、包含选择符:配套或派生,选择符的嵌套使用
大标签 小标签{属性:值}
例如:table td{属性:属性值} #header li a{属性:属性值}
优点:就是不需要再单独为id为header的标签内,li标签内的a标签单独定义class或id,css代码就少了,同样也优化了css代码
6、选择符分组(集体控制):将同样的样式定义用于多个选择符,选择符之间用逗号分隔
选择符1,选择符2,选择符3......{属性:属性值}
例如:p,div,.class{属性:属性值}
7、标签指定式选择符:如果既想使用id或class,也想同时使用标签选择符
例如:h1#content{}表示针对所有id为content的h1标签
h1.p1{}表示针对所有class为p1的h1标签
8、组合选择符:将以上选择符进行组合使用
例如:h1.p1,#content h1{}