CSS部分继续
一、Emmet语法
这一部分内容实际上就是vscode中的一些快捷键，在我之前html的文章中已经写过了，所以不再详细说明
1.快速生成html结构
2.快速生成css样式
<style>
.div{
text-align: center; /* tac+tab可以快速生成 */
text-indent: 2px; /* ti2+tab可以快速生成 */
width: 100px; /* w100+tab可以快速生成 */
height: 200px; /* h200+tab可以快速生成 */
line-height: 26; /* lh26+tab可以快速生成 */
}
</style>
建议初学不要用快捷键，最好一个一个敲，可以加深理解
vscode中还有一个好用的功能：保存时自动改为标准格式，可以点击设置→搜索format→找到format on save勾选
二、复合选择器
1.后代选择器
<body>
<ol>
<li>卷到天崩地裂</li>
<li>卷到天崩地裂</li>
<li>卷到天崩地裂</li>
<li><a href="#">孙子节点</a></li>
</ol>
<ul>
<li>卷到海枯石烂</li>
<li>卷到海枯石烂</li>
<li>卷到海枯石烂</li>
</ul>
</body>
如果只把ol中的li变成蓝色，怎么搞？标签选择器，不行，类选择器，太麻烦，这时候就用到后代选择器
<style>
/* 如果只把ol中的li变成蓝色，怎么搞
标签选择器，不行，类选择器，太麻烦，这时候就用到后代选择器 */
ol li {
color: blue;
}
ol li a {
color: rgb(255, 127, 234);
}
</style>
如果有两个ul，想给其中一个里面的a标签变色，怎么搞？很简单，ul加个类名
.nav li a {
color: yellow
}
<ul>
<li>卷到海枯石烂</li>
<li>卷到海枯石烂</li>
<li>卷到海枯石烂</li>
</ul>
<ul class="nav">
<li>卷到无地自容</li>
<li>卷到无地自容</li>
<li>卷到无地自容</li>
<li><a href="#">卷到无地自容</a></li>
<li><a href="#">卷到无地自容</a></li>
</ul>
2.子选择器
只能选择儿子节点，不能选择孙子节点
比如下面这种情况，我想把儿子节点变成红色，该怎么选？
<body>
<div class="nav">
<a href="#">儿子节点</a>
<li><a href="#">孙子节点</a></li>
</div>
</body>
使用>定义子选择器即可，默认只选择儿子节点，必须是亲儿子
<style>
.nav>a {
color: red;
}
</style>
3.并集选择器
中间用逗号分隔开，比如我想把下面这些标签的颜色都改为粉色
<div>熊大</div>
<p>熊二</p>
<ul class="nav">
<li>熊三</li>
<li>熊四</li>
<li>熊五</li>
<li>熊六</li>
</ul>
在css中使用并集选择器
<style>
.nav li,
div,
p {
color: pink;
}
</style>
4.1伪类选择器 ——链接伪类选择器
- a:link表示还没有被访问的链接的样式
- a:hover表示鼠标放上去不点击显示什么样儿
- a:visted表示点击过后链接变成什么样儿
- a:active表示鼠标点击不抬起显示的样子
- 实际开发中按照以上顺序书写，即LVHA的顺序
- 实际开发中，需要单独给a指定样式才能生效，如果只是对a的上级指定，对a没用的
- 实际开发中，只用link和hover就足够了
/* 1. a:link表示还没有被访问的链接的样式 */
a:link {
color: black;
text-decoration: none;
}
/* 2. a:hover表示鼠标放上去不点击显示什么样儿 */
a:hover {
color: rgb(104, 197, 166);
}
/* 3. a:visted表示点击过后链接变成什么样儿 */
a:visited {
color: rgb(108, 129, 66);
}
/* 4. a:active表示鼠标点击不抬起显示的样子 */
a:active {
color: red;
}
<a href="http://www.baidu.com">这是一个网站</a>
4.2伪类选择器 ——focus伪类选择器
用于选取获得光标的表单元素，主要用于input类表单元素
input:focus {
background-color: red;
color: green;
}
<input type="text">
复合选择器总结
三、元素显示样式
1.块元素
1.比较霸道，自己独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内元素或者块元素
比如div就是块级元素，需要注意的是，文字类元素内不能用块级元素，如p标签，h1标签里面都不能放块元素
2.行内元素
1.相邻行内元素在一行上，一行可以显示多个。
2.高，宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
注意：链接里不能再放链接，特殊情况下a标签里可以放块级元素，比如一大块都是链接，在这一大块里再放商品图片和介绍价格什么的，，不过这种情况下把a转换成块级元素比较好。
3.行内块元素
1.和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是本身内容宽度（行内元素特点）
3.宽度，高度，行高，外边距，内边距都是可以控制的（块元素特点）
例如img，input，td
4.元素显示模式转换
把行内元素a转换为块级元素（为了增加a标签链接的点击范围，a会变成竖着的），在css中使用display:block，这样a就变成了块级元素，拥有块级元素的特点，如独占一行，而且修改它的宽度和高度是有效的。
a {
width: 150px;
height: 90px;
background-color: rgb(155, 108, 108);
/* 把行内元素a转换为块级元素 */
display: block;
}
<a href="#">行内元素a转换为块元素</a>
<a href="#">行内元素a转换为块元素</a>
把块元素div转换为行内元素，在css中使用 display: inline;语句，这样div就拥有了行内元素的特征，宽度高度不能改变，元素在一行等等
div {
width: 100px;
height: 90px;
background-color: greenyellow;
/* 把块元素div转换为行内元素 */
display: inline;
}
<div>块元素div转换为行内元素</div>
<div>块元素div转换为行内元素</div>
行内元素转换为行内块元素，使用display: inline-block语句，这样就可以使行内元素也可以调整宽高（比如a标签，变成行内块元素就是横着可以调整高度，点击范围也会变大，而a如果转换成块元素，就变成竖着的了）
.change {
width: 300px;
height: 100px;
background-color: yellow;
/* 把行内元素转换为行内块元素 */
display: inline-block;
}
<span class="change">行内元素转换为行内块元素</span>
<span class="change">行内元素转换为行内块元素</span>
5.侧边栏案例
这里让文字垂直居中的方法：让line-height（文字高度）等于盒子高度
<!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>
a {
/* 先把行内元素a转换为块元素 */
display: block;
/* 然后开始设置样式 */
width: 433px;
height: 75px;
background-color: rgb(87, 91, 92);
text-decoration: none;
color: white;
text-indent: 2em;
/* 让文字高度等于行高，可以实现文字的垂直居中 */
line-height: 75px;
}
a:hover {
background-color: rgb(247, 112, 10)
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
四、CSS背景
1.背景图片的几个操作
background-image: ur了(); 注意这里的url()不要丢掉噢
<style>
div {
width: 500px;
height: 500px;
background-image: url(./images/1.png);
}
</style>
背景图片默认是平铺的，使用no-repeat可以取消平铺，但盒子大小还是不变的
background-repeat: no-repeat;
背景图片位置：background-position: 参数x 参数y; 其中如果是方位名词如right center，那么两者的顺序无影响，写center right也是一样的，如果只写一个，那么另一个默认是center
/* 背景图片位置 :两个参数，x y*/
background-position: right center;
如果背景图片位置是精确位置，那么第一个肯定是x坐标，第二个肯定是y坐标。如果参数只写一个值，那肯定是x的值，另一个默认垂直居中。
/* 背景图片位置：精确单位 */
background-position: 20px 50px;
/* 只写一个，默认是x的值，另一个默认center */
background-position: 20px;
当然，除了方位名词和精确位置，也可以把两个混合使用，如
background-position: center 20px;
背景固定：默认是滚动，fixed固定
background-attachment: scroll;
background-attachment: fixed;
背景颜色半透明：
background: rgba(r,g,b,a)
里面的四个参数中，a是alpha透明度，是控制透明程度的，取值在0~1之间，如0.3的0可以省略，写.3也是可以的
background: rgba(74, 153, 74, 0.3) /*0.3的0可以省略，写.3也是可以的*/
2.背景属性的简写形式
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
/* 简写形式：background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; */
background: red url(./images/疫情地图.jpg) no-repeat fixed center top;
3.背景总结
五、导航栏案例
主要注意：如何让文字垂直居中（文字高度等于 块的高度）、如何操作某一个元素（使用类名，后代选择器）
<!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>
.nav a {
width: 406px;
height: 406px;
text-decoration: none;
display: inline-block;
text-align: center;
line-height: 406px;
color: white;
font-size: 50px;
}
/* 第一个按钮 */
.nav .botton1 {
background: white url(./images/浅绿按钮.png) no-repeat fixed;
}
.nav .botton1:hover {
background-image: url(./images/绿色按钮.png);
}
/* 第二个按钮 */
.nav .botton2 {
background: white url(./images/蓝色按钮.png) no-repeat fixed;
}
.nav .botton2:hover {
background-image: url(./images//鲜红按钮.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="botton1">菜单1</a>
<a href="#" class="botton2">菜单2</a>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
