비디오: How to save inspect element changes permanent 2024
상속 된 CSS3 스타일을 사용하면 상속 된 스타일 규칙을 재정의 할 수 있습니다. 예를 들어, 다음 코드를 살펴보면 이것이 의미하는 바를 알 수 있습니다.
overRide. html body {color: red;} {color: green;} myClass {color: blue;} #whatColor {color: purple;}이 div에는 본문의 스타일 만 있습니다.
단락 스타일
질문은 다음과 같습니다. WhatColor 요소는 어떤 색으로 표시됩니까? 몸의 일원이므로 빨간색이어야합니다. 단락이기도하고 단락은 초록색입니다. 또한 myClass 클래스의 멤버이기 때문에 파란색이어야합니다. 마지막으로 whatColor라는 이름이 붙고이 ID를 가진 요소는 보라색이어야합니다.
4 개의 겉으로보기에 상충되는 색상 규칙이 모두이 열악한 요소에 떨어졌습니다. 어떤 색깔이 될까요?
CSS는 이런 유형의 상황을 처리하기위한 명확한 순위 시스템을 가지고 있습니다. 일반적으로보다 구체적인 규칙은보다 일반적인 규칙보다 우선합니다. 우선 순위가 가장 높습니다 (가장 높은 우선 순위에서 가장 낮은 우선 순위까지).사용자 기본 설정
사용자는 항상 어떤 스타일이 사용되는지 최종 선택합니다. 사용자는 스타일을 전혀 사용할 필요가 없으며 항상 페이지의 로컬 사본에 대한 스타일 시트를 변경할 수 있습니다. 사용자가 특수 스타일 (예: 시각 장애가있는 사람들을위한 고 대비)을 적용해야하는 경우, 그는 항상 그 옵션을 가져야합니다.
-
로컬 스타일
로컬 스타일 (HTML의 스타일 속성으로 정의 됨)은 개발자가 정의한 스타일의 우선 순위가 가장 높습니다. 그것은 다른 어떤 스타일보다 우선합니다. -
id
요소 id에 첨부 된 스타일은 스타일 시트에 정의 된 다른 스타일보다 우선하기 때문에 매우 중요합니다.
-
클래스
클래스에 연결된 스타일은 객체의 요소 스타일보다 우선합니다. 따라서 파란색으로 표시된 클래스에 속한 녹색 색상의 단락이있는 경우 클래스 스타일이 요소 스타일보다 우수하므로 요소는 파란색으로 표시됩니다.
-
요소
요소 스타일은 모든 컨테이너보다 우선합니다. 예를 들어 단락이 div 안에 있으면 단락 스타일이 div와 본문을 모두 재정의 할 수 있습니다.
-
컨테이너 요소
컨테이너로 사용되는 div, 테이블, 목록 및 기타 요소는 해당 스타일을 전달합니다. 요소가 이러한 컨테이너 중 하나 이상에 있으면 스타일 속성을 상속받을 수 있습니다.
-
Body
body 스타일에 정의 된 것은 전체적인 페이지 기본값이지만 다른 스타일에 의해 무시됩니다.
-
오버 라이드에서. html 예제에서는 단락이 자주색으로 표시되도록 id 규칙이 우선 적용됩니다.
