CSS(Cascading Style Sheet)译作"层叠样式表",是用于控制或增强网页样式并允许将样式信息与网页内容分离的一种标记性语言。 使用CSS样式可以控制许多仅使用HTML无法控制的属性。当浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的 解释规则将网页元素呈现出来。CSS决定浏览器将如何描述HTML元素的表现形式。

• 内联样式

                
                    <li style="float: left;padding: 4px 5px 0 5px;color: black">首页</li>
                
            

• 嵌入样式

                
                   <style type="text/css">
                       body{
                           margin: 0;
                       }
                   </style>
                
            

• 外部样式

                
                  <link rel="stylesheet" href="xxx.css" type="text/css">
                
            

            
                选择器名字{
                    属性：值；
                    属性：值；
                }
            
        

1. 通配符选择器
2. 元素选择器
3. 类选择器
4. ID选择器

    其语法如下：

            
                选择器名称 选择符选择器名称{
                    属性：值；
                    属性：值；
                }
            
        

• 后代选择器

后代选择器也被称为包含选择器，就是可以选择某元素的后代元素。

比如说 E F,前面E为祖先元素，F为后代元素。所表达的意思就是选择了E元素的所有后代F元素。请注意祖先元素和后代元素之间使用 一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者更深层次的关系，都将被选中。

• 子选择器

子选择器只能选择某元素的子元素。

比如说E>F，其中E为父元素，F为子元素，其中E>F所表示的是选择了E元素下的所有子元素F。和后代选择器(E　Ｆ) 不同，Ｅ＞Ｆ仅选择Ｅ元素下的Ｆ子元素，更深层次的Ｆ元素则不会被选择。

• 相邻兄弟选择器

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且两者需具有一个相同的父元素。

比如E+F，E和F元素具有一个相同的父元素，而且F元素在E元素后面且紧相邻，这样就可以使用相邻兄弟选择器来选择F元素。

• 通用兄弟选择器

通用兄弟选择器是CSS3新增的选择器，将选择某元素后面的所有兄弟元素，通用兄弟元素需要在同一个父元素之中。

比如E~F，E和F元素是属于同一父元素之内，并且F元素在E元素之后，那么E~F选择器将选择E元素后面的所有F元素。

            
                元素名字[元素类型=“类型名字”]：选择器名字{
                    属性：值；
                    属性：值；
                }
            
        

• [att=val] 指定特定名字的元素；
• [att*=val] 匹配val*的元素；
• [att^=val] 匹配val开头的元素，比如id为val1,等；
• [att$=val] 匹配val结尾的元素，比如id为1213val等；
• [att|=val] 匹配val开头的元素；

• 外边距:margin
• 内边距:padding
• 边框属性:border

盒子的属性

• 自由缩放

• 外轮廓

• 阴影

• 背景的基本属性

定位与布局的基本属性

• 基本属性

• 定位布局
  1. static:static为position的默认属性值，没有定位，元素出现在正常流中(忽略top,bottom,left,right或者z-index声明)
  2. absolute:absolute可用于生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。元素位置通过left,top,right,bottom属性进行设置。
  3. fixed:fixed可用于生成固定定位的元素，即相对于浏览器窗口进行定位。元素的位置通过top,bottom,right,left进行定义。
  4. relative:relative可用于生成相对定位的元素，相对于其正常位置进行定位。
  5. inherit:inherit用于从父元素继承position属性的值。

多列布局