CSS句法学习
css样式规则主要包括3个部分
- 选择器(Selector):为HTML标签提供样式设置的方法.它可以包括任何HTML标签
- 属性(Property):是一种HTML标签的属性(attribute).简单的说,HTML的所有属性都被包括在CSS属性中.可能是一些颜色或边框之类的.
- 值(Value):相对与属性的值,例如颜色属性,它的值可以是red或者是#F1F1F1.
css样式规则的使用如下:
selector {property:value}
如果你希望设置一个表格的边框可以这样设置
table{border:1px solid #C00;}
这里,table就是选择器(selector),border属性对应的值为1px,solid属性对应的值为#C00.
css提供了几种选择器可以让你灵活操作HTML标签元素,下面每个选择器加以介绍
类型选择器
这种选择器其实就是通过对HTML的标签进行设置,上面table的例子就是一个类型选择器,下面再HTML中的h1标签举一个例子
h1{color:#36CFFF}
通用选择器
通用选择器就是一个星号,它表示将CSS样式应用到HTML所有的元素中.
*{color:#000000}
后代选择器
这种选择器主要是用于对一些特殊的元素进行设置,只有当某种元素嵌套再特定的元素中,后代选择器才会生效,例如:
ul em{color:#000000}
上面例子的意思只有嵌套在ul元素中的em元素才被颜色才被设置为白色
类选择器
通过设置元素类属性来应用样式规则,类选择器是以.开头的.
.black{color:#000000}
该选择器表示对所有包含black类属性的元素都设置颜色
ID选择器
通过元素ID属性来设置样式,ID选择器是以#开头的
#black{color:#000000}
该选择器表示对ID属性为black的元素设置颜色
子选择器
子选择器其实和上面提到的后代选择器很相似,但仍有一些不同的地方,子选择器仅是指它的直接后代,即作用于子元素的第一个后代,而后代选择器则作用于所有子后代元素,可以看看下面的例子
body > p{ color:#000000}
上面这个里面表示对body元素中的第一个p元素进行设置
属性选择器
对带有某些属性的元素设置样式.
input[type="text"]{color:#000000;}