스타일 시트는 서로 다른 위치에 배치되며 효과 범위도 다릅니다. 대략적으로 스타일시트는 인라인 스타일시트와 외부 스타일시트로 구분되는데, 즉 페이지에 배치하는 방법, 외부 참조하는 방법, 외부 가져오기하는 방법이 있습니다.
1. 인라인 스타일 시트
인라인 스타일 시트는 < HEAD> 사이에 스타일 시트가 배치되어 스타일 시트가 전체 HTML 페이지에 영향을 줍니다.
인라인 스타일 시트에는 HMTL 페이지에 특정 표시를 별도로 지정하고 해당 스타일을 지정하는 직접 삽입 방법도 포함되어 있습니다.
< Table style=" font-size:10pt; color:blue;">
문자 크기를 정의합니다. 테이블은 10pt이고 색상은 파란색입니다.
번거롭고 복잡한 스타일 시트 규칙은 분명히 우리가 원하는 것이 아닙니다. 스타일 시트를 작성하여 동일한 스타일로 다른 페이지에 구현하세요. 이는 외부 스타일 시트를 도입함으로써 달성할 수 있습니다. 그리고 외부 스타일 시트가 변경되면 스타일 시트를 참조하는 각 HTML 페이지의 스타일도 그에 따라 변경되며, 각각을 수동으로 변경할 필요는 없습니다.외부 스타일 시트란 확장자가 .css인 완전히 독립적인 텍스트 파일을 생성하는 것을 의미하며, 파일 내용에는 관련 HTML 언어를 제외한 스타일 시트 정보가 입력됩니다.
예를 들어 외부 스타일 시트에 다음을 입력합니다.
외부 스타일 시트를 참조하는 방법에는 두 가지가 있습니다.
(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 중국어 웹사이트를 주목하세요!