目录
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>权重虽然会叠加，但不会进位
