Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >前端基础-CSS样式的继承和覆盖

前端基础-CSS样式的继承和覆盖

作者头像

cwl_java

发布于 2020-04-07 07:14:10

发布于 2020-04-07 07:14:10

1.1K0

举报

文章被收录于专栏：cwl_Javacwl_Java

样式的继承和覆盖（重点）

当父标签设置了样式，子标签都会具有父标签的样式

示意图

总结：

1.能继承的css属性：font系列，text系列，color，line-height

2.div可以继承父亲的宽度，高度不能继承

当子标签和父标签设置了同样属性的css，子标签会覆盖父标签的设置

示意图

总结：

继承：父元素设置了样式，子元素也具有了

覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

CSS基础（一）

css 布局继承基础语法

CSS引入方式： 1. 行内式： <div style = "..."></div>（使用最少，因为会产生冗余，而且不符合W3C规定） 2. 内嵌式： <style> ... （写的是样式）... </style>（不会有冗余） 3. 外链式：<link href = "style.css"> （用的最多）

且陶陶

2023/04/12

9370

前端基础-CSS标签的显示模式

特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示—div ul li p h1

cwl_java

2020/04/07

1.4K0

前端基础-CSS标签的显示模式

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

Clearlove

2019/08/29

1.6K0

『知识巩固#1』Html、Css基础整理

Html 标签学习排版标签标题 h1、h2、h3、h4、h5、h6只有这六个段落标签 p标签段落之间有空隙换行换行标签 br 空换行 hr 下划线换行文本格式化标签根据语境区分 b、strong 加粗 u、ins 下划线 i、em 倾斜 s、del 删除线媒体标签图片标签img 属性名、属性值 alt属性值作为替换文本、src属性作为图片链接、title属性在鼠标悬停时显示 width、height 很容易理解，控制图片宽高路径相对路径绝对

客怎眠qvq

2022/11/01

4K0

『知识巩固#1』Html、Css基础整理

重温前端-css篇

面向对象编程 c++css

q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255, 0, 0)”。

kif

2023/03/10

8370

css样式—字体垂直、水平居中

<div class="tt">啦啦啦</div> .tt{ padding: 0px; width:500px; height

用户1214487

2018/01/24

4.1K0

css样式—字体垂直、水平居中

「学习笔记」CSS基础

「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。

小城故事

2023/03/10

3.2K0

前端基础篇之CSS世界

我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。

Nealyang

2019/10/14

2.1K0

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

css 面向对象编程 c++

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

艾编程

2022/12/05

1.8K0

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' selector { property: value; property: value; ... property: value } ''' 例如： 1 h1 {color:red; font-size:14px

用户1214487

2018/01/24

2.1K0

CSS学习笔记（基础篇）

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Daotin

2018/08/31

4.6K0

　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

超蛋lhy

2018/08/31

1.6K0

html 容器 css

css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px">Hao</p> css代码写在当前文件中 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ color: red; font-size: 19px; } </style> </head>

用户1173509

2018/01/17

2K0

并集选择器：每组选择器可以是基础选择器或复合选择器，每组选择器通常一行写一个，提高代码的可读性

小城故事

2023/02/27

1.3K0

Web前端温故知新-CSS基础

　　定义：CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。

Edison Zhou

2018/08/21

3.5K0

Web前端温故知新-CSS基础

CSS基础知识

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

奋飛

2019/08/15

1K0

　　1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。

阿豪聊干货

2018/08/09

2.2K0

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

HTML作用单纯，只关注语义，比如< h1>是一级标题，< p>是一个段落，他不愿意去美化修饰，因为写起来麻烦，只能一行一行的修改。

MicroFrank

2023/01/16

2.4K0

层叠样式表 (Cascading Style Sheets)，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

Nian糕

2018/08/21

3.2K0

值： (1)、normal(正常)；bold(加粗)；（<==常用） (2)、纯数字：100~900的整百数；

roydonGuo

2022/11/02

7840

相关推荐

CSS基础（一）

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

目录

样式的继承和覆盖（重点）

加入讨论

的问答专区 >

穿过生命散发芬芳0

相关课程

一站式学习中心 >

微信公众号在线学习平台搭建实践_《硅谷课堂》

微信小程序应用实践_《锋运票务系统》

云托管 CloudBase Run

Serverless 容器服务

云数据库 MySQL