CSS简介和选择器

CSS

什么是CSS
CSS（Cascading Style Sheets）层叠样式表，用于修饰文档（html页面等）的语言。
在HTML中，有两中方法来修改标签样式
1.通过标签的属性进行修改
缺点：需要记忆哪个标签有什么属性，当需求变更时，需要更改大量的代码，不利于维护。
2.通过CSS进行样式修改
优点：不需要记忆标签对应的属性，当需求变更时，只需要修改对应的CSS代码就可以完成修改，利于后期维护。

CSS的语法

在html页面中，需要用<style></style>标签把CSS代码包裹起来。

选择器：你需要修改样式的标签
声明：键值对，用来添加指定的样式内容

速记写法

速记写法：可能由4个或多个属性合成一个属性
例如：border: 100px solid transparent;
border就是由border-top，border-bottom，border-style等属性合成的

！！！！利用CSS画三角形

.div1{
      width: 0;
      height: 0;
      border: 100px solid transparent;
      border-bottom: 100px solid red;
    }

   <div class="div1"></div>

CSS的引入方式

1.内联样式：在开始标签处利用style属性进行样式设置
优点：优先级较高
缺点：代码结构冗余

<div style="background-color: aqua;">我是一个div</div>

2.内部样式表：在html文件中使用style标签进行CSS样式设置
优点：样式代码和结构分开
缺点：代码复用性低

 <style>
    div{
      font-size: 30px;
    }
  </style>

3.外部样式表：使用link标签导入外部CSS文件
优点：样式与结构分离，解耦 样式的复用率高 可以应用到多个页面中

<link rel="stylesheet" href="./div.css">

4.@import导入：使用@import url()进行外部样式文件导入，不推荐
缺点：必须把@import url放在style标签的第一行，否则不会生效

<style>
    @import url('./div.css');
  </style>

样式导入的优先级：行内样式>内部样式/外部引入
就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

选择器

1.标签选择器：根据指定的标签名称，在文件中查找所有该标签并进行样式设计
	格式：
		标签名称{
		 	属性名：属性值；
		}
注意：
	标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
	标签选择器无论标签藏得多深都能选中
2.id class选择器：通过给标签设置id 或 class 属性，在设置样式时通过该属性进行查找并设置
id和class的区别：id是唯一区别一个标签的元素，一个id对应一个标签。class是区别一类标签，一个class可以由一个或多个标签组成。
	格式：
		id选择器
		#id名称{
			属性名：属性值；
		}
		class选择器
		.class名称{
			属性名：属性值；
		}
在绑定类名时，一个标签可以绑定多个类名：
	<标签名称 class="类名1 类名2 ...">
注意：一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的，而进行CSS样式设置，一般是通过类名进行设置。
3.后代，子代选择器：
	后代选择器：找到指定标签的所有特定的后代标签, 设置属性
	子代选择器：找到指定标签中所有特定的直接子元素, 然后设置属性
格式：
	后代选择器
	标签名称1 标签名称2{
		属性名：属性值；
	}
	子代选择器
	标签名称1>标签名称2{
		属性名：属性值；
	}
	注意：
		后代选择器的后代不仅是子标签，还包括孙子，重孙子标签等，只要是在开始和结束标签之间的都是该标签的后代。
		子代选择器只会查找该标签的直接子元素，不会查找其他被嵌套的标签。
4.交，并集选择器：
	交集选择器：等价于标签选择器+类选择器 给选择器选中的标签中，相交的部分进行样式设置
	并集选择器：给选择器选中的所有标签进行样式设置	
格式：
	交集选择器：
	选择器1选择器2{
   		属性名：属性值；
  	}
  	并集选择器：
  	选择器1,选择器2{
    	属性名：属性值；
 	}
 	5.兄弟选择器（两个版本）
 		CSS2  相邻兄弟选择器：给指定选择器后面紧跟着的选择器选中的标签设置属性
 		CSS3  通用兄弟选择器：给指定选择器后面的所有选择器选中的标签设置属性
 	格式：
 		相邻兄弟选择器：
 		选择器1+选择器2{
 			属性名：属性值；
 		}
 		通用兄弟选择器：
 		选择器1~选择器2{
 			属性名：属性值；
 		}
 		6.伪类选择器：以"："开头，用在选择器后，用于指明在某种状态下才能被选中
 			序选择器（结构伪类选择器）：
 			属性 同级别：
 				:first-child 				选中同级别中的第一个标签
 				:last-child 			 	选中同级别中的最后一个标签
 				:nth-child(n) 		 		选中同级别中的第n个标签
 				:nth-child(odd) 			选中同级别中的所有奇数
 				:nth-child(even)    		选中同级别中的所有偶数
 				:nth-child(xn+y)    		x和y是用户自定义的, 而n是一个计数器, 从0开始递增
 				:nth-last-child(n)  		选中同级别中的倒数第n个标签
 				:only-child 			 	选中父元素仅有的一个子元素E。仅有一个子元素时生效
 				同级别同类型：
 				:first-of-type 				选中同级别中同类型的第一个标签
 				:last-of-type  				选中同级别中同类型的最后一个标签
 				:nth-of-type(n) 			选中同级别中同类型的第n个标签
 				:nth-last-of-type(n)  		选中同级别中同类型的倒数第n个标签
 				:only-of-type 				选中父元素的特定类型的唯一子元素
 			动态伪类选择器：
 			属性：
 				:link 						修改从未被访问过状态下的样式
 				:visited 					修改被访问过的状态下的样式
 				:hover						修改鼠标悬停在a标签上状态下的样式
 				:active 					修改鼠标长按状态下的样式
 			注意：动态伪类选择器不是只用于a标签，其他的标签也能使用，在对a标签使用动态伪类选择器时，
 			其样式代码必须按照 默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active，
 			否则样式会设置不成功。
 			否定伪类选择器：从已选的元素中剔除某些元素
 			格式：
 				:not(选择器){
 					属性名：属性值；
 				}
 			伪元素选择器：给某些特殊位置的元素设置样式
 			属性：
 				::after 					表示元素的最后边的部分
 				::before					表示元素最前边的部分
 				都是结合content属性来给这些位置进行添加内容
 				::first-letter				为第一个字符来设置一个样式
 				::first-line  				为第一行设置一个样式
7.属性选择器：根据指定的属性名称找到对应的标签来进行样式设置
	格式：
	CSS2 标签名称[key |= value]{
		属性名：属性值；
	}
	CSS3 标签名称[key ^= value]{
		属性名：属性值；
	}
区别：在CSS2中的属性选择器，如果要查询value开头的名称，其后面的内容必须要用"-"隔开，而CSS3中不需要。
例如：CSS2  [name |= 'user'] =》 name="user-name"
	 CSS3  [name ^= 'user'] =》 name="username"
8.通配符选择器：选中当前页面中的所有标签 一般用于消除标签的默认样式
格式：
	*{
		属性名：属性值；
	}
9.组合选择器：组合多个选择器进行使用
格式：
	选择器1，选择器2，...{
		属性名：属性值；
	}

CSS的三大特性

1.继承性：给父元素设置某些样式，其子元素可以使用
注意：
不是所有元素都可以继承，只有以color/font-/text-/line-开头的属性才可以继承，并且对于a标签来说，文字的颜色和下划线不能继承；对于h标签来说，字体大小不能继承。
2.层叠性：是处理CSS样式冲突的一种能力
注意：
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性，发生层叠并不是失效，而是被覆盖掉了。
3.优先级：当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
判断优先级的三种方式：
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
注意：
权重的计算规则
​ 内联样式，如: style=“…”，权值为1000。
​ ID选择器，如：#content，权值为0100。
​ 类，伪类、属性选择器，如.content，权值为0010。
​ 标签选择器、伪元素选择器，如div p，权值为0001。
​ 通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
​ 继承的样式没有权值

​ -首先先计算选择器中有多少个id, id多的选择器优先级最高
​ -如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
​ -如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
​ -如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

​ 也就是说优先级如果一样, 那么谁写在后面听谁的

！！！！！注意

在计算优先级权重时，有一种情况是不在优先级计算的范围内的 ----- !important,具有这个属性的优先级是最高的，不计入权重计算。
使用！important时的注意事项：
1.!important只能用于直接选中, 不能用于间接选中
​ 2.通配符选择器选中的标签也是直接选中的
​ 3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
​ 4.!important必须写在属性值的后面，分号前面
​ 5.!important前面的感叹号不能省略
​ 6.但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。