마크업 언어 - 웹페이지 응용을 위한 CSS 스타일_HTML/Xhtml_웹페이지 제작
- PHP中文网원래의
- 2016-05-16 16:45:361418검색
웹 교육 네트워크의 HTML 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하세요. CSS 튜토리얼을 보려면 여기를 클릭하세요.
위: 마크업 언어 – 간소화된 태그.
10장 CSS 적용하기
첫 번째 부분에서는 마크업 구문 예제에 중점을 두고 디자인을 위해 태그에 CSS를 적용하는 방법과 스타일 세부 사항을 지정하는 방법도 살펴봅니다. 2장에서는 태그에 CSS를 적용하는 여러 가지 방법에 대해 설명합니다.
Script House HTML Tutorial 칼럼으로 돌아가려면 여기를 클릭하세요. CSS 튜토리얼을 보려면 여기를 클릭하세요.
위: 마크업 언어 - 간소화된 태그.
10장 CSS 적용
1부에서는 마크업 구문 예제를 중점적으로 다루며, 디자인을 위한 태그에 CSS를 적용하는 방법과 스타일링 세부 사항을 지정하는 방법도 논의합니다. 2장에서는 CSS를 태그에 적용하는 여러 가지 방법에 대해 설명합니다. 문서, 웹 사이트 또는 단일 태그에 대해서도 설명합니다. 이를 통해 장치에서 읽는 마크업 구조인 모든 브라우저에 영향을 주지 않고 고급 기술을 사용할 수 있도록 이전 버전의 브라우저에서 CSS 콘텐츠를 숨길 수 있습니다.
장 마지막에 있는 "기술 확장" 단원에서는 스크립트를 작성하지 않고도 글꼴, 색상을 전환하고 여러 테마를 만드는 방법, 즉 스타일 시트를 교체하는 방법을 소개합니다.
문서에 CSS를 적용하는 방법은 무엇입니까?
이제 문서에 CSS를 적용하는 네 가지 방법을 살펴보겠습니다. 각 방법에는 고유한 장점과 단점이 있으며, 각 방법이 최선의 선택일 수 있습니다. 여기서는 합법적인 XHTML 1.0 전환 구문 구조, 태그 및
메서드 A부터 시작하겠습니다.
방법 A:태그
br/> "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
CSS 적용< ;/title><br><strong class="bold"><style type="text/css"></strong><br><strong class="bold"><![CDATA[</strong><br/> ...CSS 선언 방법...<br/><strong class="bold">]]></strong><br><strong class="bold"></style></strong><br></head></blockquote> <p><br>이것은 또한 이 접근 방식은 모든 CSS 선언을 (X)HTML 파일에 직접 작성할 수 있는 내장 스타일 시트가 되었습니다. <style> 태그는 페이지의 <head> <br>type 속성에 지정된 text/css는 브라우저가 우리가 사용하는 스타일 언어를 이해하고 생략할 수 없도록 보장할 수 있으며 W3C에서 권장하는 CDATA 주석 구문을 사용하여 브라우저에서 이러한 콘텐츠를 숨길 수 없습니다. 스타일 규칙을 처리합니다(http://www.php.cn/).</p> <h5>부분적인 이해<br>방법 A 사용의 주요 단점 중 하나는 일부 오래된 브라우저(특히 Internet Explorer 4.X 및 Netscape 4.X)가 <style>에 지정된 CSS를 표시하려고 최선을 다한다는 것입니다. 태그 따라서 최신 브라우저에서만 지원되는 고급 CSS 레이아웃 및 위치 지정 규칙을 사용하면 문제가 발생할 수 있습니다. <style> 태그에 복잡한 CSS 규칙을 넣으면 이전 브라우저에 문제가 발생할 수 있습니다. . 사용자는 지저분하고 읽기 어려운 서식 결과를 얻습니다. 캐시할 수 없습니다 <br> 인라인 스타일 시트의 또 다른 단점은 페이지에 배치하면 페이지를 읽을 때마다 다운로드해야 한다는 것입니다. 반면에 나중에 제공되는 다른 방법을 사용하면 스타일 시트만 다운로드하면 됩니다. .한번, 앞으로는 브라우저의 캐시를 직접 사용하세요. 여러 번 수정됨 <br> 내장된 스타일 시트는 XHTML 페이지에 저장되므로 웹 사이트의 여러 페이지에서 동일한 스타일이 사용되는 경우 이러한 스타일을 변경해야 하는 경우 이러한 스타일의 동일한 복사본이 많이 있게 됩니다. 동일한 스타일을 사용하는 모든 페이지를 수정해야 합니다. 한 번에 많은 문서를 수정하는 것은 번거로운 일이 될 수 있습니다. 편리한 개발<br> 장점에 대해 말하자면, CSS를 처음 작성하고 테스트할 때 방법 A를 사용하여 테스트 중인 페이지에 모든 규칙을 작성하는 것이 매우 편리하다는 것을 알았습니다. 잦은 수정을 용이하게 하기 위해 동일한 문서를 사용합니다. 테스트가 완료된 후 공개 버전에 몇 가지 방법을 더 살펴보겠습니다. 방법 B: 외부 스타일 시트 <blockquote style="MARGIN-RIGHT: 0px"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br/> "http://www.w3.org/TR/2000 /REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang=" en"><br><head><br> <meta http-equiv="content-type" content="text/html; charset=utf-8" /><br> <title>신청 중 CSS
방법 B는 외부 스타일 시트에 연결하는 방법을 보여줍니다. 모든 CSS 선언 내용을 별도의 문서에 넣은 다음 (X의 )HTML ; 태그는 해당 콘텐츠를 참조합니다.
이 속성은 상대 경로(위 예와 같은) 또는 절대 경로(완전한 "http: 입력)일 수 있습니다. //" 스타일 시트 위치). 또한 는 단일 태그이거나 빈 태그이며 끝에 /가 붙어 자동으로 닫혀야 합니다. 별도의 문서 = 손쉬운 유지 관리
모든 CSS 규칙을 마크업 내용과 다른 문서에 넣는 것은 분명한 이점이 있습니다. 즉, 전체 웹 사이트에 대한 스타일 변경은 메소드를 사용하지 않고도 이 파일을 수정하여 완료할 수 있습니다. A, 각 웹페이지마다 CSS 선언을 반복해서 수정하세요.
물론 이는 단일 문서에서 수백, 심지어 수천 페이지가 동일한 스타일을 공유할 수 있는 대규모 웹사이트의 경우 매우 중요합니다. 한 번 다운로드
외부 스타일 시트에 연결하면 문서가 일반적으로 한 번만 다운로드되고 브라우저는 캐시를 사용하여 동일한 페이지나 해당 문서를 참조하는 다른 페이지를 반복적으로 탐색하지 않는다는 점을 추가로 얻을 수 있습니다. 동일한 스타일 시트를 사용하면 필요한 다운로드 시간을 절약할 수 있습니다. 여전히 완전히 숨길 수는 없습니다
방법 B는 일부 CSS 기능만 지원하는 이전 브라우저에서 해석될 수 있습니다. 최신 브라우저용으로 설계된 모든 스타일은 지원되지 않는 브라우저에서 해석될 수 있습니다.
음... 제가 이 문제를 언급한 것은 이번이 두 번째입니다. 다음 방법으로 해결해야겠죠? 방법 C:@import
여기서 lofi.css에는 링크 색상 및 글꼴 크기와 같은 기본 CSS 규칙이 포함되어야 하며, hifi.css에는 레이아웃, 위치 지정, 배경 이미지 등과 같은 고급 규칙이 포함되어야 합니다.
"http://www.w3.org/TR/2000/ REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
CSS 적용< ;/title><br><strong class="bold"><style type="text/css"></strong><br><strong class="bold"><![CDATA[</strong><br/><strong class="bold">@import "styles .css";</strong><br/><strong class="bold">]]></strong><br><strong class="bold"></style></strong><br></head></blockquote> <br>(메소드 포함) B와 마찬가지로 @import를 사용하여 상대 경로(위의 예와 같은) 또는 절대 경로가 있는 외부 파일에서 CSS 정의를 가져올 수 있습니다. <br>방법 C는 <link> 시트는 외부 문서에 배치되므로 단일 문서를 수정하고 업데이트하면 전체 웹 사이트가 변경될 수 있으며 외부 스타일 시트는 브라우저에 의해 캐시되므로 동일한 스타일 시트를 가져오는 모든 페이지에 대한 다운로드 시간이 절약됩니다. . 숨바꼭질<br>방법 C를 사용하는 가장 큰 장점은 Netscape 버전 4 이하입니다. CSS 구문은 레이아웃과 같은 디자인 세부 사항을 처리하므로 이를 처리할 수 있는 최신 브라우저가 이를 표시할 수 있도록 허용하는 동시에 이전 브라우저는 이러한 구문을 무시할 수 있습니다.<br>문제 Netscape 4.x의 경우 CSS를 지원할 수 있다고 생각합니다. 실제로 지원하는 브라우저만큼만 좋습니다. 따라서 Netscape 4를 제외하고 마크업 코드는 디스플레이와 분리되어 있으며 레이아웃 세부 정보 및 기타 스타일을 제공합니다. 지원되는 브라우저 이전 브라우저는 표시된 콘텐츠 구조를 쉽게 읽을 수 있지만 숨겨진 고급 CSS 규칙은 처리하지 않습니다. 스타일 열기, 스타일 닫기 <br> 그림 10-1과 10-2를 보고 비교해 보세요. 완전한 CSS를 사용하고 CSS 표시 효과를 끄는 제 개인 웹사이트입니다(표시 효과에 매우 가깝습니다). 이전 브라우저) 효과) CSS를 사용하지 않는 구조는 여전히 매우 명확하며 레이아웃을 표시하는 데 필요한 CSS를 숨기지 않으면 이전 브라우저 사용자는 여전히 누구나 쉽게 읽고 사용할 수 있습니다. <br><br><img class="" alt="" src="https://img.php.cn/upload/article/000/000/009/4ed7dcb47c135704c94a83f265a46a5b-0.jpg">그림 10-1 CSS를 사용한 내 개인 웹사이트<br><br><img class="" alt="" src="https://img.php.cn/upload/article/000/000/009/4ed7dcb47c135704c94a83f265a46a5b-1.jpg">그림 10-2 같은 페이지, CSS 제거, 이전 브라우저에 따라 변경될 수 있습니다. 다음과 같이 표시됩니다. 여러 스타일 시트를 적용하기 위해 방법 B와 방법 C를 결합<br>때때로 문서에 많은 스타일 시트를 도입하는 것이 유용할 수 있습니다. 예를 들어 모든 레이아웃 규칙을 하나의 문서에 넣고 글꼴 설정을 지정할 수 있습니다. 또 다른 문서를 사용하면 크고 복잡한 설계에 대해 많은 수의 규칙을 더 쉽게 유지할 수 있습니다. 카멜레온 효과 <br> 패스트컴퍼니 매거진 홈페이지 제작 시, 정기적인 수정작업을 단순화하기 위해 매달 홈페이지 컬러를 현 매거진 표지 이미지에 맞춰 변경하고자 합니다. 관련 CSS 규칙을 하나의 문서에 넣고, 매달 수정되지 않는 다른 규칙을 다른 문서에 넣습니다. <br> 구성하는 수백 개의 다른 규칙을 추가할 필요 없이 매달 모든 색상을 포괄하는 것이 더 쉽고 빠릅니다. 디자인 변경이 필요한 내용을 천천히 검색해 보세요. 이 문서가 수정되는 한 전체 웹사이트의 색상은 즉시 변경됩니다. 방법<br>방법 B와 방법 C를 결합하여 여러 스타일 시트를 도입하는 방법은 다음과 같이 페이지의 <head>에 있는 <link> 태그를 사용하는 것입니다. 방법 B 시연, styles.css에 대한 링크.<br>styles.css의 내용에는 다른 필수 CSS 파일을 소개하는 몇 가지 @import 규칙이 포함되어 있습니다.<br>예를 들어 세 가지 스타일 시트를 소개하려는 경우, 하나는 레이아웃의 경우와 글꼴 정의 및 색상 정의의 경우 styles.css의 내용은 다음과 같습니다. <br><blockquote style="MARGIN-RIGHT: 0px">/*이전 브라우저는 이러한 가져오기 규칙을 해석하지 않습니다*/<br>@import url( "layout .css");<br>@import url("fonts.css");<br>@import url("colors.css");<br> </blockquote>이런 방식으로 동일한 URL을 웹사이트 전체에서 사용되는 <link> 태그는 styles.css 파일만 참조합니다. 이 문서는 @import 규칙을 사용하여 다른 스타일 시트를 계속 가져올 수 있습니다. <br> 이를 통해 CSS 업데이트 및 교체가 매우 간단해졌습니다. 예를 들어 이동 중에 갑자기 CSS를 4개의 파일로 분할하려는 경우 이 문서의 @import 규칙만 변경하면 됩니다. 모든 XHTML 마크업 소스 코드를 수정해야 합니다. Lo-Fi 및 Hi-Fi 스타일 <br> 기존 브라우저에서 CSS를 숨기기 위해 방법 C의 @import 규칙을 사용할 때 사용할 수 있는 또 다른 트릭은 CSS의 계단식 효과를 사용하여 방법 A 또는 방법을 제공하는 것입니다. 방법 B. Lo-Fi 효과는 이전 브라우저와 최신 브라우저 모두에서 지원되며 @import를 사용하여 지원되는 다른 브라우저에 고급 효과를 제공합니다. <br>오래된 브라우저는 지원할 수 있는 콘텐츠만 가져오고 최신 브라우저는 지원하는 콘텐츠만 가져옵니다. 브라우저는 여러분이 사용하고 싶은 모든 스타일을 얻을 것입니다.<br>그런 다음 이 기술의 코드가 어떻게 보이는지 살펴보겠습니다:<br><blockquote style="MARGIN-RIGHT: 0px"><!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 전환 //EN"<br/>"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"><br><html xmlns="http:/ /www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br><head><br> <meta http-equiv="content -type" content=" text/html; charset=utf-8" /><br> <title>CSS 적용
동시에 Fi를 보낼 수 있습니다. 스크립트를 작성하거나 서버 측에서 브라우저 버전을 식별할 필요 없이 Hi-Fi 버전 스타일을 사용할 수 있습니다. 순서가 중요합니다
마크업 소스 코드에서 및
사용자 정의로 인해 CSS가 나타납니다. 두 번째 태그이므로 동일한 태그에 대해 지정하는 스타일이 master.css에 지정된 콘텐츠를 재정의합니다.
예를 들어, main.css 내에서 < h1> ,
는 파란색 세리프 글꼴을 사용합니다.
h1 {
글꼴 계열: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
특정 페이지에서 태그의 스타일을 변경하고 싶습니다. 그런 다음 custom.css에서 에 대한 새 스타일만 선언하면 됩니다.
h1 {
Font-family: Verdana, sans- serif;
color: orange;
}
이 문은 master.css의 문을 재정의합니다(custom.css가 그 뒤에 도입되기 때문입니다). 페이지에서 master.css를 먼저 가져오는 경우 custom.css가 다시 도입됩니다. , 태그는 주황색 Verdana 글꼴을 사용하지만 는 여전히 파란색 serif 글꼴을 사용합니다. 왜냐하면 master.css의 후자 문이 custom.css에 의해 재정의되지 않았기 때문입니다.
계단식 CSS의 기능은 공통 스타일을 공유하기 위한 훌륭한 도구로, 수정이 필요한 규칙만 재정의할 수 있습니다.
방법 D: 인라인 스타일
이것은 제목입니다
이것은 우리가 접한 네 번째 CSS 적용 방법입니다. 인라인 스타일, 거의 모든 레이블에 스타일 속성을 적용할 수 있습니다. 위의 예와 같이 CSS 스타일 규칙을 태그에 직접 적용할 수 있습니다.
인라인 스타일은 캐스케이드의 맨 아래 레이어이므로 에 선언된 모든 외부 스타일 선언을 재정의합니다. 스타일> 태그 내의 규칙입니다.
이는 페이지의 모든 곳에 스타일을 추가하는 간단한 방법이지만 사용에 대한 대가가 있습니다.
스타일은 태그에 묶여 있습니다
페이지의 스타일을 구성할 때 방법 D에 너무 많이 의존하면 내용과 프리젠테이션을 분리할 수 없게 되고 수정하려면 소스에 깊이 들어가야 합니다. 코드를 분리하여 CSS를 파일에 넣으면 유지 관리가 훨씬 간단합니다.
악용 방법 D는 마크 소스 코드를 오염시키기 위해 와 같은 표시 효과 태그를 사용하는 것과 다르지 않습니다. 다른 곳에 배치.
주의해서 사용하세요
물론 실제 상황에서는 인라인 스타일을 사용할 기회가 있을 때가 있습니다. 페이지에 스타일을 추가해야 하지만 외부 파일에 액세스할 수 없거나 를 수정할 수 없는 경우 생명을 구할 수 있습니다. , 또는 일시적으로 스타일을 적용하거나, 다른 태그와 공유할 의도가 없는 경우에도 사용됩니다.
예를 들어 웹사이트에 자선 세일을 알리는 페이지가 있는 경우 나중에 삭제됩니다. , 이 페이지에 대한 고유한 태그 세트를 디자인하려는 경우 이러한 스타일 규칙을 영구 스타일 시트에 추가하는 대신 태그에 포함할 수 있습니다.
지금 수행하세요. 하지만 이러한 스타일은 불가능하다는 점에 유의하세요. 쉽게 변경하거나 페이지를 확장하여 전체 웹사이트를 사용할 수 있습니다.
#p#
요약
CSS를 마크업 콘텐츠에 적용하는 네 가지 방법을 살펴보았고 각 방법에는 특수한 상황을 처리하는 데 있어 고유한 장점이 있음을 확인하고 각 방법의 장단점을 검토해 보겠습니다.
방법 A:
스타일은 각 페이지의 에 배치되어야 합니다. 많은 페이지는 동일한 스타일 시트를 공유할 수 없으며 페이지를 읽을 때마다 다시 다운로드해야 합니다.
h1 {
글꼴 계열: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
에 대한 새 스타일만 선언하면 됩니다.
h1 {
Font-family: Verdana, sans- serif;
color: orange;
}
이 문은 master.css의 문을 재정의합니다(custom.css가 그 뒤에 도입되기 때문입니다). 페이지에서 master.css를 먼저 가져오는 경우 custom.css가 다시 도입됩니다. , 태그는 주황색 Verdana 글꼴을 사용하지만 는 여전히 파란색 serif 글꼴을 사용합니다. 왜냐하면 master.css의 후자 문이 custom.css에 의해 재정의되지 않았기 때문입니다.
계단식 CSS의 기능은 공통 스타일을 공유하기 위한 훌륭한 도구로, 수정이 필요한 규칙만 재정의할 수 있습니다.
방법 D: 인라인 스타일
이것은 제목입니다
이것은 우리가 접한 네 번째 CSS 적용 방법입니다. 인라인 스타일, 거의 모든 레이블에 스타일 속성을 적용할 수 있습니다. 위의 예와 같이 CSS 스타일 규칙을 태그에 직접 적용할 수 있습니다.
인라인 스타일은 캐스케이드의 맨 아래 레이어이므로 에 선언된 모든 외부 스타일 선언을 재정의합니다. 스타일> 태그 내의 규칙입니다.
이는 페이지의 모든 곳에 스타일을 추가하는 간단한 방법이지만 사용에 대한 대가가 있습니다.
스타일은 태그에 묶여 있습니다
페이지의 스타일을 구성할 때 방법 D에 너무 많이 의존하면 내용과 프리젠테이션을 분리할 수 없게 되고 수정하려면 소스에 깊이 들어가야 합니다. 코드를 분리하여 CSS를 파일에 넣으면 유지 관리가 훨씬 간단합니다.
악용 방법 D는 마크 소스 코드를 오염시키기 위해 와 같은 표시 효과 태그를 사용하는 것과 다르지 않습니다. 다른 곳에 배치.
주의해서 사용하세요
물론 실제 상황에서는 인라인 스타일을 사용할 기회가 있을 때가 있습니다. 페이지에 스타일을 추가해야 하지만 외부 파일에 액세스할 수 없거나 를 수정할 수 없는 경우 생명을 구할 수 있습니다. , 또는 일시적으로 스타일을 적용하거나, 다른 태그와 공유할 의도가 없는 경우에도 사용됩니다.
예를 들어 웹사이트에 자선 세일을 알리는 페이지가 있는 경우 나중에 삭제됩니다. , 이 페이지에 대한 고유한 태그 세트를 디자인하려는 경우 이러한 스타일 규칙을 영구 스타일 시트에 추가하는 대신 태그에 포함할 수 있습니다.
지금 수행하세요. 하지만 이러한 스타일은 불가능하다는 점에 유의하세요. 쉽게 변경하거나 페이지를 확장하여 전체 웹사이트를 사용할 수 있습니다.
#p#
요약
CSS를 마크업 콘텐츠에 적용하는 네 가지 방법을 살펴보았고 각 방법에는 특수한 상황을 처리하는 데 있어 고유한 장점이 있음을 확인하고 각 방법의 장단점을 검토해 보겠습니다.
방법 A:
스타일은 각 페이지의 에 배치되어야 합니다. 많은 페이지는 동일한 스타일 시트를 공유할 수 없으며 페이지를 읽을 때마다 다시 다운로드해야 합니다.
h1 {
Font-family: Verdana, sans- serif;
color: orange;
}
는 여전히 파란색 serif 글꼴을 사용합니다. 왜냐하면 master.css의 후자 문이 custom.css에 의해 재정의되지 않았기 때문입니다.
계단식 CSS의 기능은 공통 스타일을 공유하기 위한 훌륭한 도구로, 수정이 필요한 규칙만 재정의할 수 있습니다.
방법 D: 인라인 스타일
이것은 제목입니다
이것은 우리가 접한 네 번째 CSS 적용 방법입니다. 인라인 스타일, 거의 모든 레이블에 스타일 속성을 적용할 수 있습니다. 위의 예와 같이 CSS 스타일 규칙을 태그에 직접 적용할 수 있습니다.
인라인 스타일은 캐스케이드의 맨 아래 레이어이므로 에 선언된 모든 외부 스타일 선언을 재정의합니다. 스타일> 태그 내의 규칙입니다.
이는 페이지의 모든 곳에 스타일을 추가하는 간단한 방법이지만 사용에 대한 대가가 있습니다.
스타일은 태그에 묶여 있습니다
페이지의 스타일을 구성할 때 방법 D에 너무 많이 의존하면 내용과 프리젠테이션을 분리할 수 없게 되고 수정하려면 소스에 깊이 들어가야 합니다. 코드를 분리하여 CSS를 파일에 넣으면 유지 관리가 훨씬 간단합니다.
악용 방법 D는 마크 소스 코드를 오염시키기 위해 와 같은 표시 효과 태그를 사용하는 것과 다르지 않습니다. 다른 곳에 배치.
주의해서 사용하세요
물론 실제 상황에서는 인라인 스타일을 사용할 기회가 있을 때가 있습니다. 페이지에 스타일을 추가해야 하지만 외부 파일에 액세스할 수 없거나 를 수정할 수 없는 경우 생명을 구할 수 있습니다. , 또는 일시적으로 스타일을 적용하거나, 다른 태그와 공유할 의도가 없는 경우에도 사용됩니다.
예를 들어 웹사이트에 자선 세일을 알리는 페이지가 있는 경우 나중에 삭제됩니다. , 이 페이지에 대한 고유한 태그 세트를 디자인하려는 경우 이러한 스타일 규칙을 영구 스타일 시트에 추가하는 대신 태그에 포함할 수 있습니다.
지금 수행하세요. 하지만 이러한 스타일은 불가능하다는 점에 유의하세요. 쉽게 변경하거나 페이지를 확장하여 전체 웹사이트를 사용할 수 있습니다.
#p#
요약
CSS를 마크업 콘텐츠에 적용하는 네 가지 방법을 살펴보았고 각 방법에는 특수한 상황을 처리하는 데 있어 고유한 장점이 있음을 확인하고 각 방법의 장단점을 검토해 보겠습니다.
방법 A:
스타일은 각 페이지의 에 배치되어야 합니다. 많은 페이지는 동일한 스타일 시트를 공유할 수 없으며 페이지를 읽을 때마다 다시 다운로드해야 합니다.
이것은 제목입니다
이것은 우리가 접한 네 번째 CSS 적용 방법입니다. 인라인 스타일, 거의 모든 레이블에 스타일 속성을 적용할 수 있습니다. 위의 예와 같이 CSS 스타일 규칙을 태그에 직접 적용할 수 있습니다.
인라인 스타일은 캐스케이드의 맨 아래 레이어이므로 에 선언된 모든 외부 스타일 선언을 재정의합니다. 스타일> 태그 내의 규칙입니다.
이는 페이지의 모든 곳에 스타일을 추가하는 간단한 방법이지만 사용에 대한 대가가 있습니다. 스타일은 태그에 묶여 있습니다
페이지의 스타일을 구성할 때 방법 D에 너무 많이 의존하면 내용과 프리젠테이션을 분리할 수 없게 되고 수정하려면 소스에 깊이 들어가야 합니다. 코드를 분리하여 CSS를 파일에 넣으면 유지 관리가 훨씬 간단합니다.
악용 방법 D는 마크 소스 코드를 오염시키기 위해 와 같은 표시 효과 태그를 사용하는 것과 다르지 않습니다. 다른 곳에 배치. 주의해서 사용하세요
물론 실제 상황에서는 인라인 스타일을 사용할 기회가 있을 때가 있습니다. 페이지에 스타일을 추가해야 하지만 외부 파일에 액세스할 수 없거나 를 수정할 수 없는 경우 생명을 구할 수 있습니다. , 또는 일시적으로 스타일을 적용하거나, 다른 태그와 공유할 의도가 없는 경우에도 사용됩니다.
예를 들어 웹사이트에 자선 세일을 알리는 페이지가 있는 경우 나중에 삭제됩니다. , 이 페이지에 대한 고유한 태그 세트를 디자인하려는 경우 이러한 스타일 규칙을 영구 스타일 시트에 추가하는 대신 태그에 포함할 수 있습니다.
지금 수행하세요. 하지만 이러한 스타일은 불가능하다는 점에 유의하세요. 쉽게 변경하거나 페이지를 확장하여 전체 웹사이트를 사용할 수 있습니다.
#p# 요약
CSS를 마크업 콘텐츠에 적용하는 네 가지 방법을 살펴보았고 각 방법에는 특수한 상황을 처리하는 데 있어 고유한 장점이 있음을 확인하고 각 방법의 장단점을 검토해 보겠습니다.
방법 A: 스타일은 각 페이지의 에 배치되어야 합니다. 많은 페이지는 동일한 스타일 시트를 공유할 수 없으며 페이지를 읽을 때마다 다시 다운로드해야 합니다.