初识CSS

po-Python

已于 2023-10-20 17:44:05 修改

阅读量25

点赞数 1

分类专栏：前端文章标签： html5 html css

于 2023-10-20 17:38:39 首次发布

本文链接：https://blog.csdn.net/m0_62808249/article/details/133910247

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3.5 根据具体程度和定义次序解决同级样式冲突

1.CSS简介

CSS(层叠样式表)用来规定HTML文档的呈现形式(外观和格式)。

2.定义和应用样式

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。

2.1 使用元素内嵌样式

样式作用范围：一个元素

使用全局属性style,直接对元素应用样式。

2.2 使用文档内嵌样式

样式作用范围：一个文档

用style元素(而不是style属性)定义文档内嵌样式，通过CSS选择器指示浏览器应用样式。

应用在<head>标签中
<style type="text/css">
    选择器{
          ···
          }   
</style>

2.3 使用外部样式表

样式作用范围：多个文档

如果有一套样式要用于多个HTML文档，那么与其在每一个文档中重复定义相同的样式，不如另外创建一个独立的样式表文件。这种文件按惯例以.css为文件扩展名，其中包含着用户的样式定义。

样式表中用不着style元素，需要什么样式，只消为其设计好选择器，后面再跟上一套样式声明即可。然后HTML文档就可以用link元素将这些样式导入其中。

如果不同样式表中的样式使用了相同的选择器，那么这些样式表的导入顺序很重要，在此情况下得以应用的是后导入的样式。

2.3.1 从其他样式表中导入样式

可以用@import语句将样式从一个样式表导入另一个样式表。@import语句必须位于样式表顶端，样式表自已的样式定义不能出现在它之前。

2.3.2 声明样式表的字符编码

在CSS样式表中可以出现在@import语句之前的只有@charset语句。后者用于声明样式表使用的字符编码。

如果样式表中未声明所使用的字符编码，那么浏览器将使用载人该样式表的HTML文档声明的编码。要是HTML文档也没有声明其编码，那么默认情况下使用的将是UTF-8。

3.样式的层叠和继承

浏览器根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。每个元素都有一套浏览器呈现页面时要用到的CSS属性。对于每一个这种属性，浏览器都需要查看一下其所有的样式来源。前面已经讲过三种定义样式的方式(元素内嵌、文档内嵌和外部样式表),但是要知道，样式还有另外两个来源。

3.1 浏览器样式

浏览器样式(更恰当的名称是用户代理样式)是元素尚未设置样式时浏览器应用在它身上的默认样式。这些样式因浏览器而略有差异，不过大体一致。

3.2 用户样式

大多数浏览器都允许用户定义自己的样式表。这类样式表中包含的样式称为用户样式。这个功能用的人不多。

3.3 样式如何层叠

浏览器要显示元素时求索一个CSS属性值的次序。这个次序很明确：

(1)元素内嵌样式(用元素的全局属性style定义的样式)

(2)文档内嵌样式(定义在style元素中的样式)

(3)外部样式(用link元素导入的样式)

(4)用户样式(用户定义的样式)

(5)浏览器样式(浏览器应用的默认样式)

前三个属性来源(元素内嵌样式、文档内嵌样式和外部样式表)合称作者样式。定义在用户样式表中的样式称为用户样式。由浏览器定义的样式则称为浏览器样式。

3.4 用重要样式调整层叠次序

把样式属性值标记为重要(important),可以改变正常的层叠次序。在样式声明后附上!important即可将对应属性值标记为重要。不管这种样式属性定义在什么地方，浏览器都会给予优先考虑。

3.5 根据具体程度和定义次序解决同级样式冲突

如果有两条定义于同一层次的样式都能应用于同一个元素，而且它们都包含着浏览器要查看的CSS属性值，这时就需要另加砝码助天平上持平的双方一决高下。为了判断该用哪个值，浏览器会评估两条样式的具体程度，然后选中较为特殊的那条。样式的具体程度通过统计三类特征得出：

(1)样式的选择器中id值的数目(id)

(2)选择器中其他属性和伪类的数目(class)

(3)选择器中元素名和伪元素的数目(元素名)

以a-b-c的形式比较

如果同一个样式属性出现在具体程度相当的几条样式中，那么浏览器会根据其位置的先后选择所用的值，规则是后来者居上。

3.6 继承

如果浏览器在直接相关的样式中找不到某个属性的值，就会求助于继承机制，使用父元素的这个样式属性值。

并非所有CSS属性均可继承。这方面有条经验可供参考：与元素外观(文字颜色、字体等)相关的样式会被继承；与元素在页面上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行实施继承，明确指示浏览器在该属性上使用父元素样式中的值。

4.CSS中的颜色

在CSS中设置颜色有好几种方法。最简单的办法是使用规定的颜色名称，或者设置红、绿、蓝三种颜色成分的值(十进制或十六进制)。设置颜色成分值时，进制值以逗号分隔，十六进制值前面通常要加上一个#符号(例如#f,它代表白色)。

CSS还可以用一些函数选择颜色：

函数	说明	示例
rgb(r,g,b)	用RGB模型表示颜色	color:rgb(112,128,144)
rgba(r,g,b,a)	用RGB模型表示颜色，外加一个用于表示透明度的a值(0代表全透明，1代表完全不透明)	color:rgba(112,128,144,0.4)
hsl(h,s,1)	用HSL模型(色相(hue )、饱和度[saturation ]和明度[lightness])表示颜色	color:hs1(120,100%,22%)
hsla(h,s,l,a)	与HSL模式类似，只不过增加了一个表示透明度的a值	color:hsla(120,100%,22%,0.4)

5.CSS中的长度

许多CSS属性要求为其设置长度值，设置长度值时，应让数字和单位标识符连在一起，二者之间不加空格或其他字符。

5.1 绝对长度

这类单位是现实世界的度量单位。

单位标识符	说明
in	英寸
cm	厘米
mm	毫米
pt	磅(1磅=1/72英寸)
pc	pica(1pica=12磅)

5.2 相对长度

相对单位的测量需要依托其他类型的单位。

单位标识符	说明
em	与元素字号挂钩
ex	与元素字体的“x字体”挂钩
rem	与根元素的字号挂钩
px	CSS像素
%	另一属性的值的百分比

CSS中的像素恐怕不是你心里想的那样。像素这个术语一般是指显示设备上可寻址的最小单元——图像的基本元素。CSS却是另辟蹊径，其像素定义如下：参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角(visualangle)。

CSS像素原本是个相对单位，但在实际使用中却变成了绝对单位

6.CSS中的角度

单位标识符	说明
deg	度(取值范围：0deg~360deg)
grad	百分度(取值范围：0grad~400grad)
rad	弧度(取值范围：Orad~6.28rad)
tum	圆周(1turm等于360deg)

7.CSS中的时间

单位标识符	说明
s	秒
ms	毫秒(1s=1000ms)

po-Python

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
初识CSS

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。如果有两条定义于同一层次的样式都能应用于同一个元素，而且它们都包含着浏览器要查看的CSS属性值，这时就需要另加砝码助天平上持平的双方一决高下。为了判断该用哪个值，浏览器会评估两条样式的具体程度，然后选中较为特殊的那条。样式的具体程度通过统计三类特征得出：(1)样式的选择器中id值的数目(id)(2)选择器中其他属性和伪类的数目(class)(3)选择器中元素名和伪元素的数目(元素名)
复制链接

扫一扫