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
- CoreOS Linux引入了Kubernetes kubelet
- gwt之mvc4g
- 来自1000多个项目的10大JavaScript错误浅析
- 编程思想 之「多态、初始化顺序、协变返回类型」
- 使用Golang语言执行shell文件
- Golang语言 Cookie的使用
- Golang语言-获取命令行参数
- GoldenGate复制的三个简单测试场景(r10笔记第83天)
- Golang语言调用百度帐号
- Golang语言 加密系列之AES
- 转--Golang语言 rpc 简单范例
- Golang语言 之网络
- Golang语言作为服务器,H5作为前端的视频传输
- Pandas——高效的数据处理Python库
- 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 实例
- tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
- 使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
- python 抓取知乎指定回答下视频的方法
- 基于python实现计算两组数据P值
- PHP getNamespaces()函数讲解
- OpenCV 使用imread()函数读取图片的六种正确姿势
- PHP simplexml_import_dom()函数讲解
- PHP getName()函数讲解
- Laravel框架集成UEditor编辑器的方法图文与实例详解
- PHP+redis实现的购物车单例类示例
- ThinkPHP3.2.3框架邮件发送功能图文实例详解
- PHP simplexml_load_file()函数讲解
- Python下划线5种含义代码实例解析
- PHP getDocNamespaces()函数讲解
- Django实现内容缓存实例方法