CSS的引入方式及CSS选择器

一 CSS介绍

　　现在的互联网前端分三层：

　　　　a.HTML：超文本标记语言。从语义的角度描述页面结构。

　　　　b.CSS：层叠样式表。从审美的角度负责页面样式。

　　　　c.JS：JavaScript 。从交互的角度描述页面行为

　　CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

　　css的最新版本是css3，我们目前学习的是css2.1

　　接下来我们要讲一下为什么要使用CSS：

　　HTML的缺陷：

　　　　1.不能够适应多种设备

　　　　2.要求浏览器必须智能化足够庞大

　　　　3.数据和显示没有分开

　　　　4.功能不够强大

　　CSS 优点：

　　　　1.使数据和显示分开

　　　　2.降低网络流量

　　　　3.使整个网站视觉效果一致

　　　　4.使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

　　比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

 

二 行内样式

1 2 3

<div>      <p style="color: green">我是一个段落</p>  </div>

　　

三 内接样式

1 2 3 4 5 6 7 8

<style type="text/css">     /*写我们的css代码*/               span{     color: yellow;     }   </style>

　　

四 外接样式

　　外接样式之链接式

1	<link rel="stylesheet" href="./index.css">

　　外接样式之导入式

1 2 3

<style type="text/css">         @import url('./index.css'); </style>

　　

五 CSS选择器

 

　　css的选择器：1.基本选择器 2.高级选择器

　　基本选择器包含：

　　1.标签选择器
　　　　标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

1 2 3 4 5 6 7 8 9 10 11 12

body{     color:gray;     font-size: 12px; } /*标签选择器*/ p{     color: red; font-size: 20px; } span{     color: yellow; }

　　2.id选择器

　　　　# 选中id

　　　　同一个页面中id不能重复。
　　　　任何的标签都可以设置id 
　　　　id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

1 2 3 4 5 6 7 8 9 10 11

#box{       background:green;   }                  #s1{       color: red;   }       #s2{      font-size: 30px;  }

　　3.类选择器

　　　　所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

　　　　类的使用，能够决定前端工程师的css水平到底有多牛逼？

　　　　玩类了，一定要有”公共类“的概念。

1 2 3 4 5 6 7 8 9 10 11

.lv{     color: green;   } .big{     font-size: 40px; } .line{    text-decoration: underline;    }

　　

1 2 3 4 5 6

<!-- 公共类    共有的属性 -->     <div>         <p class="lv big">段落1</p>         <p class="lv line">段落2</p>         <p class="line big">段落3</p>     </div>

　　总结：

　　　　1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

　　　　2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用

　　到底使用id还是用class？

1 2 3

答案：尽可能的用class。除非一些特殊情况可以用id   原因：id一般是用在js的。也就是说 js是通过id来获取到标签

　　

六 CSS的高级选择器

　　高级选择器分为以下几种：

• 后代选择器

• 子代选择器

• 并集选择器

• 交集选择器

　　

　　后代选择器

　　　　使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

1 2 3

.container>p{     color: yellowgreen; }

　　子代选择器

　　　　使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

1 2 3

.container>p{     color: yellowgreen; }

　　并集选择器

　　　　多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

1 2 3 4 5 6

/*并集选择器*/ h3,a{     color: #008000;     text-decoration: none;                   }

　　　　比如像百度首页使用并集选择器。

1 2 3 4 5

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {       margin: 0;       padding: 0    } /*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

　　交集选择器

　　　　使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active

　　　　比如有一个<h4 class='active'></h4>这样的标签。

　　　　那么

1 2 3 4 5 6 7 8 9 10 11 12

h4{     width: 100px;     font-size: 14px; } .active{     color: red;     text-decoration: underline; } /* 交集选择器 */ h4.active{     background: #00BFFF; }

　　　　它表示两者选中之后元素共有的特性。

七 CSS的属性选择器

 　　

　　属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

　　语法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

1 /*根据属性查找*/  2             /*[for]{  3                 color: red;  4             }*/  5              6             /*找到for属性的等于username的元素 字体颜色设为红色*/  7             /*[for='username']{  8                 color: yellow;  9             }*/ 10             11             /*以....开头  ^*/ 12             /*[for^='user']{ 13                 color: #008000; 14             }*/ 15             16             /*以....结尾   $*/ 17             /*[for$='vvip']{ 18                 color: red; 19             }*/ 20             21             /*包含某元素的标签*/ 22             /*[for*="vip"]{ 23                 color: #00BFFF; 24             }*/ 25             26             /**/ 27             28             /*指定单词的属性*/ 29             label[for~='user1']{ 30                 color: red; 31             } 32             33             input[type='text']{ 34                 background: red; 35             }

　　

八 CSS的伪类选择器

 　　伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则"  LoVe HAte

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

1         /*没有被访问的a标签的样式*/  2         .box ul li.item1 a:link{  3              4             color: #666;  5         }  6         /*访问过后的a标签的样式*/  7         .box ul li.item2 a:visited{  8              9             color: yellow; 10         } 11         /*鼠标悬停时a标签的样式*/ 12         .box ul li.item3 a:hover{ 13             14             color: green; 15         } 16         /*鼠标摁住的时候a标签的样式*/ 17         .box ul li.item4 a:active{ 18             19             color: yellowgreen; 20         }

　　　　再给大家介绍一种css3的选择器nth-child()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

/*选中第一个元素*/  div ul li:first-child{      font-size: 20px;      color: red;  }  /*选中最后一个元素*/  div ul li:last-child{      font-size: 20px;      color: yellow;  }     /*选中当前指定的元素  数值从1开始*/  div ul li:nth-child(3){      font-size: 30px;      color: purple;  }     /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/  div ul li:nth-child(n){      font-size: 40px;      color: red;  }     /*偶数*/  div ul li:nth-child(2n){      font-size: 50px;      color: gold;  }  /*奇数*/  div ul li:nth-child(2n-1){      font-size: 50px;      color: yellow;  }  /*隔几换色  隔行换色       隔4换色 就是5n+1,隔3换色就是4n+1      */     div ul li:nth-child(5n+1){      font-size: 50px;      color: red;  }

　　

九 CSS的伪元素选择器

 

 　　废话不多说，直接上代码！！！

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/*设置第一个首字母的样式*/         p:first-letter{             color: red;             font-size: 30px;           }           /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/         p:before{             content:'alex';         }                     /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/         p:after{             content:'&';             color: red;             font-size: 40px;         }