HTML+CSS基础自制笔记
一、HTML笔记
文章目录
- 一、HTML笔记
-
-
- 初识标签
- 标签语义
-
- 标题标签：
- 段落标签：
- 换行标签：
- 文本格式化标签：
- 盒子标签：
- 图像标签和路径：
- 超链接标签：
- 注释标签：
- 常用特殊字符：
-
- 表格标签：
- 表头标签：
- 常用表格属性：
- 表格结构标签：
- 合并单元格：
-
- 合并步骤：
- 列表标签：
-
- 无序列表（重要）
- 有序列表（理解）
- 自定义列表（重点）
- 表单标签：
-
- input标签：
-
- 其他属性：
- labal标签：
- select标签：
- textarea标签：
-
- 二、CSS笔记
-
-
- CSS简介：
-
- 声明常用属性：
- CSS基础选择器：
-
-
- 1.标签选择器
- 2.类选择器
- 3.id选择器
- 4.通配符选择器
-
- 字体属性：
-
-
- 1.字体系列：
- 2.字体大小
- 3.字体粗细
- 4.文字样式
- 5.复合属性
-
- 字体外观：
-
-
- 1.文本颜色
- 2.对齐文本
- 3.装饰文本
- 4.文本缩进
- 5.行间距
-
- CSS的引入方式（样式表）：
-
-
- 1、行内样式表（行内式）
- 2、内部样式表（嵌入式）
- 3、外部样式表（链接式）
-
- Emmet语法：
- CSS快速语法：
- CSS复合选择器:
-
-
- 1、后代选择器
- 2、子元素选择器
- 3、并集选择器
- 4、伪类选择器
-
- CSS的元素显示模式：
-
-
- 1、块元素
- 2、行内元素
- 3、行内块元素
-
- 元素显示模式转换：
- ※让单行文字垂直居中
- CSS背景颜色：
-
-
- 1、标签背景颜色
- 2、背景图片
- 3、背景平铺
- 4、背景图片位置
- 5、精确背景单位
- 6、参数为混合单位
- 7、背景固定
- 8、背景半透明
-
- CSS三大特性：
-
- ①层叠性
- ②继承性
- ③优先级
-
- ※复合选择器权重：
- CSS盒子模型：
-
- 1、盒子内容
-
- 一、边框
- 二、细线边框
- 三、内边距
- 四、盒子外边距
-
- ▲※如果想让块类盒子水平居中：
- 五、清除内外边距
- ★**去掉无序列表小圆点小技巧：**
- **list-style：none;**
- 六、圆角边框
- 七、盒子阴影
- 八、文字阴影
- 浮动：
-
- 一、传统网页的三种布局方式
-
- 1、标准流
- 2、浮动
- 3、浮动的特性
- 4、清除浮动
-
- ①额外标签法（隔墙法,不常用）
- ②父级添加overflow
- 学成在线案例：
-
-
- ①导航栏制作
- ②学会使用自定义列表
-
- CSS定位：
-
-
- 1、定位模式
- 2、边偏移
-
- ①静态定位
- ②相对定位
- ③绝对定位
- ④固定定位
- ▲固定定位小技巧：固定在版心右侧：
- 3、定位叠放
- 4、定位拓展
-
- 元素的显示与隐藏：
-
-
- 1、显示隐藏
- 2、可见性
- 3、溢出
-
- CSS高级：
-
- 1、精灵图
- 2、字体图标
- 3、三角形制作
- 4、三角应用
- CSS用户界面样式：
-
- 1、用户鼠标样式
- 2、取消文本框的轮廓线
- 3、取消文本域的下拉框
- 4、vertical-align的使用
- 5、解决图片下方空白缝隙
- 6、溢出的文字省略显示
-
- ①单行文本溢出
- ②多行文本溢出
-
- ★常用布局技巧
-
-
- ①margin负值的应用
- ②编写边框时，使用相对定位relative来设置li : hover显示被覆盖的边框
- ③巧妙地运动文字围绕浮动元素的特性来制作盒子
- ④制作特殊三角形，是用删除或者调整边框的大小来控制形状，详情见三角形制作
-
- CSS初始化技巧
- ★HTML5:
-
-
- 1、新增盒子标签
- 2、视频标签
- 3、新增表单标签
- 4、input新增属性
-
- ★CSS3新特性：
-
-
- 1、属性选择器
- 2、结构伪类选择器
-
- ※注意！！！！
- 3、伪元素选择器（重点）
- 4、伪元素清除浮动
- 5、CSS3盒子元素新属性※
-
- ①宽度
- ②filter函数
- ③calc函数
- 6、过渡
-
初识标签
<html>html> ：根标签
<head>head> :文档的头部
<title>title> :文档的标题
<body>body>:文档主体
DOCTYPE html> ：表示当前使用的是html5的版本来显示网页，
它不是一个HTML标签，只是一个文档类型声明标签
<html lang="en"> ：提示是英文网页，“zh-CN”表示中文网站，实际没有太大影响，英文网页也可以写中文
<meta charset="UTF-8"/> ：表示万符码，包含基本所有国家的字符集
VScode代码快捷键：
1、! :自动写入框架
2、Alt+b ：执行网页
标签语义
标题标签：
从<h1>到<h6>分为六个等级
如：<h1>一级标题h1>
特点：每个标题独占一行，加了标题的文字会加粗，字体变大。
段落标签：
<p>我是一个段落标签p>
如：<p>我是朱昱崐p>
<p>我是地球人p>
作用：将HTML文档分割为若干段落，换行时有很大空隙
换行标签：
<br/>
如：我是朱昱崐<br/>我是地球人
作用：令文本换行
文本格式化标签：
文本加粗：1、<strong>加粗了strong>
2、<b>加粗了b>
推荐使用上者
文本倾斜：1、<em>倾斜了em>
2、<i>倾斜了i>
推荐使用上者
删除线 ： 1、<del>删除线del>
2、<s>删除线s>
推荐使用上者
下划线： 1、<ins>下划线ins>
2、<u>删除线u>
推荐使用上者
盒子标签：
大盒子：<div>盒子标签div>
特点：一个盒子的内容独占一行
小盒子：<span>小盒子标签span>
特点：可以多个盒子在一行
图像标签和路径：
图像标签：
src是<img/>标签的必须属性，用于指定图像文件的路径和文件名
如：<img src="pla.jpg"/>
alt:替换文本，图像异常显示时，用文字替换
如：<img src="" alt ="图片异常"/>
title:提示文本，鼠标放在图片上，提示用户显示的文字
如：<img src="pla.jpg" title="我是朱昱崐"/>
width、height:图像宽度、高度
如：<img src="pla.jpg width="500" height="500"/>
border:设定边框，
※各个属性之间用空格分隔，没有前后顺序
路径可以分为：
1、相对路径：以当前html文件的路径做参照
上一级路径：/
下一级路径：../
上级如：<img src="image/pla.jpg" />
下级如：<img src="../pla.jpg" />
2、绝对路径
1、网址路径
2、磁盘完整路径
超链接标签：
语法：<a href="跳转目标" target="窗口弹出方式">超链接文本或图像a>
href用于指定目标连接地址（必须属性）
target用于指定连接页面的打开方式，默认为_self本窗口跳转，_blank为新窗口打开
1、外部链接：href中必须带有http://
如:<a href="http://www.qq.com" target="_blank">文本或图片a>
2、内部链接：打开电脑路径下的其他html文件
如：<a href="Untitled-1.html" target="_blank">
3、空链接：href="#"，代表超链接为空，等想好具体网页再修改
4、下载链接：在超链接中存放可下载的文件
如： <a href="pla.rar" target="_blank">
5、网页元素超链接：用音视频和图片当做超链接
如：<a href="pla.rar" target="_blank">
<img src="image/pla.jpg" title="下载小图片" />
a>
6、锚点超链接：将页面转移到当前页面的相应位置
如：<a href="#top">返回顶部a>
<h1 id="top">
这里是顶部
h1>
注释标签：
语法：
快捷键：Ctrl + /
常用特殊字符：
空格符：
小于号： <
大于号： >
表格标签：
基本语法：
<table>
<tr>
<td>
表格内文字
td>
tr>
table>
1、table用于定义表格的标签
2、tr中储存每一行的数据
3、td中储存一行中的每一个单元格的数据
表头标签：
<table>
<tr>
<td>
<th>表头th>
td>
tr>
table>
1、表头会居中、加粗显示
常用表格属性：
属性名 属性值 作用align left、center、right 规定文本对齐方式（网面的显示位置）border 1、"" 有无边框cellpadding 像素值 规定单元边沿与内容之间的空白，默认1响度cellspacing 像素值 规定单元格之间的空白，默认2像素wigth 像素值/百分比 表格宽度
1、属性写在table标签内部
如：
表格结构标签：
头部区域：
用把第一行的表头包含进去
主体区域：
用把表格主体包含进去
合并单元格：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
目标单元格：
跨行：找最上侧
跨列：找最左侧
合并步骤：
1、确定跨行或者列
2、找到目标单元格和合并方式
如：
3、删除多余单元格
如：合并了哪几个就删除被合并的单元格的代码
列表标签：
无序列表（重要）
<ul>
<li>
任意元素
li>
ul>
ul ：无序列表
li ：容纳元素的容器
有序列表（理解）
<ol> <li> 任意元素 li>ol>
ol ：有序列表
自定义列表（重点）
<dl> <dt>大块dt> <dd>解释dd> <dd>解释dd> <dd>解释dd>dl>
dl ：自定义列表
dt ：大的类名
dd ：描述类的解释
表单标签：
一个完整的表单：由 表单域、**表单控件（元素）**和 提示信息 组成
1、用于定义表单域，会把范围内的元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件form>
action会把数据送到相应文件中
method设置提交方式
2、单标签用于收取用户信息
<input type="属性值" /> 如：用户名 ：<input type="text">
input标签：
button：定义可点击按钮
checkbox：定义复选框（多选框）
file：定义输入字段和“浏览”按钮，供文件上传
hidden：定义隐藏的输入字段
image：定义图像形式的提交按钮
password：定义密码字段，字符将被掩码
radio：定义单选按钮（单选框）
reset：定义充值按钮
submit：定义提交按钮，发送给数据服务器
text：定义单行输入的字段，默认20个字符
id: 用来设置labal标签
其他属性：
name ：定义本元素的名称 (名称一样才能实现单选按钮的多选一)
value ：定义本元素的值 （表示元素中的默认值）
注意：单选、多选按钮一定要有相同的name值
checked ：规定按钮当页面打开默认选中此按钮
例：checked = "checked"
maxlength ：规定用户输入的最大字符长度
labal标签：
语法：
<labal for="test">用户名labal>
<input type="test" id="test">
解释：for中的目的地至id一样标签
select标签：
解释：下拉列表标签
语法：
<select>
<opiton>
选项1
option>
<option>
选项2
option>
select>
1、如果想让标签默认选中某个option
即：
textarea标签：
<textarea> 默认显示的文字textarea>
不常用的属性：cols表示每行的字符数，rows表示能有多少行
※写表单时在form中放table储存
二、CSS笔记
CSS简介：
1、CSS由选择器和一条或多条声明组成
选择器：选择修改的元素
声明：具体修改的属性
写在head中
如：
声明常用属性：
1、color:颜色
2、font-size:25px（字体数值大小）
CSS基础选择器：
作用：用来选择标签
1.标签选择器
作用：把一类标签选择出来进行操作
<style> p{ colro:green; }style>
2.类选择器
作用：单独选择某几个标签进行操作，而不是全部此类标签
<style> .red{ //注意类前面加一个点 color:red; }style><p class="red"> //啦啦啦变红 啦啦啦p>
多类名使用方式：把多个类名放在一个属性里，并用空格隔开
如：
3.id选择器
作用：为标有特定id的元素操作样式，通常用#定义
区别：和class的区别为，一个id只能调用一次，不能多次调用，但class可以被多次调用
#pink{ 属性1；属性值1}<p id="pink"> //啦变粉色 啦p>
4.通配符选择器
作用：选取所有元素进行操作，通常用*定义
<style> *{ color:red; //*表示将所有元素都修改为红色 }style>
字体属性：
1.字体系列：
如果属性值有多种字体，会顺序寻找电脑中存在的字体来使用
<style> p{ font-family:'Microsoft Yahei'; }style>
2.字体大小
标题标签特殊，需要单独设置大小
3.字体粗细
<style> p{ font-weight:属性值; }style>
属性值：
normal：默认
bold：加粗
bolder：特粗
lighter:变细
number（给一个数字，如：700）：加粗的大小
4.文字样式
<style> p{ font-style:normal; //italic变倾斜 }style>
作用：让斜体的字体变正常
5.复合属性
如果想减少代码量，有默认的符合属性组合：必须写大小和样式
<style> p{ font: style weight size/line-high family 倾斜 粗细 大小/行距 字体 normal 700 35px/20 'Microsoft Yahei' ; }style>
字体外观：
1.文本颜色
div{ color:red;}
属性值：red 或 rgb(255,0,0) 或 十六进制数
2.对齐文本
div{ text-align:center; //居中对齐}
属性值：
left：左对齐（默认）
center：居中
right：右对齐
3.装饰文本
div{
text-decoration:属性值；
}
none：默认
underline：下划线
overline：上划线
line-through：删除线
4.文本缩进
作用：使文本的首行缩进对应的像素值
div{
text-indent:2em； //如24px，2em
}
em表示一个字体的大小长度
5.行间距
div{
line-height:26px;
}
间距组成：上间距、文本高度、下间距
CSS的引入方式（样式表）：
1、行内样式表（行内式）
直接在当前标签中添加CSS属性：
<p style="color:red;"> 我是红色的p>
2、内部样式表（嵌入式）
在html中的head标签中定义style标签中书写
控制范围是整个页面，代码结构清晰
练习代码多用此方式
3、外部样式表（链接式）
创建CSS文件，在HTML文件中引用他
<link rel="stylesheet" href="css文件路径">
Emmet语法：
1、生成标签：打出标签再按tab即可快速生成
2、生成多个标签：div*5 按tab，即可生成5个div盒子
3、有父子标签时，用>符号连接
如： tr>td 再按tab
4、有兄弟关系时，用+符号连接
如： p+div 再按tab
5、当你想使用类选择器或ID选择器时，用. 和 # 快捷输入
如：p.red 和 div#user
6、当你想生成多个类选择器时，用.demo ∗ 5 来 输 入 ， *5来输入， ∗5来输入，为自增运算符
7、当你对标签直接输入内容时，可以用{}
如：div{我是朱昱崐} 再按tab
CSS快速语法：
使用单词首字母：
如：ti2em + tab 等价于 text-indent:2em;
CSS复合选择器:
1、后代选择器
作用：选中父元素中的所有后代元素进行操作
父元素 子元素{
样式代码;
}
如：
ol li{
color:red;
}
2、子元素选择器
和后代选择器的区别：只会对子元素的选择器操作，而不会对同名的孙子元素操作
ol>li{ color:red;}
3、并集选择器
作用：选择多组标签，同时定义多种标签的声明，用，分隔
div,p{ color:red;}
4、伪类选择器
作用：向某项选择器添加特殊的效果，比如给连接添加效果
①链接伪类：
a:link 选择所有未访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接（鼠标经过，color:369）
a:active 选择活动链接（鼠标按下还未弹起的链接）
**顺序：**LVHA 写CSS一定按照这个顺序定义
②focus伪类选择器：
作用：选取获得焦点的input表单元素（有没有没选中）
input:focus{ background-color:yellow; //将被选中的文本框背景颜色变黄色 color:red; //将文本框内输入的文字变红色}<input type="text">
CSS的元素显示模式：
元素显示模式：标签以什么方式显示
HTML元素分为：块元素，行内元素
1、块元素
如：、
、
- 、
- 、
①自己独占一行
②高度宽度和边距可以修改
③宽度默认是父亲容器的100%
⑤是一个容器/盒子，里面可以放行内或者块级元素
⑥文字标签中不能放块级元素
2、行内元素
如：、、、、
①一行可以显示多个
②高宽不可修改
③默认高度是本身内容的高度
④行内元素只能容纳文本或其他行内元素
⑤链接中不能嵌套链接，但可以给转换一下块级模式
3、行内块元素
如：、、
①在一行上显示，但是之间会有缝隙
②默认宽度是本身的宽度
③可以修改行高、边距、高度
元素显示模式转换：
比如想增加链接触发范围，转化为块元素
语法：
a{ display:block; //行内元素转块 display:inline //块内元素转块 display:inline-block //转换为行内块元素}
※让单行文字垂直居中
让行高等于盒子的高度：
height : 40px;line-height:40px;
CSS背景颜色：
1、标签背景颜色
语法：background-color：transparent / 颜色;
2、背景图片
语法：background-image：url(图片地址);
3、背景平铺
作业：对背景图进行平铺，图片会覆盖在背景上面
语法：background-repeat ：属性
repeat：横纵向平铺（默认）
no-repeat：不平铺（盒子中就一个图片）
repeat-x：在横向平铺
repeat-y：在纵向平铺
4、背景图片位置
作用：定义图片在背景中的位置
语法：background-position：水平方向 垂直方向;
例：background-position：right center //水平向右 垂直居中
※如果省略一个参数，默认被省略的是居中属性
5、精确背景单位
语法：background-position：x坐标 y坐标;
※注：如果只有一个属性，默认为X坐标，Y坐标默认center
6、参数为混合单位
用法： background-position：坐标/定位 坐标/定位
顺序一定是x、y坐标的顺序定义
7、背景固定
语法：background-attachment：属性值；
scroll：随对象内容滚动（默认滚动）
fixed：图像固定
8、背景半透明
语法：background：rgba(0,0,0,0.5)；
a属性值范围在0~1，0代表纯透明，1代表不透明
CSS三大特性：
①层叠性
当同一元素重复定义样式时，按照最后的样式执行覆盖
②继承性
子标签能够继承父标签的某些样式：
例如:font、line、text、color
▲行高的继承性：
③优先级
！important > style=“ ”> id> class / 伪类选择器 > 元素（标签）选择器 > 继承 / *
▲a链接有默认样式：蓝色、下划线
※复合选择器权重：
当出现复合选择器时，计算选择器的累计权重来判断优先级顺序
CSS盒子模型：
1、盒子内容
border：边框
content：内容
padding：内边距，和元素的内距离
margin：外边距，多个盒子之间的距离
一、边框
语法：
border-width/style/color
1、width ：定义边框粗细（px）
2、style ：边框样式
3、color：边框颜色
▲属性值：
①solid：实线
②dashed：虚线
③dotted：点线
④transparent：透明
▲复合写法：
border：1px solid red;
▲边框的四条边：
border-top/bottom/left/right
二、细线边框
语法：border-collapse：collapse;
作用：将相邻表哥合并在一块，取消框间距
▲边框大小会增加盒子的大小
三、内边距
定义：边框和内容之间的距离
padding-left / right / top / bottom ： **px；
▲复合属性：
一个值：代表上下左右
两个值：一个是上下，一个是左右
三个值：上，左右，下
四个值：顺时针，上，右，下，左
▲如果标签未指定高度宽度，那么padding将会不起作用
四、盒子外边距
定义：盒子和其他盒子之间的距离
margin-left / right / top / bottom ： **px；
▲※如果想让块类盒子水平居中：
①设置盒子宽度
②左右外边距设置auto
例：margin：0 auto
▲※如果想让块类盒子水平居中：
给与其父类属性：text-align:center;
五、外边距合并
①如果上方块元素有下边距，下方块元素有上边距，那么距离等于最大的那个值
②嵌套块元素垂直外边距的塌陷，会使子元素在margin的过程中，父元素也会margin塌陷
▲解决方案：
1、可以为父元素定义上边框
2、可以为父元素定义上内边距
3、可以为父元素添加overflow：hidden
五、清除内外边距
*{
padding:0;
margin:0;
}
**▲注意：**块元素用padding时，如果设置了宽度要做减法运算，要么会超出边距
★**去掉无序列表小圆点小技巧：**
list-style：none;
六、圆角边框
语法：
border-eadius：length；
▲如何让一个盒子变成圆形：设置一个正方形盒子，然后属性值为高度的50%
注意：可以设置四个属性，分别为左上、右上、右下、左下的顺序
七、盒子阴影
box-shadow：属性列表
●h-shadow：水平阴影的位置，允许负值
v-shadow：垂直阴影的位置，允许负值
blur：阴影的模糊程度，越大越模糊
spread：阴影尺寸
color：阴影颜色
inset：将外部阴影改为内部阴影
八、文字阴影
语法：text-shadow：同上属性值
浮动：
一、传统网页的三种布局方式
1、标准流
块元素独占一行，从上向下顺序排列
行内元素会顺序排列，碰到父亲元素边缘会自动换行
2、浮动
语法：
选择器{
float:属性值;
}
none ： 元素不浮动
left：向左浮动
right：向右浮动
3、浮动的特性
①脱标性：浮动的盒子会脱离标准流的排版，自己在浮动的流中排版
②收缩：如果不设置宽度，默认为内容的宽度
③改变性质：会变成行内块元素的特性
4、清除浮动
语法：
选择器{
clear：属性值；
}
left：清左侧浮动
right：清右侧浮动
both：清除两侧浮动
▲实际中常用both
①额外标签法（隔墙法,不常用）
做法：在浮动元素的末尾添加一个空的块级标签
添加的标签写法：
.class{ clear:both}
②父级添加overflow
做法：在父级的style体中，添加overflow:hidden;
③：after伪元素法
做法：在伪类元素中添加很多的条件（此阶段不详解）
实质是在最后添加一个标签
④双伪元素法
同上的升级版，在前后都加了标签
学成在线案例：
①导航栏制作
使用li+a的做法，无序列表中包含a链接
②链接块制作时，如何设置宽度，通常用padding撑开宽度，而不是设置一个固定的宽度
③设置li盒子时，不要给固定宽度，后便后继续加入新的链接
②学会使用自定义列表
CSS定位：
定义：将盒子定在某一个位置，即摆放盒子，是按照定位的方式移动盒子
组成：定位=定位模式+边偏移
1、定位模式
语法：通过position属性来设置
static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
2、边偏移
语法：有四个属性top、bottom、left、right
属性：距离（**px）；
①静态定位
很少用到，了解就行
②相对定位
描述：是相对他本身的位置为基准，来进行各个方向的偏移，
不会脱离标准流，别的盒子继续以本身的位置来对待它
③绝对定位
特点：是以父亲元素为基准，来进行偏移，如果父亲没有定位或者是浮动的，那会以浏览器为基准
口诀：子绝父相，孩子绝对，父亲相对
④固定定位
特点：以浏览器的可视窗口为基准，滚动条滚动对它不会产生影响，是固定的位置
不占用原来的原来的标准流，会脱离标准流
▲固定定位小技巧：固定在版心右侧：
小算法：left = 50% ；再让：margin-left：版心的一半px；
⑤粘性定位
特性：可以认为是相对和固定的混合体
语法：
position：sticky；
top：**px；
▲特点：以浏览器可视窗口为基准，
不会脱标，且必须加t、b、l、r之一
意思是当盒子距离可视窗口某个像素时，就变成固定定位
3、定位叠放
选择器{
z-index：属性值；
}
特性：index值越大优先级越高，则显示在最上方， 默认为最后定义的盒子显示在最上方
4、定位拓展
特点：浮动元素不会压住标准流的文字和图片，但是会压住盒子
但是绝对定位会压住标准流的文字和图片
元素的显示与隐藏：
1、显示隐藏
特点：隐藏元素后，不保留原先的位置
▲语法：
display：none //隐藏元素
display：block //显示元素
2、可见性
特点：隐藏元素后，保留原先的位置
▲语法：
visibility：visible； //可视
visibility：hidden； //不可视
3、溢出
定义：决定如果内容超出盒子，如何操作的语法
▲语法：
overflow：visibility //溢出部分显示出来（默认）
overflow：scroll //溢出部分会形成拉动条
overflow：hidden //溢出部分会剪切掉
overflow：quto //自动，超出了就形成拉动条，没超出就不会形成
CSS高级：
1、精灵图
用途：减少服务器接受和发送的请求次数
作用：针对背景图片使用，把多个小背景图片整合到一个大图片上，又称sprites图
用法：移动背景图片的位置，background-position，移动的距离就是图片的x、y轴，
一般情况下是向上、向左移动，所以数值是负数（默认背景左上角为起始位置）
▲代码：
.box{
height: 60px;
width: 60px;
background-color: pink;
background: url(image/wz.jpg);
margin: 100px auto;
background-position: -182px 0;
}
2、字体图标
特性：iconfont展示的是图标，但是实际上是字体
优点：轻量级、灵活性、兼容性
使用步骤：①字体图标下载②图标引入③图标追加
3、三角形制作
①首先设置一个高和宽都是0的盒子
②然后设置边框为**PX，transparent透明色
③再根据想要朝向哪边的三角定义某一边的边框颜色，即可实现
border-color：transparent red transparent transparent
border-style:solid;
border-width:22px 8px 0 0;
4、三角应用
①在大盒子中定义一个三角，然后使用负值定位来设置三角位置
从而实现一个方形盒子突出一个小角
CSS用户界面样式：
1、用户鼠标样式
语法：
li{
cursor:default; //默认鼠标
cursor:pointer; //小手样式
cursor:move; //移动样式
cursor:text; //文本样式
cursor:not-allowed; //禁止样式
}
2、取消文本框的轮廓线
语法：
input{
outline:none;
}
3、取消文本域的下拉框
语法：
textarea{
resize:none;
outline:none;
}
4、vertical-align的使用
语法：
vertical-align：属性；
baseline：默认，元素放置在父元素的基线上
top：把元素顶端和行中最高元素的顶端对齐
middle：把此元素放在父元素的中部
bottom：元素顶端与行中最低元素顶端对齐
5、解决图片下方空白缝隙
方法①：vertical-align：top，因为会以基线对齐
方法②：转成块级元素，display：block
6、溢出的文字省略显示
①单行文本溢出
▲要满足三个条件
1、强制一行内显示
white-space：normal； //文字在一行显示不开自动换行
white-space：nowrap； //文字在一行显示不开也在一行里显示
2、超出的部分隐藏
overflow：hidden； //隐藏多余的部分
3、文字用省略号代替超出的部分
text-overflow：ellipisis； //溢出部分用省略号显示
②多行文本溢出
语法;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; //弹性伸缩盒子模型显示
-webkit-line-clamp：数字值； //限制在一个块元素显示的文本的行数，多少行就是几
-webkit-box-orient:vertical; //设置或检索伸缩和对象的子元素的排列方式
★常用布局技巧
①margin负值的应用
②编写边框时，使用相对定位relative来设置li : hover显示被覆盖的边框
或者把所有的li都设置成relative，然后用index：1；来设置hover的优先级
③巧妙地运动文字围绕浮动元素的特性来制作盒子
④制作特殊三角形，是用删除或者调整边框的大小来控制形状，详情见三角形制作
▲代码：
border-color：transparent red transparent transparent
border-style:solid;
border-width:22px 8px 0 0;
CSS初始化技巧
要学会每个文件包含初始化代码
★HTML5:
1、新增盒子标签
<header> header> ：头部标签
<nav> nav> ：导航标签
<article> article>：内容标签
<section> section> ：定义文档某个区域
<aside> aside>：侧边栏标签
<footer> footer> ：尾部标签
主要针对搜索引擎
兼容性不够好，移动端比较常用
2、视频标签
标签：
①视频标签
<video src="文件地址" >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> //如果不支持mp4则使用ogg格式
video>.
▲属性值
autoplay：视频自动播放
control：向用户显示播放按钮，来控制播放
wdith：宽度
height：高度
loop：循环播放
src：视频地址
poster：加载等待的画面图片（url）
②音频标签
<audio src="文件地址" control="control">
audio>
▲属性
autoplay：音频自动播放
control：向用户显示播放按钮，来控制播放
loop：循环播放
src：视频地址
poster：加载等待的画面图片（url）
3、新增表单标签
HTML5新增了一些表单的标签，更具有语义，也能限制用户输入的内容
type="email" //必须输入email类型
type="url" //必须输入url类型
type="date" //必须输入date类型
type="time" //必须输入时间类型
type="month" //必须输入月类型
type="week" //必须输入周类型
type="number" //必须输入数字类型
type="tel" //提示输入的应该是电话号码
type="search" //搜索框
type="color" //生成一个颜色选择表单
4、input新增属性
input>
★CSS3新特性：
1、属性选择器
描述：属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器。
语法：
style:
input[value]{ //当标签是input元素，且选择其中的value属性
color:pink;
}
input[type="text"]{
color:red; //选择input="text"的inputa标签
}
div[class^="val"]（$=结尾）（*=含有） //选择div中类名以val开头/结尾/含有的标签
▲属性选择器权重为：10
body：
<input type="text" value="请输入用户名">
2、结构伪类选择器
描述：结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。
※注意！！！！
冒号之前是要选择的元素，如果只写父类，要在后面加空格！
style:
ul :first-child{ } //选择ul里的第一个孩子
或写成：
li:first-child{ } //选择li里父类中li的第一个（如果li不是第一个则选择失败）
或：
ul li:first-child{ } //选择ul里的第一个li
----------------------------------------------------------------------
ul :last-child{ } //选择ul里的最后一个孩子
ul :nth-chiled(数字/关键字、公式) //选择特定的孩子元素
如：
ul :nth-chiled(even/odd) //选择偶数（奇数）元素
ul :nth-chiled(n) //选择所有的孩子，类似于一个循环结构
ul :nth-chiled(2n) //选取偶数
ul :nth-chiled(2n+1) //选取奇数
ul :nth-chiled(5n) //5的倍数
ul :nth-chiled(5+n) //从第五个开始，选取到最后
ul :nth-chiled(5-n) //前五个
body:
<ul>
<li>li>
<li>li>
<li>li>
ul>
E:first-of-type
E:last-of-type
E:nth-of-type(n)
和child的区别是，child严格遵守孩子判断，如果第一个孩子不是某元素就选择失败，
而type是单纯的挑选父元素中的指定孩子元素的序号（不需要一定是父元素的第一个孩子，是指定某种孩子）
3、伪元素选择器（重点）
描述：伪元素选择器可以帮助我们利用css创建新标签元素。而不需要html标签，从而简化html结构。
语法：在某个元素的内容的前面（后面）插入伪元素，通常和字体图标使用
element::before {}
element::after {}
注意：
①before和after创建一个元素，都属于行内元素，默认不能设置宽和高
②新创建的元素在文档树中找不到，所以称为伪元素
③before和after必须有content属性，没有内容就content=’ ’
④before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
⑤权重和标签选择器一样，为1
⑥hover的写法为：.element:hover::before { }
4、伪元素清除浮动
.clearfix:before,.clearfix:after{
content='';
display:table;
}
.clearfix:after{
clear:both;
}
5、CSS3盒子元素新属性※
①宽度
box-sizing:content-box; //会算上padding和border的宽度
box-sizing:border-box; //最终宽度就是width的值，其他属性不会撑开盒子
②filter函数
作用：将属性模糊或颜色偏移等图形效果应用于元素
例如：
filter:blur(5px)； //模糊处理，数值越大越模糊
③calc函数
语法：width:calc(100%-80px);
▲在calc中可以进行+、-、*、/计算，特别的方便，要用空格隔开
6、过渡
描述：过渡是css三中具有颠覆性的特征，我们可以在不使用flash动画或者javascript的情况下。当元素从一种样式变换为另一种样式时，为元素添加效果，过渡动画是从一个状态渐渐地过渡到另外一个状态，可以让我们页面更好看，更动感十足。虽然低版本的浏览器不支持，但是不会影响页面布局，
▲我们现在经常和:hover一起搭配使用。
语法：
transition:过渡属性 花费时间 运动曲线 何时开始；
属性：宽度、高度、内外边距等
花费时间：单位是秒（0.5s）
运动曲线：默认为ease（可以省略）
何时开始：单位是秒，延缓触发的时间（可以省略）
▲如：transition:width 0.5s;
或者需要改变两个属性时：transition:width 0.5s ， height 0.5s;
如果要所有属性变化：transition: all 0.5s;