HTML은 일부 정보만 표시할 수 있으며 성능 기능이 매우 제한되어 있습니다. 페이지를 더욱 아름답게 만들려면 CSS와 함께 사용해야 합니다. 웹 페이지에서 모든 스타일 코드는 HTML 문서에서 별도의 스타일 시트로 이동할 수 있습니다.
CSS 스타일은 별도의 파일(.css 유형 파일)로 HTML 문서에 도입되거나 HTML 문서에 직접 작성될 수 있으며 대략 다음 네 가지 방법으로 나눌 수 있습니다.
1. 내장된 스타일시트
포함됨: 웹 페이지의 <head></head> 태그 쌍의 <style></style> 태그 쌍에 CSS 스타일을 집중시킵니다.
HTML의 <head> 태그에 있는 <style> 태그에 CSS 스타일을 추가합니다. 내장된 스타일 시트를 사용하여 정의한 CSS 스타일은 현재 웹 페이지 내에서만 사용할 수 있습니다.
<!DOCTYPEhtml><html><head><title>인라인 스타일</title><style>body{Background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / head><body><h1>스타일</h1></body></html>내장된 스타일 시트는 HTML 문서 내부에 CSS 스타일을 정의해야 하기 때문에 문서의 크기가 커지게 되고, 다른 문서에서도 내장된 스타일 시트의 동일한 스타일을 사용해야 하는 경우 다른 문서에 도입될 수 없고 다른 문서에서 이를 재정의하면 코드 중복이 발생하고 향후 유지 관리에 도움이 되지 않습니다.
2. 인라인 스타일
인라인: 인라인이라고도 하며 CSS 스타일은 태그의 스타일 속성에 설정됩니다. 이 접근 방식은 CSS의 장점을 반영하지 않습니다.
인라인 스타일은 HTML 태그의 스타일 속성에 스타일 정보를 직접 정의하는 것입니다. 인라인 스타일은 태그 내부에 정의되므로 해당 태그가 위치한 태그에만 유효합니다.
<!DOCTYPEhtml><html><head><title>인라인</title></head><body><h1style=color:maroon;margin-left:40px>인라인</h1></body ></html >인라인 스타일은 HTML 태그에 CSS 스타일을 쉽게 부여할 수 있지만 단점도 매우 분명하므로 너무 많이 사용하지 않는 것이 좋습니다.
(1) 인라인 스타일을 정의하려면 각 HTML 태그에 스타일 속성을 정의해야 하는데 이는 매우 불편합니다.
(2) 인라인 스타일에서 큰따옴표나 작은따옴표를 사용할 때는 특히 주의하십시오. HTML 태그의 속성은 일반적으로 <input type=text>와 같이 속성 값을 감싸기 위해 큰따옴표를 사용하기 때문입니다.
(3) 인라인 스타일에 정의된 스타일은 다른 곳에서는 재사용할 수 없습니다.
(4) 인라인 스타일은 일반적으로 웹 사이트가 여러 페이지로 구성되어 있고 페이지 스타일을 수정할 때 페이지를 하나씩 수정해야 하기 때문에 나중에 유지 관리할 때 매우 불편합니다.
(5) 인라인 스타일을 너무 많이 추가하면 HTML 문서의 크기가 커집니다.
3. 외부 스타일 시트
링크 유형: 네 번째 가져오기 유형과 마찬가지로 외부 유형 또는 외부 링크 유형이라고 합니다. 링크를 사용하여 외부 CSS 파일을 참조합니다.
외부 스타일 시트는 CSS를 참조하는 가장 일반적이고 권장되는 방법입니다. .css 형식 파일에서 CSS 스타일을 정의한 다음 HTML <link> 태그를 사용하여 .css 형식 스타일 파일을 HTML에 적용하면 됩니다. 문서.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>외부 스타일시트</h1></body>< / HTML>
CSS 스타일은 별도의 .css 형식 파일로 정의되므로 여러 페이지 간에 참조할 수 있습니다. 웹 페이지의 스타일을 수정하려면 이 CSS 스타일 파일만 수정하면 되기 때문에 매우 편리합니다.
4. 스타일 시트 가져오기
가져옴: @import를 사용하여 외부 CSS 파일을 참조합니다.
<link> 태그를 사용하는 것과 유사하게 @import를 사용하여 외부 스타일 시트를 참조할 수도 있습니다. 먼저 일반 style.css를 생성하고 먼저 모든 스타일을 style.css로 가져옵니다.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>외부 스타일 시트</h1></body></html >
스타일.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (1부터 4까지의 CSS는 동일하며 모두 스타일을 추가합니다)
.top1{list-style-type:none;margin:0;padding:0;}