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

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

WBOY

풀어 주다： 2016-06-24 11:47:17

원래의

1158명이 탐색했습니다.

一、继承

继承：所谓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>

로그인 후 복사

<html lang=“utf8”>

로그인 후 복사

    <head>

로그인 후 복사

        <meta charset="utf-8">

로그인 후 복사

        <title>Demo</title>

로그인 후 복사

    </head>

로그인 후 복사

    <body style="font-size:85%">

로그인 후 복사

        body字体大小

로그인 후 복사

        <h1 style="font-size:200%">h1字体大小</h1>

로그인 후 복사

        <h2 style="font-size:150%">h2字体大小</h2>

로그인 후 복사

        <p>p字体大小<em>em字体大小</em></p>

로그인 후 복사

    </body>

로그인 후 복사

</html>

로그인 후 복사

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

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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

一、继承

1、文本样式属性

2、字体样式属性

3、列表样式属性

4、color属性

二、层叠