CSS 계단식 스타일을 이해하는 방법
- 清浅원래의
- 2019-02-28 11:40:164028검색
CSS 캐스케이딩은 브라우저 충돌 처리 기능으로, CSS 캐스케이딩 스타일 충돌 중에는 참조 메서드 충돌, 상속 메서드 충돌, 지정 스타일 충돌이 있습니다. 지정된 스타일과 상속된 스타일 디버깅 사이에 충돌이 있는 경우 지정된 스타일의 충돌이 우선합니다.
CSS에는 상속, 우선 순위 및 계단식이라는 세 가지 주요 기능이 있습니다. 오늘 소개할 내용은 CSS의 세 가지 주요 기능의 계단식 특성으로, 이는 확실한 참고 가치가 있기를 바랍니다. 모두에게 도움이 되기를 바랍니다
[추천 과정: CSS Tutorial]
CSS 계단식 배열
CSS 계단식 배열은 충돌을 처리하는 브라우저의 기능입니다. 속성에 여러 선택기가 설정된 경우 이때는 하나의 선택기만 적용되고 나머지 선택기는 해당 부분을 제거합니다. .
계단식 조건
(1) 동일한 요소
(2) 동일한 속성
(3) 동일한 우선순위
계단식의 스타일 충돌
(1) 참조 방법 충돌
CSS 참조 방법에는 인라인 스타일, 인라인 스타일, 가져온 스타일, 링크 스타일이 포함됩니다. 4가지의 우선 순위는 인라인 스타일 > 인라인 스타일 > 가져온 스타일 > 링크 스타일입니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
body{
background-color: pink;
}
</style>
<body>
<h1 style="background-color: red">优先级</h1>
</body>
</html> 렌더링은 다음과 같습니다.
(2) 상속 방법의 충돌
CSS에 직접 설정하면 해당 하위 항목이 CSS의 색상 설정, 글꼴 크기, 글꼴 모양, 정렬 및 기타 속성과 같은 속성 값을 상속하는 일부 속성이 있습니다. 상속됩니다. 그러나 상자, 위치, 레이아웃 등과 같은 속성에 대해서는 상속이 없습니다.
상속 방법의 충돌은 모든 상위 요소 대신 자신에게 가장 가까운 상위 요소를 표시하는 것입니다.
예:
<style type="text/css">
body{
color: pink;
}
#father{
color: red;
}
#grandfather{
color: blue;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div>
<h1>继承冲突</h1>
</div>
</div>
</div>렌더링은 다음과 같습니다.
(3) 지정된 스타일 충돌
때때로 요소에 스타일을 할당할 때 가중치가 다르기 때문에 충돌이 발생할 수 있습니다. 가중치가 동일한 경우에만 "마지막 먼저" 원칙이 사용된다는 점에 유의해야 합니다.
<style type="text/css">
body{
color:black;
}
.father{
color:yellow;
}
#son{
color:green;
}
</style>
</head>
<body>
<div id="son" class="father">
<h1>继承冲突</h1>
</div>
</body>렌더링은 다음과 같습니다.
ID 선택기의 가중치는 100이고 요소 선택기의 가중치는 1이므로 결국 id 선택기에서 설정한 속성에 따라 글꼴 색상이 표시됩니다
참고: 페이지에서 상속된 스타일과 지정된 스타일이 동시에 충돌하는 경우, 지정된 스타일이 우선 적용됩니다. 속성이 설정되면! 중요한 경우 우선순위를 변경할 수 있으며 스타일은 다른 스타일에서 재정의될 수 있습니다.
요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다.
위 내용은 CSS 계단식 스타일을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!