下面内容主要是一些网页常见的属性值设置，让我们来看看有啥呢？
文章目录 上篇文章：CSS选择器与其伪类第七节：CSS属性值设置一、选择器的权重1.背景2.权重比较3.权重计算4.特殊权重 二、样式继承1.作用2.注意 三、宽高设置1.像素2.百分比3.em和rem 四、颜色单位1.颜色名称2.十六进制颜色3.RGB值与RGBA值4.HSL值与HSLA值 五、文档流1.概念2.文档流中元素特点 总结上篇文章：CSS选择器与其伪类
第6节：CSS选择器与其伪类
第七节：CSS属性值设置
本章内容思维导图 点击跳转下载：css属性值设置.xmind
一、选择器的权重????也叫选择器的优先级，选择器可选择的内容范围越小，权重越高， 优先级越大，反之亦然。
1.背景????当我们通过不同的选择器，选中相同元素，为相同的样式设置不同的值时，此时就发生了样式冲突。这时设置的样式该取决于哪个呢？
2.权重比较????内联样式 ?>? id选择器 ?>? 类和伪类选择器 ?>? 元素选择器
????权重数量级分别是：千位级?>?百位级?>?十位级?>?个位级
3.权重计算????当优先级不好直观判断时，可以进行权重计算 3.1 计算 3.2 注意 ????①分组选择器权重不能叠加 ????②权重计算时不会超过所属数量级，比如再多的类选择器权重也不会超过id选择器。 例：
<html lang="en"> <head> <meta charset="UTF-8"> <title>例子</title> <style> div,p,span { color: red;}/* div,p,span权重都为1级别 */ div>p>span { color: #000;}/* span权重为3级别 */ .par {background-color: #fff;}/* .par的权重为100级别 */ .box1 .par { /* .par的权重为200级别 */ width: 100px; height: 100px; background-color: burlywood; border: 1px solid; } #parid {background-color: #bfa;}/* #parid的权重为1000级别 */ </style> </head> <body> <div class="box1"> 我是div <p class="par" id="parid"> 我是p <span>我是span</span> </p> </div> </body> </html> 4.特殊权重4.1 最小权重：通配选择器，权重数量级为0 ??????例：给所有标签设置外边距与内边距为0px
<html lang="en"> <head> <meta charset="UTF-8"> <title>例子</title> <style> *{ margin:0; padding:0; } </style> </head> <body> <div class="box1"> 我是div <p class="par" id="parid"> 我是p <span>我是span</span> </p> </div> </body> </html>4.2 最大权重：在设置的属性值后面添加“! important”，则该样式会获得最大的权重，甚至超过了内联样式。 ??????例：p标记内容颜色为红色
<html lang="en"> <head> <meta charset="UTF-8"> <title>important</title> <style> .par{ color: red !important; } </style> </head> <body> <div class="box1"> 我是div <p class="par" style="color: greenyellow;">我是p標記</p> </div> </body> </html>  二、样式继承 1.作用????利用好继承方便我们进行开发，比如可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式。 例如：重置样式表。
2.注意????①不是所有的样式都可以被继承，比如与背景相关，布局相关等样式不能被继承。 ????②有时子元素也会显示父元素背景颜色，是因为子元素默认背景颜色是透明的。
2.1 示例： 例：p1继承了box1的字体大小和颜色
<html lang="en"> <head> <meta charset="UTF-8"> <title>样式继承</title> <style> .box1{ width: 200px; border: 1px solid black; background-color: #bfa; margin-top: 100px; font-size: 26px; color: red; } .p1{ border: 1px solid #000; } .p2{ font-size: 18px; color: greenyellow; } </style> </head> <body> <div class="box1"> 我是box1盒子 <p class="p1">我是p1段落</p> </div> <p class="p2">我是p2段落</p> </body> </html> 三、宽高设置 1.像素????屏幕画面由一个个的小点构成，一个小点就是一个像素，相同屏幕大小，分辨率高的，意味着屏幕水平和垂直方向像素点也多。 逻辑像素：CSS 的像素单位，其尺寸大小是相对的，也称为独立像素。
2.百分比????百分比可以设置属性值为相对其父元素属性值的百分比，使子元素跟随父元素的改变而改变。
3.em和rem????em是相对元素字体大小来计算的 （1em = 1font-size），rem是相对根元素的字体大小来计算的 （1rem = 1 html font-size）。 在响应式设计中使用较多。 例：div的字体大小为10px，宽高为100px????p1的字体大小为16px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>em与rem</title> <style> html{ font-size: 16px; } div{ font-size: 10px; width: 10em;/* 100px*/ height: 10em;/* 100px*/ border: 0.1em solid #000;/* 1px*/ color: red; } .p1{ font-size: 1rem; color: blue; } </style> </head> <body> <div> 我是div盒子 </div> <p class="p1">我是p1段落</p> </body> </html> 四、颜色单位 1.颜色名称可使用颜色名称单词来设置元素颜色。 例：div{ width:100px; border-color:red; background:blue;}
2.十六进制颜色以16进制格式来表示颜色。
2.1 语法： 选择器{ color:#000000; backgound-color:#ffffff;}(#红绿蓝，浓度00~ff) 2.2 例： #bbffaa=#bfa简写
3.RGB值与RGBA值rgb通过三种颜色的浓度来调配颜色，rgba进行了扩展多了透明度调节 3.1 简介：
3.2示例：
4.HSL值与HSLA值也表示颜色，在工业设置里面用的多，并且通用
4.1 简介：
4.2 示例： background-color:hsla(98，48%，40%，0,125)；
五、文档流 1.概念????网页是多层结构，一层裹着一层，通过css样式可以分别为每一层设置样式。用户则只能看到最上面的一层。这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认在文档流中进行排列。
元素在文档流中有两个状态：在文档流中和脱离文档流（后续详解）
2.文档流中元素特点2.1 表格：
总结
????以上就是本章的内容希望对您能有帮助，若文中出现错误欢迎大家指出。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |