HTML&CSS
HTML跳转页面
1 |
|
1 |
|
1 |
|
HTML表格练习
1 |
|
HTML表单练习
1 |
|
CSS新闻练习
1 |
|
CSS商品信息
1 |
|
CSS字体和文本样式
字体大小
1 | /* 浏览器默认字体大小 16px */ |
1 | <div style="font-size: 16px;">Hello World!</div> |
字体粗细
1 | font-weight: 400; |
属性值 | 数值 | 效果 |
---|---|---|
normal | 400 | 正常 |
bold | 700 | 加粗 |
1 | <div style="font-weight: normal">Hello World!</div> |
字体样式
1 | font-style: normal; |
属性值 | 效果 |
---|---|
normal | 正常 |
italic | 倾斜 |
1 | <div style="font-style: normal;">Hello World!</div> |
字体系列
1 | /* 优先使用:微软雅黑 > 黑体 */ |
操作系统 | 默认字体 |
---|---|
windows | 微软雅黑 |
Mac | PingFang SC |
- 常见字体系列
常见字体系列 | 特点 | 场景 | 该系列常见字体 |
---|---|---|---|
无衬线字体(sans-serif) | 文字笔画粗细均匀,并且首尾无装饰 | 网页 | 黑体、Arial |
衬线字体(serif) | 文字笔画粗细不均匀,并且首尾有装饰 | 报刊书籍 | 宋体、Times New Roman |
等宽字体(monospace) | 每个字母或文字的宽度相等 | 程序代码编写 | Consolas、 fira Code |
1 | <div style="font-family: 微软雅黑, 黑体, sans-serif;">Hello World!</div> |
文本缩进
1 | /* 首行缩进2个字符 */ |
- 取值
- 数字 + px
- 数字 + em(推荐:1em=当前标签的 font-size 大小)
1 | <p>Hello World!</p> |
文本水平对齐方式
1 | text-align: center; |
属性值 | 效果 |
---|---|
left | 左对齐(默认) |
center | 居中对齐 |
right | 右对齐 |
- 可居中的标签
- 文本
- span a
- input img
- 内容居中需要给父元素设置居中属性
1 | <p>Hello World!</p> |
文本修饰
1 | /* 常用于清除a标签默认下划线 */ |
属性值 | 效果 |
---|---|
underline | 下划线 |
line-through | 删除线 |
overline | 上划线 |
none | 无 |
1 | <p style="text-decoration: none;">Hello World!</p> |
行高
1 | line-height: 1.5; |
- 取值
- 数字 + px
- 倍数(当前标签 font-size 的倍数)
- 文本高度
- 上间距
- 文本高度
- 下间距
- 应用:
- 单行文本垂直居中:line-height=元素父元素高度
- 取消上下间距:line-height=1
1
2
3<p style="line-height: 1">Hello World!</p>
<p style="line-height: 1.5;">Hello World!</p>
<p style="line-height: 3;">Hello World!</p>
font 属性简写
-
层叠性:后面的样式覆盖前面的样式
-
复合属性
1 | font: [font-style font-weight] font-size/line-height font-family; |
1 | <div style="font: italic normal 700 24px/3 sans-serif;">Hello World!</div> |
CSS选择器
后代选择器
- 后代选择器使用
空格
来选择指定元素的后代元素。它允许你选择位于特定元素内部的所有后代元素。 - 语法
1 | 祖先元素 后代元素 { |
- 示例
1 | <style> |
- 所有div下的
所有
span,都会被设置color属性,即div标签下的儿子、孙子、曾孙子…span标签都会被设置color属性,结果中两个HelloWorld
均有颜色
子代选择器
- 使用
>
符号选择指定元素的直接子元素。与后代选择器的区别在于,它只会选择指定元素的直接后代,而不会选择嵌套在更深层级的后代元素。
1 | div>span { |
- 示例代码
1 | <style> |
并集选择器
- 并集选择器,它允许你选择多个选择器所匹配的所有元素。使用逗号(
,
)将多个选择器进行分隔。
1 | div, |
交集选择器
- 由两个选择器直接连接构成,选中二者各自元素范围的交集,第一个必须是标签选择器,第二个必须是类选择器或者ID选择器
1 | div.one { |
- 示例代码
1 | <style> |
hover伪类选择器
- 它用于选中鼠标悬停在元素上时的状态。
1 | a:hover { |
- 例如上面的hover选择器,当鼠标悬停于超链接上时,链接字体变为红色,并且失去下划线
1 | <style> |
Emmet写法
- 简写语法,快速生成代码
- VS Code等代码编辑器自带
语法 | 示例 | 效果 |
---|---|---|
标签名 | div |
<div></div> |
类选择器 | .red |
<div class="red"></div> |
id 选择器 | #one |
<div id="one"></div> |
交集选择器 | p.red#one |
<p class="red" id="one"></p> |
子代选择器 | ul>li |
<ul><li></li></ul> |
内部文本 | ul>li{内容} |
<ul><li>Hello</li></ul> |
创建多个 | ul>li*3 |
<ul><li></li><li></li><li></li></ul> |
创建自增 | ul>li{$}*3 |
<ul><li>1</li><li>2</li><li>3</li></ul> |
同级 | div+p |
<div></div><p></p> |
CSS背景相关属性
背景颜色
1 | /* 默认背景色是透明;背景色在背景图之下*/ |
背景图片
1 | background-image: url(图片路径); |
- 示例
1 | <style> |
背景平铺
- background-repeat
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 水平方向平铺(x 轴) |
repeat-y | 垂直方向平铺(y 轴) |
- 示例
1 | <style> |
背景位置
1 | background-position: 水平方向位置 垂直方向位置; |
-
属性值
- 方位名词(最多只能表示 9 个位置)
- 水平方向:left center right
- 垂直方向:top center bottom
- 数字+px(坐标)
- 坐标轴 原点(0,0) 盒子的左上角
- x 轴 水平方向
- y 轴 垂直方向
- 图片左上角与坐标原点重合
- 方位名词(最多只能表示 9 个位置)
-
示例
1 | <style> |
背景属性连写
1 | /* 不分先后顺序 */ |
- 示例
1 | <style> |
img标签和背景图片的区别
- img
- 不设置高宽会默认显示
- 重要突出的图使用 img
- background-image
- 需要设置元素尺寸
- 装饰性图片使用背景图
CSS盒模型
元素显示模式
块级元素
- 独占一行
- 宽度默认为父元素 100%;高度默认由元素撑开
- 可以设置宽度和高度
- 代表标签
1 | div p h ul li dl dt dd form |
行内元素
- 一行显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽度和高度
- 代表标签
1 | a span b u i s strong ins em del |
行内块元素
- 一行显示多个
- 可以设置宽度和高度
- 代表标签
1 | input textarea button select |
元素显示模式转换
- display: block;
属性值 | 效果 |
---|---|
block | 块级元素 |
inline-block | 行内块元素 |
inline | 行内元素 |
HTML 嵌套规范注意点
- 块级元素一般作为大容器;
- 可以嵌套文本、块级元素、行内元素、行内块元素
- a 标签内部可以嵌套任意内容
盒子模型
- 盒子
- 标签可以看做是一个盒子
- 盒子模型:
- 外边距区域 margin
- 边框区域 border
- 内边距区域 padding
- 内容区域 content
- 盒子内容的宽高
- width
- height
1 | .box { |
边框 border
1 | /* 粗细 线条样式 颜色(不分先后顺序)*/ |
- 线条可选样式
- solid 实线
- dashed 虚线
- dotted 点线
- 布局顺序:从外到内,从上到下
内边距 padding
1 | /* 可取 4 个值、3 个值、2 个值、1 个值 */ |
- 规律:顺时针,值不够看对边
新浪导航实例
1 |
|
外边距 margin
- 设置值的方式和 padding 类似
1 | /* 可取 4 个值、3 个值、2 个值、1 个值 */ |
- 使用 margin 让元素居中
1 | .box { |
清除浏览器默认样式
- JD的做法
1 | * { |
- 常用的清除样式
1 | * { |
- 去掉列表前的符号
1 | ul { |
外边距折叠现象
- 合并现象
- 场景:垂直布局的块级元素,上下的 margin 会合并
- 结果:最终两者距离为 margin 的最大值
- 解决方法:只给其中一个盒子设置 margin
1 | <style> |
- 塌陷现象
- 场景:相互嵌套的块级元素,子元素的 margin-top 会作用在父元素上
- 结果:导致父元素一起往下移动
- 解决方法:
- 给父元素设置 border-top 或者 padding-top(分隔父子元素的 margin-top)
- 给父元素设置 overflow:hidden;
- 转换为行内块元素
- 设置浮动
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<style>
.box-father {
width: 200px;
height: 200px;
background-color: #b2b6b6;
}
.box-child {
width: 100px;
height: 100px;
background-color: #7f9faf;
margin-top: 100px;
}
.resolve {
overflow: hidden;
margin-top: 20px;
}
</style>
<div class="box-wrap">
<!-- 元素的margin-top 作用在了父元素上 -->
<div class="box-father">
<div class="box-child"></div>
</div>
<!-- [完美解决方案]给父元素设置 overflow:hidden; -->
<div class="box-father resolve">
<div class="box-child"></div>
</div>
</div>
行内标签的 margin/pading
- 垂直方向不生效,使用行高 line-height 实现
1 | <style> |
新闻列表
1 |
|
浮动
结构伪类选择器
- 作用:根据元素在 HTML 中的结构关系查找元素
- 优势:减少对 HTML 中类的依赖,有利于保持代码整洁
- 场景:常用于查找某父级选择器中的子元素
选择器 | 说明 |
---|---|
E:first-child | 父元素中的第一个子元素 E |
E:last-child | 父元素中的最后一个子元素 E |
E:nth-child(n) | 父元素中的第 n 个子元素 E |
E:nth-last-child(n) | 父元素中的倒数第 n 个子元素 E |
- 其中
n
可以写公式
功能 | 公式 |
---|---|
偶数 | 2n even |
奇数 | 2n+1 2n-1 odd |
找到前 5 个 | -n+5 |
找到从第 5 个往后 | n+5 |
伪元素
- 元素:HTML 标签
- 伪元素:CSS 模拟出标签效果,装饰性内容
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
- 注意点:
- 必须设置 content 属性才能生效
- 伪元素默认是行内元素
1 | <style> |
标准流
- 标准流:又称为文档流,浏览器排列元素的规则
- 常见标准流的排版规则
- 块级元素:从上往下,垂直布局,独占一行
- 行内元素或行内块元素:从左往右,水平布局,空间不够自动换行
浮动
- 早期:图文环绕
- 现在:网页布局
1 | float: left/right; |
- 行内元素或行内块元素换行书写会产生一个空格
- 浮动的特点
- 浮动的标签默认顶对齐,可使用 margin-top 修改距离顶部距离
- 浮动元素会脱离标准流(脱标),在标准流中不占用位置
- 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面,左右浮动
- 浮动标签具备行内块特点:
- 一行显示多个
- 可设置宽高
- 浮动之后盒子水平居中不生效 margin: 0 auto;
属性书写顺序
- CSS书写顺序:浏览器执行效率更高
- 浮动/ display
- 盒子模型:margin border padding宽度高度背景色
- 文字样式
小米模块案例
1 |
|
导航栏案例
1 |
|
清除浮动
- 父子级标签,子级浮动,父级没有设置高度,会导致后面的标准流盒子受影响
- 正常情况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<style>
.box {
margin: 0 auto;
width: 1000px;
height: 300px;
background-color: pink;
}
.left {
float: left;
width: 300px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 680px;
height: 300px;
background-color: skyblue;
}
.btm {
height: 100px;
background-color: green;
}
</style>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="btm"></div>- left和right是box的子级,现在我们将box的height属性注释掉,此时btm会跑到上面去。
- 解决方案
- 直接设置父级元素高度
- 额外标签:在父级元素最后添加一个块级标签
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<style>
.box {
margin: 0 auto;
width: 1000px;
background-color: pink;
}
.left {
float: left;
width: 300px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 680px;
height: 300px;
background-color: skyblue;
}
.btm {
height: 100px;
background-color: green;
}
+ .clearfix {
+ clear: both;
+ }
</style>
<div class="box">
<div class="left"></div>
<div class="right"></div>
+ <div class="clearfix"></div>
</div>
<div class="btm"></div>- 单伪元素清除法
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<style>
.box {
margin: 0 auto;
width: 1000px;
background-color: pink;
}
.left {
float: left;
width: 300px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 680px;
height: 300px;
background-color: skyblue;
}
.btm {
height: 100px;
background-color: green;
}
+ .clearfix::after {
+ content: '';
+ display: block;
+ clear: both;
+ }
</style>
- <div class="box">
+ <div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="btm"></div>- 双伪元素清除法
1
2
3
4
5
6
7
8
9
10/* 解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}- 给父元素设置 overflow:hidden
1
overflow: hidden;
定位
网页常见布局方式
- 标准流
- 块级元素独占一行 -> 垂直布局
- 行内元素/行内块元素一行显示多个 -> 水平布局
- 浮动
- 原本垂直布局的块级元素变成水平布局
- 定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
- 让盒子固定在页面某一位置
使用定位
- 设置定位方式
- 属性名: position
定位方式 | 属性值 |
---|---|
静态定位 | static |
相对定位 | relative |
绝对定位 | absolute |
固定定位 | fixed |
- 设置偏移值
- 偏移值可以设置水平和垂直方向
- 选取原则:就近原则
- 偏移方向
- 水平距离左边 left
- 水平距离右边 right
- 垂直距离上边 top
- 垂直距离下边 buttom
相对定位
- 特点
- 占有原来的位置
- 相对于自己之前的位置
- 不改变显示模式
1 | position: relative |
绝对定位
- 特点
- 相对于非静态定位的父元素定位
- 不占有原来的位置
- 改变显示模式
- 默认以浏览器 body 定位
1 | position: absolue |
- 子绝父相:父级相对定位,子级绝对定位
- 绝对定位查找父级的方法:逐级向上,最终是浏览器窗口
固定定位
- 特点
- 脱标-不占位置
- 相对于浏览器定位
- 具备行内块特点
1 | positions: fixed; |
元素层级关系
- 不同布局方式元素的层级关系:标准流 < 浮动 < 定位
- 同层级,后写的会覆盖在先写的元素
- 设置元素层级
1 | /* 默认值0;数值越大,显示越靠前 */ |
案例:子盒子在父盒子中水平居中
- 方式一:需要手动计算盒子大小
1 | <style> |
- 方式二:transform
1 | <style> |
装饰
垂直对齐 vertical-align
- 基线(baseline):浏览器文字类型元素排版中存在用于对齐的基线
属性值 | 效果 |
---|---|
baseline | 默认,基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
1 | vertical-align: middle; |
- 示例Demo
1 | <style> |
光标类型 cursor
属性值 | 效果 |
---|---|
default | 默认,箭头 |
pointer | 小手,提示可点击 |
text | 工字型,提示可选择 |
move | 十字光标,提示可移动 |
边框圆角 border-radius
1 | /* 单值 4个角一样*/ |
- 正圆
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半
1
2
3
4
5
6
7
8
9
10<style>
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: skyblue;
}
</style>
<div class="box"></div> - 胶囊按钮
- 盒子设置为长方形
- 设置边框圆角为高度的一半
1
2
3
4
5
6
7
8
9
10<style>
.box {
width: 100px;
height: 50px;
border-radius: 25px;
background-color: skyblue;
}
</style>
<div class="box"></div>
溢出部分效果 overflow
- 溢出部分:盒子内容部分超出盒子范围的区域
属性值 | 效果 |
---|---|
visible | 默认,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出都显示滚动条 |
auto | 根据是否溢出,自动显示或隐藏滚动条 |
- 示例Demo
1 | <style> |
元素本身隐藏
1 | /* 占位隐藏 */ |
- 示例Demo:鼠标移动过去显示二维码
1 |
|
元素整体透明 opacity
- 属性值:
- 0-1 之间的数字;
- 0 完全透明,1 完全不透明
- 示例Demo
1 | <style> |
半透明
1 | background-color: rgba(0, 0, 0, 0.5); |
- shiliDemo
1 | <style> |
精灵图(雪碧图, sprite)
背景图片大小 background-size
1 | background-size: 宽度 高度; |
取值 | 场景 |
---|---|
数字+px | 简单方便 |
百分比 | 相对于当前盒子自身的宽高百分比 |
contain | 包含,背景图等比缩放,直到不会超出盒子的最大,可能有留白 |
cover | 覆盖,背景图等比缩放,直到刚好填满整个盒子没有空白,图片可能显示不全 |
- background 连写
1 | background: color image repeat position/size; |
盒子阴影 box-shadow
参数 | 作用 |
---|---|
h-shadow | 必须,水平偏移量,允许负值 |
v-shadow | 必须,垂直偏移量,允许负值 |
blur | 可选,模糊度 |
spread | 可选,阴影扩大 |
color | 可选,阴影颜色 |
inset | 可选,将阴影改为内部阴影 |
1 | <style> |
过渡 transition
- 让元素样式慢慢变化
- 常配合 hover 使用
1 | transition 属性 时长, 属性 时长; |
参数 | 取值 |
---|---|
过渡属性 | 所有属性 all;具体属性 width |
- 注意:
- 过渡需要默认状态和 hover 样式不同,才能有过渡效果
- transition 属性给需要过渡的元素本身加
- transition 属性设置在不同状态中,效果不同
- 给默认状态设置,鼠标移入移出都有过渡效果
- 给 hover 状态设置,鼠标移入有过渡效果,移出没有过渡效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
transition: all 2s;
}
.box:hover {
width: 200px;
background-color: pink;
}
</style>
<div class="box"></div>
评论