CSS 캐스케이드 및 상속 사용에 대해 자세히 알아보세요.
- 高洛峰원래의
- 2017-03-17 10:37:071453검색
1. HTML에서 CSS 스타일 시트를 사용하는 세 가지 방법:
(1) 인라인 스타일 시트.
예: LIN
(2) 삽입된 스타일 시트.
은 head> 태그 내에
(3) 외부 링크용 스타일 시트.
2. 계단식 순서
(1)
먼저 출처에 따라 규칙을 분류합니다.
구체적인 우선순위는 다음과 같습니다.
페이지 작성자가 설정한 규칙> 사용자 규칙> 브라우저 규칙
(2)
그 다음은 선택자와 구체성에 따른 규칙 정렬:
1. 인라인 스타일시트 의 우선순위가 가장 높습니다.
2. ID 선택자, ID 선택자가 여러 개인 경우 ID 선택자가 더 많은 규칙이 승리합니다.
3. ID 선택자가 없거나 번호가 동일한 경우에는 카테고리가 가장 많은 규칙이나 규칙 내 의사 카테고리가 더 높은 우선순위를 갖습니다.
4. 클래스가 있는 경우(또는 클래스가 없는 경우) 요소 수가 가장 많은 규칙의 우선순위가 높습니다.
5. id, class, 요소 개수가 동일할 경우 가장 최근에 선언한 원칙이 우선순위가 높습니다.
(3) 내장 스타일시트와 외부 링크 스타일시트의 우선순위 다른 가중치가 동일할 경우 가장 최근에 선언된 규칙이 더 높은 우선순위를 갖습니다.
즉,
태그에서는 링크 태그와 스타일 태그의 순서로 두 번째 문이 우선순위가 높습니다.3. 계단식 배열 및 HTML 속성
HTML의 정렬, 색상, 면, vlink 및 배경도 페이지 모양에 영향을 미칩니다.
태그의 정렬 속성은 주변 요소를 기준으로 이미지의 가로 및 세로 정렬을 정의합니다.
HTML 4.01은 정렬 속성을 더 이상 사용하지 않으며, XHTML 1.0 Strict DTD는 이 속성을 지원하지 않으며, HTML 5는 더 이상 이 속성을 지원하지 않습니다.
color 속성은 font 요소의 텍스트 색상을 지정합니다.
HTML 4.01에서는 글꼴 요소의 색상 속성이 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 글꼴 요소의 색상 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
[
텍스트.
예:텍스트입니다!
이것은 텍스트입니다!
HTML 4.01에서는 글꼴 요소가 더 이상 사용되지 않습니다.
XHTML 1.0 Strict DTD에서는 글꼴 요소가 지원되지 않습니다.
]
face 속성은 글꼴 요소에 있는 텍스트의 글꼴을 지정합니다.
예:
HTML 4.01에서는 글꼴 요소의 얼굴 속성 사용이 더 이상 사용되지 않습니다. ; XHTML의 1.0 Strict DTD에서는 글꼴 요소의 얼굴 속성이 지원되지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문:
vlink 속성 문서에서 방문한 링크의 색상입니다.
예:
HTML 4.01에서는 body 요소의 vlink 속성 사용이 XHTML 1.0 Strict DTD에서 더 이상 사용되지 않습니다. body 요소는 vlink 속성을 지원하지 않습니다.
대신 CSS를 사용해 주세요.
CSS 구문(
섹션):이러한 속성이 CSS 규칙과 충돌하는 경우, 항상 CSS 규칙에 의해 재정의됩니다.
4. 룰에 활용해보세요! 중요
사용! important로 지정된 규칙은 다른 규칙보다 더 중요합니다.
예: em { 색상: bule! 중요;}
참고: 사용자가 먼저입니다! 중요한 규칙은 작성자의 규칙보다 우선합니다.
사용자 정의 스타일 시트를 선언해야 합니다! 중요한.
5. @import 규칙, 파일 가져오기.
예: h1 {color: red;}
@import url("style.css");
/*style.css*/
h1{color: green;}
위 코드에서 마지막 h1은 빨간색입니다. 기본적으로 가져온 스타일시트는 원래 스타일시트 규칙보다 먼저 나타나기 때문입니다.
6.상속
(1) display, border, margin 및 padding 속성은 상속되지 않습니다.
(2) background-color는 상속되지 않습니다. 설정하지 않으면 기본값은 transparent라는 특수값입니다.
(3) 상대값을 상속받을 때, 그 값을 먼저 계산한 후 후손에게 전달합니다.
(4) 상속 지정: 특수 값 상속
예: p .standout{ border :1px solid blue ;}
p .standout{ border:inhert;}
참고: CSS 1이 출시되었을 때 저자의! 중요한 스타일은 사용자의 스타일보다 우선합니다! 중요한 스타일.
CSS2, 유저 여러분! 중요한 스타일은 작가의 스타일보다 우선합니다! 중요한 스타일.
위 내용은 CSS 캐스케이드 및 상속 사용에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!