CSS

CSS 笔记大纲

CSS概述

 1.产生背景
    ●从HTML被发明开始，样式就以各种形式存在，最初的HTML只
    包含很少的显示属性。
    ●随着HTML的成长，为了满足页面设计者的要求，HTML添加了
    很多显示功能，例如文本格式化标签。
    但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML
    页面也越来越臃肿。
 
2.CSS概念
    ●CSS全称cascading style sheets,层叠式样式表，是一种用来表现HTML的
    文件样式的计算机语言。
    ●作用:静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进
    行格式化。
 
3.前端三层技术

html	结构层	从语义的角度搭建网页结构
CSS	样式层	从美观的角度描述页面样式
JavaScript	行为层	从交互的角度描述页面行为

 4.CSS的组成
层叠式 ：css中贯穿始终的加载特性
        层叠性
        继承性
 
 
样式：定义如何显示HTML元素
        文字文本
        背景
        盒模型
        浮动
        定位
        其他

样式表

简介

 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
 
p  /*选择器*/
{
    /*属性名：属性值*/
    width :300px;
    font-size : 14px;
}
 
书写位置
Css的代码根据书写位置不同分为四种书写方式:
内联式、内嵌式、
外联式、导入式。

1.内联式样式表

 1.定义：
    ●内联式，也被习惯叫做行内式。
    ●书写位置:在HTML标签之.上的style属性中书写Css样式。
    ●所有的css样式属性总体组成标签的style属性的属性值。
        <p style="font-size: 30px;">这是文字</p>
 
2.内联式缺点：
    a、内联式必须写在标签上，没有完全脱离HTML标签。
    b、css 样式代码让标签结构繁重，不利于HTML结构的解读。
    C、一个内联式的CSS代码，只能给一个标签使用， 如果多个标签有相同的样式，同
        样的css代码需要书写多次，增加代码量。
 
    因此，实际工作中不会使用内联式(行内式)编写Css代码。

2.内嵌式样式表

 1.定义：
    书写位置:在HTML文件中，<head> 标签内部有一个<style>标签。
    <style>标签书写在< title>标签后面，所有CSs代码书写在<style>标签内部。
    <style>标签有一个标签属性叫做type,属性值是”text/css” 。
 
            <style type="text/css ">
            /*内部书写css代码*/
            div. {
            width: 100px ;
            height: 100px;
            background-color: pink;
            }
            </style>
 
2.特点：
优点
    a、实现了结构和样式的初步分离,
    css只负责样式，HTML 负责结构。
    b、多个标签可以利用-段代码设置
    相同的样式，节省代码量。
 
缺点
    a、结构和样式并没有完全分离，代码依
    旧书写在HTML文件的<style>标签内部。
    b、css 样式只能给一个HTML文件使用，
    不能够被多个HTML文件同时利用。  
    c、在HTML中如果Css代码太多，会
    成文件头重脚轻。

3.外联式样式表

 <link href="style.css" rel="stylesheet" type="text/css" />
 
1.定义：
    ●外联式CSS,也可以叫做外链式CSS、外部CSS。
    ●书写位置:在一个单独的扩展名为.css的文件中。
    ●书写语法:内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过
    选择器去选中标签，添加对应的样式。
    ●注意:在.Css文件中书写时，不需要再加<style>标签、
 
2.外联式引用
    ●外联式样式表必须引入到HTML文件中，才能正常进行加载。
    ●引入方式:在HTML中的<head>标签内部使用<link>标签进行引入。
 
<link>标签属性:

属性名	属性值	说明
rel	"stylesheet”	表示引入的外部文件与HTML之间的关系，样式表
href	css文件路径	hypertext reference,超文本引用
type	"text/css”	表示加载时代码按照纯文本形式的Css代码加载。 HTML5中可以省略type属性不写。

 3.特点：
    ①实现了HTML和css完全分离。
    ②多个HTML文件可以共用一个css文件，便于提取公共css,减少代码量。
    ③可以实现一个CSS变化，多个HTML页面同时变化，减少工作量。
    ④一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层。

4.导入式样式表

 1.导入式
    ●书写位置:在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其
    他的外部的.css文件。
    导入方式:
    利用一条@import url(路径)语句进行引入。
 
        <style>
        @import url(css/01.css); /*注意此处有个分号*/
        div{
            border-color: #00f ;
        }
 
        </style>
 
2.导入式问题
    导入式样式表的作用与外联式样式表基本相同。
    ●但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果
    网速比较慢时，会导致网页出现没有Css样式的效果，给用户的体验不好。
    ●实际工作中，较少使用导入式，推荐使用外联式样式表。
 
3.实际应用
    小型案例:可以使用内嵌式CSS。
    实际工作、大型网站项目:推荐使用外联式CSS。

样式规则、书写风格、常用属性

样式规则

 1.css规则：
    CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
        p  /*选择器*/
        {
            /*属性名：属性值*/
            width :300px;
            font-size : 14px;
        }
 
2.样式规则：
    以内嵌式样式表为例
        (1)所有的css代码都必须书写在 <head> 标签内部的一对<style>标签内。
        (2) css 在给某个标签设置样式前，必须使用选择器先选中标签。
        (3) css 样式的属性，属性名和属性值的键值对写法为k:v;。
        (4)给每个选择器添加的样式属性都必须写在一对大括号{}之内。
        (5)给一个标签添加的所有需要的样式，都要在{}内部一一罗 列出来
 
3.注意事项：
    a、分号必要性:每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
    b、css中所有属性与属性之间对空格、换行、缩进不敏感。
 
4.注释：
    一个清晰易读的CSS代码，离不开CSS注释的合理添加。
 
    CSS注释语法
    语法格式:
    /*中间部分为注释内容*/
    VS code快捷键: ctrl+/

代码书写分格

 1.CSS样式格式
    展开格式:开发过程使用，代码可读性强，便于调错。
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: skyblue;
                margin-bottom: 10px; 
                }
        </style>
 
    紧凑格式: 上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。
        <style>
        div{width:200px; height :200px ;background-color : skyblue ;ma rgin - bottom:10px;}
        </ style>
 
    /* vs code 展开 <=> 紧凑
    https://tool.ip138.com/css/
    */
 
2.英文大小写
    ●CSS中的英文可以使用大写，也可以使用小写。
   
            /*小写*/
            <style>
                div
                {
                    width: 200px;
                    height: 200px;
                }
            </ style>
 
            等价于
        
        /*大写*/
            <style>
                DIV {
                    WIDTH: 200PX;
                    HEIGHT: 200PX ;
                    }
            </style>
    建议: css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。
 
3.空格规范
    a、选择器与大括号{}之间保留一个空格。
    b、冒号后面，属性值前面，保留一个空格。

文字三属性

color

 1.颜色color
    作用:给文字设置颜色。
    属性名k : color
    属性值v :颜色名、颜色值。
 
2.颜色名
    颜色名就是使用颜色的英文单词进行表示。
    需要记忆一些最常用的颜色名:
            红色red
            黑色black
            橙色orange
            白色white
            黄色yellow
            金色gold
            绿色green
            粉色pink
            青色cyan
            浅黄色lightyellow
            蓝色blue
            黄绿色yellowgreen
            紫色purple
            天蓝色skyblue
 
3.颜色值
    颜色值指使用具体颜色的数值表示。
    包括: rgb 模式和十六进制模式写法。
 
    3-1rgb模式
            rgb模式:是根据红绿蓝三原色进行混合而成的颜色模式。
            每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成
            1677多万种颜色。
            书写方法: rgb(红,绿,蓝)
 
            常用颜色的rgb色值:
                红色rgb(255,0,0) 
                绿色rgb(0,255,0)
                蓝色rgb(0,0,255)
                黑色rgb(0,0,0)
                白色rgb(255,255,255)
                灰色rgb(128,128,128)
 
    3-2十六进制模式
            ●十六进制模式:是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进
            制的0--255的数字。
            ●十六进制:逢十六进一，每个数位，上只能出现0-9， a-f之间的字符。
            ●书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
                0->00
                255->ff
            ●书写方式:使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。
 
            ●常用颜色的十六进制色值:
                红色#ff0000
                绿色#00ff00
                蓝色#0000ff
                黑色#000000
                白色#ffff
                灰色#808080
 
            ●十六进制颜色值简写模式:如果红、绿、蓝三个原色的色值每一个
              都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。
                红色#f00
                绿色#0f0
                蓝色#00f
            类似#808080是不能进行简化的。

字体font-family

 1.字体font-family
    作用:定义元素内文字的字体。
    属性名k: font-family,字体属于font综合属性的一个单-属性。
    属性值v :字体名称，必须包裹在一对引号中，属性值可以有多个，值之
    间用逗号分隔。
 
2.常用字体
    常用的中文字体:
    宋体          SimSun
    微软雅黑      Microsoft Yahei
     
    常用的英文字体:
    Arial
    consolas 
    如果不设置字体属性，不同的浏览器有自己的默认字体。
 
3.注意事项
    1、font-family 可以设置多个字体名称，在实际加载时只会选择一种加载， 选择的
    依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找
    到第一个支持的字体。
 
    2、 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则
    加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字
    体作为后路。
 
    3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，
    建议将英文字体写在属性值最前面。
 
 
4.实际应用
首选字体需要根据设计图确定，最后需要设置备用字体。
<p style="font- family: 'arial','微软雅黑', '宋体';">看文字字体是什么? abc</ p>

字号font-size

 1.字号font-size
    作用:设置文字的大小。
    属性名k: font-size, 字号属于font综合属性的一个单-属性。
    属性值v :可以使用相对长度单位，也可以使用绝对长度单位。推荐使用
    相对长度单位。
2.单位

相对长度单位	说明
px	像素值，最常使用的单位
em	倍数，继承自祖先元素设置的字号的倍数
%	百分比，继承自祖先元素设置的字号的百分比

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

 3.注意事项
    1、如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如chrome、
    IE，默认显示字号为16px.
    2、不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以
    最小字号加载，0除外。chrome浏览器最小加载显示字号为8px，IE浏览器最小可
    以支持1px的字号。
 
4.实际使用
    网页中最小设置字号必须是12px,如果低于12px会出现兼容问题。现在网页中普
    遍使用14px+o
    尽量使用12px、14px、 16px等 偶数的数字字号，ie6 等老式浏览器支持奇数会有
    bug
    实际工作中的字号，需要以设计图为准。

盒子实体化三属性。

 1.  如果想在浏览器中具体看到一个盒子占有的实际
    位置，需要设置盒子可以实体化的三属性。

属性名	属性值	说明
width	px单位的数值	定义元素占有的宽度
height	px单位的数值	定义元素占有的高度
background-color	颜色名、颜色值	定义元素的背景颜色

选择器

简介

 1.
    在内嵌式和外部css中，要想将CSS样式应用于特定的
    HTML元素，首先需要找到该目标元素，这时需要用到
    CSS中的选择器。
 
2.选择器
    选择器:选择要添加样式的HTML标签的一种方法、模式。
    首先学习css2.1版本的七种选择器:
    基础选择器:标签选择器、id 选择器、类选择器、通配符选择器。
    高级选择器:后代选择器、交集选择器、并集选择器。

基础选择器

标签选择器

 1.
    通过标签名去选择标签元素。
    书写方式:标签名。
    选择范围:选中的是HTML文件中所有的同名标签。
    注意:标签选择器可以选择所有的同名标签，会忽视HTML元素的嵌套关系，不管
    嵌套多深，都能被选中。
 
2.书写位置
    <html>
        <head>
            <title>
                <style >
                    p {
                        font-size: 30px;
                    }
                </style>
            </title>
        </head>
        
        <body>
        </body>
    </html>
 
3.标签选择器特点
    优点:可以选中所有的同名标签，设置所有同名标签的公共样式。
    缺点:只能实现全选，不能对局部的标签添加特殊样式。

id选择器

 1.id选择器
    ●通过标签上的id属性去选择标签。
    书写方式: #id 属性值
    ●选择范围:只能选中一个标签。
    ●id 命名规则:必须以字母开头，后面可以有字母、数字、下划线、 横线，严格区分
    大小写。每个id属性值必须是唯一的，不能与其他的id同名。
    ●注意:如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签
    取不同的id名，分别选中设置。
 
2.书写位置
    <html>
        <head>
            <title>
                <style>
                    #para1 {
                        color: blueviolet;
                    }
                </style>
            </title>
        </head>
        
        <body>
         <p id="para1">文本</p>
         <p id="para2">文本</p>
        </body>
 
    </html>
 
3.id选择器特点
    ●缺点: id选择器只能实现单选，不能帮我们完成多选的功能。

类选择器

 1.类选择器
    通过标签的class属性去选择标签。
    书写方式: .class属性值
    选择范围:是页面中所有class属性值相同的标签。
    class命名规则:必须以字母开头，后面可以有字母、数字、下划线、横线，严格
    区分大小写。class 属性值可以与其他的class相同。
 
2.书写位置   
    <html>
            <head>
                <title>
                    <style>
                        .demo {
                            color: blueviolet;
                        }
                    </style>
                </title>
            </head>
            
            <body>
                <p class="demo">文本</p>
                <p class="demo">文本</p>
            </body>
 
    </html>
 
3.特点
    ●特点1:多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同
    一个类选择器选中。
    ●特点2:一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性
    值组成的选择器，都可以选中这一一个标签，每个选择器后面的样式都会添加给同一
    个标签。
 
3.类选择器的特殊应用
    原子类:在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这
             些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添
             加给需要的标签即可。
 
            fs12 {
            font-size: 12px;
            }
            fs20 {
            font-size: 20px;
            }
 
4.类选择器的优点
①通过一个类选择器进行多选，选中多个标签，添加公共样式。
②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样
式和单独样式，节省代码量。
实际工作中，通常我们有一个使用规律:类上样式(CSS), id. 上行为(JavaScript)。

通配符选择器

 1.通配符选择器
    通过一个特殊符号选择页面内所有的标签。
    书写方式: *
    选择范围:包含<html>标签在内的所有标签。
 
2.书写位置   
    <html>
            <head>
                <title>
                    <style>
                        * {
                            color: blueviolet;
                        }
                    </style>
                </title>
            </head>
            
            <body>
                <p >文本</p>
            </body>
 
    </html>
 
3.通配符特点和应用
    优点:可以实现全选，简化书写。
    ●缺点:通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使
    用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
    注意:实际上线的网站不允许使用*去清除默认内外边距。
    ●不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

高级选择器

简介

     由于基础选择器不能实现所有选择情况，后期在基础选择
    器的基础上衍生出了几种高级选择器。高级选择器的组成
    部分是基础选择器。

后代选择器

 1.选择关系
    ●通过标签之间存的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。
    后代选择器也叫包含选择器。
 
    书写方式:空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中
    的标签必须是后面选择器选中标签的祖先级。
 
    选择范围:通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后
    一个选择器确定选中的标签。
 
    注意:后代选择器必须满足所有的后代关系才能够被选中，后代关系不一-定只能是
    父子关系。
 
 
2.书写位置
    <html>
            <head>
                <title>
                    <style>
                        .box1 ul li p {
                                 color: chocolate;
                                        }
                    </style>
                </title>
            </head>
            
            <body>
                    <div class="box1">
                        <ul>
                            <li><p>这是文本1</p></li>
                            <li><p>这是文本1</p></li>
                        </ul>
                    </div>
 
                    <div class="box2">
                        <ul>
                            <li><p>这是文本2</p></li>
                            <li><p>这是文本2</p></li>
                        </ul>
                    </div>
            </body>
 
    </html>
 
3.后代选择器特点
优点:减少class属性的定义使用，选择效率更高。

交集选择器

 1.交集选择器
    ●通过一个标签之.上满足所有的基础选择器的需求去选择标签。
    ●书写方式:基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开
    头。
    ●选择范围:选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能
    被选中。
    ●比较常见的是标签与类的交集。
 
2.
2.书写位置
    <html>
            <head>
                <title>
                        <style>
                            p.demo.ps {
                            color: rgb(37, 10, 189);
                            }
                        </style>
                </title>
            </head>
            
            <body>
                <h2 class="demo">此处是一个二级标题</h2>
                    <div class="box1">
                        <ul>
                            <li><p>这是文本1</p></li>
                            <li><p class="demo ps">这是文本1</p></li>
                        </ul>
                    </div>
 
                    <div class="box2">
                        <ul>
                            <li><p>这是文本2</p></li>
                             <li><p class="demo">这是文本2</p></li>
                        </ul>
                    </div>
            </body>
 
    </html>
 
    此时只选中p其中class含ps的标签
3.交集选择器的更多写法
    ●交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
    ●1E6不支持类名连续交集写法。
    ●交集选择器可以作为其他高级选择器的组成部分。

并集选择器

 1.并集选择器
    不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成
    浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
    书写方式:将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
    选择范围:是所有的单独选择器选中的标签的并集集合。
 
2.书写位置
    <html>
            <head>
                <title>
                        <style>
                            h2,.demo {
                            color: rgb(37, 10, 189);
                            }
                        </style>
                </title>
            </head>
            
            <body>
                <h2 class="demo">此处是一个二级标题</h2>
                    <div class="box1">
                        <ul>
                            <li><p>这是文本1</p></li>
                            <li><p class="demo ps">这是文本1</p></li>
                        </ul>
                    </div>
 
                    <div class="box2">
                        <ul>
                            <li><p>这是文本2</p></li>
                             <li><p class="demo">这是文本2</p></li>
                        </ul>
                    </div>
            </body>
 
    </html>
    选中h2标题，以及p中的两个标签
 
3.并集选择器的用途
●①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
    <style>
        
        body,h2, ul,li,p {
            margin: 0;
            padding: 0;
        }
 
    </style>

继承性与层叠性

继承性

 1.简介
    CSS的概念中，除了前面提到的样式外，还有一个重要的
    概念就是层叠式，层叠式是贯穿整个css的一个性质，包
    含继承性和层叠性。
 
2.继承性
    ●如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标
        签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
    ●能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。
 
3.浏览器控制面板

 4.继承性应用
    继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖
    先级标签比如<body>,后期所有的后代标签都可以从<body>进行继承。
        body{
        font-size: 14px;
        font-family: "微软雅黑";
        color: red 
        }

层叠性

 思考问题:同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式
属性，标签最终该加载哪个?或者，在继承性中，如果多个祖先都设置了相同的文
字样式，后代中该继承哪个祖先级的?
 
解决方法:就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只
有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
 
判断最终胜出的属性是谁，需要依赖判断优先级。

选中目标标签

 第一步:比较多个选择器的权重，权重高的层叠权重低的。
    ●基础选择器的权重:根据选择范围，范围越大权重越小，
        * <标签选择器<类选择器<id选择器。
    ●高级选择器权重比较方法:依次比较组成高级选择器的id的个数，类的个数，标
    签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，
    直到比较出大小。
    ●比较顺序: (id 个数，类的个数，标签的个数)
 
 
第二步:如果选择器权重都相同，需要比较CSS中代码的书写顺序，后写的层叠
先写的。

选中祖先级

 如果选择器选中的是祖先元素，文字的样式可以被继承。
 
第一步:比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的
        远近，近的层叠远的。
第二步:如果选中的祖先级距离目标一样近(同一个祖先级)，比较选择器权重，
        权重大的层叠小的。
第三步:如果距离一样近，权重也相同，最后比较CSS中的书写顺序，后面的层
        叠前面的。

important 和行内式

 1.!important
    ●如果在比较选择器权重的过程中，遇见一个!important关键字，可以将某条CSS
    样式属性的权重提升到最大。
    书写位置:在某个css属性的属性值后面空格加!important。
    注意:
    ●①就近原则中，不需要比较选择器权重，所有important会失效。
    ●②important不能提升选择器的权重，只能提升某条属性的权重到最大。
 
2.行内式权重
    行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
    但是，与!important关键字相比权重要低。

其他

盒子模型

 margin 
border : 外边距
padding ： 内边距
content ：内容
 
 
 
 
 
p{
 
    margin-top    : 5px;
    margin-bottom : 5px;
    margin-right  : 10px;
    margin-left   : 10px;
}
 
p{
    margin : 5px 10px 5px 10px;
           /* 上  右 下 左*/
}
 
 
p{
    margin : 5px 10px; /* 上下 左右   */
 
}
 
p{
    margin : 5px 10px 5px ;
            /* 上  左右  下 */
}

图片

设置背景图片

 背景图片
设置背景图片
我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。
 
书写格式：
 
    background-image: url("图片链接")
例如：
 
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <style type="text/css">
        body {
          /*设置背景图片*/
          background-image: url("./Assert/memphis-colorful.png")
        }
        div {
          width:90%;
          height: 100%;
          margin: auto;
          background-color: #FCFDF8;
        }
        </style>
    </head>
 
 
 
 
 
平铺背景图像
指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置background-repeat属性。
 
具体属性值设置如下：
 
样式	       属性值
水平平铺重复	repeat-x
垂直平铺重复	repeat-y
不重复平铺   	no-repeat
例如：
 
默认平铺
 
body {
     /*设置背景图片*/
     background-image:url("./Assert/sun.jpg");
 }
 
 
 
repeat-x
 body {
     /*设置背景图片*/
     background-image:url("./Assert/sun.jpg");
     background-repeat: repeat-x;
 }
 
 
 
repeat-y
    body {
        /*设置背景图片*/
        background-image:url("./Assert/sun.jpg");
        background-repeat: repeat-y;
    }
 
 
 
no-repeat
    body {
        /*设置背景图片*/
        background-image:url("./Assert/sun.jpg"); 
        background-repeat: no-repeat;
    }

图片定位

 背景定位
当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:
 
举例如下：
 
body {
    /*设置背景图片*/
    background-image: url("https://www.educoder.net/attachments/download/211104");
    background-repeat: no-repeat;
    background-position: right top;
}
显示效果如图：
 
 
 
 
本例中，设置right top代表放置在元素内边距区的右上角。
 
对于具体位置，大家可以使用如下关键字的组合：
 
属性值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果值定义了一个关键词，那么第二个值将是”center“。当然也可以使用百分比和长度值，现在只作为了解。
 
背景关联
当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用background-attachment属性，将其值设置为fixed。
 
body {
    background-image: url("https://www.educoder.net/attachments/download/211104");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
简写背景
从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。
 
例如：
 
body {
    background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
}
使用简写属性时，属性值的顺序为：
 
background-color；
 
background-image；
 
background-repeat；
 
background-attachment；
 
background-position。
 
以上属性无需全部使用，大家可以按照页面设置使用。

posted @ 2023-02-25 16:17 NanFeng-JinHe 阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· javascript

· JavaWeb-动力节点

· css基础

· 10_03、CSS选择器

· CSS 笔记

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

2023年2月(15)

	1.产生背景
	●从HTML被发明开始，样式就以各种形式存在，最初的HTML只
	包含很少的显示属性。
	●随着HTML的成长，为了满足页面设计者的要求，HTML添加了
	很多显示功能，例如文本格式化标签。
	但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML
	页面也越来越臃肿。

	2.CSS概念
	●CSS全称cascading style sheets,层叠式样式表，是一种用来表现HTML的
	文件样式的计算机语言。
	●作用:静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进
	行格式化。

	3.前端三层技术

	4.CSS的组成
	层叠式：css中贯穿始终的加载特性
	层叠性
	继承性


	样式：定义如何显示HTML元素
	文字文本
	背景
	盒模型
	浮动
	定位
	其他

	CSS规则由两个主要的部分构成:选择器,以及一条或多条声明

	p /选择器/
	{
	/属性名：属性值/
	width :300px;
	font-size : 14px;
	}

	书写位置
	Css的代码根据书写位置不同分为四种书写方式:
	内联式、内嵌式、
	外联式、导入式。

	1.定义：
	●内联式，也被习惯叫做行内式。
	●书写位置:在HTML标签之.上的style属性中书写Css样式。
	●所有的css样式属性总体组成标签的style属性的属性值。
	<p style="font-size: 30px;">这是文字</p>

	2.内联式缺点：
	a、内联式必须写在标签上，没有完全脱离HTML标签。
	b、css 样式代码让标签结构繁重，不利于HTML结构的解读。
	C、一个内联式的CSS代码，只能给一个标签使用，如果多个标签有相同的样式，同
	样的css代码需要书写多次，增加代码量。

	因此，实际工作中不会使用内联式(行内式)编写Css代码。

	1.定义：
	书写位置:在HTML文件中，<head> 标签内部有一个<style>标签。
	<style>标签书写在< title>标签后面，所有CSs代码书写在<style>标签内部。
	<style>标签有一个标签属性叫做type,属性值是”text/css” 。

	<style type="text/css ">
	/内部书写css代码/
	div. {
	width: 100px ;
	height: 100px;
	background-color: pink;
	}
	</style>

	2.特点：
	优点
	a、实现了结构和样式的初步分离,
	css只负责样式，HTML 负责结构。
	b、多个标签可以利用-段代码设置
	相同的样式，节省代码量。

	缺点
	a、结构和样式并没有完全分离，代码依
	旧书写在HTML文件的<style>标签内部。
	b、css 样式只能给一个HTML文件使用，
	不能够被多个HTML文件同时利用。
	c、在HTML中如果Css代码太多，会
	成文件头重脚轻。

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

	1.定义：
	●外联式CSS,也可以叫做外链式CSS、外部CSS。
	●书写位置:在一个单独的扩展名为.css的文件中。
	●书写语法:内部代码与内嵌式样式表中<style>标签内部的代码一样的。需要通过
	选择器去选中标签，添加对应的样式。
	●注意:在.Css文件中书写时，不需要再加<style>标签、

	2.外联式引用
	●外联式样式表必须引入到HTML文件中，才能正常进行加载。
	●引入方式:在HTML中的<head>标签内部使用<link>标签进行引入。

	<link>标签属性:

	3.特点：
	①实现了HTML和css完全分离。
	②多个HTML文件可以共用一个css文件，便于提取公共css,减少代码量。
	③可以实现一个CSS变化，多个HTML页面同时变化，减少工作量。
	④一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层。

	1.导入式
	●书写位置:在内嵌式样式表<style>标签内部，或者在外联式样式表内部，导入其
	他的外部的.css文件。
	导入方式:
	利用一条@import url(路径)语句进行引入。

	<style>
	@import url(css/01.css); /注意此处有个分号/
	div{
	border-color: #00f ;
	}

	</style>

	2.导入式问题
	导入式样式表的作用与外联式样式表基本相同。
	●但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果
	网速比较慢时，会导致网页出现没有Css样式的效果，给用户的体验不好。
	●实际工作中，较少使用导入式，推荐使用外联式样式表。

	3.实际应用
	小型案例:可以使用内嵌式CSS。
	实际工作、大型网站项目:推荐使用外联式CSS。

	1.css规则：
	CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
	p /选择器/
	{
	/属性名：属性值/
	width :300px;
	font-size : 14px;
	}

	2.样式规则：
	以内嵌式样式表为例
	(1)所有的css代码都必须书写在 <head> 标签内部的一对<style>标签内。
	(2) css 在给某个标签设置样式前，必须使用选择器先选中标签。
	(3) css 样式的属性，属性名和属性值的键值对写法为k:v;。
	(4)给每个选择器添加的样式属性都必须写在一对大括号{}之内。
	(5)给一个标签添加的所有需要的样式，都要在{}内部一一罗列出来

	3.注意事项：
	a、分号必要性:每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误。
	b、css中所有属性与属性之间对空格、换行、缩进不敏感。

	4.注释：
	一个清晰易读的CSS代码，离不开CSS注释的合理添加。

	CSS注释语法
	语法格式:
	/中间部分为注释内容/
	VS code快捷键: ctrl+/

	1.CSS样式格式
	展开格式:开发过程使用，代码可读性强，便于调错。
	<style>
	div {
	width: 200px;
	height: 200px;
	background-color: skyblue;
	margin-bottom: 10px;
	}
	</style>

	紧凑格式: 上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。
	<style>
	div{width:200px; height :200px ;background-color : skyblue ;ma rgin - bottom:10px;}
	</ style>

	/* vs code 展开 <=> 紧凑
	https://tool.ip138.com/css/
	*/

	2.英文大小写
	●CSS中的英文可以使用大写，也可以使用小写。

	/小写/
	<style>
	div
	{
	width: 200px;
	height: 200px;
	}
	</ style>

	等价于

	/大写/
	<style>
	DIV {
	WIDTH: 200PX;
	HEIGHT: 200PX ;
	}
	</style>
	建议: css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。

	3.空格规范
	a、选择器与大括号{}之间保留一个空格。
	b、冒号后面，属性值前面，保留一个空格。

	1.颜色color
	作用:给文字设置颜色。
	属性名k : color
	属性值v :颜色名、颜色值。

	2.颜色名
	颜色名就是使用颜色的英文单词进行表示。
	需要记忆一些最常用的颜色名:
	红色red
	黑色black
	橙色orange
	白色white
	黄色yellow
	金色gold
	绿色green
	粉色pink
	青色cyan
	浅黄色lightyellow
	蓝色blue
	黄绿色yellowgreen
	紫色purple
	天蓝色skyblue

	3.颜色值
	颜色值指使用具体颜色的数值表示。
	包括: rgb 模式和十六进制模式写法。

	3-1rgb模式
	rgb模式:是根据红绿蓝三原色进行混合而成的颜色模式。
	每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成
	1677多万种颜色。
	书写方法: rgb(红,绿,蓝)

	常用颜色的rgb色值:
	红色rgb(255,0,0)
	绿色rgb(0,255,0)
	蓝色rgb(0,0,255)
	黑色rgb(0,0,0)
	白色rgb(255,255,255)
	灰色rgb(128,128,128)

	3-2十六进制模式
	●十六进制模式:是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进
	制的0--255的数字。
	●十六进制:逢十六进一，每个数位，上只能出现0-9， a-f之间的字符。
	●书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换。
	0->00
	255->ff
	●书写方式:使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值。

	●常用颜色的十六进制色值:
	红色#ff0000
	绿色#00ff00
	蓝色#0000ff
	黑色#000000
	白色#ffff
	灰色#808080

	●十六进制颜色值简写模式:如果红、绿、蓝三个原色的色值每一个
	都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。
	红色#f00
	绿色#0f0
	蓝色#00f
	类似#808080是不能进行简化的。

	1.字体font-family
	作用:定义元素内文字的字体。
	属性名k: font-family,字体属于font综合属性的一个单-属性。
	属性值v :字体名称，必须包裹在一对引号中，属性值可以有多个，值之
	间用逗号分隔。

	2.常用字体
	常用的中文字体:
	宋体 SimSun
	微软雅黑 Microsoft Yahei

	常用的英文字体:
	Arial
	consolas
	如果不设置字体属性，不同的浏览器有自己的默认字体。

	3.注意事项
	1、font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的
	依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找
	到第一个支持的字体。

	2、浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则
	加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字
	体作为后路。

	3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，
	建议将英文字体写在属性值最前面。


	4.实际应用
	首选字体需要根据设计图确定，最后需要设置备用字体。
	<p style="font- family: 'arial','微软雅黑', '宋体';">看文字字体是什么? abc</ p>

	1.字号font-size
	作用:设置文字的大小。
	属性名k: font-size, 字号属于font综合属性的一个单-属性。
	属性值v :可以使用相对长度单位，也可以使用绝对长度单位。推荐使用
	相对长度单位。
	2.单位

	3.注意事项
	1、如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如chrome、
	IE，默认显示字号为16px.
	2、不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以
	最小字号加载，0除外。chrome浏览器最小加载显示字号为8px，IE浏览器最小可
	以支持1px的字号。

	4.实际使用
	网页中最小设置字号必须是12px,如果低于12px会出现兼容问题。现在网页中普
	遍使用14px+o
	尽量使用12px、14px、 16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有
	bug
	实际工作中的字号，需要以设计图为准。

	1. 如果想在浏览器中具体看到一个盒子占有的实际
	位置，需要设置盒子可以实体化的三属性。

	1.
	在内嵌式和外部css中，要想将CSS样式应用于特定的
	HTML元素，首先需要找到该目标元素，这时需要用到
	CSS中的选择器。

	2.选择器
	选择器:选择要添加样式的HTML标签的一种方法、模式。
	首先学习css2.1版本的七种选择器:
	基础选择器:标签选择器、id 选择器、类选择器、通配符选择器。
	高级选择器:后代选择器、交集选择器、并集选择器。

	1.
	通过标签名去选择标签元素。
	书写方式:标签名。
	选择范围:选中的是HTML文件中所有的同名标签。
	注意:标签选择器可以选择所有的同名标签，会忽视HTML元素的嵌套关系，不管
	嵌套多深，都能被选中。

	2.书写位置
	<html>
	<head>
	<title>
	<style >
	p {
	font-size: 30px;
	}
	</style>
	</title>
	</head>

	<body>
	</body>
	</html>

	3.标签选择器特点
	优点:可以选中所有的同名标签，设置所有同名标签的公共样式。
	缺点:只能实现全选，不能对局部的标签添加特殊样式。

	1.id选择器
	●通过标签上的id属性去选择标签。
	书写方式: #id 属性值
	●选择范围:只能选中一个标签。
	●id 命名规则:必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分
	大小写。每个id属性值必须是唯一的，不能与其他的id同名。
	●注意:如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签
	取不同的id名，分别选中设置。

	2.书写位置
	<html>
	<head>
	<title>
	<style>
	#para1 {
	color: blueviolet;
	}
	</style>
	</title>
	</head>

	<body>
	<p id="para1">文本</p>
	<p id="para2">文本</p>
	</body>

	</html>

	3.id选择器特点
	●缺点: id选择器只能实现单选，不能帮我们完成多选的功能。

	1.类选择器
	通过标签的class属性去选择标签。
	书写方式: .class属性值
	选择范围:是页面中所有class属性值相同的标签。
	class命名规则:必须以字母开头，后面可以有字母、数字、下划线、横线，严格
	区分大小写。class 属性值可以与其他的class相同。

	2.书写位置
	<html>
	<head>
	<title>
	<style>
	.demo {
	color: blueviolet;
	}
	</style>
	</title>
	</head>

	<body>
	<p class="demo">文本</p>
	<p class="demo">文本</p>
	</body>

	</html>

	3.特点
	●特点1:多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同
	一个类选择器选中。
	●特点2:一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性
	值组成的选择器，都可以选中这一一个标签，每个选择器后面的样式都会添加给同一
	个标签。

	3.类选择器的特殊应用
	原子类:在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这
	些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添
	加给需要的标签即可。

	fs12 {
	font-size: 12px;
	}
	fs20 {
	font-size: 20px;
	}

	4.类选择器的优点
	①通过一个类选择器进行多选，选中多个标签，添加公共样式。
	②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样
	式和单独样式，节省代码量。
	实际工作中，通常我们有一个使用规律:类上样式(CSS), id. 上行为(JavaScript)。

	1.通配符选择器
	通过一个特殊符号选择页面内所有的标签。
	书写方式: *
	选择范围:包含<html>标签在内的所有标签。

	2.书写位置
	<html>
	<head>
	<title>
	<style>
	* {
	color: blueviolet;
	}
	</style>
	</title>
	</head>

	<body>
	<p >文本</p>
	</body>

	</html>

	3.通配符特点和应用
	优点:可以实现全选，简化书写。
	●缺点:通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使
	用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
	注意:实际上线的网站不允许使用*去清除默认内外边距。
	●不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

nanfengjinhe

CSS

CSS概述

样式表

简介

1.内联式样式表

2.内嵌式样式表

3.外联式样式表

4.导入式样式表

样式规则、书写风格、常用属性

样式规则

代码书写分格

文字三属性

color

字体font-family

字号font-size

盒子实体化三属性。

选择器

简介

基础选择器

标签选择器

id选择器

类选择器

通配符选择器

高级选择器

简介

后代选择器

交集选择器

并集选择器

继承性与层叠性

继承性

层叠性

选中目标标签

选中祖先级

important 和行内式

其他

盒子模型

图片

设置背景图片

图片定位

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	由于基础选择器不能实现所有选择情况，后期在基础选择
	器的基础上衍生出了几种高级选择器。高级选择器的组成
	部分是基础选择器。

	1.选择关系
	●通过标签之间存的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择器。
	后代选择器也叫包含选择器。

	书写方式:空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中
	的标签必须是后面选择器选中标签的祖先级。

	选择范围:通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后
	一个选择器确定选中的标签。

	注意:后代选择器必须满足所有的后代关系才能够被选中，后代关系不一-定只能是
	父子关系。


	2.书写位置
	<html>
	<head>
	<title>
	<style>
	.box1 ul li p {
	color: chocolate;
	}
	</style>
	</title>
	</head>

	<body>
	<div class="box1">
	<ul>
	<li><p>这是文本1</p></li>
	<li><p>这是文本1</p></li>
	</ul>
	</div>

	<div class="box2">
	<ul>
	<li><p>这是文本2</p></li>
	<li><p>这是文本2</p></li>
	</ul>
	</div>
	</body>

	</html>

	3.后代选择器特点
	优点:减少class属性的定义使用，选择效率更高。

	1.交集选择器
	●通过一个标签之.上满足所有的基础选择器的需求去选择标签。
	●书写方式:基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开
	头。
	●选择范围:选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能
	被选中。
	●比较常见的是标签与类的交集。

	2.
	2.书写位置
	<html>
	<head>
	<title>
	<style>
	p.demo.ps {
	color: rgb(37, 10, 189);
	}
	</style>
	</title>
	</head>

	<body>
	<h2 class="demo">此处是一个二级标题</h2>
	<div class="box1">
	<ul>
	<li><p>这是文本1</p></li>
	<li><p class="demo ps">这是文本1</p></li>
	</ul>
	</div>

	<div class="box2">
	<ul>
	<li><p>这是文本2</p></li>
	<li><p class="demo">这是文本2</p></li>
	</ul>
	</div>
	</body>

	</html>

	此时只选中p其中class含ps的标签
	3.交集选择器的更多写法
	●交集选择器可以进行类名的连续交集，需要满足更多的条件才能选中标签。
	●1E6不支持类名连续交集写法。
	●交集选择器可以作为其他高级选择器的组成部分。

	1.并集选择器
	不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成
	浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。
	书写方式:将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。
	选择范围:是所有的单独选择器选中的标签的并集集合。

	2.书写位置
	<html>
	<head>
	<title>
	<style>
	h2,.demo {
	color: rgb(37, 10, 189);
	}
	</style>
	</title>
	</head>

	<body>
	<h2 class="demo">此处是一个二级标题</h2>
	<div class="box1">
	<ul>
	<li><p>这是文本1</p></li>
	<li><p class="demo ps">这是文本1</p></li>
	</ul>
	</div>

	<div class="box2">
	<ul>
	<li><p>这是文本2</p></li>
	<li><p class="demo">这是文本2</p></li>
	</ul>
	</div>
	</body>

	</html>
	选中h2标题，以及p中的两个标签

	3.并集选择器的用途
	●①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
	②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。
	<style>

	body,h2, ul,li,p {
	margin: 0;
	padding: 0;
	}

	</style>

	1.简介
	CSS的概念中，除了前面提到的样式外，还有一个重要的
	概念就是层叠式，层叠式是贯穿整个css的一个性质，包
	含继承性和层叠性。

	2.继承性
	●如果一个标签没有设置过一些样式，它的某个祖先级曾经设置过，在浏览器中该标
	签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。
	●能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

	3.浏览器控制面板

	4.继承性应用
	继承性是一个很好的性质，可以将页面中出现最多的文字样式设置给一个较大的祖
	先级标签比如<body>,后期所有的后代标签都可以从<body>进行继承。
	body{
	font-size: 14px;
	font-family: "微软雅黑";
	color: red
	}

	思考问题:同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式
	属性，标签最终该加载哪个?或者，在继承性中，如果多个祖先都设置了相同的文
	字样式，后代中该继承哪个祖先级的?

	解决方法:就是使用层叠性去解决冲突。多个选择器在进行对比的过程中，最终只
	有一个属性会成功加载，它会层叠、覆盖掉其他的属性。

	判断最终胜出的属性是谁，需要依赖判断优先级。

	第一步:比较多个选择器的权重，权重高的层叠权重低的。
	●基础选择器的权重:根据选择范围，范围越大权重越小，
	* <标签选择器<类选择器<id选择器。
	●高级选择器权重比较方法:依次比较组成高级选择器的id的个数，类的个数，标
	签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，
	直到比较出大小。
	●比较顺序: (id 个数，类的个数，标签的个数)


	第二步:如果选择器权重都相同，需要比较CSS中代码的书写顺序，后写的层叠
	先写的。

	如果选择器选中的是祖先元素，文字的样式可以被继承。

	第一步:比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的
	远近，近的层叠远的。
	第二步:如果选中的祖先级距离目标一样近(同一个祖先级)，比较选择器权重，
	权重大的层叠小的。
	第三步:如果距离一样近，权重也相同，最后比较CSS中的书写顺序，后面的层
	叠前面的。

	1.!important
	●如果在比较选择器权重的过程中，遇见一个!important关键字，可以将某条CSS
	样式属性的权重提升到最大。
	书写位置:在某个css属性的属性值后面空格加!important。
	注意:
	●①就近原则中，不需要比较选择器权重，所有important会失效。
	●②important不能提升选择器的权重，只能提升某条属性的权重到最大。

	2.行内式权重
	行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。
	但是，与!important关键字相比权重要低。