CSS 스타일을 도입하는 세 가지 방법

高洛峰
풀어 주다: 2016-12-16 15:41:08
원래의
3133명이 탐색했습니다.

스타일 시트는 서로 다른 위치에 배치되며 효과 범위도 다릅니다. 대략적으로 스타일시트는 인라인 스타일시트와 외부 스타일시트로 구분되는데, 즉 페이지에 배치하는 방법, 외부 참조하는 방법, 외부 가져오기하는 방법이 있습니다.
1. 인라인 스타일 시트
인라인 스타일 시트는 < HEAD> 사이에 스타일 시트가 배치되어 스타일 시트가 전체 HTML 페이지에 영향을 줍니다.
인라인 스타일 시트에는 HMTL 페이지에 특정 표시를 별도로 지정하고 해당 스타일을 지정하는 직접 삽입 방법도 포함되어 있습니다.

   < Table style=" font-size:10pt; color:blue;">
로그인 후 복사

문자 크기를 정의합니다. 테이블은 10pt이고 색상은 파란색입니다. 번거롭고 복잡한 스타일 시트 규칙은 분명히 우리가 원하는 것이 아닙니다.

스타일 시트를 작성하여 동일한 스타일로 다른 페이지에 구현하세요. 이는 외부 스타일 시트를 도입함으로써 달성할 수 있습니다. 그리고 외부 스타일 시트가 변경되면 스타일 시트를 참조하는 각 HTML 페이지의 스타일도 그에 따라 변경되며, 각각을 수동으로 변경할 필요는 없습니다.

외부 스타일 시트란 확장자가 .css인 완전히 독립적인 텍스트 파일을 생성하는 것을 의미하며, 파일 내용에는 관련 HTML 언어를 제외한 스타일 시트 정보가 입력됩니다.
예를 들어 외부 스타일 시트에 다음을 입력합니다.


< 시트가 변경되지 않았습니다. 입력 후 example.css로 저장합니다.

외부 스타일 시트를 참조하는 방법에는 두 가지가 있습니다.

(1) < LINK> 태그를 사용하여 외부 스타일 시트에 연결

외부 스타일 시트에 연결하려면 다음 명령문을 사용하세요.
< LINK REL=STYLESHEET HREF="example.css ">
HREF에는 경로 정보가 포함되어야 합니다. 즉, 스타일 시트 파일과 HTML 문서가 동일한 디렉터리에 있음을 의미합니다.
HTML 문서는 여러 외부 스타일 시트를 참조할 수 있습니다. 예:


   < LINK REL=STYLESHEET HREF="example.css">
   < LINK REL=STYLESHEET HREF="style/other.css">
로그인 후 복사

첫 번째로 연결된 example.css가 문서의 기본 스타일 시트입니다. 스타일 정의가 충돌하는 경우 전자를 먼저 만족해야 합니다.
(2) @IMPORT를 사용하여 스타일 시트 정보를 가져옵니다.

외부 스타일 시트 정보를 페이지로 가져오려면 < 예:



< STYLE TYPE="text/css"> 
@import "example.css"; 
@import "style/other.css"; 
< /STYLE>
로그인 후 복사

물론 이 방법은 동시에 여러 외부 스타일 시트 정보를 참조할 수도 있습니다. 스타일 시트의 우선 순위는 순서에 따라 설정됩니다. 수입되는 곳입니다.
이 세 가지 방법은 혼합하여 사용할 수 있습니다. 즉, 한 페이지에서 동시에 사용할 수 있습니다. 그러나 스타일 시트 정보 규칙이 너무 많으면 충돌이 발생할 가능성이 높습니다. 예를 들어, 인용된 스타일 시트 정보 중 일부에는 H1 제목에 대한 설정이 있는데, 어떤 것이 주요 항목입니까? 이때 어떤 스타일시트를 먼저 참조하느냐에 따라 달라지며, 어떤 스타일시트가 우선순위가 높은지 결정됩니다. 따라서 복잡한 스타일 시트 정보를 다룰 때 스타일 시트 충돌 가능성을 충분히 고려하고 충돌을 더 잘 해결하며 이를 조정하고 일치시켜야 합니다.


CSS 스타일을 도입하는 세 가지 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿