HTML——选择器优先级+样式设计+盒子模型

目录

1. 选择器优先级
2. 样式设计
3. 盒子模型

---

 

1. 选择器优先级

   ---

   选择器的优先级别： 查找标签越精确 优先级别越高
   另外一种去计算选择器优先级别的： 选择器的权重 权重值越大 优先级别越高
   	权重值分了四个等级：1000， 100， 10， 1
   	行内引用style属性设计样式 --- 权重值是1000
   	id选择器 --- 权重值是 100
   	类选择器， 伪类选择器， 属性选择器 ---- 权重值是10
   	元素选择器 --- 权重值是 1
   	后代选择器器(包含选择器) 权重值 所有的选择器的权重之和
   			#main > .page 权重值就是 100 + 10 
   			#main p 权重值就是 100 + 1
   	组合选择器 权重是是选择器自身的权重
   		#main, .page, p --- 各自自身的分别是 100， 10， 1

    

2. 样式设计

   ---

   样式设计：
   	1. 关于背景的样式设计
   知识点：
   	关于颜色的赋值：
   		1. 直接颜色对应的英文数据  red  green  blue black
   		2. 使用十六机制颜色值  #000000 - #ffffff [如果每种颜色值对应的十六进制数值的两位是一致的话 可以简化成一位的：#000 或者 #fff ]  affcbe ---> af fc  be  简化之后没办法判断的就不用简化了  例如 #aabbcc ---> #abc
   			
   			十六进制的颜色值中 每两位表示的是一个颜色值 三对的时候就可以简化
   					颜色为AABBCC格式的才能简化
   					例如: #112233 ---> #123
   						 #111111 ---> #111
   					
   		3. 使用rgb功能自己调色
   			颜色调色： 红色 绿色和蓝色来完成颜色调比的， 每种颜色的对应的十进制取值是0到255 [对应的十六进制 #00 到 #ff]
   			
   			这个的颜色值使用的是十进制的数据
   			rgb(红色对应的颜色值，绿色对应的颜色值，蓝色对应的颜色值)
   			
   			rgba(红色对应的颜色值，绿色对应的颜色值，蓝色对应的颜色值, 透明度)
   					r -- 红色的颜色值
   					g -- 绿色的颜色值
   					b -- 蓝色的颜色值
   					a -- alpha -- 生成之后颜色的透明度 取值是0到1
   							0表示完全透明
   							1表示完全不透明
   							0.5 半透明
   		4.hsl调色
   			h色相 --- 色彩的基本属性 值是0到360
   					0(或者360) 红色
   					120  绿色
   					240  蓝色
   					
   					0到120是红色到绿色的过渡色
   					
   					120到240 是绿色到蓝色的过渡色
   					
   					240到360 蓝色到红色的过渡色
   					
   			s饱和度 取值是0到100%
   					色彩的饱和度越高 色彩越纯
   					低的话就慢慢的变灰了
   			l亮度 取值也是0到100%  正常亮度是50%
   					50%-100% 趋于白变化
   					50%-0% 趋于黑的变化
   		
   			hsla 其中a就是透明度

    

3. 盒子模型

   ---

   盒子模型：
   	是CSS进行布局的基石， 规定了网页元素(标签)如何显示以及元素(标签)之间的相互的关系
   	CSS定义所有的元素都有像盒子一样的外型和平面空间， 也就是包含了边框， 外边界， 补白(内边距) 内容区
   		边框： border 元素的边框  ---- 手机盒的厚度
   		边界 margin 外边距 体现的是元素和元素之间的间隙 --- 每个手机盒之间的间隙就是外边距
   		补白 padding 内边距 元素和内容之间的间隙 --- 手机盒和手机之间的填充物 就叫做内边距
   		内容区 content 显示内容的区域 ---- 手机盒里面的手机
   		
   		CSS中盒子模型分为两种：标准盒子模型和怪异盒子模型
   			标准盒子模型
   				一般标签的盒子模型默认为标准盒子模型的
   				标准盒子模型的特点：
   					内容区的大小就是设置的元素的宽高的大小(width height的值)
   					看标签的大小的时候
   						宽度W = width + padding + boder 
   			怪异盒子模型
   				特点：给标签定义的宽高是 包含边框 ， 内边距 ， 内容区在内的大小
   				设置的宽就是标签显示的宽
   				高就是标签显示的高
   				
   			标准和怪异区别点在于设置的宽高 决定谁的大小
   				标准：
   					设置的宽高是内容区的大小
   				怪异：
   					设置的宽高是整个标签的大小
   						也就是设置的宽高是 边框 + 内边距 + 内容区的大小
   			标签包含 边框  内边距  内容区