1.emmet语法
1)快速生成HTML结构语法
---标签名+tab键即可生成标签
---标签+*+数量即可生成多个标签
---如果有父子级关系的标签,用>,比如ul>li+tab键
---如果有兄弟级的标签,用++tab键
---如果生成带有类名或者id名字的,直接写.demo/#demo +tab键
---如果生成的div类名是有顺序的,用自增符号$
---如果想要在生成的标签内部写内容可以用{}表示
2)快速生成CSS样式语法
基本采用简写形式。
css
<style>
.one{
text-align: center; /* tac+tab可以快速生成 */
text-indent: 2px; /* ti2+tab可以快速生成 */
width: 100px; /* w100+tab可以快速生成 */
height: 200px; /* h200+tab可以快速生成 */
line-height: 26; /* lh26+tab可以快速生成 */
}
</style>
2.CSS复合选择器
1)后代选择器
html
<ol>
<li>卷卷卷</li>
<li>卷卷卷</li>
<li>卷卷卷</li>
</ol>
<ul>
<li>卷卷卷</li>
<li>卷卷卷</li>
<li>卷卷卷</li>
</ul>
将ol中的小li设置样式,标签、类选择器显然不行,此时用到我们的后代选择器。
语法:元素1+空格+元素2+空格+{样式声明}
元素1和元素2必须用空格隔开,元素1必须是父级,元素2必须是后代,最终选择的是元素2
css
<style>
ol li {
color: red;
}
</style>
html
<ol>
<li>卷卷卷</li>
<li>卷卷卷</li>
<li><a href="#">卷卷卷</a></li>
</ol>
css
<style>
ol li a {
color: red;
}
</style>
2)子选择器
---只能选择作为某元素的最近一级子元素
语法:元素1>元素2{样式声明}
3)并集选择器
---可以选择多组标签,同时为他们定义相同的样式。用英文逗号,分隔。
语法:元素1,元素2{ 样式声明 }
4)伪类选择器
---用 **:**表示
(1)链接伪类选择器
---a:link选择所有还没有被访问的链接的样式
---a:hover选择鼠标指针位于其上的链接
---a:visted选择所有已被访问的链接
---a:active选择活动链接(鼠标按下没有弹起的链接)
html
<body>
<a href="#">2025</a>
</body>
css
<style>
/* 没有访问的链接 */
a:link {
color: black;
text-decoration: none;
}
/* 选择点击过的链接 */
a:visited {
color: blue;
}
/* 选择鼠标经过的那个链接,没有点击 */
a:hover {
color: yellow;
}
/* 选择鼠标按下没有弹起的链接 */
a:active {
color :green;
}
</style>
书写时注意:按照LVHA的顺序写,即link、visited、hover、active。链接单独指定样式。
(2):focus伪类选择器
---用于选择获得焦点的表单元素。焦点就是光标。一般情况<input>类表单元素才能获取,因此这个选择器主要针对与表单元素。
html
<input type="text">
<input type="text">
<input type="text">
css
<style>
/* 把获得光标的表单元素选择出来 */
input:focus{
background-color: red;
}
</style>
复合选择器总结

3.CSS的元素显示模式
---元素分为块元素和行内元素
1)块元素
特点:
1.独占一行
2.可以设置高度、宽度、内外边距
3.宽度默认是容器的宽度
4.是容器,里面可以放行内或者块级元素
注意:文字类的元素内不能使用块级元素,<p>标签主要用于存放文字,因此p里面不能放块级元素,特别不能放div,同理h1~h6也不能放块级元素。
2)行内元素(内联元素)
特点:
1.相邻行内元素在一行上,一行可以显示多个。
2.高、宽设置是无效的。
3.默认宽度是本身内容的宽度。
4.行内元素只能容纳文本或者其他行内元素。
注意:链接里面不能再放链接;特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
3)行内块元素
eg:<img/>、<input/>、<td>同时具有块元素和行内元素的特点
特点:
1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个。
2.默认宽度就是它本身内容的宽度。
3.高度、行高、内外边距可以控制。
4)元素显示模式总结

5)显示模式转换
转换为块元素:display:block;
css
<style>
a {
width: 150px;;
height: 50px;
background-color: pink;
display:block;
}
</style>
html
<body>
<a href="#">2025</a>
</body>
转换为行内元素:display:inline;
css
<style>
div {
width: 300px;
height: 100px;
background-color: green;
display:inline;
}
</style>
html
<body>
<div>2025</div>
<div>2025</div>
</body>
行内元素转换为行内块元素:display:inline-block;
css
<style>
span {
width: 100px;
height: 30px;
background-color: green;
display: inline-block;
}
</style>
html
<body>
<span>2025</span>
<span>2025</span>
</body>
单行文字垂直居中:让文字的行高等于盒子的高度
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单版侧边栏</title>
<style>
a {
width: 230px;
height: 40px;
background-color: #55585a;
font-style: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
display: block;
}
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的背景
1)背景颜色
语法:background-color : transparent(透明的) | color
2)背景图片
优点:便于控制位置
语法:background-image : none | url (url)
注意:这里的url()不要丢掉

3)背景平铺
语法:background-repeat : repeat | no-repeat | repeat-x |repeat-y
背景图片默认是平铺的,其中,no-repeat:不平铺,repeat-x:沿x轴平铺,repeat-y:沿y轴平铺
4)背景图片位置
语法:background-position: x y;
可以使用方位名词或者精确单位,如果是方位名词,跟顺序无关,center left和left center效果相同,如果只写一个,那么另一个默认是center。如果背景图片位置是精确位置,那么第一个肯定是x坐标,第二个肯定是y坐标。如果参数只写一个值,那肯定是x的值,另一个默认垂直居中。方位名词和精确单位可以混合使用,第一个肯定是x坐标,第二个肯定是y坐标。

5)背景图像固定(背景附着)
background-attachment属性设置背景图像设置图像是否固定或者随着页面的其余部分滚动。可以制作视差滚动的效果。
语法:background-attachment : scroll | fixed

6)背景复合写法
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
7)背景色半透明
语法:background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度,取值范围在0~1之间。CSS3新增属性,是IE9+版本浏览器才支持的
8)总结

5.CSS的三大特性
层叠性、继承性、优先级。
1)层叠性
相同选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
原则:样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式;样式不冲突,不会层叠。(后来者居上)
2)继承性
子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。可以简化代码,降低CSS样式的复杂性。
html
<!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>
div {
color: blue;
}
</style>
</head>
<body>
<div>
<p>2025</p>
</div>
</body>
</html>
此时p标签中的内容为蓝色。
行高的继承
font:字体大小/相对行高,这里的1.5是指字体大小的1.5倍
css
font: 15px/1.5 'Microsoft YaHei';
若上述代码是父标签的字体属性且子标签设置了字体大小,则子标签会继承父标签的行高,即子标签行高为子标签字体大小的1.5倍。
3)优先级
当同一个元素指定多个选择器,就会有优先级的产生。
若选择器相同,则执行层叠性。
选择器不同,则根据选择器权重执行。

css
<style>
div {
color: blue!important;
}
.nav {
color: red;
}
#demo {
color: pink;
}
</style>
html
<body>
<div class="nav" id="demo" style="color:yellow">2025</div>
</body>
优先级注意点:权重是有4组数字组成,但是不会有进位;继承的权重是0;从左到右比较大小。
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
css
<style>
/* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 */
ul li {
color: red;
}
/* li 的权重0,0,0,1 */
li {
color: blue;
}
</style>
html
<body>
<ul>
<li>2025</li>
<li>2024</li>
<li>2023</li>
</ul>
</body>
因此li标签中应为红色。