下面内容主要是一些网页常见的属性值设置，让我们来看看有啥呢？
文章目录
上篇文章：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 简介：
| 字母 | 含义 | 备注 |
|---|---|---|
| R | red | 浓度范围0-256，参照16进制00-ff |
| G | green | 同上 |
| B | blue | 同上 |
| A | alpha | 不透明范围为1-0，1完全不透明、0.5半透明、0完全透明 |
3.2示例：
4.HSL值与HSLA值
也表示颜色，在工业设置里面用的多，并且通用
4.1 简介：
| 字母 | 含义 | 备注 |
|---|---|---|
| H | 色相 | 范围0°-360°，是个环。0°是红色 |
| S | 饱和度 | 范围0%-100%，0°时是灰色 |
| L | 亮度 | 范围0%-100% |
| A | 透明度 | 不透明范围为1-0，1完全不透明、0.5半透明、0完全透明 |
4.2 示例： background-color:hsla(98，48%，40%，0,125)；
五、文档流
1.概念
网页是多层结构，一层裹着一层，通过css样式可以分别为每一层设置样式。用户则只能看到最上面的一层。这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认在文档流中进行排列。
元素在文档流中有两个状态：在文档流中和脱离文档流（后续详解）
2.文档流中元素特点
2.1 表格：
| 元素类型 | 特点 |
|---|---|
| 块元素 | ①在页面独占一行 |
| ②默认的宽度是父元素的宽度（把父元素撑满） | |
| ③默认高度是被内容撑开（子元素） | |
| 行内元素 | ①行内元素不会独占页面的一行，只占自身大小 |
| ②行内元素在页面中自左向右排列，行内元素在一行中满了会换行 |
总结
以上就是本章的内容希望对您能有帮助，若文中出现错误欢迎大家指出。
60
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
