manming 发表于 2013-2-7 16:09:12

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{color:#000000;}
 
 
 
 
 
页: [1]
查看完整版本: CSS入门学习之二(CSS句法)