CSS 상속 자세히 알아보기
font-family 속성을 스타일시트에서 가져온 Google 글꼴로 설정하고 기본적으로 스타일시트의 모든 요소를 선택하는 *(Asterix) 선택기를 사용하여 설정합니다. * 선택자 대신 <body> 선택자를 사용하면 어떻게 될까요?결과를 살펴보겠습니다.
body {
font-family: Lato; /* this is a property that will be applied to all the child elements in the DOM */
}
내가 좋아하는 포켓몬 목록아무것도 바뀌지 않습니다!
font-family 와 * 를 사용할 때 body 속성이 문서에 적용되는 절차가 다르지만 더 흥미로운 점을 발견했습니다. <body> 내의 모든 상위 요소는 이 글꼴을 상속합니다. 스타일시트 내의 각 자식 요소에 명시적으로 적용할 필요가 없습니다.아래 이미지는 속성이 DOM을 통해 하위 요소로 전달되는 방식을 보여줍니다.
상속된 속성이 DOM으로 전달됨그러나 명심해야 할 중요한 개념은 모든 속성이 상속될 수 있는 것은 아니라는 것입니다. 상속할 수 있는 가장 일반적인 속성 중 일부는
color , font , font-family , font-size , font-weight , line-height , letter-spacing , text-align , white-space 및 기타 텍스트입니다. -관련 속성. 목록 속성도 상속되며 가장 일반적인 상속 가능한 목록 속성 중 일부는 list-style , list-style-type , list-style-position 및 list-style-image 입니다. 전체 목록을 볼 수 있습니다here.특수 값 사용
상속은 initial 및 inherit 의 두 가지 특수 값을 사용하여 추가로 조작할 수 있습니다.
Inherit는 캐스케이드가 상속을 방해하는 위치에서 상속을 강제할 수 있습니다. 이렇게 하면 요소가 상위 요소에서 모든 값을 상속하게 됩니다. 이것을 어떻게 테스트할 수 있습니까? 앵커의 텍스트 색상을 검은색으로 설정하고 원래 스타일인 밑줄을 제거한 것을 기억하시나요? 이 두 규칙 세트를 상위 요소( #main-list )로 이동하면 어떻게 됩니까? 우리는 우리의 스타일을 깨뜨릴 것입니다!
#main-list {
list-style: none;
display: flex;
color: black; /* we moved these two lines here */
text-decoration: none;
}
#main-list a {
/*color: black;
text-decoration: none; */
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
포켓몬 목록입니다. CSS가 어떻게 '파손'되었는지 확인하십시오(앵커 링크에는 기본 스타일이 있음).
부모 요소에서 color 및 text-decoration에 대한 규칙 집합을 상속하기 위해 두 속성에 대해 inherit 값을 사용합니다. 이것은 이제 상위 규칙 세트(예: JavaScript 사용)를 편집할 수 있고 앵커가 새로 변경된 규칙을 적용해야 하기 때문에 유용합니다. 또한 inherit 키워드를 사용하여 테두리나 패딩과 같이 일반적으로 상속되지 않는 속성을 강제로 상속할 수 있습니다. 아래의 변경 사항을 사용하면 스크립트가 이전과 같아야 합니다(검은색 텍스트 및 밑줄 장식 없음).
#main-list a {
color: inherit;
text-decoration: inherit;
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
Initial 반면에 키워드는 실행 취소하려는 스타일이 이미 적용된 경우에 사용됩니다. 기본적으로 모든 CSS 속성에는 초기 값이 있으며 initial 키워드를 사용하여 실제로 규칙을 해당 기본값으로 재설정합니다. (스타일에 이니셜을 사용하려는 경우 경고입니다. IE 또는 Opera Mini에서는 지원되지 않습니다.)
아래 목록에는 앵커 내부에 색상이 빨간색으로 설정된 CSS가 있지만 rare 클래스 내부에는 초기 색상으로 설정되어 있습니다. color 속성은 기본적으로 검은색( color: black ) 이므로 희소 요소는 검은색입니다.
#main-list a {
color: red;
text-decoration: inherit;
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
#main-list .rare {
background-color: salmon;
color: initial;
}
위 목록을 사용한 결과
그리고 그것이 상속에 관한 것입니다. 아시다시피 이 개념은 캐스케이드 뒤에 있는 아이디어와 밀접하게 연결되어 있으며 실제로 많은 스타터가 이 두 가지 개념을 혼합합니다! 이 기사가 상속 및 캐스케이드에 관한 안개를 약간 제거했으면 합니다!
결과
여기에 이 기사에 대한 코드펜이 있습니다.
이 기사가 마음에 든다면 thedukh.com에서 더 많은 내용을 좋아할 것입니다.
Reference
이 문제에 관하여(CSS 상속 자세히 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/bracikaa/css-inheritance-in-more-detail-2ak
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
#main-list {
list-style: none;
display: flex;
color: black; /* we moved these two lines here */
text-decoration: none;
}
#main-list a {
/*color: black;
text-decoration: none; */
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
#main-list a {
color: inherit;
text-decoration: inherit;
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
#main-list a {
color: red;
text-decoration: inherit;
background-color: pink;
padding: 20px;
margin: 10px;
display: inline-block;
text-align: center;
border-radius: 6px;
}
#main-list .rare {
background-color: salmon;
color: initial;
}
여기에 이 기사에 대한 코드펜이 있습니다.
이 기사가 마음에 든다면 thedukh.com에서 더 많은 내용을 좋아할 것입니다.
Reference
이 문제에 관하여(CSS 상속 자세히 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bracikaa/css-inheritance-in-more-detail-2ak텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
