视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425
视频记录 93-126
Emment语法
- 提高html/css编写速度，Vscode已经集成该语法。
- 快速生成html结构语法
- 快速生成css样式语法
快速生成HTML结构语法
.demo$.*5
div{$}*5, div{文字}
快速生成CSS样式：首字母+tab
快速格式化代码：shift + alt + F
复合选择器：建立在基础选择器之上，对基本选择器进行组合而成。
- 更精确、更高效地选择目标元素（标签）
- 由两个或多个基础选择器，通过不同的方式组合而成。
- 包括：后代选择器、子选择器、并集选择器、伪类选择器等
后代选择器
后代选择器又称包含选择器，可以选择父元素里面的子元素。
写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：元素1 元素2 {样式声明}
<style>
/* 只需要将Ol中的li选出来改为pink */
ol li {
color:pink
}
</style>
<ol>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li>ol的孩子</li>
</ol>
<ul>
<li>ul的孩子</li>
<li>ul的孩子</li>
<li>ul的孩子</li>
</ul>
- ol与li中间用空格隔开。
- ol是父级，li是子级，最终选择的是li。
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后台即可。
ol li a { // 中国 山东 济南 蓝翔 （类似）
color: red;
}
<ol>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>遇到重复元素，则通过添加class处理
.nav ol li a {
color: red;
}
<ol>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li><a href="#">我是孙子1</a></li>
</ol>
<ol class="nav">
<li>ol的孩子</li>
<li>ol的孩子</li>
<li>ol的孩子</li>
<li><a href="#">我是孙子2</a></li>
</ol>子选择器（子元素选择器）:只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法：元素1>元素2{样式声明}
表示：元素1里面的所有直接后代（子元素）元素2。
.nav > a {
color: red;
}
<div class="nav">
<a href="#">我是儿子</a> //只会影响这行
<p>
<a href="#">我是孙子</a>
</p>
</div>
并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1, 元素2 {样式声明}
div,
p {
color: pink;
}
<div>熊大</div>
<p>熊二</p>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
//熊大 熊二都显示为粉色
div,
p,
.pig li {
color: pink;
}
<div>熊大</div>
<p>熊二</p>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
//熊大，熊二，小猪佩奇，猪爸爸，猪妈妈都显示为粉色
注：约定语法规范，并集选择器一般竖着写；最后一个元素后面没有逗号
伪类选择器
1.链接伪类选择器
/* 未访问过链接 */
a:link {
color:#333;
text-decoration: none;
}
/* 选择点击过的（访问过的）链接 */
a:visited {
color: orange;
text-decoration: none;
}
/* 选择鼠标经过的链接 */
a:hover {
color: skyblue;
text-decoration: none;
}
/* 鼠标按下但还没弹起的链接 */
a:active {
color: green;
text-decoration: none;
}
<a href="#">小猪佩奇</a>
注意事项：
- 必须按照LVHA顺序声明 link->visited->hover->active
- 记忆法：love hate
- 链接在浏览器中有默认样式，因此实际工作中需要给链接单独指定样式
body {
color: red;
}
<body>
<a href="#">小猪佩奇</a>
</body>
//小猪佩奇 不会显示为红色
body {
color: red;
}
a {
color: red;
}
<body>
<a href="#">小猪佩奇</a>
</body>
//小猪佩奇 显示为红色实际开发如下
2.focus伪类选择器
用于选取获得焦点的表单元素。焦点是光标，通常<input>类表单元素才能获取，因此该选择器主要针对表单而言。
input:focus {
background-color: green;
}
元素显示模式
- 什么是元素显示模式：元素（标签）以什么方式显示。
HTML元素显示方式：块级元素和行内元素。
块级元素特点
- 独占一行
- 高度、宽度、外边距和内边距可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以存放行内或者块级元素。
块级元素注意点
- 文字类的元素内不能使用块级元素
- <p>内不能使用<div>
- <h1>-<h6>等都是块级元素，不能放其他块级元素。
行内元素
行内元素特点
- 相邻行内元素在一行上，一行可以显示多个 <span> <b>等
- 高度、宽度直接设置是无效的
a {
width: 100px;
height: 100px;
}
<a href="#">小猪佩奇</a>
//宽度、高度设置无效
- 默认宽度就是本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
行内元素注意
- 链接内不能放链接
- 特殊情况链接<a>里面可以放块级元素
<img />,<input />,<td/>同时具有块元素和行内元素的特点，称为行内块元素。
行内块元素特点
显示模式转换
- 行内元素转为块级元素（重点）
a {
width: 100px;
height: 100px;
background-color: green;
/* 将元素a转换为块元素 */
display: block;
}
<a href="#">小猪佩奇</a>- 块级元素转为行内元素
div {
width: 100px; // 提示错误
height: 100px; // 提示错误
background-color: green;
/* 将div块级元素转换为行内元素 */
display: inline;
}
<div>我是块级元素1</div><div>我是块级元素2</div>- 转换为行内块 （重点）
span {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
<span>span1</span><span>span2</span>snipaste工具
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-indent: 2em;
}
a:hover {
background-color: #ff6700;
}
</style>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记 本平板</a>
<a href="#">出行 穿城</a>
<a href="#">智能 路由器</a>
<a href="#">耳机 音响</a>
单行文字垂直居中：文字行高等于盒子高度即可
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #ffffff;
text-decoration: none;
text-indent: 2em;
/* 文字垂直居中 */
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记 本平板</a>
<a href="#">出行 穿城</a>
<a href="#">智能 路由器</a>
<a href="#">耳机 音响</a>
CSS背景
背景图片：描述元素的背景图像。background-image: none | url(url)
背景图片位置：background-position: x y; (x坐标和y坐标，使用方位名词或者精确单位)
方位名词与顺序无关
background-position: center right;
background-position: right center;
//效果一样
背景复合写法约定顺序：背景颜色、背景图片、背景平铺、背景图像滚动、背景图片位置。
background: black url(images/bg.jpg) no-repeat fixed center top;
background-color: black;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
背景颜色半透明
/* 背景是黑色 alpha是指透明度 默认值为0*/
background: rgba(red, green, blue, alpha);
/* 背景是白色 */
background: rgba(red, green, blue, 1);
//最后一项取值介于0-1之间
background: rgba(red, green, blue, 0.3);
background: rgba(red, green, blue, .3); // 0.3的0可省略
- alpha是指透明度， 取值介于0-1之间。
- 背景半透明是指盒子背景半透明，盒子里的内容不受影响。
- CSS新增属性，IE9+版本浏览器才支持。
