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>类表单元素才能获取，因此这个选择器主要针对与表单元素。
<input type="text"><input type="text"><input type="text">
<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;
<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标签中应为红色。