1. CSS
1.1 为什么使用CSS
- 美化网页
- 元素的属性不能改变所有的样式
- 元素的属性使代码比较臃肿,结构与样式没有分开
1.2 怎样使用CSS
- 行内样式表
- 只能适用于单个元素
- 没有实现结构与样式分离
- 内部样式表
- 适用于多个选择器相同的样式
- 部分实现了结构与样式的分离
- 外部样式表
- 适用于当前站点的任何html文件
- 完全实现了结构与样式的分离
<header style="color: red;">网页头部</header>
/* 选择器 { 属性:属性值 } */ p { color: blue; }
<link rel="stylesheet" href="style.css">
1.3 CSS字体属性
header { font-family: SimSun; font-family: "宋体"; /* 默认大小 16像素 */ font-size: 28px; font-weight: bolder; font-style: oblique; } div { font: oblique bolder 40px SimSun; }
1.4 CSS外观属性
header { color: red; color: rgb(10, 100, 200); color: #fedfe1; color: hsl(120,100%,100%); } div { /* 首行缩进 */ text-indent: 2em; /* 文本水平居中 */ text-align: center; /* 文本行高属性:属性值等于高度,垂直居中 对于块级元素,指定块元素最小高度*/ line-height: 100px; /* 文本描述:上划线 */ text-decoration: overline; /* 去掉li小点 */ list-style: none; /* 多行文本框取消拖拽 */ resize: none; /* 圆角 */ /* 四个值:左上,右上,右下,左下 */ /* 三个值:左上,右上左下,右下 */ /* 两个值:左上右下,右上左下 */ border-radius: 10px; }
2. CSS选择器
选择器:通过特定的符号去选择指定的元素
分类:
- 基础选择器:标签选择器、类名选择器、ID选择器、多类名选择器、通配符选择器
- 复合选择器:交集选择器、并集选择器、后代选择器、子代选择器
- 伪类选择器
2.1 基础选择器
/* 基础选择器:标签选择器、类名选择器、ID选择器、多类名选择器、通配符选择器 */ /* 标签选择器:通过标签的名获取指定元素 */ header { color: antiquewhite; } /* 类名选择器:通过标签的类名获取指定元素,前加. 多类名选择器:多个类名之间用空格隔开 */ .box1 { color: aqua; } /* ID选择器:通过ID名获取指定元素。 ID不可重复 */ #box-list { color: blue; } /* 通配符选择器:选择所有元素 */ * { text-align: center; }
2.2 复合选择器
/* 复合选择器:交集选择器、并集选择器、后代选择器、子代选择器 */ /* 交集选择器:既是...,又是... 两个选择器之间紧挨着,不能加空格 */ div.box2 { color: red; } .box1.box2 { font-family: SimSun; font-size: 40px; } /* 并集选择器:多个选择器之间用逗号隔开,且每个选择器独占一行 */ .box3, .box1 { font-weight: bolder; } /* 子代选择器:必须是一级父子关系 */ .list1>li { color: purple; } /* 后代选择器:后代都可以 */ .list1 div { font-size: 70px; }
2.3 伪类选择器
/* 单击前的样式 a标签*/ .link1:link { color: red; } /* 鼠标移上去的样式 (通用)*/ .link1:hover { color: pink; } /* 单击时的样式 (通用)*/ .link1:active { color: green; } /* 单击后的样式 a标签*/ .link1:visited { color: brown; }
3. 标签的显示模式
标签显示模式:
3.1 块状元素
hn、p、div、ul、ol、li、dl、dd、dt、table、caption、thead、tbody、tr、td、th、header、footer、section、artical、aside
特点:
- 始终独占一行可以包含任何元素(h标签不能包含h标签,p标签不能包含p标签)
- 有默认宽高,是父元素的100%,高度是内容高度
- 宽高、外边框,内边距,边框可以设置
3.2 行内元素
span、a、label、b/shrong、i/em、u/ins、s/del
特点:
- 有默认宽高,宽高是内容所撑起的宽高
- 宽高设置无效
- 不能包含块状元素,可以包含行内元素和文本内容
- 相邻的行内元素在同一行显示
- 边框可以设置,内外边距水平方向可以设置,垂直不行
3.3 行内块元素
img、input、select、option、datalist、textarea、button
特点:
- 相邻的行内块元素在同一行显示
- 有默认宽高
- 宽高、外边框,内边距,边框可以设置
- 一般不包含其他元素
3.4 显示模式的转化:
- 转化为块状元素:display:block
- 转化为行内元素:display:inline
- 转化为行内块元素:display:inline-block
4. 背景
4.1 分写
.box1 { width: 600px; height: 350px; background-color: violet; background-image: url(images/02.png); /* 平铺属性 */ background-repeat: no-repeat; /* 位置属性:水平、垂直方向 */ background-position: right bottom; background-position: 30px 0px; background-position: 0 50%; /* 尺寸属性 */ background-size: 600px 350px; background-size: 80% 80%; background-size: cover; }
4.2 总写
.box2 { width: 600px; height: 350px; /* 背景色 地址 平铺属性 位置 */ background: red url(images/02.png) no-repeat 100% 100%; background-size: 60%; }
5. CSS三大特性
5.1 CSS特性
- 层叠性:后者覆盖前者
- 继承性:子(后代)承父业
- 优先级(权重性):style > !import > ID选择器 > 类名选择器 > 标签选择器 > 通配符选择器 (同一元素)
5.2 优先级比较
- 标签 0 0 0 1
- 类名 0 0 1 0
- ID 0 1 0 0
- style 1 0 0 0
6. 盒子模型
网页布局的本质:拼接盒子的过程
盒子模型包含:内容、宽高、边框、内边距、外边距
6.1 边框
.box1 { width: 100px; height: 80px; border-top: 1px solid black; /* 实线 solid、虚线 dashed、双实线 double、点线 dotted*/ /* 边框会影响盒子尺寸 */ /* 上边框、下边框、左边框、右边框 */ border: 10px 10px 10px 10px solid black; }
6.2 内边距
.box1 { width: 200px; height: 100px; /* 上右下左 */ padding: 10px 40px 40px 10px; /* 上、左右、下 */ padding: 10px 40px 10px; /* 上下、左右 */ padding: 10px 40px; /* 内边距会影响盒子尺寸 */ }
6.3 外边距
外边距:
- 元素与其他元素与浏览器的距离
- 任何元素都有默认的外边距
- 外边距不会影响盒子尺寸
-
相邻元素的垂直外边距塌陷:两元素垂直相邻,外边距取较大值
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)
-
如果父元素没有上边框且没有上内边距,子元素的上外边距就是父元素的上外边距
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
-
可以让一个盒子实现水平居中margin: auto; 必须满足:
- 必须是块级元素。
- 盒子必须指定了宽度
-
消除嵌套外边距合并:
- 给父元素加上边框
- 给父元素加上内边距
- 给父元素添加overflow:hidden
.box1 { /* 同padding */ margin-top: 30px 10px 10px 30px; /* text-align 内容的水平居中: 相对于盒子的宽度局中(盒子必须有宽度) 行内元素和文本都行 包含的块状、行内块元素不会水平居中 */ }
7. 浮动与定位
7.1 浮动
- 标准流:元素按照本身特性进行排列
- 浮动:元素脱离标准流,漂浮在其它元素之上
浮动属性:float
浮动的分类 左浮动left、右浮动right
.box1 { float: left; float: right; }
特点:
- 浮动的元素漂浮在其他元素之上
- 浮动不占位置
- 同时浮动的元素在同一行上显示
- 浮动后的元素不会超出父元素范围,包括内边距和边框
- 浮动后的元素自动转化为行内块元素
7.2 清除浮动
浮动的影响: 浮动后的元素不占位置,不能撑开父元素的高度
清除浮动:
- 额外标签法:在父元素里边的最后添加额外的标签 clear: left\right\both
- 给父元素添加 overflow:hidden
- 伪元素清除 两个冒号是伪元素
.clearfix::after { content: ""; display: block; clear: both; }
- 双伪元素清除 display:table
.clearfix::before, .clearfix::after { content: ""; display: table; clear: both; }
7.3 定位
定位:把元素固定在一个位置上
分类:静态定位、相对定位、绝对定位、固定定位
tips: 元素添加了绝对定位和固定定位之后,元素转换为行内块模式
/* 定位属性:position 边偏移量:left、right、top、bottom */ .box { position: absolute; top: 400px; left: 400px; } /* 静态定位 static 标准流布局 */ /* 相对定位 relative 相对于元素本身定位 可以使用边偏移量 没有脱标 占位置 不受父元素影响,只跟本身位置相关 */ /* 绝对定位 absolute 相对于视口定位(父元素没有定位) 如果父元素相对定位 relative,则相对于父元素定位 可以使用 脱标 不占位置 分情况,总能超出父元素范围 */ /* 固定定位 fixed 相对于浏览器定位 可以使用 脱标 不占位置 和父元素无关 */
7.4 overflow:hidden的作用
- 溢出的内容隐藏掉
- 清除浮动的影响
- 清除嵌套外边距塌陷
8. 高级技巧
8.1 显示省略号
/* 强制文本同一行显示 */ white-space: nowrap; /* 溢出内容隐藏 */ overflow: hidden; /* 省略号 (缺一不可)*/ text-overflow: ellipsis;
8.2 光标
cursor: default; /* 默认 */ cursor: pointer; /* 小手 */ cursor: move; /* 拖动 */ cursor: text; /* 文本 */
8.3 轮廓
轮廓:获取焦点时,四周显示的线
outline: 0;
8.4 行内块元素
文本内容或者行内元素相对于同一行内块元素垂直居中
vertical-align: middle;
清除行内块元素默认边距 : 转化为块元素并浮动
display: block; float: left;
相邻行内块元素,其中一个设置外边距,相邻的也受到影响:
给设置外边距的行内块元素设置
vertical-align:top;
8.5 元素的显示与隐藏
元素的隐藏:
-
display: none
没有删除结构,只是通过样式隐藏
不占位置
display:block (显示)
-
visibility: hidden
没有删除结构,只是通过样式隐藏
占位置
-
opacity: 0
没有删除结构,只是通过样式隐藏
占位置
-
overflow: hidden (隐藏溢出的子元素)
8.6 版心与布局流程
“版心”(可视区) 是指网页中主体内容所在的区域 960px 980px 1000px 1200px 1190px
布局流程:由外到内,由大到小
- 一列固定宽度且居中
- 两列左窄右宽
- 通栏平均分布
8.7 精灵图
为什么要使用精灵图?减少服务器的压力,提高加载的速度
精灵图:将多张图片拼接在一张图片上,通过背景的位置属性选择合适位置即可
8.8 字体图标
unicodes引入、font-class引入、symbol引入