CSS01--概述与选择器

CSS：Cascading Style Sheets，层叠样式表。我们之前已经说过，HTML解决的是网页内容(结构)的问题，而CSS立足于网页的表现方面的问题，则样式定义如何显示HTML标签，js负责行为（结构、表现、行为相分离）。W3C把样式添加到HTML4.0，就是为了解决内容与表现相分离的问题。我们通常把样式写在一个单独的.css文件中，然后通过link标签引用，这就是外部样式表，这样可以提高效率。因为我们只需要更改CSS文件中的一个地方，就可以更改整个web程序相关标签的样式。多个样式定义可层叠为一。

 

1.语法：
    选择器 {声明1;声明2;} 如：

 h1 {color:blue;font-size:12px;font-family:"sans serif"}    /* 值由多个单词组成，加引号 */

  
2.CSS注释：
    /*...*/
    
3.选择器分组：分享相同的声明

h1,h2,h3,h4,h5,h6 {color:blue;}

    
4.派生选择器：依据元素的位置关系

li strong {font-style:italic;font-weight:normal;}　　/* 列表中的strong元素变为斜体字 */

    
5.id选择器：依据元素的id，形式是"#id"

#red {color:red;}    #blue {color:blue;}

   
6.类选择器：

 .center {text-align:center;}

  
7.利用id选择器构建派生选择器：
  

 #sidebar p {font-style:italic;text-align:right;margin-top:0.5em;}　　/* id="sidebar"的段落会起作用 */
 div#sidebar {border:1px dotted #000;padding:10px;}　　　　　　　　　　 /* id="sidebar"的div会起作用 */
    
 .fancy td {color:#f60;background:#666;}
 td.fancy {color:#f60;background:#666;}        <td class="fancy"></td>

   
8.属性选择器：  

 [title] {color:red;}
 [title=W3SCHOOL] {border:5px solid blue;}
 input[type="text"] {}
    
 p[class="importance"]等价p.importance

 
后代选择器：两个元素之间的层次间隔可以是无限的
    h1 em {}
    ul em {}
子选择器：后代选择器的一种，只能是子元素
    h1>strong {}
相邻兄弟选择器：
    h1+p {margin-top:50px;}
    
伪类：   

a:link    a:visited    a:hover  a:active
p:first-child{font-weight:bold;}    /* 作为某元素第一个子元素的所有p字体加粗 */
p>i:first-child{font-weight:bold;}
input:focus{background-color:blue;}

    
伪元素：
    p:first-line    p:first-letter
    h1:before        h1:after

9.属性选择器设置表单样式：  

input[type="text"] {width:150px;display:block;margin-bottom:10px;}
input[type="button"] {width:120px;display:block;margin-left:35px;}