CSS选择器的常见用法

CSS的引入方式

1. 内部样式：将style标签嵌入到html内部。
2. 行内样式：通过style属性，在html标签中指定某个标签的样式。
3. 外部样式：专门写一个css文件，在html文件中通过link标签引入css。

内部样式和外部样式都能使样式和页面结构分离，有助于阅读和修改。但是前者的分离效果不如后者，外部样式能够使多个html文件利用link属性引入，这样就避免了重复写相同样式的麻烦。并且在后期希望对页面的样式进行修改的时候，外部样式的引入方式也能让我们更快速的修改。

基础选择器

1. 标签选择器：例如div, span等html标签都可以作为标签选择器。在style标签或者css文件中为我们选择的标签制定样式。
2. 类选择器。如果我们给一些标签设置了class，那么我们就可以通过设置的class的名字，通过【.class名字】去给该标签设置样式，或者说给都是属于这个class的标签设置样式。
3. id选择器。id相当于是给某个元素一个身份证，具有唯一性。我们可以通过【#id名字】去给设置该id的标签元素定制样式。
4. 通配符选择器。用【*】号表示html中的所有元素，在想给页面设置成我们想要的样式时，写css的时候，一般会用通配符选择器，来清除浏览器的默认样式，一般是将内边距padding和外边距margin都设置为0，将box-sizing设置为border-box来保证不会让内边距撑大盒子。

1.标签选择器

特点:

• 能快速为同一类型的标签都选择出来.
• 但是不能差异化选择

<style>
p {
  color: red;
}
div {
  color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>

 2.类选择器

特点:

• 差异化表示不同的标签
• 可以让多个标签的都使用同一个标签.

tip：一个标签可以使用多个类名

3. id选择器

• CSS 中使用 # 开头表示 id 选择器
• id 选择器的值和 html 中某个元素的 id 值相同
• id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

复合选择器

复合选择器就是把多个基础选择器综合运用起来。

1. 后代选择器
2. 子选择器
3. 并集选择器
4. 伪类选择器

1.后代选择器

格式：

元素1 元素2 {样式声明}

• 元素 1 和 元素 2 要使用空格分割
• 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
• 元素2只要是元素1的后代元素就可以，可以是儿子也可以是孙子。

2.子选择器

格式：

元素1>元素2 { 样式声明 }

• 使用大于号分割
• 只选亲儿子, 不选孙子元素

3.并集选择器

格式：

元素1, 元素2 { 样式声明 }

• 通过 逗号 分割等多个元素.
• 表示同时选中元素 1 和 元素 2
• 任何基础选择器都可以使用并集选择器.
• 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

4.伪类选择器

1) 链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

2) :force 伪类选择器
选取获取焦点的 input 表单元素.

<div class="three">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

.three>input:focus {
  color: red;
}

此时被选中的表单的字体就会变成红色.

常用元素属性

1.字体属性

• 设置字体【font-family】：比如可以给该属性设值为'微软雅黑'，或者'Microsoft YaHei'。字体名称可以用中文但是不建议。多个字体之间使用逗号分隔，从左到右查找字体，如果都找不到就会使用默认字体。
• 设置大小【font-size】:单位是px。例如14px。
• 设置粗细【font-weight】,可以用数字表示粗细，700 == bold,取值范围是100 - 900
• 设置倾斜【font-style】: 倾斜：italic， 取消倾斜：normal

2.文本属性

• 设置文本颜色【color】，可以用英文单词red表示，也可以用16进制表示#ff0000,也可以用rgb表示，rgba比rgb多了一个透明度的设置，a用小数表示。
• 文本对齐【text-align】:center：居中对齐，left:左对齐，right右对齐。
• 文本装饰【text-decoration】:underline:下划线，none:没有样式，overline:上划线，line-through:删除线
• 文本缩进【text-indent】:单位可以用px或者em。使用em作为单位更好，1个em就是当前元素的文字大小。
• 行高【line-hight】:单位px,行高 = 上边距 +  下边距 + 字体大小。上下边距是相等的。相当于如果把行高设置成存放文字的标签元素的高度，就能实现文字在该元素标签垂直居中的效果。

3.背景属性

• 背景颜色【background-color】：可以用英文单词，十六进制，rgb,rgba表示。transparent表示设置为背景透明。
• 背景图片【background-image】: url('图片路径'),也可以不加引号
• 背景平铺【background-repeat】：repeat：平铺，no-repeat：不平铺，repeat-x:水平平铺，repeat-y:垂直平铺
• 背景位置【background-position】：参数有三种风格:1. 方位名词: (top, left, right, bottom)，2. 精确单位: 坐标或者百分比(以左上角为原点)，3. 混合单位: 同时包含方位名词和精确单位。
• 背景尺寸【background-size】：可以是具体的数值，也可以是百分比（根据父元素的尺寸），cover表示将图片尽量放大到占据元素尺寸，contain表示将图片尽量缩放到元素尺寸可以放下完整的图片。

4.圆角矩形

border-radius:单位可以是px,也可以是百分数。百分数表示占元素宽度的百分之几。

也可以分开对四个角进行不同的设置。如果想设置圆形，矩形首先得是正方形，然后值为矩形高度的一半。

5.元素显示模式

• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]
• display: inline-block 改成行内块元素

1.弹性布局

display:flex,让该元素的子元素为弹性布局。

弹性布局可以使是行内元素的子元素具有高和宽的属性。

常和flex搭配的属性：【justify-content】 ： center 水平居中排列  space-around：两边留有空白，子元素在中间等距排列。space-between：两边不留空白等距排列。

align-items：center， 可以实现一行的子元素垂直居中。

6.边框

• 粗细: border-width
• 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
• 颜色: border-color

支持简写, 没有顺序要求

例如：border: 1px solid red;

• box-sizing: border-box;通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

7.内边距

默认内容是顶着边框来放置的. 用 padding 来控制这个距离

• padding-top
• padding-bottom
• padding-left
• padding-right

8.外边距

控制盒子和盒子之间的距离.可以给四个方向都加上边距

• margin-top
• margin-bottom
• margin-left
• margin-right

tip:使块级元素水平居中可以将margin设置为0 auto，前提是要给当前元素指定宽度，否则宽度就会默认和父元素一致。