简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

后端码农谈前端（CSS篇）第八课：继承与层叠_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:47:17
Original
1158 people have browsed it

一、继承

继承：所谓CSS样式继承，就是子元素应用父元素的规则声明。（由这一特性，可将CSS属性分为可继承属性和非可继承属性。）
可继承属性：属性值可由父元素继承给子元素的属性称之为可继承属性。

哪些属性是可继承属性？

1、文本样式属性

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space

2、字体样式属性

font、font-family、font-size、font-style、font-variant、font-weight

3、列表样式属性

list-style、list-style-image、list-style-position、list-style-type

4、color属性

注：这里特别解释:font-size属性(继承性比较特殊)    
不同于有准确的值被继承,font-size继承的是计算的值。   

例如：

<!DOCTYPE html>
Copy after login
<html lang=“utf8”>
Copy after login
    <head>
Copy after login
        <meta charset="utf-8">
Copy after login
        <title>Demo</title>
Copy after login
    </head>
Copy after login
    <body style="font-size:85%">
Copy after login
        body字体大小
Copy after login
        <h1 style="font-size:200%">h1字体大小</h1>
Copy after login
        <h2 style="font-size:150%">h2字体大小</h2>
Copy after login
        <p>p字体大小<em>em字体大小</em></p>
Copy after login
    </body>
Copy after login
</html>
Copy after login

元素 值 计算值
default font-size 16px  
85% 16px × 85% = 13.6px

200% 13.6px × 200% = 27.2px

150% 13.6px × 150% = 20.4px

unspecified 13.6px
unspecified 13.6px

即:除非font-size值被重新赋值,否则就按照上一次的尺寸大小值继续.比如上图中设置body字体为默认字体(通常为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。

二、层叠

层叠：所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。

Related labels：
后端码农谈前端（CSS篇）第八课：继承与层叠
source：php.cn
Previous article：CSS3学习之 animation 属性_html/css_WEB-ITnose Next article：HTML5+开发移动app教程4-mui中几种open页面的区别_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1404
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
9
1493
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1332
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1215
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1300
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！