CSS基础学习第二天
CSS基础学习第二天
1.emmet语法
1）快速生成HTML结构语法
—标签名+tab键即可生成标签
—标签+*+数量即可生成多个标签
—如果有父子级关系的标签，用>，比如ul>li+tab键
—如果有兄弟级的标签，用++tab键
—如果生成带有类名或者id名字的，直接写.demo/#demo +tab键
—如果生成的div类名是有顺序的，用自增符号$
—如果想要在生成的标签内部写内容可以用{}表示
2）快速生成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）后代选择器
<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
<style>
ol li {
color: red;
}
</style>
<ol>
<li>卷卷卷</li>
<li>卷卷卷</li>
<li><a href="#">卷卷卷</a></li>
</ol>
<style>
ol li a {
color: red;
}
</style>2）子选择器
—只能选择作为某元素的最近一级子元素
语法：元素1>元素2{样式声明}
3）并集选择器
—可以选择多组标签，同时为他们定义相同的样式。用英文逗号,分隔。
语法：元素1,元素2{ 样式声明 }
4）伪类选择器
—用 **:**表示
（1）链接伪类选择器
—a:link选择所有还没有被访问的链接的样式
—a:hover选择鼠标指针位于其上的链接
—a:visted选择所有已被访问的链接
—a:active选择活动链接（鼠标按下没有弹起的链接）
<body>
<a href="#">2025</a>
</body>
<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 type="text">
<input type="text">
<input type="text">
<style>
/* 把获得光标的表单元素选择出来 */
input:focus{
background-color: red;
}
</style>复合选择器总结
3.CSS的元素显示模式
—元素分为块元素和行内元素
1）块元素
特点：
1.独占一行
2.可以设置高度、宽度、内外边距
3.宽度默认是容器的宽度
4.是容器，里面可以放行内或者块级元素
注意：文字类的元素内不能使用块级元素，
标签主要用于存放文字，因此p里面不能放块级元素，特别不能放div，同理h1~h6也不能放块级元素。
2）行内元素（内联元素）
特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.高、宽设置是无效的。
3.默认宽度是本身内容的宽度。
4.行内元素只能容纳文本或者其他行内元素。
注意：链接里面不能再放链接；特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全
3）行内块元素
eg：、、
特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个。
2.默认宽度就是它本身内容的宽度。
3.高度、行高、内外边距可以控制。
4）元素显示模式总结
5）显示模式转换
转换为块元素：display:block;
<style>
a {
width: 150px;;
height: 50px;
background-color: pink;
display:block;
}
</style>
<body>
<a href="#">2025</a>
</body>转换为行内元素：display:inline;
<style>
div {
width: 300px;
height: 100px;
background-color: green;
display:inline;
}
</style>
<body>
<div>2025</div>
<div>2025</div>
</body>行内元素转换为行内块元素：display:inline-block;
<style>
span {
width: 100px;
height: 30px;
background-color: green;
display: inline-block;
}
</style>
<body>
<span>2025</span>
<span>2025</span>
</body>单行文字垂直居中：让文字的行高等于盒子的高度
<!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样式的复杂性。
<!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倍
font: 15px/1.5 'Microsoft YaHei';若上述代码是父标签的字体属性且子标签设置了字体大小，则子标签会继承父标签的行高，即子标签行高为子标签字体大小的1.5倍。
3）优先级
当同一个元素指定多个选择器，就会有优先级的产生。
若选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。
<style>
div {
color: blue!important;
}
.nav {
color: red;
}
#demo {
color: pink;
}
</style>
<body>
<div class="nav" id="demo" style="color:yellow">2025</div>
</body>优先级注意点：权重是有4组数字组成，但是不会有进位；继承的权重是0；从左到右比较大小。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
<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>
<body>
<ul>
<li>2025</li>
<li>2024</li>
<li>2023</li>
</ul>
</body>因此li标签中应为红色。