CSS
# CSS
CSS 指层叠样式表 (Cascading Style Sheets)
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
# css能做什么
1、装饰页面。2、排版布局。
1
# css如何使用
1、内嵌样式
<div style="color: blue;">内容</div>
2、内联样式
<style></style>
3、外联样式
<link rel="stylesheet" href="./index.css">
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# css优先级（权重）
css优先级（权重）
作用范围越小，权重越高。
同样的作用范围，后面的样式覆盖前面的样式。
1
2
3
2
3
# css选择器
//必记：id、class、元素、后代nth-child、兄弟选择、伪类、通配符
1、id选择器 例如：#a。id就像人的身份证一样，每个人都只有一个
2、class选择器 例如：.a。 class就像类别，每个人可以有多个类别
3、元素选择器 例如：div。可以选择所有的元素。
4、后代选择器 例如：.a .b。.a>.b。 可以选择.a里面的.b
指定选择第一个子元素 例如：ul li:first-child
指定选择最后一个子元素 例如：ul li:last-child
指定选择某个指定的子元素 例如：ul li:nth-child(2)
指定选择某个制定的子元素（兼容ie678） 例如：ul li:first-child+li
指定选择偶数的子元素 例如：ul li:nth-child(even).ul li:nth-child(2n+2)
指定选择奇数的子元素 例如：ul li:nth-child(odd).ul li:nth-child(2n+1)
5、兄弟选择器（相邻选择器）例如：div,p
6、伪类选择器 例如：div:hover。鼠标悬停上去div触发的效果
7、伪元素 例如ul::after 在ul的最后一个子项位置添加元素
8、通配符选择 例如：*。选中所有的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 浏览器内核
浏览器内核
谷歌的chrome浏览器：旧 webkit 新 blink
苹果的safari浏览器：webkit
火狐的firefox浏览器：moz
欧朋浏览器： o
微软的ie浏览器： ms
微软的edge浏览器 Chromium
1
2
3
4
5
6
7
2
3
4
5
6
7
# css样式
# 1、字体的样式
color: red; //设置字体颜色
font-size: 60px; //字体大小
font-weight: bold; //字体加粗
font-style: italic; //字体倾斜
font-family:""; //字体
//字体设置
@font-face {
font-family: "abc";
src: url("abc.TTF");
}
div{
font-size: 60px;
font-family:'abc';//使用字体
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 2、文本样式
text-decoration: underline; //下滑线
text-decoration: line-through; //删除线
text-align: center; //文本的水平居中
line-height:100px; //行高
display: table-cell;//转成表格元素
vertical-align: middle;//垂直居中
letter-spacing: 20px; //字间距
text-indent: 2em; //首行缩进2个字节
word-break: break-all; //所有的英文不管是否是一个单词都会换行
word-wrap: break-word; //识别到一个单词就会自动换行
overflow: hidden;//超出的部分隐藏
text-overflow: ellipsis;//超出的文本设置为省略号
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//垂直居中
<div>
<p>内容1</p>
<p>内容2<p>
</div>
<style>
div{
width: 300px;
height: 300px;
border: 1px solid;
display: table-cell;
vertical-align:middle;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3、装饰样式
width //宽度
height //高度
border: 1px solid #; //边框 （边框粗细 边框类型 边框颜色）
background //背景 no-repeat 不重复 center 居中
linear-gradient(to right, red , yellow) //css3 线性渐变 (方向，初始颜色，结束颜色)
background-size: 100% 100%; //背景尺寸
border-radius: 20px; //css3 圆角边框
opacity: 0.5; //css3 透明度 0～1
box-shadow: 5px 5px 5px 5px #000; //css3（x轴、y轴、阴影偏移度、阴影大小、阴影颜色）
text-shadow: 2px 2px 2px #000; //css3（x轴、y轴、阴影偏移度、阴影颜色）
transform //css3 变形
scale(0.5,1) //缩放（x轴，y轴）
rotate(30deg) //旋转（角度）
skew(30deg,30deg)//倾斜角度
translate(200px,200px) //平移
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 4、排版布局样式
# 1)盒子模型
margin 外边距
padding 内边距
边距塌陷：块级元素的上下外边距会出现边距塌陷。
解决方法：在父级元素添加 overflow:hidden;
1
2
3
4
5
2
3
4
5
# 2)浮动
浮动：浮动元素可以理解为浮起来的木板，非浮动元素可以立即为水流
浮动元素属于非正常文档流
浮动元素拥有把所有 元素变成了行内块级的特性
1
2
3
2
3
浮动塌陷:当一个元素里面只有浮动的元素，那么就会出现浮动塌陷
清除浮动
兼容所有浏览器的清除浮动写法
.clearFix::after{
content: "";/*内容为空*/
visibility: hidden;/*隐藏*/
height: 0;/*高度为0*/
display: block;/*转位块级元素*/
clear: both;/*清除浮动*/
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3)定位
相对定位 position: relative; 相对于自己定位。
绝对定位 position: absolute; 相对于有相对定位的父级元素进行定位，没有的时候就相对于body。
固定定位 position: fixed; 相对于浏览器定位。
1
2
3
4
5
2
3
4
5
# 4)弹性布局
css3样式
//父级元素样式
display: flex; //弹性布局
flex-direction //设置主轴的方向
row //主轴为水平方向，起点在左端。
row-reverse //主轴为水平方向，起点在右端。
column //主轴为垂直方向，起点在上沿。
column-reverse //主轴为垂直方向，起点在下沿。
flex-wrap //设置是否换行
wrap //换行
justify-content //主轴的对齐方式
center //居中
space-between //两端对齐
space-around //每个元素两侧的间隔相等
space-evenly //每个间隔都相等
align-items //交叉轴对齐方式
center //居中
align-content //多行对齐方式
center //居中
//子级元素样式
order //属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow //属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
//如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
flex-shrink //属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
//如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
//负值对该属性无效。
flex-basis //属性定义了在分配多余空间之前，项目占据的主轴空间
//效果跟宽度一样
flex //flex-grow, flex-shrink 和 flex-basis的简写
//1 1 auto,0 0 auto
//建议用这个
align-self //单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 5)网格布局
//父元素
display:grid;
grid-template-columns:repeat(3,1fr);//定义每一列的列宽 1fr代表1个片段，总宽占的比例 repeat是重复
grid-template-rows: repeat(3,1fr);//定义每一行的行宽
//子元素
grid-column-start: 1;//控制单元格的从哪里开始
grid-column-end: 3;//控制单元格的从哪里结束
grid-row-start: 1;
grid-row-end: 3;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
编辑 (opens new window)
上次更新: 2022/04/24, 13:33:34