即使你美丽动人，也要具备更华丽的着装

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

标签选择器

class选择器

.class_name{
color:red;
}

id选择器

#id_name{
color:red;
}

关联选择器

  <style>
          .container li a {    #标签关联
              background-color:red;
  }
  </style>
  
  <div class="container">
          <ul>
              <li>
                 <a>This is A ! </a>    #使某个class下面的 li标签下的 a标签应用此样式
             </li>
         </ul>
 </div>   

=============================================
  <style>
          .container .l .a {        #class关联 找到class=container 再找下面的class=l 继续找到class=a
              background-color:red;
  }
  </style>
  
  <div class="container">
          <ul>
              <li>
                 <a class="l">
                        <span class="a">This is  span!!</span>
                 </a>    #使某个class下面的 li标签下的 a标签应用此样式
             </li>
         </ul>
 </div>

组合选择器

.c1 #ll a .cc1,cc2 {
    color:red;   #将.c1 #ll a标签下 class=cc1 和 class=cc2的标签设置此样式
}

.c1 #ll a .cc1，.c1 #ll a .cc2{
    color:red;   #不在一个目录下时，使用全路径
}

属性选择器

<style>
          .con input[type="text"][name='username']{        
              background-color:red;
  }
  </style>  #找到class=con 下的input标签下 type='text'下name='username'的标签 应用此样式

<div class="con">

<input type="text" name="username" />
<input type="file"  />
<input type="password" />
<input type="button"  />
<input type="checkbox" />

</div>

自定义属性(所有的标签都可以拥有自定义属性)

<style>
          .con input[alex='sb']{        
              background-color:red;
  }
  </style>  #找到class=con 下的input标签下自定义属性alex='sb'的标签 应用此样式

<div class="con">

<input alex='sb' type="text" name="username" />
<input type="file"  />
<input type="password" />
<input type="button"  />
<input type="checkbox" />

</div>

使用方法

有三种方法可以在站点网页上使用样式表：

外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--外部样式表-->
    <link rel="stylesheet" href="css/css_cool.css"/>

</head>

<!--应用外部样式表-->
<div class="red">
    rrrrrrrrrrrrrrrrrrrrrr
</div>
<div class="name">
    qqqqqqqqqqqqqqqqqqqqqq
</div>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <!--内部样式表-->
 8     <style>
 9         所有class=brown应用此样式
10         .brown{
11             color: brown;
12         }
13         }所有class=brown下的a标签应用此样式
14         .brown a{
15 
16         }
17         所有id=new 应用此样式
18         #new{
19             background-color: cyan;
20         }
21         所有的div和span标签应用此样式
22         div,span{
23             font-size: 50px;color: red;
24         }
25         所有a标签下的div标签应用此样式
26         a div{
27             background-color: red;
28         }
29         所有input标签下type='text'的标签应用此样式
30         input[type='text']{
31 
32         }
33     </style>
34 </head>
35 
36 
37 <!--应用内部样式表-->
38 <span class="brown">
39     Embedding style!
40 </span>
41 
42 <!--应用ID选择器-->
43 <div id="new">nnnnnnnnnnnnnnnnnnnn</div>
44 
45 <span>123123123123123</span>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

1 <!--应用内联样式-->
2 <div style="color: blue;">
3     Inline style!!!
4 </div>

先来说两个标签： <div> <span>

这两个标签其实什么都不是，如果不往里写内容，那么什么都不会显示。

但是，<div>标签里一旦写入内容，那么就变为一个块级标签，<span>标签写入内容，就会变为一个内联标签。

CSS+div

一.精简代码，降低重构难度。

网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

二.网页访问速度

使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

三.SEO优化

采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四.浏览器兼容性

DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。

RGB（颜色对照表）

http://www.114la.com/other/rgb.htm

background

background-color 背景颜色

background-image 背景图片

background-repeat: no-repeat;

background-position

border

wwwwww

123456789

123456

display

　　display:none 使其消失

　　display:block #内联标签，转变成块级标签

span flag!!! span flag!!!

　　display:inline

div flag!!!

1 <!--内联——>块级-->
2 <span style="background-color: darkorange;">span flag!!!</span>
3 <span style="display:block; background-color: darkorange;">span flag!!!</span>
4 
5 <!--块级<——内联-->
6 <div style="background-color: darkgreen">div flag!!!</div>
7 <div style="display: inline;background-color: darkgreen">div flag!!!</div>

cursor

更改光标的样式

pointer || help || wait || move || crosshair

浮动 float

left

right

<style>
        .w-left{
            width: 20%;
            background-color: red;
            height: 100px;
            float: left;
        }
        .w-right{
            width: 80%;
            background-color: green;
            height: 100px;
            float: left;
        }
    </style>
<div>
    <div class="w-left"></div>
    <div class="w-right"></div>
</div>

<div>
    <div style="float:left;width: 20%;height: 150px;background-color: blue;"></div>
    <div style="float: left;width: 80%;height: 150px;background-color: green;"></div>
</div>

浮动float