该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都欢迎在评论区提出。本文主要介绍CSS基础知识，包括一些小工具、复合选择器、元素显示模式、背景和CSS的三大特性
思维导图
第一章 web工具
1.1 Emmet语法
作用：使用缩写，提高HTML/CSS代码的编写速度。VSCode内部已经集成该语法，可以直接使用
快速生成HTML结构语法
标签：标签名+Tab键。例如div+Tab键即可生成<div></div>
多个相同标签：标签名*个数+Tab键。例如div*3即可生成3个div标签
父子级关系标签：>。例如ul>li即可生成带有一个li的无序列表
兄弟关系的标签：+。例如div+p
带有类名或者id的标签：.demo或者#two
<!-- p.demo -->
<p class="demo"></p>
<!-- #two -->
<div id="two"></div>有顺序的类名：用自增符号$
<!-- .demo$*4 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>内部有内容的标签：{}。例如div{从善如登，虽难可达昆仑}
<!-- div{从善如登，虽难可达昆仑} -->
<div>从善如登，虽难可达昆仑</div>快速生成CSS样式语法
利用属性和属性值首字母来快速输入CSS代码。
示例
/* ti2 */
text-indent: 2px;
/* tic */
text-align: center;
/* tdu */
text-decoration: underline;1.2 VSCode自动格式化代码
设置方式：左下角设置——文本编辑器——格式化——勾选Format on Save
设置完成后保存文件时VSCode会自动格式化代码。
1.3 snipaste工具
第二章 复合选择器
复合选择器是由基础选择器组合而成的，可以更准确、更高效地选择目标元素
2.1 后代选择器
作用：选择父元素中的所有子元素
语法格式
/* ol为元素1，li为元素2 */
ol li {
color: blue;
}
ol li a {
color: red;
}
.yellow li a {
color: yellow;
}注：
元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
2.2 子选择器
作用：选择某元素最近一级子元素。
语法格式
.nav>a {
color: red;
}注:
元素1和元素2中间用大于号">"隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2选择的是最近一级元素(与后代选择器的区别)
2.3 并集选择器
作用:选择多标签。通常用于集体声明
语法格式
div,
p,
.pig>li {
color: pink;
}注:元素1和元素2中间用逗号","隔开,可以理解为和的意思
2.4 伪类选择器
最大的特点是用冒号":"表示,比如:hover、:first-child
作用:用于给某类选择器添加特殊的效果
链接伪类选择器
语法格式
/* 未访问的链接 a:link*/
a:link {
color: black;
text-decoration: none;
}
/* 访问过的链接 a:visited */
a:visited {
color: orange;
}
/* 鼠标经过的链接 a:hover */
a:hover {
color: blue;
}
/* 鼠标按下但还没有弹起页面的链接 a:active */
a:active {
color: pink;
}注：
伪类确保生效，请按照LVHA的顺序声明：:link :visited :hover :active
因为a标签在浏览器中有默认样式，所以实际开发需要给链接单独指定样式。例如
a {
color: black;
text-decoration: none;
}
a:hover {
color: #379;
}:focus伪类选择器
作用：获取获得焦点的表单元素
语法格式
input:focus {
background-color: blue;
}效果图
结构伪类选择器*
2.5 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 分隔符号及用法 |
后代选择器 | 用来选择后代元素 | 可以是任意子级元素 | 较多 | 空格。.nav a |
子选择器 | 选择最近一级子元素 | 只选亲儿子 | 较少 | 大于号。.nav>a |
并集选择器 | 选择某些相同样式的元素 | 用于集体声明 | 较多 | 逗号。.nav,a |
链接伪类选择器 | 选择不同状态的链接 | 与链接状态相关 | 较多 | 重点记住a{}和a:hover在实际开发中的写法 |
:focus伪类选择器 | 选择获得焦点的表单 | 与表单状态相关 | 较少 | 记住input:focus这个写法 |
第三章 元素显示模式
元素显示模式即元素(标签)显示的方式，一般分为块元素和行内元素
3.1 块元素
常见的块元素：<h1>-<h6> <p> <div> <ul> <ol> <li>等，其中<div>标签是最典型的块元素
特点：
独占一行
高度、宽度、外边距及内边距都可以控制
宽度默认是容器(父级元素)的100%
是一个容器以及盒子，里面可以放行内元素以及块元素
注：文字类的元素内部不能使用块元素，例如<h1>-<h6> <p>
3.2 行内元素
常见的行内元素：<a><strong><b><em><i><del><s><ins><u><span>等，其中<span>标签是最典型的行内元素。行内元素有时也被称为内联元素
特点：
相邻行内元素在同一行
高度和宽度没有办法设置
默认宽度就是内容的宽度
行内元素只能容纳文本或其他行内元素
注：
链接<a>里面不能再放链接
特殊情况下链接<a>里面可以放块级元素，但是把<a>转换为块级模式会更安全
3.3 行内块元素
行内元素中有几个特殊的标签，如<input/><img/><td>。它们同时具有块元素和行内元素的特点，所以有些资料称它们为行内块元素
特点：
和相邻行内元素/行内块元素在一行上，但是它们之间会有空隙(这是由于换行符导致的)
默认宽度就是内容的宽度(行内元素特点)
高度、行高、外边距以及内边距都可以控制(块级元素特点)
3.4 总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块级元素 | 一行只能放一个块级元素 | 可以设置宽度和高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度和高度 | 内容的宽度 | 容纳文本或其他行内元素 |
行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度和高度 | 内容的宽度 |
3.5 元素显示模式转换
在某些情况下，需要元素模式的转换，即一个模式的元素需要另外一个模式的特性。例如希望增加<a>的出发范围。
语法格式
/* 转换为块元素 */
display: block;
/* 转换为行内元素 */
display: inline;
/* 转换为行内块元素 */
display: inline-block;3.6 小技巧：让文字垂直居中
方法：让文字行高等于盒子的高度
语法格式
div {
height: 32px;
line-height: 32px;
background-color: skyblue;
text-align: center;
}原理
第四章 背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景附着等
4.1 背景颜色
使用方法和color一样，只是多了一个选择：transparent(透明的)
语法格式
div {
background-color: skyblue;
}4.2 背景图片
常见于logo或者一些装饰性的小图片或者超大的背景图片。优点是便于控制位置
语法格式
background-image: url(images/logo.png);4.3 背景平铺
语法格式
background-image: url(images/logo.png);
/* 1.背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2.默认背景平铺 */
/* background-repeat: repeat; */
/* 3.沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 4.沿着y轴平铺 */
background-repeat: repeat-y;效果图
4.4 背景图片位置
参数值 | 说明 |
length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
position | top | center | button | left | center | right 方位名词 |
语法格式
background-image: url(images/logo.png);
/* 背景图片靠上居中显示 */
background-position: top center;
/* x轴向右偏移20px y轴向下偏移50px */
background-position: 20px 50px;
/* x轴向右偏移20px y轴居中 */
background-position: 20px center;注：
参数 | 说明 |
方位名词 |
|
精确单位 |
|
混合单位 |
|
4.5 背景附着
参数值 | 说明 |
scroll | 背景图像随对象内容滚动 |
fixed | 背景图像固定 |
inherit | 从父元素继承background-attachment的值 |
语法格式
div {
background-image: url(images/bg.jpg);
background-position: top center;
background-repeat: no-repeat;
color: white;
font-size: 20px;
background-attachment: fixed;
}4.6 背景复合写法
当简写背景属性时，没有特定的书写顺序，但实际开发中有提倡的写法：
background：背景颜色 背景图片地址 背景平铺 背景图片固定 背景图片位置
语法格式
div {
/* background-image: url(images/bg.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: black;
background-attachment: fixed; */
background: black url(images/bg.jpg) no-repeat fixed top center;
}4.7 背景色半透明
语法格式
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, .3);
}注：
最后一个参数是alpha透明度，取值范围在0-1之间，越小则越透明
背景半透明指的是盒子背景半透明，盒子里的内容不受影响
4.8 背景总结
属性 | 含义 | 值 |
background-color | 背景颜色 | 预定义的颜色值/十六进制/rgb代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 背景平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position 分别是x和y坐标 |
background-attachment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
背景简写 | 背景颜色 背景图片 背景平铺 背景附着 背景位置 | |
背景色半透明 | 背景颜色半透明 | background:rgba(0,0,0,.3)，必须是四个值 |
练习
第五章 CSS的三大特性
5.1 层叠性
相同选择器设置相同的样式，此时一个样式会覆盖(层叠)另一个冲突的样式。
层叠性原则：
样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
示例
div {
color: skyblue;
font-size: 12px;
}
div {
color: pink;
}
颜色冲突，生效的颜色是pink，字体大小不冲突，字体被设置为12px
5.2 继承性
子标签会继承父标签的某些样式，如文本颜色和字号等。
注：
恰当地使用继承性可以简化代码，降低CSS的复杂性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)
5.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，则考虑层叠性
选择器不同，则根据选择器权重执行
选择器权重如下表所示
选择器 | 选择器权重 |
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器、伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important | 无穷大 |
注：
等级判断是从左到有，如果某一位相同，则判断下一位数值
继承的权重是0,如果该元素没有直接选中，不管父元素的权重多大，子元素的权重都是0
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
四个数分别相加，但是不会有进位
1569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
