web前端 基础部分（二） CSS

本文章分享的是本人学习CSS的过程及对CSS的认识，因篇幅和时间原因，这里只列出学习CSS基础重点，以供学习CSS的朋友参考！也请大牛们指点相关的错误及不足！

一、CSS概述

CSS : Cascading Style Sheet    层叠样式表

作用：定义了网页的行为，简单的说就是将网页的内容和显示样式分离，从而提高显示的多样性和显示的功能。（就好比html定义的是网页的骨架，css就是为网页穿上外衣）

特点：样式定义灵活多样且丰富多彩，可以设置任意的字体及大小。等等

二、CSS基本语法  *

选择器{

       样式属性 a：属性值；

       ...  ...

       样式属性n：属性值；

}

例：

      p{

          color:red;

       }

三、CSS的四种使用样式

1、行内样式

例：<p style="color:red;font-size:12em">行内样式</p>

2、嵌入式样式

例：<style type="text/css">

            p{

               color:red;

               font-size:30em;a

            }

       </style>

3.1、外部样式    （导入式）

例：<style>

              @import url(test/mycss.css);

              p{

                 color:red;

                 font-size:30em;

              }

       </style>

3.2、外部样式    （链接式）

例：<link href="test/mycss.css" rel="stylesheet" type="text/css"></link>

       rel属性是定义当前文档和链接文件的关系

四、样式优先级

样式的优先级遵循就近原则，出现重复的样式定义时，最近的定义样式优先级别最高

五、CSS的常用选择器

1、标签选择器

语法：  标签名称{... ...}

例：   p{color:red;}

2、id选择器

语法： #id名称{... ...}

例：  #p{color:red;}

3、类选择器

语法： .类名{... ...}

例： .p{color:red;}

4、包含选择器

语法： 选择器1  选择器2{... ...}

解释：选择所有被选择器1包含的选择器2

例： div p{color:red;}

5、选择器分组

语法： 选择器1，选择器2{... ...}

解释：选择所有选择器1和选择器2

例： div,p{color:red;}

6、伪类选择器

语法： 标签名称：选择器{... ...}

例：a:link{color: red}    /* unvisited links */ 

      a:visited{color:blue}   /* visited links   */ 

     a:hover{color: yellow } /* user hovers  */ 

     a:active{color: lime}   /* active links   */     

六、CSS常用属性

1、字体设置

  font-size     color            简写样式

（不难，建议查询帮助文档）

2、文本设置

例：p{

           text-decoration:underline;  /*设置文本装饰*/

        }

3、背景设置

例：div{

             width:70em;  /*设置标签宽度*/

             height:35em;  /*设置标签高度*/

             background-color:red;/*设置背景颜色*/

             background-image:url('***.jpg')  /*设置背景图片*/

             background-repeat:no-repeat; /*设置背景平铺*/

        }

简写：div{

            width:70em;

            height:35em;

            background:red url('***.jpg') no-repeat;

            }

4、列表设置

例：ol li{

           list-style-type:none;  /*设置与选项的预选标记*/

        }

5、display属性

解释：display设置如何显示

例：ol li{

            display:inline;

        }

6、float属性           

解释：设置元素脱离正常的文档流（由上而下，由左到右）显示

例：#d1{

               float:right;

        }

       #d2{

              float:right;

       }

       #d3{

             float:right;

       }

七、盒子模型  **

盒子模型是css的基石之一，网页上的每一个元素都被看成是装了东西的矩形盒子。这个盒子由元素的内容、padding（填充/内边距）、border（边框）和margin（边界/外边距）组成。在默认情况下盒子的没有边框，背景色是透明，所以在默认情况下我们是看不到盒子的



CSS的基础部分就分享到这里了！当然有很多都没有点到，如果真的是专门学习CSS的朋友，或开发人员还是要多多查询帮助文档的！也请资深人士指点错误及不足！