一、什么是CSS
Cascading Style Sheet（层叠样式表），是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、为什么要使用CSS
在学HTML的时候，有些标签也有自带的属性可以修改样式，为什么一定要使用CSS来修改样式呢
以上一篇文章HTML5学习笔记的细线表格为例：
不使用CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线表格</title>
</head>
<body>
<table bgcolor="black">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
<tr bgcolor="white">
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</body>
</html>
使用CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线表格</title>
<style>
table{
background-color: black;
}
tr{
background-color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</body>
</html>
使用CSS和使用标签自带的样式效果一样。
显然使用CSS是更方便的，一是不用去记哪些标签有样式属性以及样式，二是不用每一个标签都写样式，在style标签下可以给一类标签设置样式。况且HTML标签的初衷就是设置语义而不是更改样式，所以以后制作样式都用CSS.
三、CSS的引入方法
1.在head标签里面写
<head>
....
<style>
div{
background-color: red;
height: 100px;
width: 100px;
}
</style>
</head>
2.直接在标签内部写
<body>
<div style="background-color: red; height: 100px;width: 100px;"></div>
<body>
3.从外部文件引入
<head>
...
<link rel="stylesheet" href="文件路径">
<head>
四、CSS代码格式
选择器{
css属性1:属性值1;
css属性2:属性值2;
}
选择器：选择我们到底要给哪些标签设置样式
属性：给选择好的标签设置哪些样式
所以接下来将从选择器和样式两方面进行学习！！！
五、选择器
1.基本选择器
（1）标签选择器
标签名称{属性：属性值；}
特点：可以把该页面之内所有这个标签都找到，没法单独找到一个标签
（2）id选择器
#d1{属性：属性值；}
<div id='d1'></div>
id值是唯一的，不能重复
id号一般都是留给js用的，在设置样式时尽量用类选择器
（3）类选择器
.c1{属性：属性值；}
<div class='c1'></div>
类名可以重复，一个标签也可以有多个类名
（4）通用选择器
*{ 属性：属性值；}
可以给所有标签设置属性
2.组合选择器
（1）后代选择器
选择器1 选择器2{
color:red;
}
中间用空格连接
找到选择器1标签后代里面的所有选择器2
（2）子元素选择器
选择器1>选择器2{
color:red;
}
找到选择器1的儿子标签这一代的选择器2
（3）交集选择器
选择器1选择器2{属性：属性值；}
中间没有任何连接符号
选中同时满足选择器1和选择器2的所有标签
（4）并集选择器
选择器1，选择器2{属性：属性值；}
用逗号分隔
多个选择器选择的标签设置相同样式的时候,就可以将他们分组共同设置一个属性
（5）相邻弟弟选择器
div+a{ 属性：属性值；}
找到的只是紧挨着div标签的下一个a兄弟标签
（6）通用弟弟选择器
div~a{属性：属性值；}
找到的是div标签同级的后面的所有a兄弟标签
3.属性选择器
[title]{}
通过属性名来查找对应的标签，找到所有含有title属性的标签
div[title]{}
含有title属性的div标签
input[type=text]{}
查找含有type属性,并且type属性的值为text的input标签
通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='123']
[attribute^=value] 属性的取值是以什么开头的
[attribute$=value] 属性的取值是以什么结尾的
[attribute*=value] 属性的取值是否包含特定的值
4.伪类选择器
a标签自带的效果:未访问过的时候字体颜色是蓝色的,访问过之后是紫色的,长按是红色的，且都自带下划线
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
5.伪元素选择器
/*选择每个div标签的首字母*/
div::first-letter{
color: red;
font-size: 20px;
}
/*在p标签内容的前面插入一些内容*/
p::before{
content: '?'; /*插入的内容*/
color: green;
font-size:100px;
}
/*在p标签内容的后面插入一些内容*/
p::after{
content: '!';
color: pink;
}
6.CSS3新增选择器
（1）同级别中的第几个标签
标签1:first-child 选中同级别中的第一个标签1
标签1:last-child 选中同级别中的最后一个标签1
标签1:nth-child（n）选中同级别中第n个标签1
标签1:nth-last-child(n) 选中同级别中倒数第n个标签1
其中括号内为n是代表第几位，也可以取odd代表第奇数位，取even代表第偶数位，甚至可以写表达式
标签1：only-child 选中父元素中唯一的元素的标签1
（2）同类型中的第几个标签
标签1:first-of-type 选中同级别中同类型的第一个标签1
标签1:last-of-type 选中同级别中同类型的最后一个标签1
标签1:nth-of-type(n) 选中同级别中同类型的第n个标签1
标签1:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签1
其中括号内为n是代表第几位，也可以取odd代表第奇数位，取even代表第偶数位，甚至可以写表达式
标签1:only-of-type 选中父元素中唯一类型的标签1
7.CSS三大特性
（1）继承性
给父元素设置一些属性，后代元素也可以使用
注：
1.并不是所有属性都可以继承，只有以color/font/text/line开头的属性才可以继承
2.a标签的文字颜色和下划线是不可以继承的
3.h系列标签的文字大小是不能继承的
（2）层叠性
当一个标签被分别设置了一个属性的两个值，优先级高的会覆盖优先级低的属性，如果优先级相同，后设置的会覆盖前面的。
（3）优先级
优先级从小到大排列：
浏览器默认
继承 如果同为继承，谁离目标标签近就听谁的
通配符
标签选择器
类选择器
id选择器
内敛样式
!important==>选择器{属性：属性值!important;}
优先级越高,越优先显示其效果,如果优先级相同,显示后面设置的样式
六、样式
1.文字相关
文字样式
font-style:italic
normal:正常的（默认）
italic：倾斜的
文字粗细
font-weight: bold;
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
文字大小
font-size:14px; 默认字体大小为16px.
字体
font-family: '楷体','宋体','微软雅黑';
后面的取值可以有多个，如果第一个字体电脑上没有，就使用第二个字体，以此类推。
可以利用这个特点给中文和英文分别设置字体（英文字体无法处理中文）：
font-family:英文字体,'中文字体'；
常用中文字体：宋体、黑体、微软雅黑
常用英文字体：Arial、Times New Roman
以上四种的缩写形式：
font:italic bold 20px '宋体'
按照顺序依次排列，前两项可以省略也可以交换顺序，后两项不能省略也不能交换顺序
2.文本相关
文本装饰
text-decoration:underline;
none：没有样式，一般去除超链接的下划线
underline:下划线
line-through:删除线
overline:上划线
文本对齐
text-align:center
left:左对齐
right:右对齐
center:居中对齐
文字缩进
text-indent:2em em代表一个文字
首行缩进2个文字
行高
line-height:10px;
3.颜色
取值方式：
1.英文单词
color：red；
- RGB
color：rgb(255,0,0);
R:红 G:绿 B:蓝
取值范围（0，255）
- RGBA
color:rgba(255,0,0,0.5)
A：透明度取值范围（0，1）
- 16进制数
color:#ff0000;
每两位代表0-255之间的数，范围是00-ff
如果颜色每两位值是一样的，就可以简写为1位
例如：#ffaa00==>#fa0
4.display属性
可以将块级标签、行内标签和行内块级标签之间相互转换
块级标签：独占一行，可以设置宽高
行内标签：不独占一行，不可以设置宽高
行内块级标签：不独占一行，可以设置宽高
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JS代码使用。
display:"block" 转换为块级标签
display:"inline" 转换为行内标签
display:"inline-block" 转换为行内块级标签
隐藏标签
visibility: hidden; 隐藏标签,但是标签还占用原来的空间
display: none; 隐藏标签 ,并且不占用自己之前的空间
5.背景属性
1.背景颜色 颜色取值和前面的颜色属性一模一样
background-color: red;
2.背景图片
background-image: url("图片路径");
如果图片大小没标签大，就会自动在水平和垂直方向平铺和填充
3.图片是否平铺
background-repeat: no-repeat;
repeat:水平和垂直方向都平铺（默认）
no-repeat:水平和垂直方向都不平铺
repeat-x:水平方向平铺
repeat-y:垂直方向平铺
同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，图片会覆盖颜色
4.图片定位
background-position: x y;
有两种取值方式：
（1）方位单词
x:
left 左
center 中
right 右
y:
top 上
center 中
bottom 下
例：background-position: right top; 图片位于右上角
（2）具体像素
例：background-position: 10px 20px; 从左上角向右平移10px，向下平移20px
5.关联方式
background-attachment：scroll;
scroll（默认）:图片会随着滚动条滚动
fixed:不会随着滚动条滚动
6.简写方式：颜色 图片路径 是否平铺 关联方式 图片位置
background:#ffffff url('路径') no-repeat fixed right top; 每一个属性都可以省略
多个图片可以用逗号分隔，先添加的图片显示在最上面
7.背景尺寸属性：专门用于设置背景图片大小
background-size:x y;
x y 可以设置具体像素也可以设置百分比，其中一个值可以取auto，代表随着另一边等比拉伸
background-size:cover;
图片等比拉伸到宽度和高度都填满元素
background-size:contain；
图片等比拉伸到宽度或高度其中一个被填满
8.背景图片定位区域属性：
background-origin
从哪个区域开始显示
取值：
padding-box（默认）
border-box
content-box
9.背景绘制区域属性：
从哪个区域开始绘制背景的
取值：
padding-box
border-box（默认）
content-box
6.边框属性
1.同时设置四条边的边框属性
border-style: solid; 边框样式 solid:实线/dashed:虚线/dotted：小圆点虚线/double：双线
border-color: red; 边框颜色
border-width: 10px; 边框宽度
简写方式：border:10px solid red;
2.设置某一条边的边框属性
格式：border-方位词-属性:属性值;
方位词：top/bottom/left/right
例：border-left-style: solid;
简写方式:border-left:10px solid red;
3.一个属性给四条边设置的简写方式：
① border-属性:属性值（上） 属性值（右） 属性值（下） 属性值（左）;
②border-属性:属性值（上下）属性值（左右）;
③border-属性:属性值（上下左右）;
border-radius: 50%; 控制圆角
7.内外边距
内边距：padding
外边距：margin
使用方法和边框属性一样
给标签设置了内边距之后，标签占有的宽度和高度会发生变化，内边距也会有背景颜色
给标签设置了外边距之后，外边距没有背景颜色
外边距的合并现象：
水平方向外边距可以叠加，垂直方向外边距不会叠加，取两个标签的最大值
8.盒子模型
content内容区域
padding 内边距 内容与边框距离
border 边框宽度
margin 外边距
top距离上面标签的距离
bottom距离下面标签的距离
left 距离左边标签的距离
right 距离右边标签的距离
box-sizing属性
取值：content-box（默认） 元素的宽高等于边框+内边距+内容
border-box：元素的宽高等于width属性
如果两个盒子有嵌套关系，那么可以设置margin：0 auto； 属性让里面的盒子在外面的盒子水平居中
9.浮动
float: left;在父标签的左侧浮动
float: right;在父标签的右侧浮动
浮动会造成父级标签塌陷问题，因为浮动的元素无法撑起父标签的高度
解决方法:
1 父级标签设置高度
2 伪元素选择器清除浮动,给父级标签加上下面这个类值
.clearfix::after{
content: '';
display: block;
height:0;
visibility:hidden;
clear: both; 清除浮动clear
}
clear的取值：
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
10.overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。 可以清除浮动
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
11.定位
（1）相对定位
position:relative;
相对定位往往配合以下四个属性使用：
top:;
right:;
bottom:;
left:;
相对于自己以前在标准流中的位置来移动
给相对定位的元素添加margin属性，是相对没定位前的元素来设置外边距
（2）绝对定位
position:absolute;
top:;
right:;
bottom:;
left:;
相对定位不会脱离标准流，而绝对定位会脱离标准流
定位规则：
1.在默认情况下，所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考来定位
2.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流（除了静态定位），那么这个绝对定位的元素就会以定位流的哪个祖先作为参考点
3.如果祖先有多个元素设置了定位流，那么以最近的元素作为参考点
子绝父相：
绝对定位通常和相对定位一起配合使用，一般子元素用绝对定位，父元素用相对定位
水平居中：
只需要绝对定位的元素的left:50%; 然后再设置绝对定位元素的margin-left:-元素宽度的一半px37
（3）固定定位
position:fixed;
（4）z-index属性
默认情况下所有的元素都有一个默认的z-index属性，取值是0.z-index属性的作用是专门用于控制定位流元素的覆盖关系的
覆盖关系
1.定位流的元素会盖住标准流的元素
2.默认情况下，定位流元素后面编写的会盖住前面编写的
3.如果定位流元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面
4.如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，谁的父元素的z-index属性比较大谁就会显示再上面
12.过渡模块
transition-property:属性; 告诉系统那些属性需要过渡
transition-duration:5s； 过渡效果持续时长为5秒
transition-delay：2s； 延迟2秒后开始
transition-timing-function：； 控制动画速度
取值：
linear：匀速
ease：逐渐慢下来
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
当多个属性需要同时执行过渡效果时用逗号分隔
四个属性可以连写：
transition:过渡属性1 持续时长1 速度1 延迟1,过渡属性2 持续时长2 速度2 延迟2...;
速度和延迟可以省略
transition:all 持续时间; 所有变化的属性同时设置过渡属性
13.2D转换模块
（1）旋转
transform:rotate(角度 单位deg); 旋转多少度
轴向旋转
transform:rotateX()； 按照X轴旋转
transform:rotateY()； 按照Y轴旋转
transform:rotateZ()； 和transform:rotate();一样，默认就是按照Z轴旋转
注：想要看到X和Y轴旋转的效果，要加上perspective属性
（2）平移
transform:translate(10px,20px); 水平方向移动10px，垂直方向移动20px
和旋转一样，也可以设置按照哪个轴平移，默认是X轴
（3）缩放
transform:scale(1.5,0.5) 水平方向缩放1.5倍，垂直方向缩放0.5倍
如果前后两个参数一样，可以只写一个参数
如果需要进行多个转换，用空格隔开
（4）形变中心点
默认情况下，所有元素都是以自己的中心点作为参考来旋转的，可以修改形变中心点
transform-origin:10px 5px; 第一个参数是水平方向，第二个参数是垂直方向
可以写百分比也可以写方位单词
（5）透视属性
近大远小
perspective:500px;数值越小越明显
这个属性必须添加到要呈现这个效果的元素的父元素上面
（6）盒子阴影和文字阴影
盒子阴影：
box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内/外（默认为外阴影，内阴影为inset）;
前四项单位为像素，后四项可以省略
阴影颜色默认是盒子内容的颜色
文字阴影：
text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色
颜色可以省略，默认是文字的颜色
14.动画模块
与过渡的区别：过渡动画必须人为的触发才能执行，动画模块不需要人为触发
1.告诉系统需要执行哪些动画
animation-name:abc;
2.需要告诉系统动画执行多长时间
animation-duration:1s;
3.创建一个动画
@keyframe abc{
from{
原始属性
}
to{
最终属性
}
}
第二种创建动画的方式：
@keyframe abc{
0%{}
1%{}
...
}
连写方式：
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
后四项可以省略
15.3D转换模块
想让一个元素从2D转换成3D，只需要给它的父元素添加一个transform-style属性，然后设置为preserve-3d即可
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
