样式的继承，选择器的权重，单位与颜色

样式的继承
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
```
    注意：并不是所有的样式都会被继承：比如 背景相关的，布局相关等的这些样式都不会被继承。
```
选择器的权重

    <style>/* #box1{background-color: orange;}div#box1{background-color: yellow;} */.d1{background-color: purple !important;}.red{background-color: red;/* font-size: 20px; */}/* div,p,span{background-color:yellowgreen;} *//* 样式的冲突- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重内联样式        1,0,0,0id选择器        0,1,0,0类和伪类选择器   0,0,1,0元素选择器       0,0,0,1通配选择器       0,0,0,0继承的样式       没有优先级比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器如果优先级计算后相同，此时则优先使用靠下的样式可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！*/*{font-size: 50px;}div{font-size: 20px;}</style></head>
<body><div id="box1" class="red d1 d2 d3 d4" style="background-color: chocolate;">我是一个div <span>我是div中的span</span></div>
</body>

3.单位与颜色
长度单位：
像素
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样

百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变

em
- em是相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变

rem
- rem是相对于根元素的字体大小来计算

 颜色单位：在CSS中可以直接使用颜色名来设置各种颜色比如：red、orange、yellow、blue、green ... ...但是在css中直接使用颜色名是非常的不方便RGB值：- RGB通过三种颜色的不同浓度来调配出不同的颜色- R red，G green ，B blue- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间- 语法：RGB(红色,绿色,蓝色)RGBA:- 就是在rgb的基础上增加了一个a表示不透明度- 需要四个值，前三个和rgb一样，第四个表示不透明度1表示完全不透明   0表示完全透明  .5半透明十六进制的RGB值：- 语法：#红色绿色蓝色- 颜色浓度通过 00-ff- 如果颜色两位两位重复可以进行简写  #aabbcc --> #abcHSL值 HSLA值H 色相(0 - 360)S 饱和度，颜色的浓度 0% - 100%L 亮度，颜色的亮度 0% - 100%*/background-color: red;background-color: rgb(255, 0, 0);background-color: rgb(0, 255, 0);background-color: rgb(0, 0, 255);background-color: rgb(255,255,255);background-color: rgb(106,153,85);background-color: rgba(106,153,85,.5);background-color: #ff0000;background-color: #ffff00;background-color: #ff0;background-color: #bbffaa;background-color: #9CDCFE;background-color: rgb(254, 156, 156);background-color: hsla(98, 48%, 40%, 0.658);

样式的继承，选择器的权重，单位与颜色相关推荐

css中的选择器及其权重
在 css (层叠样式表)中对 html 中的元素设定具体的样式,主要由选择器和声明块两个部分组成.选择器是用于指定所设置样式对应的 html 标签.声明块由若干个用分号分开的样式声明组成,这些样式声 ...
选择器的权重和字体样式
12选择器的权重(面试题) 样式冲突优先级: !important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器注意:1. ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float
一.盒子模型 (一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin.border.padding.content(width.height). (二)盒子模型分两种: 1. ...
CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
HTML、CSS综合02——css，样式表，选择器、盒子模型
回顾复习什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...
java样式是什么_java css样式 css样式的种类选择器文本相关样式背景相关样式边框盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
CSS3选择器及权重
一.普通选择器 1. 标签选择器 p{ } 2.类选择器 .red{ } 3.id选择器 #pink{ } 4.通配符选择器 *{ padding:0; margin:0; } 5.属性选择器(新增) ...

样式的继承，选择器的权重，单位与颜色

样式的继承，选择器的权重，单位与颜色相关推荐

最新文章

热门文章