css层叠样式表,css层叠样式表怎么做

CSS层叠样式表的层叠是什么意思

层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

1. 开发者样式读者样式浏览器样式（除非使用!important标记 ）

2. id选择符（伪）类选择符元素选择符

3. 权重相同时取后面定义的样式

以下是一段经典的html，三个类名分别为模块、标题和正文。

div class="mod"

div class="hd"/div

div class="bd"/div

/div

大部分html页面都可以由这种结构嵌套或者累加而成。

相关问答

Q1: 使用CSS样式表有什么好处

使用css样式表的好处有：

1、使用较少的代码，来实现更多的功能；

2、使用属性继承方法，可以轻松地维护相同标记的不同样式；

3、代码比率更高的内容；

4、页面加载变得很快；

5、定义风格的灵活性。

知识补充：

CSS全称Cascading Style Sheet，表示层叠样式表。CSS用于改进HTML标记内容的呈现。使用CSS我们可以基于媒体定义不同的内容显示方式。

CSS的优点：

一、CSS的代码更少

在公共样式类中可以定义具有值的属性，并且能在不同位置使用相同的类，因此可以使用较少的代码，来实现更多的功能。更少的代码意味着更少的带宽消耗并且易于维护内容。

二、易于维护

当在全局或共同的地方定义样式时，任何变化都变得容易操作。例如，在网站中，使用特定的样式属性显示产品的所有名称。现在，可以通过在外部样式表中更改产品名称的样式类，可以在整个站点中更改样式。可以保留多个样式表并根据需要使用它们。使用属性继承方法，可以轻松地维护相同标记的不同样式。

三、代码（标签）比率更高的内容

可以通过使用CSS在页面中实现更高的代码比例内容，因为可以将样式声明转换为外部文件。这对搜索引擎的观点很重要。可以向蜘蛛提供较少的标签（样式标签）和更多内容以进行索引。

四、下载页面

当浏览器缓存样式表页面时，页面加载变得很快。每次使用相同CSS的同一站点的不同页面时，都不会从服务器加载样式类。

五、定义风格的灵活性

名称级联表示可以使用多种样式，并且优先考虑本地样式。可以覆盖声明的全局样式，并将样式本地分配给标记。

Q2: css为什么叫层叠样式表

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程.

css之所以有“层叠”的概念，是因为有多个样式来源。

其中css样式来源有5个，分别是内联样式（a style=""）,内部样式(style/style),

外部样式（写在css文件中的样式），浏览器用户自定义样式，浏览器默认样式；

按照其来源优先级为内联样式内部样式外部样式浏览器用户自定义样式浏览器默认样式

按照选择器优先级为id class元素选择器

如果有important,important优先级最高。

Q3: css层叠样式表有哪几种类型

CSS（Cascading Style Sheets）

层叠样式表

优势：

CSS可以提高页面的浏览速度。

缩短改版时间，降低维护费用。

强大的字体控制能力和排版能力。

css容易编写。

可以一次设计随处发布。

更好的控制页面布局。

实现表现和结构、内容相分离。

更方便搜索引擎的搜索/page Rank

样式规则：

语法：选择器｛属性1：值1；属性2：值2；...属性N：值N；｝

选择器就是要改变页面中的哪些标签元素

声明要用｛｝括起来，；结束

如果属性中包含空格要用“”括起来

可以指定多个选择器使用相同的样式

样式表：

外部样式表，新建.css文件，在文件中写入样式规则link rel="stylesheet" href = "xxx.css"

内联样式表，在元素中添加style属性

嵌入式样式表，在html使用style标签，style type="text/css"/style

选择器：

元素选择器，元素名

id选择器，用#id

类选择器，用.class

后代选择器，选择器1 选择器2

css深化：

就近原则，！important提高元素优先级，伪类选择器，伪对象选择器，@import导入其他css文件，响应式布局可以解决多设备的兼容问题。

文本属性：

font-family：字体

font-size：字体大小

font-style：斜体

font-weight：粗体

color：颜色

line-height：行高

letter-spacing：字符间距

text-decoration：文本修饰

text-overflow：文字溢出处理

white-space : no wrap

text-overflow:hidden

text-align：文本对齐

背景属性：

background-color：背景颜色

background-image：背景图片

background-repeat：背景重复

background-attachment：背景图片附着

基于占满一整行与否，标签分为两大类（文档流）：

占满：行级元素（div，p，h1~h6）

不占满：行内元素（span，）

定位属性：

position：定位

absolute：绝对定位

relative：相对定位