HTML 문서에 CSS를 삽입하는 세 가지 일반적인 방법
- 高洛峰원래의
- 2017-02-23 13:33:562326검색
HTML에서 CSS를 정의하는 데 일반적으로 사용되는 세 가지 방법은 Embedding(임베디드), Linking(참조), Inline(인라인)
1. Embedded
HTML 사용 스타일 요소 문서의 CSS 스타일을 정의합니다.
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
2. 인라인
각 HTML 요소에는 스타일을 직접 정의할 수 있는 스타일 속성이 포함되어 있습니다. 이 스타일은 이 요소의 콘텐츠에만 적용할 수 있으며 동일한 이름을 가진 다른 요소에는 영향을 미치지 않습니다.
<p style="color:#FFF;font-weight:bold;">内联样式</p>
3. 외부 참조
외부 참조는 HTML 문서 자체에 CSS 스타일이 포함되어 있지 않지만 외부 CSS 파일을 동적으로 참조하여 문서의 표현을 정의하는 것을 의미합니다.
1. 스타일 시트 처리 명령문을 사용하세요
HTML 문서의 시작 부분에 스타일 시트 명령 처리 명령문을 작성하세요
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指令语句 </html>
단, xml로만 작성할 수 있습니다. 구문 형식 이 지시어는 html 문서에만 지원됩니다. 대부분의 브라우저는 xhtml 또는 xml 형식으로 저장된 경우에만 유효하며 JS는 이러한 종류의 CSS를 처리할 수 없으므로 사용하지 않는 것이 좋습니다.
2. @import 명령 사용
스타일 요소 사이에 @import 명령을 사용하여 외부 CSS 파일 가져오기
<head>
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
@import 규칙은 모든 규칙 앞에 나타나야 합니다. 매개변수는 CSS 파일의 URL 주소입니다. CSS 파일에서 @import 지시문을 사용하여 다른 CSS 파일을 가져올 수도 있습니다.
3. 링크 요소
<head> <link rel="stylesheet" href="css的url" type="text/css" > </head>
4. HTTP 메시지 헤더를 사용하여 스타일 시트에 연결
HTTP 메시지 헤더의 링크 필드를 사용하여 외부 스타일 시트에 연결할 수 있습니다.
link:<mystyle.css>;rel=stylesheet; //等同于<link rel="stylesheet" href="css的url" type="text/css" >
HTTP 헤더에 여러 링크를 사용하여 여러 스타일 시트를 연결할 수 있으며, HTTP 헤더의 링크는 HTML 문서(head 요소)의 링크보다 우선순위가 높습니다.
HTML 문서에 CSS를 삽입하는 세 가지 일반적인 방법에 대한 자세한 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!