웹 교육 네트워크의 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><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div></blockquote> <p><br>이것은 또한 이 접근 방식은 모든 CSS 선언을 (X)HTML 파일에 직접 작성할 수 있는 내장 스타일 시트가 되었습니다. <style> 태그는 페이지의 <head> <br>type 속성에 지정된 text/css는 브라우저가 우리가 사용하는 스타일 언어를 이해하고 생략할 수 없도록 보장할 수 있으며 W3C에서 권장하는 CDATA 주석 구문을 사용하여 브라우저에서 이러한 콘텐츠를 숨길 수 없습니다. 스타일 규칙을 처리합니다(//m.sbmmt.com/).</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
여기서 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><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div></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 적용
h1 {
글꼴 계열: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
h1 {
Font-family: Verdana, sans- serif;
color: orange;
}
이것은 제목입니다
