0

0

深入了解CSS级联和继承的使用

高洛峰

高洛峰

发布时间:2017-03-17 10:37:07

|

1612人浏览过

|

来源于php中文网

原创

 1.在html中使用css样式表的三种方式:

(1)内联的样式表。

eg:LIN

(2)嵌入式样式表。

即在head>标签内嵌入

立即学习前端免费学习笔记(深入)”;

(3)外部链接的样式表。

2.级联的顺序

(1)

首先要根据起源(origin)将规则分类。

具体优先顺序如下:

页面作者(author)设置的规则 > 用户(user)规则 > 浏览器(browser)规则

(2)

然后是基于选择符和特殊性的规则排序:

    1.内联样式表的优先级最高。

    2.id选择符,当有多个id选择符时,具有id选择符多的规则胜出。

    3.如果没有id选择符,或者数量相同,那么规则中有最多类或伪类的规则有较高优先级。

    4.如果类(或是没有类),那么规则中有最多元素数量的,优先级较高。

    5.如果id,class,和元素数量都相同,则最近声明的原则有最高优先级。

(3)嵌入式样式表和外部链接样式表的优先级,当其他权重相当时,最近声明的规则优先级高。

标签中,link标签与style标签的先后顺序,第二个声明的优先级高。

3.级联和HTML属性

    HTML中的align,color,face,vlink,background也会影响页面的外观。

深入了解CSS级联和继承的使用 标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式。

HTML 4.01 不推荐使用 align 属性,XHTML 1.0 Strict DTD 不支持该属性,同时 HTML 5 也不再支持该属性。

color 属性规定 font 元素中文本的颜色。

在 HTML 4.01 中,不赞成使用 font 元素的 color 属性;在 XHTML 1.0 Strict DTD 中,不支持 font 元素的 color 属性。

请使用 CSS 代替。

CSS 语法:

[

规定文本的字体、字体尺寸、字体颜色。

eg:This is some text!

This is some text!

This is some text!

在 HTML 4.01 中,font 元素不被赞成使用。

mallcloud商城
mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合,项目代码简洁注释丰富上手容易,适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案,面向互联网设计同时适合B端和C端用户,支持CI/CD多环境部署,并提

下载

在 XHTML 1.0 Strict DTD 中,font 元素不被支持。

]

face 属性规定 font 元素中文本的字体。

eg:This is some text!

在 HTML 4.01 中,不赞成使用 font 元素的 face 属性;在 XHTML 1.0 Strict DTD 中,不支持 font 元素的 face 属性。

请使用 CSS 代替。

CSS 语法:

vlink 属性文档中已被访问链接的颜色。

eg:

在 HTML 4.01 中,不赞成使用 body 元素的 vlink 属性;在 XHTML 1.0 Strict DTD 中,不支持 body 元素的 vlink 属性。

请使用 CSS 代替。

CSS 语法(在

部分):

这些属性与css规则相冲突时,总是被css规则覆盖。

4.在规则中使用!important

用!important 指定的规则比其他规则都重要。

eg: em { color :bule !important;}

注意:用户首创的!important规则优先于作者的规则。

        用户定义的样式表应该声明是!important。

5. @import规则,导入文件。

eg:h1 {color:red;}

     @import url(“style.css”);

    /*style.css*/

   h1{color:green;}

以上代码,最终h1为红色。因为默认使用导入的样式表出现在原始样式表规则之前。

6.继承

(1)注意display,border,margin优先级0属性是不继承的。

(2)background-color不是继承,在没有设置时,它的默认值是特别值transparent。

(3)继承相对值时,在传递给子代之前,首先计算该值。

(4)指定继承:inherit特殊值

eg:p .standout{ border :1px solid blue ;}

      p .standout{ border:inhert;}

注意:css 1发行时,作者的!important样式优先于用户的!important样式。

        css2中,用户的!important样式优先于作者的!important样式。

相关专题

更多
漫蛙2入口地址合集
漫蛙2入口地址合集

本专题整合了漫蛙2入口汇总,阅读专题下面的文章了解更多详细内容。

163

2026.01.06

AO3中文版地址汇总
AO3中文版地址汇总

本专题整合了AO3中文版地址合集,阅读专题下面的文章了解更多详细内容。

88

2026.01.06

python cv2模块教程大全
python cv2模块教程大全

本专题整合了python cv2模块相关教程,阅读专题下面的文章了解更多详细教程。

42

2026.01.06

python创建txt文件教程大全
python创建txt文件教程大全

本专题整合了python创建txt文件相关教程,阅读专题下面的文章了解更多详细内容。

21

2026.01.06

python去掉字符串空格教程大全
python去掉字符串空格教程大全

本专题整合了python去掉字符串空格教程大全,阅读专题下面的文章了解更多详细内容。

2

2026.01.06

Python /与// 教程大全
Python /与// 教程大全

本专题整合了python的/和//的相关内容大全,阅读下面的文章了解更多详细内容。

23

2026.01.06

Python /与// 教程大全
Python /与// 教程大全

本专题整合了python的/和//的相关内容大全,阅读下面的文章了解更多详细内容。

0

2026.01.06

Python /与// 教程大全
Python /与// 教程大全

本专题整合了python的/和//的相关内容大全,阅读下面的文章了解更多详细内容。

0

2026.01.06

python func函数合集
python func函数合集

本专题整合了python func函数相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.8万人学习

CSS教程
CSS教程

共754课时 | 17.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号