每一条css样式声明由两部分组成,如下
选择器{
样式;
}
有标签选择器,类选择器
标签选择器太简单,这里不赘述
类选择器,首先创建在<head></head>之间创建个类如.setBlue{color:blue},类需要.开头,然后在需要的地方插入,比如<span class="setBlue">xxxxxxxxxx</span>
id选择器,与类选择器类似,创建类以#开头,插入时,<span id="你创建的类名">xxxxxxx</span>
区别
1. id选择器在文档中只能用一次,仅一次!!,而类选择器可以多次使用
子选择器
在类选择器中,使用>符号,来选择指定标签元素的 第一代子元素
如:
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li里面的内容加入红色实线框
后代选择器,子选择器只包含第一代,而后代选择器则包括所有后代,只需这样.food li{xxxxx}之前子选择器的>改成一个空格 就可以了
通用选择器,它使用*号指定,他的作用是匹配html中所有的标签元素
如下:
*{color:blue;}所有的HTML标签元素都变成蓝色了
伪类选择器,所谓伪类选择器就是他能给html中不存在的标签设置样式,比如:
a: hover{color:red;}
这段代码让a标签里的内容鼠标滑过字体变成红色,最常用的就是 a:hover组合,因为他兼容所有浏览器
分组选择符,(,)逗号,他的作用是将多个标签元素设置成一个样式,如:
h1,span{color:red;}h1和span标签的字体颜色都为红色
相当于 h1{color:red;} span{color:red;}