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

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

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

1. CSS 계단식 튜토리얼

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

기능:

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

2.

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

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

3.

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

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

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

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

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

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

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

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

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

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

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

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

5.

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!