2.CSS特性-CSS进阶
时间:2022-07-26
本文章向大家介绍2.CSS特性-CSS进阶,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
二、CSS特性
CSS
具有两大特性:
- 继承性
- 层叠性
1.继承性
CSS
的继承性,指的是子元素继承父元素的某些样式属性,例如:在父元素定义字体颜色(color属性),子元素会继承父元素的字体颜色。
不是所有属性都具有继承性
不过,并不是所有属性都具有继承性,如:
padding、margin、border
等就不具备继承性,况且要是这些属性也可以继承,那对于网页来说是一场噩梦。
(1)具有继承性的属性
W3C
规定,只有那些能让我们轻松书写的属性才可以继承。 在CSS
中,具有继承性的属性有 3 大类:
- 文本相关属性
- 列表相关属性
- 颜色相关属性
① 文本相关属性
- font-family
- font-size
- font-style
- font-weight
- font
- line-height
- text-align
- text-indent
- word-spacing
② 列表相关属性
- list-style-image
- list-style-position
- list-style-type
- list-style
③ 颜色相关属性
- color
(2)示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
html{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
#daddy{
color:mediumpurple;
font-weight: bold;
}
</style>
</head>
<body>
<div id="daddy">
一蓑烟雨任平生。
<div id="girl">一蓑烟雨任平生。</div>
</div>
</body>
</html>
CSS继承性示例1.png
② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
html{
font-size: 62.5%; /*使得浏览器默认字体大小变为 10px */
}
#daddy{
color:#66A9FE;
font-weight: bold;
}
</style>
</head>
<body>
<div id="daddy">
一蓑烟雨任平生。
<a href="http://www.baidu.com">一蓑烟雨任平生。</a>
</div>
</body>
</html>
CSS继承性示例2.png
Ⅰ.a标签的继承
按照例1 体现的
CSS
继承性,例 2 的子元素也应该是蓝色,但是子元素(a元素)却显示深紫色。 这是因为a标签
本身有默认的颜色样式,优先级比继承的要高,如果想要改变a标签
的颜色,必须选中a标签
进行操作才行。 对于a标签
这个特点,在实际开发中会经常遇到。
(3)实际开发
利用
CSS
继承性,有时我们可以少写很多代码,就像上面例子中,只需在父元素中定义属性,就不需要在子元素中重复定义。 在实际开发中,应充分利用CSS
的继承性,从而减少重复代码的编写,这样也可使得CSS
代码更精简优雅。
2.层叠性
在网页中,对于同一个元素,我们重复定义了多个相同的属性时,CSS将会怎样处理?
(1)“后来者居上”原则
CSS
的层叠性,指的是样式的覆盖。 对于同一个元素来说,若我们重复定义多个相同的属性,并且这些样式具有相同的权重,CSS
会以最后定义的属性的值为准,这就是“后来者居上”原则。
① 必须符合的3条件
“后来者居上”原则必须符合 3 个条件:
- 元素相同
- 属性相同
- 权重相同
权重:指的是选择器的权重。
(2)示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
div{
color:#00FFFF;
}
div{
color:blue;
}
div{
color:greenyellow;
}
</style>
</head>
<body>
<div>見贤思齊</div>
<div>見贤思齊</div>
<div>見贤思齊</div>
</body>
</html>
<!--
我们首先定义所有 div 颜色为#00FFFF,然后定义所有 div 颜色为blue,最后定义所有 div 颜色为greenyellow。
因为CSS的层叠性,color:#00FFFF会被color:blue覆盖,color:blue会被color:greenyellow覆盖,所以最终颜色为greenyellow
-->
CSS层叠性示例1.png
② 例2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<style type="text/css">
div{
color:greenyellow;
}
#a{
color:#00FFFF
}
</style>
</head>
<body>
<div>見贤思齊</div>
<div id="a">見贤思齊</div>
<div>見贤思齊</div>
</body>
</html>
<!--
这和例1不同,这就是因为“后来者居上”原则必须符合 3 个条件。
- 元素相同
- 属性相同
- 权重相同
-->
CSS层叠性示例2.png
- 基础知识:多人使用一个Github仓库
- 基于Ubuntu16.04的微信小程序搭建过程
- 搭建微信小程序教程:基于CentOS 7.6的教程
- MySQL根据5.1.34之前版本的一个BUG分析O_DIRECT
- Git面试常见问题
- 剑指offer代码解析——面试题17合并两个排序的链表
- MySQL优化方案(一)优化SQL脚本与索引
- 从0学习MySQL系列(二)安装篇
- 从0学习MySQL系列(三)概念篇
- SQL Server基础SQL脚本之主外键约束
- SQL Server基础SQL脚本之Group By
- SQL Server基础SQL脚本之内外连接、交叉连接;函数、子查询
- MySQL 面试选择题15道(单选)
- SQL Server基础SQL脚本之分区表、分区方案
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 结构体对齐原则在自定义协议解析时的妙用之法
- Spring JDBC 框架一个最简单的Hello World级别的例子
- Celery 分布式框架 学习
- .NET Core + K8S + Loki 玩转日志聚合
- varint是啥你真的知道么?
- 一篇文章带你入门移动安全
- Could not load JDBC driver class [com.mysql.jdbc.Driver]
- [Bazel]自定义规则实现将多个静态库合并为一个动态库或静态库
- [Golang]包管理
- Power Query中避免出错的几种情况
- 我的开发日记(十五)
- 常见未授权访问漏洞总结
- 如何用命令行给mySQL添加用户
- [877]ModuleNotFoundError:no module named ‘tools.nnwrap‘ 解决办法
- Selenium自动化:代码测试与无代码测试