masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > teks badan

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

WBOY
Lepaskan： 2016-06-24 11:47:17
asal
1209 orang telah melayarinya

一、继承

继承：所谓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>
Salin selepas log masuk
<html lang=“utf8”>
Salin selepas log masuk
    <head>
Salin selepas log masuk
        <meta charset="utf-8">
Salin selepas log masuk
        <title>Demo</title>
Salin selepas log masuk
    </head>
Salin selepas log masuk
    <body style="font-size:85%">
Salin selepas log masuk
        body字体大小
Salin selepas log masuk
        <h1 style="font-size:200%">h1字体大小</h1>
Salin selepas log masuk
        <h2 style="font-size:150%">h2字体大小</h2>
Salin selepas log masuk
        <p>p字体大小<em>em字体大小</em></p>
Salin selepas log masuk
    </body>
Salin selepas log masuk
</html>
Salin selepas log masuk

元素 值 计算值
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元素应用样式表中的规则覆盖继承样式的过程。

Label berkaitan：
后端码农谈前端（CSS篇）第八课：继承与层叠
sumber：php.cn
Artikel sebelumnya：CSS3学习之 animation 属性_html/css_WEB-ITnose Artikel seterusnya：HTML5+开发移动app教程4-mui中几种open页面的区别_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1834
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
2008
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1692
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1592
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1612
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan