CSS的继承性与层叠性

css的继承：

CSS能够从父元素那里继承某些样式属性，比如color，font-size等等，但是像margin，padding，border不能继承。

CSS的继承分为主要三类：

（1）文本相关属性；font-family、font-size，font-style、font-weight、font、line-height、text-align、text-indent、word-spacing等等。

（2）列表相关属性：list-style-image、list-style-position、list-style-type等

（3）颜色属性：color

比如：

<html><head><title>test</title><meta charset='utf-8'></head><style>html{font-size: 62.5%;}#father{font-family: 楷体;color:red;}</style><body><div id='father'>this<div id='son'>is a test</div></div></body>
</html>

this和is a test的字体和颜色一模一样。

利用CSS的继承性，我们可以省去很多代码。

css层叠性：

层叠就是样式的覆盖，对于同一个元素来说，如果我们重复定义多个相同的属性，并且这些属性具有相同的权重，CSS最后会以最后定义的属性值为准，也就是“后者居上”原则。

<html><head><title>test</title><meta charset='utf-8'></head><style>html{font-size: 62.5%;}#father{font-family: 楷体;color:red;}#father{font-family: 宋体;color:blue;}</style><body><div id='father'>this</div></body>
</html>

其最后结果为宋体，蓝色。

层叠性有三个条件：1.元素相同，2.属性相同，3.权重相同。

跟着书本学习CSS(2)相关推荐

css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
从0学习css开发之 font-size的基本用法
从0学习css开发之 font-size的基本用法定义和用法设置字体的大小. 语法 font-size: 12px; 语言语法 Javascript object.style.fontSize= ...
html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验互联网发布时间:2008-10-17 19:28:20 作者:佚名我要评论让你使用DIV CSS排版不是让你用换个标签然后再去按照表格的方式去排版 ...
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
跟着ZHONGHuan学习设计模式--桥接模式
转载请注明出处! ! !http://blog.csdn.net/zhonghuan1992 全部配套代码均在github上:https://github.com/ZHONGHuanGit/Desig ...
学html css之前,学习CSS前必知HTML基础
对于很多网页设计0基础的初学者而言,刚一接触css都会感觉云里雾里,不知怎样学习与理解.想当初小编也是这样,在什么基础都没有的前提下,直接看CSS.结果感觉好像在看天书一样.后来向大神请教之后才知道, ...
[译] 如何学习 CSS
原文地址:How To Learn CSS 原文作者:Rachel Andrew 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m- 译者:Mcskiller 校对者 ...
css知多少（2）——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1．一个段子开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...

跟着书本学习CSS(2)

CSS的继承性与层叠性

css的继承：

css层叠性：

跟着书本学习CSS(2)相关推荐

最新文章

热门文章