Web前端-HTML&CSS笔记之06

Posted 2021-09-07 王阿铁

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端-HTML&CSS笔记之06相关的知识，希望对你有一定的参考价值。

Web前端-html&CSS笔记之06

0906

样式的的继承，我们为一个元素设置的样式同时也会应用它的后代元素上
继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发。
- 利用继承我们可以将一些通用样式设置到共同的祖先元素上，这样只需设置一次即可让所有的元素具有该样式
注意，并不是所有的样式都会被继承
- 比如背景相关的，布局相关的等这些样式不会被继承。
- 如何查找某个样式会不会继承呢？可以使用zeal文档
- 例如搜索：再css文档内搜索background-color，出来后下拉找到图示可以查看样式信息

样式的冲突
- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了冲突。
- 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
选择器的权重
- 内联样式 1，0，0，0
- id选择器 0，1，0，0
- 类和伪类选择器 0，0，1，0
- 元素选择器 0，0，0，1
- 通配选择器 0，0，0，0
- 继承的样式没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器单独计算的）
选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器
如果，优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式后边添加 !important ，则此时该样式的会获取到最高优先级，甚至会超过内联样式。but，注意：在开发中这个玩意一定要慎用！能不不用则不用！

思考题： a元素的四个伪类，在全用的时候，有没有先后顺序要求？？

不知对错
<sytle>
a:visited{color:yellow;}
a:active{color:orange}
a:hover{color:pink;}
a:link{color:red;}
</sytle>

.box2{
width:50%;
height:50%;
background-color:pink;
}

.box3{
font-size:20px;
width:10em;
height:10em;
}

rem

移动端的适配使用较多，后期遇到再说

<html>
    font-size:30;
</html>
.box3{
font-size:20px;
width:10rem;
height:10rem;
}
//这样的话box的大小是300px而不是200px

颜色单位
- 在css中可以直接使用颜色名来设置各种颜色
  - 比如：red、orange、yellow、blue、pink......
  - 但是在css中直接使用颜色名是非常的不方便

那么“方便的”颜色使用方式是怎样的呢？

RGB值
- RGB值通过三种颜色的不同浓度来调配出不同的颜色
- R red ，G green， B blue
- 每一种颜色的范围在0-255（0%-100%）之间
- 语法：RGB(红色,绿色,蓝色)

background-color:rgb(255,0,0);  //红色
background-color:rgb(0,255,0);  //绿色

RGBA
- 就是在RGB的基础上增加了一个a 表示不透明度
- 四个值，前三个和rgb一样，第四个表示不透明度
  - 1表示：完全不透明
  - 0表示：完全透明
  - .5表示：半透明
```
background-color:rgba(0,255,0,.2);
```
十六进制的RGB值
- 语法：#红色绿色蓝色
- 颜色浓度通过00-ff表示
- 如果颜色两位两位重复可以进行简写
  - 例：#aabbcc --> #abc

background-color:#ff0000;  //红色
background-color:#ffff00;  //黄色
background-color:#bfa;     //豆沙绿

用的不多

以上是关于Web前端-HTML&CSS笔记之06的主要内容，如果未能解决你的问题，请参考以下文章