집 > 기사 > 웹 프론트엔드 > 꼭 알아야 할 CSS의 세 가지 주요 기능

꼭 알아야 할 CSS의 세 가지 주요 기능

php中世界最好的语言원래의: 2018-03-13 10:32:002308검색

이번에는 꼭 알아야 할 CSS의 3가지 주요 기능을 알려드리겠습니다. CSS의 3가지 주요 기능을 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

CSS의 세 가지 주요 기능: 상속, 계단식 배열, 우선 순위

1. 상속

1. 상속이란 무엇입니까?

기능: 하위 요소에서도 사용할 수 있는 일부 속성을 설정합니다. 상속

참고 사항:

1. 모든 속성을 상속할 수 있는 것은 아니며 8e99a69fbe029cd4e2b854e244eab143color/font-/text-/line-128dba7a3a77be0113eb0bea6ea0a5d0으로 시작하는 속성만 상속할 수 있습니다.

2. CSS 상속에서는 아들뿐만 아니라 자손도 상속받을 수 있습니다

3.8e99a69fbe029cd4e2b854e244eab143상속의 특수성128dba7a3a77be0113eb0bea6ea0a5d0

3.1 a 태그의 텍스트 색상과 밑줄은 상속받을 수 없습니다(8e99a69fbe029cd4e2b854e244eab143즉, 즉, 상속을 통해 얻을 수 없습니다128dba7a3a77be0113eb0bea6ea0a5d0)

3.2 h 태그의 텍스트 크기는 상속될 수 없습니다(8e99a69fbe029cd4e2b854e244eab143즉, 상속을 통해 얻을 수 없습니다128dba7a3a77be0113eb0bea6ea0a5d0 )

적용 시나리오:

는 일반적으로 웹페이지의 텍스트 색상, 글꼴, 텍스트 크기 등과 같은 일부 공통 정보를 설정하는 데 사용됩니다.
body{} >>>

2. 캐스케이딩

1. 캐스케이딩이란 무엇인가요?

기능: 캐스케이딩은 충돌을 처리하는 CSS의 기능입니다.

참고:

스태킹은 여러 선택기에 의해 "동일한 레이블"이 선택된 경우에만 작동합니다. . 그러면 "동일한 속성"이 설정되고 캐스케이딩이 발생합니다

CSS 전체 이름 Cascading StyleSheet(Cascading Style Sheet)

예:

<style>
        p{            color: red;
        }        .para{            color: blue;
        } </style>
 <p id="identity" class="para">我是段落</p>

3. 우선순위란 무엇입니까?

기능: 언제 다중 선택자는 동일한 태그를 선택하고 동일한 태그에 동일한 속성을 설정하며, 우선순위에 따라 캐스케이드 방법이 결정됩니다

2. 우선순위를 결정하는 세 가지 방법

2.1 간접 선택은 상속을 의미합니다.

간접 선택이라면 누구든지 타겟 레이블에 더 가까운 사람이 듣게 됩니다

2.2 동일한 선택자(직접 선택)

모두 직접 선택하고, 모두 동일한 유형의 선택자라면 뒤에 쓰는 사람이 말하는 사람만 듣습니다

2.3 다른 선택기(직접 선택)

모두 직접 선택되고 동일한 유형의 선택기가 아닌 경우 선택기의 우선순위에 따라 계단식으로 배열됩니다:

id>class>label>wildcard>Inheritance>Browser default

id>Class>Pass>Follow>Browse

4. !important

1. !important

기능이란 무엇입니까? 태그의 선택기에서 속성의 우선순위를 직접 선택하는 경우 , 지정된 속성의 우선순위를 가장 높은 수준으로 높일 수 있습니다.

1.!important는 직접 선택에만 사용할 수 있으며, 8e99a69fbe029cd4e2b854e244eab143 간접 선택에는 사용할 수 없습니다128dba7a3a77be0113eb0bea6ea0a5d0

2 .와일드카드 선택기로 선택한 태그도 직접 선택되며, !important를 사용하여 우선순위를 높일 수도 있습니다

3.!important는 지정된 속성의 우선순위만 높일 수 있습니다

4.!important는 속성 값의 세미콜론 앞에 써야 합니다

5.!important 앞에 있는 느낌표는 생략할 수 없습니다

 <style>
      p{
         color: red !important; //提升优先级到最高
         font-size: 30px; //不会提升优先级(说明了上面的第3点)
       }  </style>

5. 우선순위의 가중치

1. 우선 순위?

기능: 여러 선택자가 혼합되면 가중치를 계산하여 우선 순위가 가장 높은 사람을 결정할 수 있습니다

2. 가중치 계산 규칙

2.1 먼저 선택자 수를 계산합니다. ID가 몇 개인지, 더 많은 ID를 갖는 선택자입니다. 우선 순위가 가장 높습니다

2.2 ID 수가 같으면 클래스 이름 수를 보고, 클래스 이름이 많은 선택자가 우선 순위가 가장 높습니다

2.3 클래스 이름 수가 같으면 클래스 이름 수를 봅니다. 태그 이름 개수가 많은 쪽이 우선 순위가 가장 높습니다

2.4 ID 개수가 같으면 클래스 이름 개수도 같고, 태그 이름 개수도 같으면 태그 이름 개수가 동일하지 않습니다. 계속 아래쪽으로 계산하면 다음 글을 쓰는 사람이 지금 다른 사람의 말을 듣게 됩니다

즉, 우선 순위가 동일하면 다음 글을 쓰는 사람이 다른 사람의 말을 듣게 됩니다

참고:

1). 태그를 직접 선택합니다. 가중치를 계산해야 합니다. 그렇지 않으면 직접 선택한 선택기를 듣게 됩니다.

2) 와일드카드의 가중치는 0입니다.

여기에서 사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 기사. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!