JavaWeb——CSS选择器的常见用法详解
目录
一、CSS概念
1、定义
2、基本语法规范
二、CSS引入方式
1、内部样式表
2、行内样式表
3、外部样式
三、选择器
1、基础选择器
（1）、标签选择器
（2）、类选择器
（3）、id选择器
（4）、通配符选择器
总结
2、复合选择器
（1）、后代选择器
（2）、子选择器
（3）、并集选择器
（4）、伪类选择器
总结
四、常用元素属性
1、字体属性
（1）、设置字体
（2）、大小
（3）、粗细
（4）、字体样式
2、文本属性
（1）、文本颜色
（2）、文本对齐
（3）、文本装饰
（4）、文本缩进
（5）、行高
3、背景属性
（1）、背景颜色
（2）、背景图片
（3）、背景平铺
（4）、背景位置
（5）、背景尺寸
4、圆角矩形
（1）、定义
五、元素的显示模式
1、块级元素
2、行内元素/内联元素
3、区别
4、改变显示模式
六、盒模型
1、边框
（1）、基础属性
（2）、边框会撑大盒子
2、内边距
（1）、基础写法
（2）、复合写法
3、外边距
（1）、基础写法
（2）、复合写法
（3）、块级元素水平居中
七、弹性布局
1、flex布局
2、常用属性
（1）、justify-content
（2）、align-items
一、CSS概念
1、定义
CSS 能够对网页中元素位置的排版进行控制来实现美化页面的效果，能够做到页面的样式和结构分离。
2、基本语法规范
选择器 {
一条/N条声明；
}；
选择器决定针对谁修改；声明决定修改的样式，声明使用键值对
注：style标签可以放到页面任意位置，一般放到head标签内。CSS 使用 /* */ 作为注释。
二、CSS引入方式
1、内部样式表
内部样式写在style标签中、嵌入到html标签内。
style标签放到哪里都行，但一般都是放到head标签中。
例：
- 优点: 让样式和页面结构分离.
- 缺点: 分离的还不够彻底，尤其是css内容较多时
2、行内样式表
通过style属性来指定某个标签的样式，只针对某个标签生效，不能写太复杂的样式。
例：
hello world注：这种写法优先级较高, 会覆盖其他的样式.
3、外部样式
首先创建一个 css 文件，然后使用link标签引入css
例：
外部样式
111
div {
color: red;
}
- 优点：样式和结构彻底分离
- 缺点：受到浏览器缓存影响，修改之后不一定立刻生效
三、选择器
1、基础选择器
基础选择器是由单个选择器构成的
（1）、标签选择器
特点：能快速将同一类型的标签都选择出来，但是不能差异化选择
hehe
haha（2）、类选择器
特点：差异化表示不同的标签，可以让多个标签的都使用同一个标签
- 类名用“.”开头，标签使用class属性来调用。
- 一个类可以被多个标签使用，一个标签也能使用多个类。
- 多个类名要使用空格分割且类名不要使用纯数字，或者中文以及标签名来命名类名
例：
（3）、id选择器
- 使用“#”开头来表示id选择器
- id选择器的值和html中某个元素的id值相同
- html的元素id不必带#
- id是唯一的，不能被多个标签使用
hehe（4）、通配符选择器
使用"*"的定义，选取所有的标签
例：
* {
color: red;
}总结
| 作用 | 特点 | |
| 标签选择器 | 能选出所有相同的标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
| 通配符选择器 | 选择所有标签 | 特殊情况下使用 |
2、复合选择器
复合选择器是把多种基础选择器综合运用起来
（1）、后代选择器
后代选择器又叫包含选择器，是指选择某个父元素中的某个子元素
元素1 元素2 {
样式声明
}
注：
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级，元素 2 是子级，只选择元素 2，不影响元素 1
（2）、子选择器
子选择器和后代选择器类似，但使用大于号分割，只能选择子标签
元素1>元素2 {
样式声明
}
例：
.two>a {
color: red;
}（3）、并集选择器
并集选择器用于选择多组标签(集体声明)，通过逗号分割等多个元素表示同时选中元素 1 和 元素 2，任何基础选择器都可以使用并集选择器
元素1, 元素2 {
样式声明
}
例：
111
- 222
div, li {
color: red;
}（4）、伪类选择器
【1】、链接伪类选择器
- a:link 选择未被访问过的链接
- a:visited 选择已经被访问过的链接
- a:hover 选择鼠标指针悬停上的链接
- a:active 选择活动链接
例：
111
a:link {
color: black;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
【2】、force 伪类选择器
选取获取焦点的 input 表单元素
例：
.three>input:focus {
color: red;
}总结
| 选择器 | 作用 | 注意事项 |
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选儿子，不能选孙子 |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
| 链接结伪类选择器 | 选择不同状态的链接 | 重点掌握a:hover的写法 |
| :focuse伪类选择器 | 选择被选中的元素 | 重点掌握input:focus |
四、常用元素属性
1、字体属性
（1）、设置字体
使用“font-family：字体”来设置字体
多个字体之间使用逗号分隔(从左到右查找字体，如果都找不到会使用默认字体)，如果字体名有空格，使用引号包裹。
例：
111
（2）、大小
使用“ font-size：大小”来设置字体大小
111
（3）、粗细
使用“ font-weight：大小”来表示字体粗细
数字的粗细范围从100~900；700是粗体bold，400是普通字体
111
（4）、字体样式
使用“font-style: 样式”来表示字体样式，normal是普通样式，italic是倾斜样式
111
222
2、文本属性
（1）、文本颜色
我们使用R(red)、G(green)、B(blue)的方式表示颜色，三种颜色按照不同的比例搭配，就能混合出各种五彩斑斓的效果。
计算机中针对R、G、B三个分量，分别使用一个字节表示(表示的范围是 0-255， 十六进制表示为00~FF)。
数值越大，表示该分量的颜色就越浓，255.255.255表示白色，0.0.0表示黑色。
例：
color: red;
color: #ff0000;
color: rgb(255, 0, 0);（2）、文本对齐
text-align不光能控制文本对齐，也能控制图片等元素居中、靠右或靠左。
- center: 居中对齐
- left: 左对齐
- right: 右对齐
例：
左对齐
右对齐
居中对齐
（3）、文本装饰
- underline：下划线
- none：无作用，可去除去掉下划线等操作
- overline：上划线
- line-through：删除线
例：
无作用
下划线
上划线
删除线
（4）、文本缩进
可以通过text-indent来控制段落的首行缩进 (其他行不影响)，单位可以使用 px 或者 em。
注：缩进可以是负的，表示往左缩进
例：
正常缩进
反向缩进
（5）、行高
使用“line-height:n”来表示上下文本行之间的基线距离
3、背景属性
（1）、背景颜色
background-color：指定颜色
默认是透明的，可以通过设置颜色的方式修改
红色背景
绿色背景
透明背景
（2）、背景图片
background-image: url(路径)
注意:
- url 可以是绝对路径，也可以是相对路径
- url 上可以加引号，也可以不加
例：
背景图片
（3）、背景平铺
background-repeat: 平铺方式
- repeat: 平铺（默认）
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
例：
不平铺
水平平铺
垂直平铺
注：背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方
（4）、背景位置
background-position: x y;
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
背景居中
（5）、背景尺寸
background-size:length | percentage | cover | contain
- length：填具体的数值，如40px、60px，表示宽度为40px、高度为 60px
- percentage：填百分比，按照父元素的尺寸设置
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
例：
背景尺寸4、圆角矩形
（1）、定义
通过 border-radius: length 使边框带圆角效果，length是内切圆的半径，数值越大弧线越强。
让 border-radius 的值为正方形宽度的一半可生成圆形
让 border-radius 的值为矩形高度的一半可生成圆角矩形
五、元素的显示模式
1、块级元素
常见元素：h1 - h6、p、div、ul、ol、li.......
特点：独占一行，高度、宽度、内外边距和行高都可以控制，宽度默认是父级元素宽度的 100%，是一个盒子且里面可以放行内元素和块级元素
注：文字类的元素内不能使用块级元素；p 标签主要用于存放文字，内部不能放块级元素
2、行内元素/内联元素
常见的元素：a、strong、b、em、i、span......
特点：不独占一行，一行可以显示多个
设置高度、宽度、行高无效，左右外边距有效(上下无效)，内边距有效。
默认宽度就是本身的内容，行内元素只能容纳文本和其他行内元素, 不能放块级元素
注意：a 标签中不能再放 a 标签；a 标签里可以放块级元素，但建议先把 a 转换成块级元素。
3、区别
- 块级元素独占一行，行内元素不独占一行
- 块级元素可以设置宽高，行内元素不能设置宽高.
- 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置
4、改变显示模式
使用display属性可以修改元素的显示模式：可以把 div 等变成行内元素，也可以把a、 span等变成块级元素.
- display: block 改成块级元素
- display: inline 改成行内元素
- display: inline-block 改成行内块元素
六、盒模型
每一个HTML元素相当于是一个矩形的盒子，这个盒子由以下几个部分构成：边框 border、内容 content、内边距 padding、外边距 margin
1、边框
（1）、基础属性
- 粗细：border-width
- 样式：border-style。默认没边框、solid是实线边框、dashed是虚线边框、dotted是点线边框
- 颜色：border-color
例：
div {
width: 50px;
height: 25px;
border-width: 1px;
border-style: solid;
border-color: green;
}（2）、边框会撑大盒子
通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子。
例：
* {
box-sizing: border-box;
}
2、内边距
padding设置内容和边框之间的距离。
（1）、基础写法
默认内容是顶着边框来放置的，可以用 padding 来控制距离。
可以给四个方向都加上边距：padding-top、padding-bottom、padding-left、padding-right。
（2）、复合写法
- padding: 5px; 表示四个方向都是5px
- padding: 5px 10px; 表示上下内边距5px, 左右内边距为10px
- padding: 5px 10px 20px; 表示上边距5px, 左右内边距为10px, 下内边距为20px
- padding: 5px 10px 20px 30px; 表示上内边距为5px, 右内边距为10px, 下内边距为20px, 左内边距为30px
3、外边距
（1）、基础写法
外边距是用来控制盒子和盒子之间的距离，可以给四个方向都加上边距：margin-top、margin-bottom、margin-left、margin-right。
例：
111
.first {
margin-bottom: 20px;
}（2）、复合写法
margin的复合写法同padding的复合写法。
（3）、块级元素水平居中
- margin-left: auto;
- margin-right: auto;
- margin: auto;
- margin: 0 auto;
注：margin: auto 是给块级元素用的，text-align: center 是让行内元素或者行内块元素居中的。对于垂直居中不能使用 "上下 margin 为 auto " 的方式。
七、弹性布局
1、flex布局
任何一个 html 元素都可以指定为 display:flex 完成弹性布局，flex 布局的本质是给父盒添加 display:flex 属性以此来控制子盒的位置和排列方式。
设置为 display:flex 属性的元素，称为 flex container。它的所有子元素立刻称为该容器的成员，称为 flex item。子元素可以纵向排列也可以横向排列。
注意：当父元素设置为 display: flex 后，子元素的 float、clear、vertical-align 都会失效。
2、常用属性
（1）、justify-content
justify-content可以用来设置主轴上的子元素排列方式
- 未指定/或设置 justify-content: flex-start，默认从左到右的方向排列
- 设置 justify-content: flex-end，元素都排列在右侧
- 设置 jutify-content: center，元素居中排列
- 设置 justify-content: space-around，两边留有间隙，间隔排列平分剩余空间
- 设置 justify-content: space-between，两边没有间隙，间隔排列平分所有空间
（2）、align-items
align-items用来设置侧轴上的元素排列方式，可以使用 align-items 实现垂直居中。
- 设置 align-items: stretch，默认值，行拉伸以占据剩余空间
- 设置 align-items: center，朝着弹性容器的中央对行打包
- 设置 align-items: flex-start，朝着弹性容器的开头对行打包
- 设置 align-items: flex-end，朝着弹性容器的结尾对行打包
- 设置 align-items: space-between，行均匀分布在弹性容器中
- 设置 align-items: space-around，行均匀分布在弹性容器中，两端各占一半
注：align-items 只能针对单行元素来实现，如果有多行元素就需要使用 item-contents