CSS入门学习之二(CSS句法)

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;}