CSS基础

CSS[Cascading Style Sheets]（层叠样式表）：可快速维护页面元素(如文本、图像、链接等)的外观(如字体、字号、颜色等)。CSS版本号:2.0

 

W3C建议尽量使用CSS样式取代HTML标记属性。（即交集部分用CSS样式，特殊部分使用自己独有的）

 

CSS在HTML中的应用方式

 1.外部样式表：链接到外部的CSS文件（先创建一个CSS文件，再链接到该文件）

    CSS文件的扩展名为.css

    <link type="text/css" rel="stylesheet" media="all|screen|print" href="CSS文件URL"/>

    其中media的属性值如下：

     all,所有媒体介质

     screen,针对屏幕(浏览器)

     print,针对打印机

  

 2.内部样式表：也叫嵌入式样式表，书写于文档头部

     <style type="text/css">

         ...

         ...

     </style>

     

 3.内联样式表：书写于标记内部

   <标记名称 style="CSS样式"/>

   或

   <标记名称 style="CSS样式">...</标记名称>

 

优先级：内联样式表最高，内部样式表和外部样式表优先级取决于谁最靠近内容部分（就近优先）

 

CSS语法结构（适用于内部样式表和外部样式表）

选择器{

   属性:值;

   属性:值;

   ...

}

 

选择器(哪些对象将使用CSS样式)

 1.通配选择器 -- * (能够自动应用于所有元素)

 2.元素选择器 -- 标记名称(自动应用于指定的元素)

 3.类选择器 -- .类名称

  说明:

  A.在使用CSS类时，需要添加class="类名称"属性

  B.CSS类在声明需要加"点",但在使用时无需"点"。

  C.多个CSS类之间以空格分隔。

  D.变形的用法

     （1）元素名称.类名称,指只能用于指定元素。

       如:

       td.a3{

         样式

       }

      其代表的意思就是:a3类只能应用给单元格对象。

 

     （2）.类名称.类名称,指只能同时应用这两个类。

       如:

       .a3.a4{

         样式

        }

       其表示的意思是:只能同时使用a3和a4这两个类。

   

 4.ID选择器 -- #id

  A.只能手动的应用给文档的唯一对象。

  B.使用时添加id="ID"属性。

  C.对象的id除CSS可以使用外，还可以被JavaScript或jQuery使用到。

   

 5.群组选择器(实际上具有相同属性的选择器的简捷方式) 

    选择器,选择器,...｛

        样式

    ｝

 

 6.派生选择器(后代选择器)

  选择器 选择器 ...｛

        样式

  ｝

  说明:前面的选择器至少是后面选择器的父节点。只适用于顺序对象

 

 7.伪类选择器（主要用于链接）

  :link,正常显示的状态

  :hover,鼠标放上的状态

  :active,鼠标按下的状态

  :visited,访问过的状态

 

 CSS选择器的优先级：inline,IDs,classes,tags（即内联数，id数，类数目，标记数）

 

CSS单位

  1.长度

   px：像素

   %：百分比

   em：字号的倍数

   pt：字号大小（磅）

   cm：厘米

   mm：毫米

 

 2.颜色

  A,英文名称,如red,green,blue等

  B,完整十六位进制数字,如#ff0000(红色),#00ff00(绿色),#ffffff(白色),#000000(黑色)

  C,简写十六位进制数字,如#f00

  D,RGB模式,如rgb(0,0,255)

  E.百分比RGB模式,如rgb(0%,100%,0%)

  

 3.注释

 /*  注释内容  */