CSS의 다양한 계단식 스타일 예제 요약

CSS(Cascading Style Sheets)는 HTML 문서의 표시 형식을 지정하는 데 사용됩니다. 모든 것에는 순서가 있고, 모든 것에는 서열이 있습니다. 정상적인 상황에서는 차이점을 볼 수 없습니다. 이는 소위 모든 생명체의 평등입니다. 그러나 갈등과 얽힘이 발생하게 되면 완전한 동등성을 이루는 것은 불가능하고, 정체성의 차이가 순서대로 나타나게 되는 것은 당연하다. 캐스케이딩은 브라우저가 여러 스타일 소스를 스택하고 궁극적으로 결과를 결정하는 프로세스입니다. 이 기사에서는 CSS 계단식 스타일의 구체적인 역할에 대해 설명합니다.

먼저 PHP 중국어 웹사이트와 관련된 무료 강좌를 배울 수 있습니다

1. CSS 계단식 튜토리얼

css 계단식 스타일 을 알아보세요. 1.

CSS 스타일 상속 및 계단식

기능:

태그 선택기는 현재 페이지에서 지정된 모든 태그를 선택합니다.

태그 선택기는 현재 페이지에서 선택할 수 있는 한 코드의 현재 태그 계층 구조와 연관되지 않습니다. . id 선택: id 값을 먼저 설정하려면 태그를 지정해야 합니다(id 값은 반복될 수 없으며 전체 페이지에서 고유합니다).

클래스 선택: 라벨에 클래스 이름을 지정하고 클래스 선택기를 통해 지정된 라벨을 선택합니다.

2.

CSS 캐스케이딩 메커니즘에 대한 자세한 설명

캐스케이딩 스타일 시트의 캐스케이딩은 문서 구조의 한 수준에서 다른 수준으로 스타일이 전달되는 것을 의미합니다. 라벨이 적용되는 소스의 스타일 속성입니다.

레이어링은 강력한 메커니즘입니다. 캐스케이드를 이해하면 가장 경제적이고 유지 관리가 쉬운 방식으로 CSS를 작성하고 원하는 이상적인 문서 모양을 만드는 데 도움이 될 수 있습니다.

3.

CSS 상속 및 캐스케이딩 기능에 대한 자세한 설명

첫 번째 P는 선택기를 사용하지 않으므로 HTML의 기본 표시 색상(검은색)을 사용합니다.

두 번째 P는 클래스 선택기를 사용하므로 클래스는 먼저 사용된 선택자 색상(빨간색)

세 번째 P는 ID와 클래스라는 두 가지 선택자를 사용합니다. ID 선택자가 클래스 선택자보다 우선순위가 높으므로 색상은 파란색으로 표시됩니다

네 번째 P는 Inline을 사용합니다. 선택기와 ID 선택기, 인라인 선택기가 ID 선택기보다 우선순위가 높기 때문에 색상이 노란색으로 표시됩니다

다섯 번째 P는 두 개의 클래스 선택기를 동시에 사용하고, 브라우저는 웹 페이지를 해석할 때 첫 번째 클래스 선택기를 사용합니다. 클래스 선택자가 정의한 색상이 우선하므로 보라색으로 표시됩니다

6번째 P는 두 개의 ID 선택자를 동시에 사용하지만 ID 선택자는 동시에 하나의 태그에만 사용할 수 있고 전역적으로 고유하므로 , 브라우저는 이것이 불법적인 것이라고 생각하며, 색상은 기본값(검은색)으로 표시됩니다.

CSS 캐스케이딩 스타일 시트에 대한 자세한 설명

[속성] 속성이 있는 요소를 선택합니다. [attribute=value]는 속성 속성 및 속성 값이 값과 동일한 요소를 선택합니다.

[attribute~=value]는 속성 속성이 있는 요소를 선택하고 속성 값은 공백으로 구분된 단어 목록이며 그 중 하나는 value와 같습니다.

[attribute|=value]는 att 속성이 있고 속성 값이 val로 시작하고 커넥터 "-"로 구분된 문자열인 E 요소를 선택합니다.

[attibute^=value]는 속성 속성이 있고 값이 값으로 시작하는 E 요소와 일치합니다.

[attribute$=value]는 속성 속성이 있고 값이 값으로 끝나는 E 요소와 일치합니다.

[attribute*=value] E와 일치합니다. 속성 속성이 있는 요소와 값이 포함된 값

5.

CSS 스타일 시트, 상속, 캐스케이딩 및 속성 값 분석 ​

CSS에는 기본 형식(글꼴 크기, 색상 등)을 제어하는 ​​속성이 있습니다. .) , 레이아웃을 제어하는 ​​속성(예: 위치 및 부동 등)이 있고, 방문자가 인쇄할 때 페이지를 변경할 위치를 결정하는 인쇄 제어 요소가 있습니다. 이 외에도 많은 다른 속성이 있습니다. 스타일 시트에는 웹 페이지의 모양을 정의하는 규칙이 포함되어 있습니다. 각 규칙은 선택기(선택)와 선언 블록(선언)이라는 두 가지 주요 부분으로 구성됩니다. 선택기는 영향을 받는 요소를 결정하고 선언 블록은 수행해야 할 작업을 지정하는 하나 이상의 속성-값 쌍으로 구성됩니다.

6.

CSS 특수성, 상속 및 계단식

!important로 표시된 선언을 중요 선언이라고 합니다. 특수성은 없지만 중요하지 않은 선언과 별도로 고려해야 합니다.

구체적으로: 중요하지 않은 진술은 그룹으로 그룹화되고, 그 사이의 충돌은 특정성을 사용하여 해결되며, 중요한 진술은 그룹으로 그룹화되고, 중요한 진술 사이의 충돌은 항상 중요하지 않은 진술보다 우선적으로 해결됩니다.

관련 질문과 답변

1. 스태킹 컨텍스트가 없는 요소는 계단식 컨텍스트가 있는 요소보다 어떻게 더 큰 z-index를 가질 수 있습니까?

2. iOS 웹뷰는 html 파일을 로드하지만, 아니요. 9.2에서는 문제가 있지만 8.1

에서는 수평 레이아웃 계단식 배열이 하단에 나타납니다. [관련 권장 사항]

1. PHP 중국어 웹사이트의 무료 비디오 튜토리얼: "php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼"

2. PHP 중국어 웹사이트 관련 기사: DIV 중복 예제 요약을 만드는 CSS

위 내용은 CSS의 다양한 계단식 스타일 예제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!