CSS笔记

                CSS 5种样式

 

1、标签选择符 使用XHTML中已有的标签做为选择符

       如：p{ width : 250px;}

               h1{color : #ff0000 }

2、ID选择符  使用控件的ID值，ID值是唯一的 需要加 ‘ # ’

       如：#hello{ color : #ffooff }

               <div id="hello" >你好</div>

3、class选择符  使用控件的class属性指定，多个标签可以使用同一的样式，class自定义 需要加‘ .  ’ (句点)

       如 ： .reader{ color ; #00ff00 }

                <div class="reader">你好</div>

4、伪类及伪对象  此选择符是一组CSS预定义好的类和对象，不需要进行id和class的属性的声明

     如： a :  visited { color:#ffee00 }     //用于超链接访问过后，样式变为红色文本

 

在实际使用中使用最多的是超链接的4中状态 即：link、hover、active、visited

伪类	用法
：link	超链接未被访问时
：hover	对象（一般为超链接）在鼠标滑过时
：active	对象（一般为超链接）被用户单击时（鼠标单击未释放）
：visited	超级链接未被访问后
：focus	对象成为输入焦点时
：first-child	对象的第一个子对象
：first	页面的第一页

 

伪对象	用法
：after	设置某个对象之后的内容
：first-letter	对象内的第一个字符
：first-line	对象第一行
：before	设置某一对象之前的内容

 

5、通配选择符 需要加‘*’

  如：*{margin：10px}    //所有对象外边距为10px

 

各种样式可以组合使用，常用4种组合方式

 

1、群组选择符 

     需要对多种选择符进行相同样式的设置时，用逗号‘，’隔开

         如：p，span，div   {  color ：#ff0000  }

2、包含选择符

     通过标签嵌套包含关系组合选择符，包含2个选择符用空格隔开

       如： p span {  color：#ff0000 }      //是有p标签内的span标签包含文本被设置为红色

3、标签指定式选择符

      即标签选择符与id和class的组合，两者之间不需分隔

          如：p#hello { color：#ff0000 }     //  id名为hello 的 p 标签 的文本为红色

                  p.reader { color：#ff0000 }     //  class名为reader 的 p 标签 的文本为红色 

4、自由组合标签

      如：p#hello h1{ color ：#ff0000  }   //id名为hello的p标签内的h1标签的文本为红色

 

 

CSS中的数值单位

 

单位	说明
px	像素（Pixel）
em	相对当前文本尺寸的倍数
ex	相对字符高度的倍数
pt	点/磅（Point）
pc	派卡（Pica）
in	英寸（Inch）
mm	毫米
cm	厘米