一、什么是CSS

层叠样式表，简单说就是“如何修饰网页信息的显示样式”。

目前推荐遵循的是W3C发布的CSS 3.0

用来表现XHTML或者XML等样式文件的计算机语言

二、CSS语法

每个CSS样式由两部分组成：即【选择符】和【声明(包括属性和属性值)】。
每条声明之间用分号隔开
属性和属性值用冒号连接，必须放在花括号内

【样式表】

1. CSS内部样式表

<style>
    h1 {
        color: red;
    }
    h2 {
        color: yellow;
    }
</style>

2. CSS外部样式表

新建一个CSS文件
CSS外部引入方式1：利用link（推荐）
1
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
rel是relation的简写，定义关联性；stylesheet是样式表

CSS外部引入方式2：利用import

1
2
3

<style type="text/css">
    @import url("css文件的路径");
</style>

import是导入、引入的意思

扩展知识点：link和import之间的区别？

本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
加载顺序的差别：当一个页面被加载时（被浏览器浏览时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。因此网速慢时浏览@import加载CSS的页面时开始会没有样式（闪烁）。
兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，只有在IE5以上的才能识别。而link标签无此问题。

3. CSS行内样式表

行内样式、内联样式、嵌入式样式，都是指的这个。

1	<h1 style="color:red;">文字</h1>

4. 样式表的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式表的优先级</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" type="text/css" href="css文件的路径">

    <!-- 内部样式 -->
    <style>
        div {
            color: yellow;
        }
    </style>
</head>
<body>
    <!-- 行内样式 -->
    <div style="color:blue;">啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

一般情况下，行内 > 内部 > 外部，满足就近原则。

但有个特权是把!important加在谁的属性后面谁的优先级就最高。

<!-- 在外部或内部： -->
div {
        color: yellow!important;
    }

<!-- 或者是在行内： -->
<div style="color:blue!important;">啊啊啊啊啊啊啊啊啊</div>

【选择器】

1. 标签选择器

也叫作元素选择器，CSS中直接用标签名来选择。

<style>
    div {
        color: yellow;
        background: red;
    }
</style>

2. 类选择器

一个标签可以命名多个class类名（理解成姓名可以重复，也可以有很多小名和外号）
CSS中用点“.类名”来选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类class选择器</title>
    
    <style>
        .a1 {
            background: yellow;
        }
        .b2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="a1 b2">111111</div>
    <div class="a1">222222</div>
    <div class="a1">333333</div>
    <div class="a1">444444</div>
    <div>555555</div>
    <div>666666</div>
</body>
</html>

3. id选择器

一个标签只能有唯一id名（理解成身份证号必须唯一）
CSS中用点“#类名”来选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    
    <style>
        #box1 {
            background: red;
        }
        #box2 {
            background: yellow;
        }
        #box3 {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1">111111</div>
    <div class="box2">222222</div>
    <div class="box3">333333</div>
</body>
</html>

4. 通配符选择器

写法是星号，含义是所有元素。

例如下方代码含义是消除所有元素的默认边距值和填充值。

*{
    margin: 0;
    padding: 0;
}

5. 群组和后代选择器

群组选择器：提出公共代码，节约代码量

用逗号隔开，标签名和类名可以混写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>群组选择器</title>
    
    <style>
        /* div {
            background: yellow;
        }
        p {
            background: yellow;
        }
        h1 {
            background: blue;
        } */
        div,p,.abc,h1 {
            background: yellow;
        }
    </style>
</head>
<body>
    <div>111111</div>
    <p>222222</p>
    <p class="abc">222222</p>
    <h1>333333</h1>
</body>
</html>

后代选择器：

用空格隔开，标签名和类名可以混写
作用过程其实是从右到左的，比如下方代码，浏览器会找到所有p标签，然后再筛选出包含在div里的p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器（包含选择器）</title>
    
    <style>
        div p {
            background: yellow;
        }
    </style>
</head>
<body>
    <div>111111
        <p>222222</p>
    </div>

    <p>333333</p>
</body>
</html>

6. 伪类选择器

最常用的是作用于超链接a标签。

四个伪类选择符的语法：

a:link{属性: 属性值;}：超链接的初始状态；
a:visited{属性: 属性值;}：超链接被访问后的状态；
a:hover{属性: 属性值;}：鼠标悬停或划过超链接时的状态；
a:active{属性: 属性值;}：超链接被激活（鼠标按下）时的状态；

使用说明：

当这四个超链接伪类选择符联合使用时，注意使用顺序，否则可能会导致样式失效。
为简化代码，可以把相同的声明提出来放在a选择符中
例如：a{color:red;} a:hover{color:green;}表示初始、访问后都为红色，悬停、激活时都为绿色。

7. 选择器的权重

多个选择器对同一个元素都设置了样式，属性发生冲突时，会选择权重高的来执行。

!important > 行内(内联)样式 > 后代(包含)选择器 > id选择器 > class类选择器 > 元素选择器

【CSS属性】

1. 文本属性

font-size字体大小：单位px，浏览器默认16px
font-family字体
color颜色
font-weight加粗：lighter(更细)、normal(常规)、bold(加粗)、bolder(更粗的)
font-style倾斜：normal(常规)、italic(斜体字)、oblique(倾斜的文字)
text-align文本水平对齐：left(水平靠左)、right(水平靠右)、center(水平居中)、justify(水平两端对齐，但是只对多行起作用)
line-height行高
文本间距：letter-spacing字符间距，word-spacing词间距
text-indent首行缩进
text-decoration文本修饰，属性有：over-line上划线、line-through删除线、underline下划线、none无修饰
text-transform文本变形，属性有：capitalize让每个英文单词首字母大写、lowercase将所有字母转换为小写、uppercase将所有字母转换为大写、none默认

font合并书写：font-style倾斜，font-weight加粗，font-size字体大小/ line-height行高，font-family字体
顺序不能改变！必须同时指定font-size和font-family时才起作用。
1
font: normal 800 30px/80px "宋体";

2. 列表属性

list-style-type：定义列表符合样式，disc实心圆、circle空心圆、square实心方块、none无样式
list-style-image：将图片设置为列表符合样式，list-style-image:url();
list-style-position：设置列表项标记的放置位置，outside列表的外面，inside列表的里面
list-style：none去除列表符号

1 2	/* 复合属性写法 */ list-style: none url(img/1.jpg) inside;

3. 背景属性

background-color：背景颜色，background-color: red;
background-image：背景图片，background-image: url();
background-repeat：图片默认repeat平铺，background-repeat: no-repeat/repeat/repeat-x/repeat-y/repeat-z;
background-position：背景图片的定位，是与左/右的距离，background-position: 20px 20px;，可以给负值，可以给百分数（相对于自身），可以给方位名词(left/center/bottom)，甚至可以写混合单位（20px center）
background-attachment：背景图片的固定，background-attachment: scroll(默认滚动)/fixed(固定);，其中固定是固定在浏览器的窗口里面（一般固定在左上角），该属性可以做视差滚动效果
background-size：图片尺寸，400px 400px、100% 100%、cover(等比例放大且不留白)、contain(等比例放大但留白)

background复合写法：
background: yellow url() no-repeat center fixed;顺序可更换，属性可不写全（但会用默认值覆盖已经写过的属性）
background-size: ;此属性只能单独使用

4. 浮动属性

设置浮动：float: left/right/none;

子元素浮动后，解决父元素高度塌陷几种方法：

给父元素写固定高度（因为浮动后div的高度是0）。（但若浮动元素过多，浮动元素的换行会出现问题）
清浮动clear: none/right/left/both;（加在下方的补位元素的身上）
只改变排列方式，该元素还是会不占据文档位置地漂浮着
- none：允许有浮动对象
- right：不允许右边有浮动对象
- left：不允许左边有浮动对象
- both：不允许有浮动对象
在浮动元素下方添加空块元素，并添加属性声明<div style="clear:left/right/both"; height:0; overflow:hidden;></div>。（在结构里增加空的标签，不利于代码可读性，且降低了浏览器的性能）
给浮动元素加overflow: hidden;，引发块级BFC从而让浮动元素计算高度。（但有时因为溢出隐藏，会使内容显示不完全，或者出现其他小问题。）

万能清除浮动法：利用伪元素（伪元素的介绍在后面）

选择符::after {
    content: ""; /*不用写东西，空内容就行，类似于上方的方法3*/
    clear: both; /*清除前面的浮动*/
    display: block; /*从行内元素设置为块级元素*/
    width: 0;
    height: 0;
    visibility: hidden; /*可见度 设为隐藏*/ （占位置的隐藏）
    /* 或者display: none; */ （不占位置的隐藏）
    /* 或者overflow: hidden; */
}

5. 边框属性（盒子模型）

内边距padding：（可以写1 ~ 4个值）
- 可分别设置四个方向的边框样式，如：padding-top
边框border：border: 10px solid yellow;，背景色也能蔓延到边框
- 可分别设置四个方向的边框样式，如：border-top（或者写一块成border复合属性）
- 边框宽度border-width（可以写1 ~ 4个值）
- 边框样式border-style（可以写1 ~ 4个值）：solid(实)/dashed(虚)/dotted(点)
- 边框颜色border-color（可以写1 ~ 4个值）
外边距margin：（可以写1 ~ 4个值）
- 可分别设置四个方向的边框样式，如：margin-top
- 值为0 auto可以水平居中（横向居中方案）
- 兄弟关系：
  1. 垂直方向外边距取最大值
  2. 水平方向外边距会合并
- 父子关系：
  - 给子级加外边距margin但会作用于父级，怎么解决？
    1. 给父级增加内边距padding，实现代替效果
    2. 或者给父级增加边框，来确定父级的具体大小
    3. 或者给父/子设置一个浮动float，让其不在同一层面
    4. 加overflow: hidden;构建BFC

6. 溢出属性（容器的）

溢出属性 overflow: visible/hidden(隐藏)/scroll/auto(自动)/inherit;
1. visible：默认值，溢出显示
2. hidden：溢出内容隐藏
  
  对于文本溢出后，可设置text-overflow: clip(默认裁断)/ellipsis(溢出内容省略号);，其中文本要有宽度才能显示省略号
3. scroll：溢出内容滚动
4. auto：有溢出则增加滚动条，没有溢出则正常显示
5. inherit：规定应该遵从父元素，继承overflow的值
6. overflow-x: auto;：允许X轴溢出；overflow-y: hidden;：禁止Y轴溢出
空余空间 white-space: narmal/nowrap/pre/pre-wrap/pre-line/inherit;（处理元素内的空白）
1. normal：默认值，空白会被浏览器忽略
2. nowrap：文本不换行，直到遇到<br/>标签为止
3. pre：保留回车和空格，超出内容不换行
4. pre-wrap：保留回车和空格，但超出内容换行
5. pre-line：保留换行，忽略空格
6. inherit：继承父级属性

7. 定位属性

static：默认
relative：相对定位，不脱离文档流，参照自己初始位置。（静态定位）
absolute：绝对定位，脱离文档。
sticky：粘性定位（css3.0新增）
fixed：固定定位，脱离文档流，参照浏览器当前窗口

index属性不带单位，可为负值。未设置时，最后写的元素优先在上层显示；设置后，数值越大层数越上。

(1)静态定位&相对定位

静态定位position:static（默认），此时 top 和 left 等偏移属性失效
相对定位position:relative，可偏移可移动，但依然在文档流中占位

(2)绝对定位

绝对定位position:relative
若无父元素或父元素无定位，参照浏览器窗口第一屏；
若有父元素且有相对定位(relative)，参照父元素。

(3)粘性定位

粘性定位position:sticky，可配合top: 0px;等属性值做吸顶效果

(4)固定定位

固定定位position:fixed

(5)定位中的层级(z-index)

z-index: 0 属性值可正可负

(6)定位控制元素水平垂直居中

以下只是其中一种方法

给父子级盒子都设置宽 & 高
父盒子 position: relative 相对定位
子盒子 position:absolute 绝对定位
设置子盒子左上角“相对于父盒子”的位置
top:50%
left:50%
将子盒子平移“相对于自身”距离的一半
margin-top:-100px
margin-left:-100px

8. 定位和浮动的区别

绝对定位和浮动都脱离文档流，区别是

绝对定位脱离文档流后，会遮盖下方刚补上来的字段
浮动不遮挡后面文字（半脱离文档流），会形成文字环绕效果

三、其他

【锚点】

利用超链接可在本页面跳转的功能

<a href="#test"></a>
<div id="test"></div>

【精灵图】

CSS Sprites的原理（图片整合技术），也叫精灵图/雪碧图

利用background-position: -100px -50px属性实现背景图片定位技术（一般设置负值）

【优点】

通过图片整合减少对服务器的请求次数，从而提高页面加载速度

通过整合图片来减小图片的体积

【伪元素】

伪类选择器是一个冒号，伪类是两个冒号

伪元素是“假的”元素，必须寄托在某个元素身上才行，不是标签但却可以显示东西，举几个例子：

/*会在div元素里面的最前边加上aaaa*/
div::before {
    content:"aaaa"
}

/*会在div元素里面的最前边加上aaaa*/
div::after {
    content:"bbbb"
}

/*第一个字母*/
div::first-letter {
    font-size:30px;
    color: red;
}

/*第一行文字*/
div::first-line {
    background:yellow;
}