CSS 상속이란 무엇입니까?-CSS 튜토리얼-php.cn

这儿的苹果好红啊

深入探讨CSS的继承性

看这儿！

집

웹 프론트엔드

CSS 튜토리얼

CSS 상속이란 무엇입니까?

青灯夜游

Apr 02, 2021 pm 03:30 PM

상속은 특정 html 태그 요소뿐만 아니라 그 하위 요소에도 스타일을 적용할 수 있도록 하는 규칙입니다. CSS 상속은 상위 요소의 CSS 스타일 설정을 의미하며 상위 요소 이하의 모든 하위 요소에는 이 속성이 있습니다. CSS 상속의 역할: 부모 요소에 대한 일부 속성을 설정합니다. 이 속성은 자식 요소에서도 사용할 수 있습니다.

CSS 상속이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 상속

상속은 특정 html 태그 요소뿐만 아니라 해당 하위 요소에도 스타일을 적용할 수 있도록 허용하는 규칙입니다.

CSS 상속은 특정 CSS 속성을 하위 요소로 전달하는 것으로 정의할 수 있습니다. 즉, 내부에 포함된 태그가 외부 태그의 스타일을 갖게 됩니다. 즉, 하위 요소가 상위 요소의 속성을 상속할 수 있습니다.

상속의 역할: 일부 속성을 상위 요소에 설정합니다. 이는 하위 요소에서도 사용할 수 있습니다.

예를 들어 다음 코드에서 div에는 p 태그 2개와span 태그 1개가 포함되어 있습니다. div의 글꼴 색상이 빨간색으로 설정되면 하위 태그가 상위 요소의 속성을 상속하므로 빨간색으로 표시됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>苹果</p>
        <p>香蕉</p>
        <span>葡萄</span>
    </div>
</body>
</html>

로그인 후 복사

CSS 상속이란 무엇입니까?

물론 위의 예에서는 속성을 상속할 수 있지만 모든 속성을 상속할 수는 없습니다. 그러면 CSS에서 상속할 수 있는 속성은 무엇인가요? 아래에 요약해 보겠습니다.

CSS에서 상속할 수 있는 속성은 무엇인가요?

1. CSS에서 상속된 속성 중:

font: 글꼴. 글꼴 계열: 요소의 글꼴을 지정합니다. Font-Weight : 글꼴의 두께를 설정합니다.

font-size: 글꼴 크기를 설정합니다. 글꼴 스타일: 글꼴 스타일을 정의합니다.

font-variant: 텍스트를 표시하기 위해 작은 대문자로 글꼴을 설정합니다. 즉, 모든 소문자는 대문자로 변환되지만 작은 대문자로 된 모든 문자는 나머지 텍스트에 비해 글꼴 크기가 더 작습니다.

font-stretch: 현재 글꼴 모음을 늘리고 변형합니다. 모든 주요 브라우저에서는 지원되지 않습니다.

font-size-adjust: 기본 글꼴의 x 높이가 유지되도록 요소의 가로세로 값을 지정합니다.

2. CSS에서 상속되는 텍스트 속성 중:

text-indent: 텍스트 들여쓰기. text-align: 텍스트를 가로로 정렬합니다. line-height : 줄 높이. 단어 간격: 단어 사이의 간격을 늘리거나 줄입니다(예: 단어 간격).

letter-spacing: 문자 사이의 간격(문자 간격)을 늘리거나 줄입니다. text-transform: 텍스트 대소문자를 제어합니다. 방향: 텍스트 쓰기 방향을 지정합니다.

color: 텍스트 색상

3. CSS에서 상속된 속성의 요소 가시성:

visibility: 요소가 표시되는지 여부를 지정합니다.

4. CSS에 상속된 속성이 있는 테이블 레이아웃 속성:

caption-side: 테이블 제목의 위치를 설정합니다. border-collapse: 테이블 테두리를 단일 테두리로 축소할지 여부를 설정합니다.

border-spacing: 셀 테두리를 구분하는 거리를 설정합니다. 빈 셀: 테이블에 빈 셀을 표시할지 여부를 설정합니다.

table-layout: 셀, 행, 열 표시 알고리즘을 설정합니다.

5. CSS에서 상속된 속성이 있는 목록 레이아웃 속성:

list-style-type: 목록 항목에 사용되는 플래그 유형을 수정합니다. list-style-image: 각 로고에 이미지를 사용합니다.

list-style-position: 로고가 목록 항목 콘텐츠 외부에 표시되는지 아니면 콘텐츠 내부에 표시되는지 결정할 수 있습니다.

list-style: 축약된 목록 스타일로, 하나의 명령문에서 목록의 모든 속성을 설정하는 데 사용됩니다.

6. CSS에서 상속된 속성의 생성된 콘텐츠 속성:

quotes: 중첩 참조의 인용 유형을 설정합니다.

7. CSS에서 상속된 속성인 커서 속성:

cursor: 표시할 커서의 유형(모양)을 지정합니다.

8. CSS에서 상속된 속성인 페이지 스타일 속성:

page : 요소가 표시되어야 하는 특정 페이지 유형을 지정합니다. page-break-inside: 테이블 요소 내부에서 페이징을 방지하도록 페이징 동작을 설정합니다.

windows: 요소 내에서 페이지 매김이 발생할 때 페이지 상단에 남아 있어야 하는 최소 줄 수를 설정합니다.

orphans: 요소 내에서 페이지 매김이 발생할 때 페이지 하단에 남아 있어야 하는 최소 줄 수를 설정합니다.

9. CSS에서 상속된 속성인 사운드 스타일 속성

speak: 사운드 제공 여부를 설정하거나 검색합니다. speech-tempotion: 구두점 발음 방법을 설정하거나 검색합니다.

speak-numeral: 숫자가 발음되는 방식을 설정하거나 검색합니다. talk-header: 테이블 헤더가 그 뒤에 오는 일련의 셀과 관련하여 나타나는 횟수를 설정하거나 검색합니다.

speech-rate: 발음 속도를 설정하거나 검색합니다. 볼륨: 볼륨을 설정하거나 검색합니다.

voice-family: 현재 음성 유형을 설정하거나 검색합니다. 피치: 피치를 설정하거나 검색합니다.

피치 범위: 사운드의 부드러움을 설정하거나 검색합니다. 스트레스: 피치 범위와 유사합니다. 현재 사운드 파형의 최고 피크 값을 설정하거나 검색합니다.

richness：设置或检索当前声音的音色。azimuth：设置或检索当前声音的音场角度。

elevation：设置或检索当前声音的音源仰角。

10、所有元素可以继承的属性：visibility、cursor

11、内联元素可以继承的属性：

（1）字体系列属性

（2）除text-indent、text-align之外的文本系列属性

12、块级元素可以继承的属性：text-indent、text-align

（学习视频分享：css视频教程）

多种样式混合应用

既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：

样式定义：

.apple{color:red;}H1{color:yellow;}

로그인 후 복사

应用举例代码：

<h1 id="这儿的苹果好红啊">这儿的苹果好红啊</h1>

로그인 후 복사

应用举例效果：因为选择符H1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1 {color:blue;}                        特性值为：001
P EM {color:purple;}                    特性值为：002
.apple {red;}                           特性值为：010 
P.bright {color:yellow;}                特性值为：011
P.bright EM.dark {color:brown;}         特性值为：022
#id316 {color:yellow}                   特性值为：100

로그인 후 복사

从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

CSS继承的优先级问题

上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。

样式定义：

BODY {background:black;}
LI {color:gray;}
UL.white {color:white}

로그인 후 복사

应用举例代码：

<ul>
　 <li>举例列表一</li>
　 <li>举例列表二</li>
　 <li>举例列表三</li>
　 <li>举例列表四</li>
</ul>

로그인 후 복사

有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。

为什么会出现这样的情况呢？因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。

可能有些地方不是很好理解，大家多思考一下就会明白，平时在应用样式表的时候多留意思考一下。

下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，因为EM规则的权值要大于从H1元素继承来的权值：

样式定义：

H1#id316 {color:black;}                 特性值为：101
EM {color:gray;}                        特性值为：1

로그인 후 복사

应用举例代码：

<h1 id="深入探讨-EM-CSS的继承性-EM">深入探讨<EM>CSS的继承性</EM></h1>

로그인 후 복사

这是因为第二条EM规则的特性值（1）要比被继承的特性值（0）要大，事实上规定H1#id316的原始特性值（101）对其继承值没有影响，仍旧为0。

小技巧：

如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：

H1，H1 EM {color:black;}             特性值为：1，2
EM {color:red;}                      特性值为：1

로그인 후 복사

给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。

上面我们讨论了多个样式规则同时应用于同一对象时，哪个规则会被最终应用的一些情况，可能有些细心的读者会说，那STYLE元素呢？对啊，HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢？

回答是这样的：带有STYLE的元素在CSS1下其特性值为100，尽管类似于#ID316这样的ID选择符的特性值也为100，但在实际应用中，STYLE这一权值会更高一些，因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值，具体的例子我们就不举了，大家可以自己试试。

人为定义CSS继承优先级

在制作网页的过程中，我们可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，它们被称为重要规则（important rule）。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入！important这样一个短语来标记一条重要规则，比如说：

p.apple {color:#red !important; background:white;}

로그인 후 복사

颜色值#red被标记为!important，而背景色white未被标记，如果需要二条规则都是重要的话，那么每条规则都需要标上!important。

正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。

标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。需要注意的是，虽然制作者定义的样式比用户定义的样式具有更高权值时，但!important规则恰恰相反：重要的用户定义规则要比制作者定义的样式具有更高权值，即使是标记为!important的重要规则也是如此。

看了这么多文字介绍后，我们来举个例子看一下：

样式定义：