css指层叠样式表（Cascading Style Sheet）

css规则由两个主要部分构成：选择器，以及一条或者多条声明。例如：selector{declaration1，declaration2，declaration3……declarationN}

用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。用于控制网页的外观，包括内容和图像的定位，不同颜色的使用等。作为web核心语言之一。

• 选择器通常是指需要改变样式的HTML元素。
• 每条声明由一个属性和一个值组成。
  • 　　属性是指希望设置的样式属性
  • 每个属性都有一个值，属性和值被冒号分开。例子：selector{property：value}

　　比如说想要设置h1元素的文字颜色问红色，字体大小设置为14像素。其中h1是选择器，color和font-size是属性，red和14px是值。

• • • h1{color：red；font-size:14px；}　　　　　　

　　如果值为若干单词，则要给值加引号：p{font-family：“sans-serif"；}

• 多重声明：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：

　　　　p {text-align:center; color:red;}

• 空格和大小写

　　大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

　　body {  　　color: #000;  　　background: #fff; 　　 margin: 0; 　　 padding: 0;  　　font-family: Georgia, Palatino, serif;  　　}

• • 　　　　CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
• 选择器分组：可以给选择器进行分组，这样，被分组的选择器就分享相同的声明。
  • 　　例：h1,h2,h3{color：green；}

CSS选择器分类

1. 派生选择器：宜居元素再其位置的上下文关系来定义样式，可以使标记更加简洁。在css1中这种方式来应用规则的选择器被称为上下文选择器（contextual selectors），这是由于他们依赖于上下文关系来应用或者避免某项规则。

   比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

   li strong {    font-style: italic;    font-weight: normal;  }

   请注意标记为 <strong> 的蓝色代码的上下文关系：

   我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
         
          
   我是斜体字。这是因为 strong 元素位于 li 元素内。
          
   我是正常的字体。
         

2. ID选择器：id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“#”来定义。id 属性只能在每个 HTML 文档中出现一次。

　　　　下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

　　　　#red {color:red;}　　　　#green {color:green;}

　　　　下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

　　　　
这个段落是红色。
　　　　
这个段落是绿色。
　 　　　在现代布局中，id 选择器常常用于建立派生选择器。

　　3.类选择器：在CSS中，类选择器以一个点号来定义。（类名第一个字符不能使用数字）

　　4.属性选择器：可以为拥有指定属性的HTML元素设置样式，而不仅限于class和ID。（只有在规定了！DOCTYPE时，IE7和IE8才支持属性选择器，在IE6及更低的版本中，不支持属性选择器）

• • • 属性选择器：[title]{color：red；} /*为带有title属性的所有元素设置样式*/
    • 属性和值选择器：[title="w3school"]{border:5px solid blue;} /*为带有title属性的所有元素设置样式*/
    • 属性和值选择器—多个值：
      1. [title~=hello]{color:red;}为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

         <h1>可以应用样式：</h1>

         <h2 title="hello world">Hello world</h2>
         <p title="student hello">Hello W3School students!</h1>
         <hr />

         <h1>无法应用样式：</h1>

         <h2 title="world">Hello world</h2>
         <p title="student">Hello W：3School students!</p>

      2. [lang|=en]{color:green;}为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

         <h1>可以应用样式：</h1>

         <p lang="en">Hello!</p>
         <p lang="en-us">Hi!</p>
         <hr />

         <h1>无法应用样式：</h1>

         <p lang="us">Hi!</p>
         <p lang="zh">Hao!</p>
    • 设置表单的样式：属性选择器在为不带class和ID的表单设置样式时特别有用。input[type="text"]
      {
        width:150px;
        display:block;
        margin-bottom:10px;
        background-color:yellow;
        font-family: Verdana, Arial;
      }
      input[type="button"]
      {
        width:120px;
        margin-left:35px;
        display:block;
        font-family: Verdana, Arial;
      }

插入样式表方式

1. 外部样式表：

   当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

   外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

   hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}

   不要在属性值与单位之间留有空格。
2. 内部样式表

   当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

3. 内联样式

   由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

   要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

   This is a paragraph

4. 多重样式

   如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

   例如，外部样式表拥有针对 h3 选择器的三个属性：

   h3 {  color: red;  text-align: left;  font-size: 8pt;  }

   而内部样式表拥有针对 h3 选择器的两个属性：

   h3 {  text-align: right;   font-size: 20pt;  }

   假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

   color: red; text-align: right; font-size: 20pt;

   即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。