一、介绍
1、CSS全称层叠样式表，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
2、CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化。
3、CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
层叠：多个样式可以作用在同一个html的元素上
样式表：提供了丰富的样式修饰内容
作用：
1)、样式丰富、功能强大。
2)、内容和样式分离(解耦)。
学习网站：w3school 在线教程
浏览器中的各项默认值：
默认字体大小：16px二、CSS样式的三种引入方式
关于CSS的优先级：(重点！！！)
1、样式来源：行内样式（Inline Styles）> 内部样式（Internal Styles）> 外部样式（External Styles）。这意味着，如果同一个元素被这三种方式指定了样式，那么行内样式的优先级最高，其次是内部样式，最后是外部样式。
2、选择器优先级：更具体的选择器优先级更高。例如，ID选择器（#myId）> 类选择器（.myClass）> 元素选择器（div）。权重：id(100) > class(10) > 标签(1)！！！
3、规则优先级：如果一个元素被多个相同优先级的规则指定了样式，那么后出现的规则会覆盖先出现的规则，即后加载的先生效。
4、!important声明：!important声明可以覆盖任何其他的样式规则。但是如果同时出现多个!important声明，那么还是会考虑到前面三个因素来决定优先级。
1、行内样式
在标签内使用style属性指定css代码，该方式定义样式作用域为当前标签
优缺点：由于复用性不好，可读性差，实际在写页面时不提倡使用，在测试的时候可以使用。
<div style="width:100px; height:100px;">我是渣渣菜鸡</div>2、内部样式
在head标签内，定义style标签，style标签的标签体内容就是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>Document</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>我是古天乐</div>
<div>迪迦奥特曼</div>
</body>
</html>3、外部样式
定义css文件，在head标签中使用link标签，引入外部的资源文件。
语法格式：<link rel="styleSheet" href="css文件路径"/>
优缺点：重用较强，一个css样式文件可以控制多个页面。html和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>Document</title>
<!--引入css文件,方式1-->
<!--
<link rel="stylesheet" href="./css//dome03.css">
-->
<!--引入css文件,方式2-->
<link rel="stylesheet" href="css/dome03.css">
</head>
<body>
<div>我是小明</div>
</body>
</html>
上面是html文件，下面是css文件
/* 不用写style标签 */
div{
width: 200px;
height: 200px;
background-color: pink;
}三、CSS语法格式
选择器严格区分大小写，属性和属性值不区分大小写
无论使用HTML还是CSS都需要遵从一定的规范。
css定义规则如下：
选择器{
属性值1:属性值;
属性值2:属性值;
属性值3:属性值;
......
}
或者：
选择器{属性值1:属性值;属性值2:属性值;属性值3:属性值;......}
其中：
选择器：指定css样式作用的HTML对象
{}：限定范围，指当前花括号内的所有样式都属于当前选择器四、选择器
权重：id(100) > class(10) > 标签(1)！！！
想要将css样式应用于特定的html元素，首先需要找到该目标元素。在css中，执行这一任务的样式规则部分被称为选择器（作用：筛选具有某一特征的元素）
id #idName{ }
class .className{ }
标签 tagName{ }
全局 *{ }
组合 tagName1 , tagName2{ } （说明：可以是任何选择器、很多个，用“，”隔开）
层级 空格 父选择器 后代选择器 （说明：中间隔了一个空格）
父 > 父选择器>子选择器 （只包含父标签的儿子标签）
属性 [attr] [attr='val']
伪类 a:link{} a标签未被访问时
a:visited{} a标签被访问过后
a:hover{} 鼠标悬浮在a标签上时
a:active{} 鼠标激活在a标签时时
a:focus{} 鼠标点击a标签的时候
如果同时设置4个伪类，顺序不能改变
1、基本选择器
标签选择器 标签名{} 获取页面中所有该标签
ID选择器 #id名{} id是页面的唯一标识 获取页面中所有id属性值为XXX的标签
类选择器 .class名{} class可以重复 获取页面中所有class属性值为XXX的标签
<style>
div{ /* 1、标签选择器 */
color: red;
}
#li1{ /* ID选择器 ID不能重复*/
color: blueviolet;
}
/* 类选择器 class可以重复*/
.lis{
color: blue;
}
</style>2、全局选择器
全局选择器又称通用选择器，将匹配任何标签，样式对所有标签起作用，用*{ }表示
<style>
*{
color: black;
}
</style>3、群组选择器
群组选择器：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
<style>
#box , .s , li , p , a{
color: red;
}
</style>4、后代选择器
后代选择器：层级选择器也称为后代选择器或包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。
<style>
/* 后代选择器 选择id为box 所有span后代 */
#box span{
color: red;
}
</style>5、父类选择器
父类选择器：又称子选择器，仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代（也就是亲儿子，即孙子、孙孙子等没有效果）。而后代选择器是作用于所有子后代元素。所以后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
<style>
/* 父选择器 选择id为box 仅作用于box的儿子 */
#box>span{
color: pink;
}
</style>6、属性选择器
我们可以通过属性选择器，以属性名或属性值来匹配对应标签，常用的属性选择器有：
[attr] 该选择器选择包含attr属性的所有元素，不论attr的值为何
[attr='val'] 该选择器选择attr属性被赋值为 val 的所有元素。
<!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>Document</title>
<style>
/* 选取属性名为placeholder的标签
[placeholder] {
width: 1000px;
}*/
/*选取属性名placeholder属性值为bbb的标签
[placeholder='bbb'] {
width: 500px;
}*/
/* 选取属性名hp属性值为6000的标签 */
[hp='6000'] {
color: red;
}
</style>
</head>
<body>
<input type="text" name="username" value="" placeholder="aaa"><br>
<input type="text" placeholder="bbb"><br>
<!--hp为自制的属性，不是官方定义的属性-->
<div hp="6000">德玛西亚</div>
</body>
</html>7、伪类选择器
主要针对a标签，伪类选择器主要有：
a:link{} a标签未被访问时
a:visited{} a标签被访问过后
a:hover{} 鼠标悬浮在a标签上时
a:active{} 鼠标激活在a标签时时
a:focus{} 鼠标点击a标签的时候
如果同时设置4个伪类，顺序不能改变
清除浏览器缓存快捷方式：ctrl+shift+delete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=a, initial-scale=1.0">
<title>Document</title>
<style>
/* 未被访问 */
a:link {
color: red;
}
/* 访问过后 */
a:visited {
color: gold;
}
/* 鼠标悬浮 */
a:hover {
color: blue;
}
/* 正在访问时 */
a:active {
color: aqua;
}
/* 被鼠标点击时 */
a:focus {
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">点我跳转</a>
</body>
</html>8、高级选择器
1、选中.warp内的第一个div标签
.warp div:first-child{
}
2、选中从第五个及其后面div标签(下面的n是从0开始自增的)
.warp div:nth-child(n+5){
}
3、选中第6个div标签
.warp div:nth-child(6){
}
4、选中最后一个div标签
.warp div:last-child{
}五、CSS常见样式
在网站开发的过程中，所有带数字的单位都是px（特殊情况除外）
1、尺寸修饰
height 高度，单位px
width 宽度，单位px2、字体类型
font-size: 字体大小
font-style: 字体风格（italic斜体、normal默认字体）
font-family: 字体类型（取值：隶书、楷体、微软雅黑）
font-weight: 字体粗细 （normal默认值、bold粗体、bolder更粗体、lighter更细体）
3、文本类型
color:字体颜色
line-height: 上下居中（当文字高度和盒子高度相同时）
letter-spacing：字体间距
text-decoration: （overline上划线、line-through删除线、underline下划线、none没有线）
text-indent:2em 单位比较特殊（1em就相当于一个汉字）
white-space:wrap; 换行
white-space:nowrap; 不允许换行
text-align: （center居中、left居中左、right居右），只对内容有效，对img也有效，对内部的块无效，举例如下：
<div id="box">
你好
<div id="ll">
离谱
</div>
</div>
对box添加 text-align:center样式，则“你好”会在box里面居中，“离谱”会在ll里面居中，但是ll在box里面不居中
4、边框样式
语法为 border: 宽度 类型 颜色;
border: 5px solid red;
单独给四个边框进行设置 solid实线 double双实线 dashed虚线 dotted点虚线
设置圆角 可以设置百分比，也可以设置像素
border-radius: 20%; /*同时给四个角设置圆角*/5、背景样式
background-color: green; 设置背景颜色
background-image: url(img/333.jpg); 背景图片 使用url添加图片路径
/*设置背景图片大小 宽 高*/
background-size: 100% 100%; 当宽和高都是100%的时候，可以使图片刚好与box1大小匹配
background-size: 50% 50%;/*X轴和Y轴都平铺，出现了四张图片*/
/*设置是否平铺
repeat 默认 X轴和Y轴都平铺
no-repeat X轴和Y轴都不平铺
repeat-x X轴平铺
repeat-y Y轴平铺
*/
background-repeat: no-repeat;/*X轴和Y轴都不平铺*/
background-repeat: repeat-x;/*X轴平铺*/
background-repeat: repeat-y;/*Y轴平铺*/颜色的三种赋值方式
单词、十六进制、rgb
rgb(a1,a2,a3)
rgba(a1,a2,a3,a4)其中a4的是透明度，范围是[0,1]
六、盒子模型
1、什么是盒子模型？
CSS的框模型规定了元素框 处理元素内容、内边距、边框、外边距 的方式。用于精细化布局。
注意：我们平时在对盒子进行设置width和height的时候，实际上设置的是里面内容的尺寸。（即上图中的蓝色部分）
margin：外边距 padding：内边距 border：边框宽度
如上图所示：该div的height为3167，width为964.8，如果在该div内部放置一个div2，则：
div2的width + div2的左右内边距 + div2的左右边框 + div2的左右外边距 = 964.8
div2的height + div2的上下内边距 + div2的上下边框 + div2的上下外边距 = 3167
1.1、标准盒子：
标准盒子设置好宽和高之后，内容的大小是固定不变的，盒子的大小受到内边距和边框厚度的影响。标签基本上都是标准盒子
平时我们所说的宽度和高度仅仅指的是内容的宽和高，而盒子所占的空间通过下面的公式计算。
盒子所占宽度 = 内容的宽度(设置的width) + 左右内边距 + 左右边框宽度 + 左外边距
盒子所占高度 = 内容的高度(设置的height) + 上下内边距 + 上下边框宽度 + 上下外边距盒子的真实宽和高计算方式为：
盒子宽度 = 左右内边距 + 左右边框宽度 + 内容的宽度(设置的width)
盒子高度 = 上下内边距 + 上下边框宽度 + 内容的高度(设置的height)
1.2、怪异盒子
怪异盒子的长和宽设置好之后，盒子的大小是固定不变的，内容的范围大小受到内边距的影响和边框宽度的影响。移动端推荐使用怪异盒子。常见的有button标签
盒模型宽度（width）= 左右边宽度 + 左右内边距 + 内容宽度
盒模型高度（height）= 上下边宽度 + 上下内边距 + 内容高度2、内边距赋值方式：
内边距 padding：也叫填充(padding)，设置元素内容与元素边框之间的距离。
填充的属性有四个取值：padding-(top/bottom/left/right) padding
一个值： padding:20px; 表示四个方向都是20px
两个值： padding:20px 30px; 表示上下都是20，左右是30
三个值： padding:10px 20px 30px; 表示上是10px，左右是20px，下是30px
四个值： padding:10px 20px 30px 40px; 表示上是10px，右是20px，下是30px，左是40px
padding-top:20px 上内边距是20px
padding:20px auto; 表示上下内边距都是20，左右内边距自动计算3、外边距赋值方式：
外边距 margin：也叫空白页(margin)，位于盒子的最外围，设置不同元素之间，它们边框与边框之间的距离。
空白边的属性有五种：margin-(top/bottom/left/right) margin
一个值： margin:20px; 表示四个方向都是20px
两个值： margin:20px 30px; 表示上下都是20，左右是30
三个值： margin:10px 20px 30px; 表示上是10px，左右是20px，下是30px
四个值： margin:10px 20px 30px 40px; 表示上是10px，右是20px，下是30px，左是40px
margin-top:20px 上外边距为20px
margin:20px auto; 表示上下外边距都是20，左右外边距自动计算4、边框赋值方式
1、边框样式
方式1：
div {
border-style: solid;
border-width: 2px;
border-color: black;
}
方式2：
div {
border: 2px solid black; 参数说明：边框宽度，边框样式(实线)，边框颜色
}2、边框圆角
方式1：
div {
border-radius: 10px;
}
方式2：
div {
border-radius: 5%;
}
说明：如果div是个正方形，当圆角为50%的时候，变成了一个圆形3、边框阴影
div {
box-shadow: 0px 0px 40px 10px black;
}
参数说明：
参数1：表示阴影向右的偏移量
参数2：表示阴影向下的偏移量
参数3：表示阴影的范围大小
参数4：表示重色阴影范围的大小
参数5：表示阴影的颜色
5、其他
当标签有确定的宽度和高度的时候，它的子标签也可以使用百分比的形式对内外边距或大小的设置，即占用父标签空间的百分比
margin:5%;
padding:10%;七、布局样式
1、浮动（float）
1、HTML有些标签默认从左到右排列，如input。有些则默认从上到下排列，如div。
2、如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。3、float是CSS样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或者向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止。
4、元素设置浮动后就会脱离标准文档流，所以会对页面中其他未设置浮动的元素排版产生影响，我们还可以使用clear属性清除浮动。
浮动属性的取值有三个：
float:left：元素左浮动
float:right：元素右浮动
float:none：默认值，不浮动原理：
1、当元素浮动时，会脱离文档流，提高层级，原本的位置被后边的元素占据。
2、当元素浮动时，如果它的上一行元素没有浮动，那么这个浮动的元素只在自己本行内浮动。
3、当元素浮动时，它的位置受上一个浮动元素的影响，如果上一个浮动元素后面的位置够，则同行显示，否则换行显示。
4、当元素浮动，被挤到下一行时，它的位置受上一个相同浮动方向 的元素的影响。
浮动可能会引起父标签的高度塌陷问题，因此需要进行处理，例如：
<div class="fu">
<div class="left">左</div>
<div class="main">中</div>
<div class="right">右</div>
<div style="clear: both;"></div>
</div>如果上述代码对三个div进行浮动，出现父标签高度塌陷的问题时，解决方案有以下三种：
方案1：（较为推荐）
为父元素添加 overflow: hidden; 属性
方案2：
父元素添加高度 height: 数值px 根据情况为父标签设置高度
方案3：
在父元素内的最后添加新的标签，为新的标签添加 clear: both; 属性八、定位样式(position)
作用：实现一个标签在另外一个标签上面叠加的效果，解决层级叠加（覆盖）效果
实现方式：position: relative / absolute / fixed / static / sticky;
当元素添加了position属性之后就有了定位的效果，以下四个属性是定位产生后才有的属性，他们是移动标签的属性（只能在已经定位的元素上使用）
top:XXXpx left:XXXpx bottom:XXXpx right:XXXpx
在CSS中，有五种定位类型，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。
- 静态定位（static）：这是所有元素的默认定位方式。在静态定位状态下，元素按照正常的文档流排列，无法通过边偏移属性（如top、bottom、left或right）来改变元素的位置。
- 相对定位（relative）：相对定位元素会占据文档流中的位置，但是可以根据边偏移属性改变其位置。元素在移动时，原位置处会留有空白。
- 绝对定位（absolute）：绝对定位元素不占位置，脱离文档流。它的位置相对于最近的已定位祖先元素（即设置了position属性的元素）进行定位，如果没有已定位的祖先元素，则相对于初始包含块定位。
- 固定定位（fixed）：固定定位元素不占位置，脱离文档流，且不会随着页面滚动而移动。它的位置相对于浏览器窗口进行定位。
- 粘性定位（sticky）：粘性定位可以看作是相对定位和固定定位的结合。当页面滚动到一定高度时，元素会脱离文档流，其位置相对于浏览器窗口进行定位，犹如固定定位一般；而在页面未滚动时，元素的位置相对于其正常文档流的位置进行定位，此时边偏移属性有效，犹如相对定位一般。
1、相对定位(relative)
参考系：该元素最初所在的位置。
position定位
1、relative 相对定位
相对原来的位置定位，定位完成后可以去偏移（移动），不会脱离标准文档流。
2、absolute 绝对定位
绝对定位后，脱离文档流位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对于<body>标签偏移。
总结：
相对定位：position:relative 相对于原来的位置 上下左右四个属性
绝对定位：position:absolute 位置移动看父标签 父标签没有定位看 body九、列表修饰
HTML有丰富的标签，这些标签被定义成不同的类型，一般被分成块标签、行标签和行块标签。
块标签：以区域块方式出现，每个块标签独自占一整行或多行，且可以设置宽高。
常见的块级元素：<div>、<h>、<ul>等
行标签：按行排列，不能设置宽和高。
常见的标签有<span>、<strong>、<a>等。
行块标签：按行排列，但是可以设置宽高。
常见的行块标签：<img>、<input>、<textarea>等。
在实际开发中，如果希望这些标签之间可以相互转换，需要用到display属性。
1、块属性标签：br、p、div、h1-h6、ul、li
1.1、单独占一行，这个标签的前后不允许其他标签内容出现。
1.2、CSS设置时，设置宽高有效
2、行属性标签：a、span
2.1、可以在一行中显示的标签
2.2、CSS设置时，设置宽高无效
3、行内块标签：img、input、button
2.1、可以和行属性标签在一行显示
2.2、CSS设置时，设置宽高有效display：用于定义建立布局时元素生成的显示框类型。其取值如下：
inline：此元素将显示为行元素（行内元素display的默认值）
block：此元素指定为块元素（块元素display的默认值）
inline-block：将对象呈现为内联元素，对象内的元素块级展示。行快元素
none：隐藏元素十、关于标签的居中方式
1、水平居中
margin:0px auto; 可以让当前 “块元素” 水平居中
用法：在当前块元素中添加该属性
可以使用的元素有：
div、p、h1、optiontext-align: center; 可以让行属性标签、行内块标签、文本内容在其父标签中水平居中
用法：在其父标签中添加text-align属性
可以使用的行属性标签有：
span、img、a
可以使用的行内块标签有：
button、input、textarea、select2、垂直居中
line-height: 可以让单行文本在垂直方向上居中
使用方式：添加到当前元素的属性当中
可以使用的标签有：
span、a、p、h1-h5十一、补充内容
1、calc()
calc()表示自动计算，把表达式写在括号内，计算机会帮我们自动计算出结果。
2、基线对齐问题
通过观察图片可以看出图片的底部并没有和汉字的底部对其，而是和小写X的底部对其的，这就涉及到了基线对齐的问题。
（基线可以是图片的基线、文字的基线、块的基线，只要是文本相关的，都有基线）
对其方式（基线的设置）vertical-align: middle/top/bottom/正负像素值;
（1）、设置图片的基线为vertical-align: middle;则结果如下图所示：
（2）、设置图片的基线为vertical-align: top;则结果如下：
（3）、设置图片的基线为vertical-align: 30px;则结果如下：
总结：
1、对A进行基线设置，则B会使自己的基线与A的基线对齐，进而B发生位置变动。
2、像素值为正时，基线向下移动，像素值为负时，基线向上移动。
3、对于行内块也起作用，比如下图的洗衣机，左边文字设置成行内块，右边图片是行内块，可以通过调整基线使两者对齐。
