CSS概述

  CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表。常用的两大用途是页面内容（元素）修饰和页面布局。

优势

    实现内容和样式的分离。

    实现样式复用，提高开发效率。

    实现页面的精确控制。

    更利于搜索引擎的搜索。

CSS三种样式表

    行内样式

         写在标签内部的style

         示例：

                  <div style="border:solid 1px red"></div>

    内部样式

         在head标签内编写样式

         示例：

     <style type = "text/css">

        /*选择器*/

         </style>

    外部样式

         写在.css文件内部的样式

         示例：

               <link href = "*.css" type = "text/css" rel="Stylesheet" />

    优先级：行内样式表>内部样式表>外部样式表（实际采用就近原则， W3C提倡外部样式表 ）

CSS常用三种选择器

    标签选择器

         标签名

        ｛

            属性名：属性值；

            。。。

        ｝

        同类标签具有相同样式。

    类选择器

         .类名

        ｛

            属性名：属性值；

            。。。

         ｝

         应用样式：<标签名 class ="类名">标签内容</标签名>

ID选择器

     #ID标识名

    ｛

        属性名：属性值；

        。。。

     ｝

     应用样式：<标签名 id ="ID标识名">标签内容</标签名>一般于div标签连用。不能出现重复ID

     优先级： ID选择器>类选择器>标签选择器

说明：

    属性之间用分号（“；”）分隔

    属性和值之间用冒号（“：”）分隔

    为增加代码的可读性，同时也为了限制样式修饰的范围和优先级考虑，专业的做法是：“父元素+空格+子元素”限定范围；

多选择器的常用符号及组合

    基本符号： 

         名称        示例                     含义                          作用

          空格      div ul{...;}     <div>内的<ul>元素样式       区分上下级元素

       ，逗号    div,ul{...;}     <div>和<ul>采用相同样式     区隔多个选择器共用一套样式

        ：冒号     a:hover{...;}    <a>标签的hover伪类样式        伪类符号

        # ID标识符     ID选择器

       . 类标识符     类选择器

     组合符号

        名称                     示例                              含义                                 

       li.标签+类             li.pic{...;}                 类名为pic的<li>标签样式     

  div#标签+id          div#nav{...;}               id为“nav”的<div>标签样式

  # . id+空格+类       #nav .pic{...;}             id 为“nav”的元素内的pic类样式

  # . ,id+空格+类+逗号 #nav .pic,#nav .text{...;}  id为“nav”元素内的pic和text类都采用相同样式