HTML+CSS从入门到精通

文本格式化标签

strong 加粗

ins 下划线

em 倾斜

del 删除线

图片标签的介绍

src = "目标图片的路径"

alt = "替换文本，当图片加载失败时，显示的文本"

title = "提示文本，鼠标悬停时，显示的文本"

width = "数字"

hight = "数字"

如果只设置了width或hight中的一个，另一个没设置会自动等比例缩放（此时图片不会变形）
如果同时设置了width和hight两个，若设置不当此时图片可能会变形

相对路径

概念普及：

当前文件：当前的html网页
目标文件：要找到的图片

相对路径：从当前文件开始出发找目标文件的过程

相对路径分类：

<img src = "目标图片.gif">
<img src = "./目标图片.gif">

下级目录
- 　<img src = "images/目标图片.gif">
上级目录
- <img src = "../images/目标图片.gif">

音频标签

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

音频标签目前支持三种格式：MP3、Wav、Ogg

视频标签

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

视频标签目前支持三种格式：MP4、WebM、Ogg

超链接

特点：

双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的target属性

属性名：target
属性值：目标网页的打开形式

取值	效果
_self	当前窗口跳转
_blank	新窗口跳转

列表-无序，有序和标题

无序列表

标签组成：

标签名	说明
ul	表示无序列表的整体，用来包裹li标签
li	表示无序列表的每一项，用来包含每一行的内容

显示特点：

列表的每一项前默认显示圆点标识

注意点：

ul标签中只允许包含li标签

li标签可以包含任意内容

1 <ul type="disc"> 
2     <li>第一项</li>
3     <li>第二项</li>
4 </ul>

type属性：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）

去掉列表的符号

ul{

list-style: none;

}

有序列表

场景：在网页中表示一组有顺序之分的列表

标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一项前默认显示序号标识

注意点：

ol标签中只允许包含li标签

li标签可以包含任意内容

<ol type="1" start="2">
    <li>第一项</li>
    <li>第二项</li>
</ol>

type属性：start是从数字几开始

　　1 数字列表，默认值

　　A 大写字母

　　a 小写字母

标题列表

1 <dl>
2     <dt>标题1</dt>
3     <dd>内容1</dd>
4     <dt>标题2</dt>
5     <dd>内容1</dd>
6     <dd>内容2</dd>
7 </dl>

自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

标签组成：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点：

dd前会默认显示缩进效果

注意点：

dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意字符

表格标签

1.1 表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示数据

基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

注意点：标签的嵌套关系：table > tr > td

1.2 表格的相关属性

场景：设置表格基示效果

常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：实际开发时针对样式效果推荐用CSS设置

1.3 表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）

1.4 表格的结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：

表格结构标签内部用于包裹tr标签
表格的结构标签可以省略

1.5 合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

合并单元格步骤：

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁

- 上下合并→只保留最上的，删除其他
- 左右合并→只保留最左的，删除其他

　　 3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

注意点：

只有同一个结构标签中的单元格才能合并，不能趺结构标签合并（不能跨：thead、tbody、tfoot）

表单标签

1.1 input系列标签的基本介绍

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input

input标签可以通过type属性值的不同，展示不同效果

type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

1.2 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

属性名	说明
placeholder	占位符。提示用户输入内容的文本

1.3 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

属性名	说明
name	分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked	默认选中

注意点：

name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

1.4 input系列标签-文件选择

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

1.5 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

标签名	type属性值	说明
input	submit	提交按钮。点击之后提交数据给后端服务器
input	reset	重置按钮。点击之后恢复表单默认值
input	button	普通按钮。默认无功能，之后配合js添加功能

注意点：

如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可

2.1 button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值（同input的按钮系列）：

标签名	type属性值	说明
button	submit	提交按钮。点击之后提交数据给后端服务器
button	reset	重置按钮。点击之后恢复表单默认值
button	button	普通按钮。默认无功能，之后配合js添加功能

注意点：

谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等

3.1 select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

4.1 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

注意点：

右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置

5.1 label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法1：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的i语义化标签d属性值

使用方法2：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可

语义化标签

1.1 没有语义的布局标签 - div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

2.1 有语义的布局标签（了解）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文；

常见字符实体：空格 

CSS

一、基础认识

1.1 CSS的介绍

CSS：层叠样式表

1.2 CSS 语法规则

写在哪里？

css写在style标签中，style标签一般写在head标签里面，title标签下面

二、CSS引入方式

2.1 CSS引入方式

内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入
<link rel="stylesheet" href="">

行内式：CSS写在标签的style属性中

提示：不推荐，之后会配合js使用

2.2 CSS引入方式 - 小结

CSS常见三种引入方式有内嵌式，外联式，行内式

CSS常见三种引入方式特点区别
引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

CSS特性

1.1 继承性的介绍

特性：子元素有默认继承父元素样式的特点

可以继承的常见属性（文字控制属性都可以继承）

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
......

注意点：

可以通过调试工具判断样式是否可以继承

2.1 层叠性的介绍

特性：

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

3.1 优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：

!important写在属性值的后面，分号的前面！
!important不能提升继承的优先级，只要是继承优先级最低！
实际开发中不建议使用 !important。

3.2 权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）

复合选择器中：（第一级）行内样式的个数（第二级）id选择器的个数（第三级）类选择器的个数（第四级）标签选择器的个数

比较规则：

先比较第一级数字，如果比较出来了，之后的统统不看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
......
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）

注意点：!important如果不是继承，则权重最高！

选择器

1. 选择器的作用

选择页面中对应的标签，方便后续设置样式

2. 标签选择器

结构：标签名{ css属性名:属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

3. 类选择器

结构：.类名{css属性名:属性值;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

4. id选择器

结构：#id属性值{css属性名:属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

5. 通配符选择器

结构：*{css属性名:属性值;}

作用：找到页面中所有的标签，设置样式

注意点：

开发中使用极少，只会在极特殊情况下才会用到
在小页面中可能会用于去除标签默认的margin和padding

选择器进阶

1.1 后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2{ css }

结果：

在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式

注意点：

后代包括：儿子、孙子、重孙子......
后代选择器中，选择器与选择器之间通过空格隔开

1.2 子代选择器：>

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1>选择器2{ css }

结果：

在选择器1所找到的子代（儿子）中，找到满足选择器2的标签，设置样式

注意点：

子代只包括：儿子
子代选择器中，选择器与选择器之间通过 > 隔开

2.1 并集选择器：,

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1，选择器2{ css }

结果：

找到选择器1 和选择器2 选择中的标签，设置样式

注意点：

并集选择器中的每组选择器之间通过，分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

3.1 交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2{ css }

结果：

（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面

4.1 hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover{ css }

注意点：

伪类选择器选中的元素的某种状态

字体和文本样式

学习路径：

1、字体样式

字体大小：font-size
字体粗细：font-weight
字体样式：font-style
字体类型：font-family
字体类型：font属性连写

2、文本样式

文本缩进：text-indent
文本水平对齐方式：text-align
文本修饰：text-decoration

3、line-height行高

1.1 字体大小

属性名：font-size

取值：数字 + px

注意点：

谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

1.2 字体粗细

属性名：font-weight

取值：

关键字：

正常	normal
加粗	bold

纯数字：100~900的整百数：

正常	400
加粗	700

注意点：

不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多

1.3 字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

1.4 字体系列 font-family

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4，...，字体系列

具体字体："Microsoft YaHei"、微软雅黑（Windows默认字体）、黑体、宋体、楷体等......
字体系列：sans-serif、serif、monospace等......

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

font-family:微软雅黑，黑体，sans-serif;

/*如果用户电脑没有安装微软雅黑，就按黑体显示文字*/

/*如果用户电脑没有安装黑体，就按任意一种非衬线字体系列显示*/

1.5 样式的层叠问题

问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染？

结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

TIP:

CSS层叠样式表
所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖

1.6 字体font相关属性的连写

属性名：font（复合属性）

取值：

font:style weight size family;

省略要求：

只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

2.1 文本缩进

属性名：text-indent

取值：

数字 + px
数字 + em （推荐：1em = 当前标签的font-size的大小）

2.2 文本水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点：

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

2.3 水平居中方法总结 text-align:center

text-align:center能让哪些元素水平居中？

文本
span标签、a标签
input标签、img标签

注意点：

如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

2.4 文本修饰

属性名：text-decoration

取值：

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线（常用）

注意点：

开发中会使用 text-decoration:none; 清除a标签默认的下划线

3.1 行高

作用：控制一行的上下行间距

属性名：line-height

取值：

数字 + px
倍数（当前标签font-size的倍数）

应用：

让单行文本垂直居中可以设置line-height：文字父元素高度
网页精准布局时，会设置line-height：1可以取消上下间距

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font: style weight size/line-height family;

拓展颜色常见取值（了解）

属性名：

如：文字颜色：color
如：背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red/green/blue/yellow...
rgb表示法	红绿蓝三原色。每项取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)....
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255,255,255,0.5)、rgba(255,0,0,0.3)....
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#e92322，简写：#000、#f00

拓展标签水平居中方法总结 margin: 0 auto

让div、p、h（大盒子）水平居中：margin: 0 auto

注意点：

如果需要让 div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
margin: 0 auto; 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

emmet语法

作用：通过简写语法，快速生成代码(vscode)

记忆	示例	效果
标签名	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{我是li的内容}	<ul><li>我是li的内容</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>

背景相关属性

1.1 背景颜色

属性名：background-color(bgc)

属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制......

注意点：

背景颜色默认值是透明：rgba(0,0,0,0)、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2.1 背景图片

属性名：background-image(bgi)

属性值：background-image: url('图片的路径')

注意点：

背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.1 背景平铺

属性名：background-repeat (bgr)

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

4.1 背景位置

属性名：background-position（bgp）

属性值：background-position：水平方向位置垂直方向位置；

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

4.1 背景图片大小

作用：设置背景图片的大小

语法：background-size: 宽度高度;

取值：

取值	场景
数字 + px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

4.2 background连写拓展

完整连写：

background: color image repeat position/size;

注意点：

background-size和background连写同时设置时，需要注意覆盖问题

解决：

要么单独的样式写连写的下面
要么单独的样式写在连写的里面

5.1 背景相关属性的连写形式

属性名：background（bg）

属性值：

单个属性值的合写，取值之间以空格隔开

书写顺序：

推荐：background: color image repeat position

省略问题：

可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background: url()

注意点：

如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

6.1 （拓展）img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？

方法一：直接写上img标签即可

img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二：div标签 + 背景图片

需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

1.1 块级元素

显示特点：

独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

2.1 行内元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签

a、span、b、u、i、s、strong、ins、em、del......

3.1 行内块元素

显示特点：

一行可以显示多个
可以设置宽高

代表标签：

input、textarea、button、select......
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.1 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性	效果	使用频率
display: block	转换成块级元素	较多
display: inline-block	转换成行内块元素	较多
display: inline	转换成行内元素	极少

拓展1：HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素......

但是：p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

但是：a标签不能嵌套a标签

盒子模型-组成

1.1 盒子模型的介绍

盒子的概念
1. 　页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型
1. CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
记忆：可以联想现实中的包装盒

2.1 内容的宽度和高度

作用：利用 width 和 height 属性默认设置是盒子内容区域的大小

属性：width / height

常见取值：数字+ px

3.1 边框（border）- 连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如：border: 10px solid red;
solid：实线；dashed：虚线；dotted：点线

3.2 边框（border）- 单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border - 方位名词

属性值：连写的取值

3.3 边框（border）- 单个属性（了解）

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+ px
边框样式	border-style	实线 solid、虚线 dashed、点线 dotted
边框颜色	border-color	颜色取值

4.5 CSS3盒子模型（自动内减）

需求：给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大

方法1：手动内减操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦

方法2：自动内减

操作：给盒子设置属性 box-sizing: border-box; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去

5.4 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

比如：body标签默认有margin: 8px
比如：p标签默认有上下的margin
比如：ul标签默认有上下的margin和padding-left
......

方法：

margin: 0;

padding: 0;

}

5.7 外边距折叠现象 - ¹合并现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：避免就好

只给其中一个盒子设置margin即可

5.8 外边距折叠现象 - ²塌陷现象

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow: hidden
转换成行内块元素 display: inline-block
设置浮动

5.9 行内元素的垂直内外边距

如果想要通过margin或padding改变行内标签的垂直位置，无法生效

改变垂直位置方法：

加 line-height

盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

.box {
    width: 200px;
    height: 200px;
    background-color: rgb(110, 241, 239);
    box-shadow: 5px 5px 2px 1px rgb(217, 214, 164);
}

运行结果:

结构伪类

一、结构伪类选择器

1、作用与优势：

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

2、选择器

选择器	说明
E:first-child{}	匹配父元素中第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

n的注意点：

1、n为：0、、1、2、3、4、5、6、......

2、通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

二、伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

1、元素：HTML设置的棱

2、伪元素：由CSS模拟出的标签效果

种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

1、必须设置content属性才能生效

2、伪元素默认是行内元素

清除浮动

浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 浮动元素有特殊的显示效果

一行可以显示多个
可以设置宽高

注意点：

浮动的元素不能通过text-align: center或者 margin: 0 auto

1.1 清除浮动的介绍

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：

子元素浮动后脱标 → 不占位置

目的：

需要父元素有高度，从而不影响其他网页元素的布局

2.1 清除浮动的方法 —— ¹直接设置父元素高度

2.2 清除浮动的方法 —— ²额外标签法

操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear: both

.clearfix{clear: both}

特点：

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

2.3 清除浮动的方法 —— ³单伪元素清除法

操作：用伪元素替代了额外标签

1. 基本写法

.clearfix ::after{

    content: '';

    /*伪元素添加的标签是行内的*/

    display: block;

    clear: both;

}

2. 补充写法

.clearfix ::after{

    content: '';

    display: block;

    clear: both;

    /* 在网页中看不到伪元素，为了兼容性*/

    height: 0;

    visibility: hidden;

}

特点：

优点：项目中使用，直接给标签加类即可清除浮动

2.4 清除浮动的方法 —— 双伪元素清除法

操作：

/*   .clearfix::before 作用于解决外边距塌陷问题   */

.clearfix::before, 
.clearfix::after{
    content: ''; 
    display: table; 
} 
.clearfix::after{
    clear: both; 
}

特点：

优点：项目中使用，直接给标签加类即可清除浮动

2.5 清除浮动的方法 —— 给父元素设置overflow: hidden

操作：

直接给父元素设置 overflow: hidden

特点：

优点：方便

定位

1.1 网页常见布局方式

标准流
1. 块级元素独占一行 → 垂直布局
2. 行内元素/行内块元素一行显示多个 → 水平布局
浮动
1. 可以让原本垂直布局的块级元素变成水平布局
定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况

2.2 使用定位的步骤

1、设置定位方式

属性名：position
常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2、设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

就近原则
方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

3.1 相对定位

介绍：相对自己之前的位置进行移动

代码：

position:relative;    /* por  */

特点：

需要配合方位属性实现移动
相对自己原来位置进行移动
在页面中占位置 → 没有脱标

应用场景：

配合绝对定位组CP
用于小范围的移动

注意：

水平以left为准，垂直以top为准

5.1 绝对定位

介绍：相对于非静态定位的父元素进行定位移动

代码：

position:absolute;

特点：

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标
具备行内块特点

应用场景：

配合绝对定位

5.2 绝对定位-父级定位

　　先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位

　　有父级，但父级没有定位，以浏览器窗口为参照进行定位

.father {
    /* 父级相对定位，子级绝对定位 */
    position: relative;

    width: 400px;
    height: 400px;
    background-color: green;
}

.son {
    position: absolute;
    right: 20px;
    bottom: 50px;

    width: 200px;
    height: 200px;
    background-color: rgb(47, 178, 207);
}

5.3 居中

绝对定位的盒子不能使用margin auto居中

.box{
position: absolute;
/* left: 50%; 整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* 把盒子向左侧移动：自己宽度的一半 */
margin-left: -150px;

top: 50%;
margin-top: -150px;

width: 300px;
height: 300px;
background-color: green;
}

升级版：若有需要，只需改宽高，无需改margin-left或margin-top

.box{
position: absolute;
/* 把整个盒子移动到浏览器中间偏右的位置 */
left: 50%;

top: 50%;
/* 位移：自己宽度高度的一半 */
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background-color: green;
}

6.1 固定定位

介绍：相对于浏览器进行定位移动

代码：position: fixed;

特点：

需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标

应用场景：

让盒子固定在屏幕中的某个位置

7.1 定位 - 显示层级

div {
    width: 200px;
    height: 200px;
}

.one {
    position: absolute;
    top: 20px;
    left: 50px;
    background-color: rgb(90, 179, 58);
}
        
.two {
    background-color: rgb(170, 197, 235);
}

<div class="one">one</div>
<div class="two">two</div>

运行结果：

div {
    width: 200px;
    height: 200px;
}
.one {
    position: absolute;
    top: 20px;
    left: 50px;
    background-color: rgb(90, 179, 58);
}
        
.two {
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: rgb(170, 197, 235);
}

<div class="one">one</div>
<div class="two">two</div>

运行结果：

当body里面是

<div class="two">two</div>
<div class="one">one</div>

运行结果：

默认情况下，定位的盒子，后来者居上，

z-index：整数；取值越大，显示顺序越靠上，z-index的默认值是0

z-index必须配合定位才生效

装饰

1.1 文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其实底部不是对齐的

1.2 垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

2.1 光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

3.1 边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

4.1 溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......

属性名：overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

5.1 元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

常见属性：

1. display: none 不占位隐藏

2. visibility: hidden 占位隐藏

（拓展）元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

1：表示完全不透明
0：表示完全透明

注意点：

opacity会让元素整体透明，包括里面的内容，如文字、子元素等......

CSS精灵图

1.1 精灵图的介绍

场景：项目中将多张图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

例如：需要在网页中展示8张小图片

8张小图片分别发送 → 发送8次
合成一张精灵图发送 → 发送1次

1.2 精灵图的使用步骤

创建一个盒子，设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置

通过测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y

/* 想要向左侧移动图片，位置取负数 */
/* 水平方向位置  垂直方向位置 */
background-position: x y;

精灵图的标签都用行内标签 span, b, i

过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名：transition

常见取值：

参数	取值
过渡的属性	all：所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡
过渡的时长	数字 + s（秒）

注意点：

过渡需要：默认状态和hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同的

给默认状态设置，鼠标移入移出都有过渡效果
给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(161, 238, 180);
            /* 谁变化谁加过渡属性 */
            /* transition: width 1s, background-color 2s; */
            /* 如果变化的属性多，直接写all表示所有 */
            transition: all 1s;
        }

        /* 过渡配合hover使用 */
        .box:hover {
            width: 500px;
            background-color: rgb(244, 247, 198);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

骨架标签

/* <!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本 */
<!DOCTYPE html>
/* <html lang="en">标识网页使用的语言
作用：搜索引擎归类 + 浏览器翻译
常见语言：zh-CN简体中文/en英文 */
<html lang="en">
<head>
    /* <meta charset="UTF-8">标识网页使用的字符编码 */
    <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>
</head>
<body>
    
</body>
</html>

posted @ 2022-08-03 11:01 VTE01 阅读(18) 评论(0) 收藏举报

刷新页面返回顶部

VTE

HTML+CSS从入门到精通

文本格式化标签

图片标签的介绍

相对路径

音频标签

视频标签

超链接

列表-无序，有序和标题

无序列表

去掉列表的符号

有序列表

标题列表

自定义列表

表格标签

1.1 表格的基本标签

1.2 表格的相关属性

1.3 表格标题和表头单元格标签

1.4 表格的结构标签（了解）

1.5 合并单元格

表单标签

1.1 input系列标签的基本介绍

1.2 input系列标签-文本框

1.3 input系列标签-单选框

1.4 input系列标签-文件选择

1.5 input系列标签-按钮

2.1 button按钮标签

3.1 select下拉菜单标签

4.1 textarea文本域标签

5.1 label标签

语义化标签

1.1 没有语义的布局标签 - div和span

2.1 有语义的布局标签（了解）

常见字符实体

CSS

一、基础认识

1.1 CSS的介绍

1.2 CSS 语法规则

二、CSS引入方式

2.1 CSS引入方式

2.2 CSS引入方式 - 小结

CSS特性

1.1 继承性的介绍

2.1 层叠性的介绍

优先级

3.1 优先级的介绍

3.2 权重叠加计算

选择器

1. 选择器的作用

2. 标签选择器

3. 类选择器

4. id选择器

5. 通配符选择器

选择器进阶

1.1 后代选择器：空格

1.2 子代选择器：>

2.1 并集选择器：,

3.1 交集选择器：紧挨着

4.1 hover伪类选择器

字体和文本样式

学习路径：

1.1 字体大小

1.2 字体粗细

1.3 字体样式（是否倾斜）

1.4 字体系列 font-family

font-family:微软雅黑，黑体，sans-serif;

1.5 样式的层叠问题

1.6 字体font相关属性的连写

2.1 文本缩进

2.2 文本水平对齐方式

2.3 水平居中方法总结 text-align:center

2.4 文本修饰

3.1 行高

拓展 颜色常见取值（了解）

拓展 标签水平居中方法总结 margin: 0 auto

emmet语法

背景相关属性

1.1 背景颜色

2.1 背景图片

3.1 背景平铺

拓展颜色常见取值（了解）

拓展标签水平居中方法总结 margin: 0 auto