网页三剑客之CSS

1.CSS概述

　　CSS中文简称层叠样式表(英文全称：Cascading Style Sheets)，用来控制页面的表现，即使页面更好看的语言。

2.CSS基本语法和页面引用

　　2.1 css的定义方法

　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div{ width:100px; height:100px; color:red }

　css通用书写结构

/*
解释性的信息
*/

/*全局通用的样式*/


/*导航条的样式*/

/*商品列表样式*/

p {
    color: red;
    font-size: 18px
}
/*标签选择器*/
h1 {
    color: green;
}
/*ID选择器*/
#p2 {
    color: black;
}
/*类选择器*/
.c1 {
    color: yellow;
}

　　2.2 CSS页面引入方法

（1）、外联式：通过link标签，链接到外部样式表到页面中。

（2）、嵌入式：通过style标签，在网页上创建嵌入的样式表。

（3）、内联式：通过标签的style属性，在标签上直接写样式。
......
（4）、导入式：引用数量有限制

实际工作中，我们常用外联式和嵌入式。

示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联式title>
head>
<body>
    <div>
        <h2 style="text-align: center;">什么是CSSh2>
        <p style="color: red;text-indent: 20px; font-size: 16px;">
            为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
        p>
        <hr>
        <p style="color: blue;text-indent: 20px;font-size: 16px;">
            第一行是文档声明，第二行"html"标签和最后一行“html”定义html文档的整体，“html”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素，“head”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“body”内编写网页上显示的内容。
        p>
    div>
body>
html>

内联式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入式title>
    <style>
        /*标签选择器*/
        h2{
            text-align: center;
        }
        /*id选择器*/
        #p1{
            color: red;
            text-indent: 20px; 
            font-size: 16px;
        }
        #p2{
            color: blue;
            text-indent: 20px;
            font-size: 16px;
        }
    style>
head>
<body>
    <div>
        <h2>什么是CSSh2>
        <p id="p1">
            为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
        p>
        <hr>
        <p id="p2">
            第一行是文档声明，第二行"html"标签和最后一行“html”定义html文档的整体，“html”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素，“head”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“body”内编写网页上显示的内容。
        p>
    div>
body>
html>

嵌入式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入式title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
head>
<body>
    <div>
        <h2>什么是CSSh2>
        <p id="p1">
            为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
        p>
        <hr>
        <p class="cb">
            第一行是文档声明，第二行"html"标签和最后一行“html”定义html文档的整体，“html”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素，“head”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“body”内编写网页上显示的内容。
        p>
    div>
body>
html>

外联式

/*
解释性的信息
*/

/*全局通用的样式*/

/*标签选择器*/
h2{
    text-align: center;
}
/*id选择器*/
#p1{
    color: red;
    text-indent: 20px; 
    font-size: 16px;
}

p{
    text-indent: 20px;
    font-size: 16px;
}
/*类选择器*/
.cb{
    color: blue;
}

main.css

3.CSS选择器

　　3.1 基础选择器

（1）*：通用选择器，匹配任何元素。* { margin:0; padding:0; } 标签选择器（2）标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。举例： ? *{margin:0;padding:0} ? div{color:red} ? ? ?

....

（3）id选择器 ? 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。举例： ? #box{color:red} ? ?

....

（4）类选择器 ? 通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。举例： ? .red{color:red} ? .big{font-size:20px} ? .mt10{margin-top:10px} ? ?

....

　　3.2 组合选择器

（1）层级选择器（后代选择器）
?    主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：
?    .box span{color:red}
?    .box .red{color:pink}
?    .red{color:red}
?    
?    
?        ....
?        ....
?    
?    
?    ....

（2）组选择器
?    多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：
?    .box1,.box2,.box3{width:100px;height:100px}
?    .box1{background:red}
?    .box2{background:pink}
?    .box2{background:gold}
?    
?    ....
?    ....
?    ....
（3）子元素选择器（儿子选择器）
       E>F 子元素选择器，匹配所有E元素的子元素F                           
       div > p { color:#f00; }
（4）毗邻选择器
/*选择所有紧接着元素之后的元素*/
div+p {
  margin: 5px;
}
（5）弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

　　注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。

　　3.3 属性选择器

E[att]         匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 
 E[att=val]     匹配所有att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 
 E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}

　　3.4 伪类选择器：伪类选择器是为了给选择器添加一些特殊效果

　　　　anchor伪类：专用于控制链接的显示效果

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

　　before,after伪类

?    常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
?    .box1:hover{color:red}
?    .box2:before{content:'行首文字';}
?    .box3:after{content:'行尾文字';}
?    
?    
?    ....
?    ....
?    ....

示例；

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS引入示例title>
    
        
            
        
    
    <link rel="stylesheet" href="css/index.css">
head>
<body>


<p id="p1">海燕p>
<p id="p2">这个是个黑色的海燕p>
<p class="c1">这个是个黑色的海燕p>
<p class="c1">这个是个黑色的海燕p>
<p class="c1">这个是个黑色的海燕p>
<p class="c1">这个是个黑色的海燕p>
<h1>海燕h1>

body>
html>

04_css_引入示例

解释性的信息
*/

/*全局通用的样式*/


/*导航条的样式*/

/*商品列表样式*/

p {
    color: red;
    font-size: 18px
}
/*标签选择器*/
h1 {
    color: green;
}
/*ID选择器*/
#p2 {
    color: black;
}
/*类选择器*/
.c1 {
    color: yellow;
}

index.css

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组合选择器示例title>
    <link rel="stylesheet" href="css/index2.css">
head>
<body>


    
    
    
        
        
    


<hr>


<p>000p>
<div>111div>
<p>222p>
<p>333p>
body>
html>

05_css_组合选择器

/*组合选择器示例的CSS文件*/


/*后代选择器*/
/*#d1 p {*/
    /*color: red;*/
/*}*/

/*儿子选择器*/
/*#d1>p {*/
    /*color: green;*/
/*}*/

/*毗邻选择器*/
/*div+p {*/
    /*color: yellow;*/
/*}*/

/*弟弟选择器*/
div~p{
    color: blue;
}

index2.css

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例title>
    <link rel="stylesheet" href="css/index3.css">
head>
<body>

<p nb="hao" >我是一个p标签p>
<p nb="good">我也是一个p标签p>
<p>我是还是一个p标签p>

body>
html>

06_css_属性选择器

/*属性选择器相关样式*/

/*[s9] {*/
    /*color: red;*/
/*}*/

[nb="hao"] {
    color: blue;
}

index3.css

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套示例title>
    <link rel="stylesheet" href="css/index4.css">
    <link rel="stylesheet" href=css/index44.css">
head>
<body>

<div id="d1">我是一个div标签div>
<p id="p1" style="color: yellow">我是一个p标签p>

<div id="d2" class="">10个类选择器div>


body>
html>

07_css_分组和嵌套示例

/*分组和嵌套示例*/

/*当样式有重复的时候*/
/*推荐分行写选择器,但是要注意一定要加逗号*/
#d1,
p {
    color: red;
}
/*嵌套使用选择器*/
/*#d1+p {*/
    /*color: blue;*/
/*}*/

/*权重就是2*/
div+p {

}

/*权重101*/
#d1+p {

}

#p1 {
    color: deeppink;
}

index4.css

/*分组和嵌套示例*/

/*当样式有重复的时候*/
/*推荐分行写选择器,但是要注意一定要加逗号*/
#d1,
p {
    color: green;
}
/*嵌套使用选择器*/
/*#d1+p {*/
    /*color: blue;*/
/*}*/

index44.css

4.CSS优先级

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
      1 内联样式表的权值最高       style=""-------------------1000；
　　 2 统计选择符中的ID属性个数。    #id    －－－－－－－－－－－－－100
　　3 统计选择符中的CLASS属性个数。 .class  －－－－－－－－－－－－－10
 4 统计选择符中的HTML标签名个数。     p     －－－－－－－－－－－－－-1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

注：一票否决权： font-size: 14px !important

5.CSS的继承性

CSS的继承性: 继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。 body{color:red;}

helloyuan

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。 p{color:green} 发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。　此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

附加说明：

1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah

的样式，而外部定义指经由或