집 > 기사 > 웹 프론트엔드 > CSS 계단식 배열, 상속 및 구체적인 예에 대한 자세한 설명

CSS 계단식 배열, 상속 및 구체적인 예에 대한 자세한 설명

零下一度원래의: 2017-06-24 13:40:263644검색

계단식

계단식은 여러 CSS 스타일을 중첩하는 것을 의미합니다. 즉, 나중에 설정한 스타일이 이전 스타일을 계단식으로 덮는다는 의미입니다. 계단식의 전제는 CSS 선택자의 우선순위가 동일하다는 것입니다. 예를 들어 인라인 CSS 스타일 시트를 사용하여

마크 글꼴 크기를 12픽셀로 정의하고 링크된

마크 색상이 빨간색인 경우 단락 텍스트가 12픽셀로 표시됩니다. 빨간색, 즉 두 가지 스타일이 겹쳐서 생성됩니다.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5  6     <title>CSS层叠性</title> 7     <style> 8         .box { 9             background-color: red;10             height: 200px;11             width: 200px;12         }13 14         .wrap {15             background-color: green;16         }17     </style>18 </head>19 <body>20     <div class="box wrap">21         22     </div>23 </body>24 </html>

브라우저에 표시된 결과는 길이와 너비가 200픽셀이고 배경색이 녹색인 div입니다. 그 이유는 상자에 정의된 배경색이 Wrap

에 정의된 배경색에 가려지기 때문입니다.

브라우저 F12 검사 요소를 통해

상속

CSS 상속은 하위 컨테이너의 스타일이 상위 컨테이너의 스타일을 상속한다는 것을 의미합니다. 하지만 모든 스타일을 상속받을 수 있는 것은 아닙니다. 텍스트 관련 글꼴 크기, 색상, 글꼴 스타일, 줄 높이, 마우스 스타일 등과 같은 일부 스타일만 상속될 수 있습니다.

너비 및 높이, 배경색, 여백, 부동, 절대 위치 지정 등과 같은 상자 관련 스타일은 상속될 수 없습니다.

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>CSS继承性</title> 6  7     <style type="text/css"> 8         .parent { 9             color: red;10             font-size: 20px;11             height: 300px;12             width: 300px;13             background-color: green;14         }15 16         .child {17             height: 100px;18             width: 100px;19         }20     </style>21 22 </head>23 <body>24     <div class="parent">25         我是父div26         <p>27             我是段落28         </p>29 30         <div class="child">我是子div</div>31     </div>32 </body>33 </html>

효과는 다음과 같습니다.

p 태그와 하위 div 모두 상위 div의 글꼴 색상과 크기를 상속하지만 하위 div는 너비를 상속하지 않는 것을 볼 수 있습니다. 상위 div의 높이와 배경색,

상속된 스타일은 실선으로 표시되고 다른 스타일은 흐리게 표시됩니다.

참고: 상속을 올바르게 사용하면 코드를 단순화하고 CSS 스타일의 복잡성을 줄일 수 있습니다. 그러나 웹 페이지의 모든 요소가 많은 수의 스타일을 상속하는 경우 스타일의 소스를 결정하기가 어렵습니다. 따라서 글꼴, 텍스트 속성과 같은 웹 페이지의 일반적인 스타일에 상속을 사용할 수 있습니다. 예를 들어 글꼴, 글꼴 크기, 색상, 줄 간격 등을 body 요소에 균일하게 설정한 다음 상속을 통해 문서의 모든 텍스트에 영향을 줄 수 있습니다.