>  기사  >  웹 프론트엔드  >  CSS에 소개된 세 가지 메소드에 대한 간략한 소개

CSS에 소개된 세 가지 메소드에 대한 간략한 소개

不言
不言원래의
2018-08-01 15:42:421789검색

이 글의 내용은 CSS에 소개된 세 가지 방법에 대한 간략한 소개입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS를 도입하는 방법에는 내부 스타일 시트, 인라인 스타일(인라인 스타일) 시트, 외부 스타일 시트가 있습니다. 물론 여러 스타일을 사용할 수도 있습니다

인라인 스타일

<p style="color:red;font-size:20px">内联样式表</p >

인라인 style 스타일을 html 코드 라인에 직접 언로드합니다. 일반적으로 이 스타일이 현재 요소에만 적용될 때만 사용됩니다. 다른 경우에는 사용하지 마십시오.

내부 스타일 시트

 <style>
        p {
            color: blue;
            font-size: 20px        }
    </style>

내부 스타일 시트는 일반적으로 HTML 헤더에 작성되며 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내의 c9ccee2e6ea535a969eb3f532ad9fe89 이 방법은 일반적으로 현재 페이지에 특별한 스타일이 필요할 때 사용됩니다.

외부 스타일 시트

 <link rel="stylesheet" href="CSS/Googlefonts.css">

외부 스타일 시트는 스타일을 CSS 파일에 따로 작성하여 헤드에서 참조하는 것입니다. 외부 스타일 시트를 사용할 때 여러 스타일이 나타나는 경우 스타일 재정의로 인해 발생하는 문제에 유의하세요.

여러 스타일

여러 스타일을 사용하는 경우 여러 스타일이 하나로 겹칩니다. 일반적으로 여러 스타일 시트는 다음 규칙에 따라 하나로 겹칩니다. 그 중 4가 가장 높은 가중치입니다

  1. 브라우저 기본 설정

  2. 외부 스타일 시트

  3. 내부 스타일 시트(head 태그 내부에 있음)

  4. 인라인 스타일(HTML 요소 내부)

다중 스타일 우선 순위

동일한 요소의 여러 스타일의 경우 개별 스타일의 경우 , 우선순위 순서는 다음과 같습니다. 7이 가장 높은 우선순위를 가집니다(!important 규칙은 제외하지만 일반적으로 사용하지 마세요):

  1. 범용 선택기(*)

  2. 요소(유형) 선택기

  3. 클래스 선택기

  4. 속성 선택기

  5. 의사 클래스

  6. ID 선택기

  7. 인라인 스타일

관련 권장 사항:

css 부동 요소를 래핑하는 방법

요약 CSS의 그리드 레이아웃 사용(코드 포함)

위 내용은 CSS에 소개된 세 가지 메소드에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.