【前端基础】Day 3 CSS-2
目录
1. Emmet语法
1.1 快速生成HTML结构语法
1.2 快速生成CSS样式语法
2. CSS的复合选择器
2.1 后代选择器
2.2 子选择器
2.3 并集选择器
2.4 伪类选择器
2.4.1 链接伪类选择器
2.4.2 focus伪类选择器
2.5 复合选择器总结
3. CSS的元素显示模式
3.1 什么是元素显示模式
3.2 块元素
3.3 行内元素
3.4 行内块元素
3.5 元素显示模式总结
3.6 元素显示模式转换
3.7 snipaste工具
3.8 单行文字垂直居中
4. CSS背景
4.1 背景颜色
4.2 背景图片
4.3 背景平铺
4.4 背景图片位置
4.5 背景图像固定（背景附着）
4.6 背景复合写法
4.7 背景色半透明
4.8 背景总结
5. 综合案例
6. CSS三大特性
6.1 层叠性
6.2 继承性
6.3 优先性
1. Emmet语法
1.1 快速生成HTML结构语法
<body>
<!-- p*3 -->
<p></p>
<p></p>
<p></p>
<!-- 父子关系 > ，例ul>li -->
<ul>
<li></li>
</ul>
<!-- 兄弟关系 + ，例div+p -->
<div></div>
<p></p>
<!-- .nav ，默认div -->
<div class="nav"></div>
<!-- #banner -->
<div id="banner"></div>
<!-- p.red -->
<p class="red"></p>
<!-- ol>li#two -->
<ol>
<li id="two"></li>
</ol>
<!-- .demo$*3 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<!-- div{今年是2025年$}*5 -->
<div>今年是2025年1</div>
<div>今年是2025年2</div>
</body>1.2 快速生成CSS样式语法
<style>
.one {
/* tac */
text-align: center;
/* ti2em */
text-indent: 2em;
/* w100 */
width: 100px;
/* h200 */
height: 200px;
/* lh26px */
line-height: 26px;
/* tdn */
text-decoration: none;
}
</style>2. CSS的复合选择器
2.1 后代选择器
2.2 子选择器
2.3 并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 */
ol li {
color: aqua;
}
.red li a {
color: red;
}
/* 子选择器 */
div>a {
color: brown;
}
/* 并集选择器 竖着写*/
span,
.pig li {
color: pink;
}
</style>
</head>
<body>
<ol>
我在ol内不在li内
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是ol-1的孩子</a></li>
</ol>
<ol class="red">
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是ol-2的孩子</a></li>
</ol>
<div>
<a href="#">我是div的儿子</a>
<p>
<a href="#">我是div的孙子</a>
</p>
</div>
<span>熊大</span>
<span>熊二</span>
<ul class="pig">
<li>佩奇</li>
<li>猪妈妈</li>
</ul>
</body>
</html>2.4 伪类选择器
2.4.1 链接伪类选择器
<style>
/* 1.未访问的链接 a:link 把没有点击过的链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/* 2.点击过的链接 */
a:visited {
color: orange;
}
/* 3.选择鼠标经过的链接 */
a:hover {
color: skyblue;
}
/* 4.选择的是鼠标正在按下还没有弹起的那个链接 */
a:active {
color: green;
}
</style>链接伪类选择器实际开发中的写法
a {
color: #333;
text-decoration: none;
}
a:hover {
color: skyblue;
}2.4.2 focus伪类选择器
焦点就是光标，把获得光标的input表单元素选取出来
<style>
input:focus {
background-color: pink;
}
</style>
2.5 复合选择器总结
3. CSS的元素显示模式
3.1 什么是元素显示模式
3.2 块元素
3.3 行内元素
3.4 行内块元素
3.5 元素显示模式总结
3.6 元素显示模式转换
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a 转换为块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
/* 把div 块级元素转换成行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: skyblue;
/* 行内元素转换成行内块元素 */
display: inline-block;
}
</style>3.7 snipaste工具
3.8 单行文字垂直居中
简洁版小米边框栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
width: 230px;
height: 40px;
line-height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
}
a:hover {
background-color: #ff6700;
}
</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>
4. CSS背景
4.1 背景颜色
background-color: 颜色值; /*（默认transparent，透明）*/
4.2 背景图片
4.3 背景平铺
背景图片和颜色可以同时设置，只不过背景颜色会被背景图片覆盖
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(../上一级路径.jpg);
/* 1.背景图片不平铺 (默认情况下背景平铺）
background-repeat: no-repeat; */
/* 2.沿着x轴平铺
background-repeat: repeat-x; */
/* 3.沿着y轴平铺
background-repeat: repeat-y; */
}
</style>4.4 背景图片位置
4.5 背景图像固定（背景附着）
4.6 背景复合写法
background: black url() no-repeat fixed center top;
4.7 背景色半透明
4.8 背景总结
5. 综合案例
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 48px;
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url() no-repeat;
}
.nav .bg1:hover {
background-image: url();
}
</style>
<body>
<div class="nav">
<a href="" class="bg1">五彩导航</a>
<a href="">五彩导航</a>
<a href="">五彩导航</a>
<a href="">五彩导航</a>
<a href="">五彩导航</a>
</div>
</body>6. CSS三大特性
6.1 层叠性
6.2 继承性
行高的继承性
6.3 优先性
<style>
div {
color: red !important;
}
.test {
color: pink;
}
#demo {
color: green;
}
/* 不管父元素权重多高，子元素继承的权重都是0 */
body {
color: #000 !important;
}
/* a链接浏览器默认制定了一个样式，即 a {color: blue;} */
a {
color: aquamarine;
}
</style>
<body>
<div class="test" id="demo" style="color: purple;">hahaha</div>
<a href="#">a标签</a>
</body>权重虽然会叠加，但不会进位
