CSS引入方式,选择器,三大特性以及优先级

零、引入方式

1. 内联样式(行内样式)

缺点：样式与结构冗余
优点：优先级较高

<div style="color:red;font-size:14px">
    设置字体颜色为红色，并且字体大小为14px
</div>

2. 内部样式表

缺点：样式的复用率较低 优点：样式与结构分离

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

3. 外部样式表

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

2.@import url()，还可通过import方式导入CSS文件

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

一、选择器

选择器	格式
标签选择器	标签{属性:属性值;属性:属性值;}
id选择器	#id名{}
类选择器	.类名{}
通配符选择器	*{}
交集选择器	标签选择器类/id选择器{} 直接紧挨着写，中间无其他符号
并集选择器	选择器，选择器{}
后代选择器	选择器 选择器{}
子代选择器	选择器>选择器{}
相邻兄弟选择器	选择器+选择器{}
通用兄弟选择器	选择器~选择器{}
属性选择器	标签[ 属性=属性值 / 属性^=属性值找以xx开头/ 属性*=属性值 找包含某部分的/ 属性$=属性值 找以xx结尾]{}
伪类选择器	标签:first-child / last-child / nth-child(n / odd / even / 公式) / nth-last-child() / only-child
·	/first-of-child / last-of-child / nth-of-child(n / odd / even / 公式) / nth-last-of-child() / only-of-child {}
否定伪类…	标签:not(id名/类名){}
动态伪类…	标签:link（未访问） / visited 已访问/ hover鼠标停留/ active 元素被激活{}
伪元素选择器	标签::before / after / first-letter / first-line{}

二、三大特性

- 继承性

• 概念: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
• 注意点:
  ​ 1.并不是所有的属性都可以继承, 通常以color/font-/text-/line-/letterr-spaceing/word-spaceiing开头的属性才可以继承
  ​ 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
  ​3.继承性中的特殊性：a标签的文字颜色和下划线是不能继承的；h标签的文字大小是不能继承的

- 层叠性

• 概念: 层叠性就是CSS处理冲突的一种能力
• 注意点:
  层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

- 优先级

​ 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

！important	max
行内	1000
id	100
类，伪类，属性	10
标签，伪元素	1
通配符，复合（+、>、~等），否定伪类（:not）	0
继承	无