wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오. CSS 튜토리얼을 탐색하려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 라이트 태그 . 10 장 CSS를 적용하십시오
첫 번째 부분에서 주요 초점은 TAG 구문의 예에 중점을두고 있으며, 디자인 태그에 CSS를 적용하고 스타일 세부 사항을 지정하는 방법을 살펴 봅니다. 두 번째 장에서는 문서, 웹 사이트 또는 단일 태그에 CSS를 적용하는 몇 가지 방법에 대해 논의합니다. 또한 이전 버전의 브라우저에서 CSS 컨텐츠를 숨기는 방법에 대해 논의하여 모든 브라우저 및 장치에서 읽을 수있는 태그 구조에 영향을 미치지 않으면 서 고급 기술을 사용할 수 있습니다.
이 장의 마지막 팁 확장 단위에서는 글꼴, 색상을 전환하고 스크립트를 작성하지 않고도 스타일 시트를 대체하지 않고도 여러 테마를 만드는 실습을 소개합니다. CSS를 파일에 적용하는 방법은 무엇입니까?
이제 우리는 문서에 CSS를 적용하는 4 가지 방법에 대해 논의 할 것입니다. 각 방법에는 고유 한 장점과 단점이 있습니다. 상황에 따라 4 가지 방법이 모두 최선의 선택 일 수 있습니다. 여기에 시연 된 각 방법은 법적 XHTML 1.0 전환 구문 구조, <HTML> 태그 및 <head> 구성을 사용합니다.
메소드 A로 시작하겠습니다. 메소드 A : <tyle> 태그
<! doctype html public- // w3c // dtd xhtml 1.0 전환 // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml xml : lang = en lang = en>
<헤드>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> CSS 적용 </title>
<스타일 유형 = 텍스트/CSS> <! [cdata [... CSS 성명서는 여기에 있습니다 ...
]]> </스타일></head>
이 접근법은 또한 임베디드 스타일 시트가되어 모든 CSS 선언을 (x) HTML 파일에 직접 쓸 수 있으며 <Style> 태그는 <head> 페이지에 있으며 필요한 모든 스타일로 배치 할 수 있습니다.
유형 속성에 지정된 텍스트/CSS는 브라우저가 우리가 사용하는 스타일 언어를 이해하고 생략 할 수 없도록합니다. 또한 스타일 규칙을 처리 할 수없는 브라우저에서 이러한 내용을 숨기기 위해 W3C에서 권장하는 CDATA 주석 구문을 사용합니다 (http://www.w3.org/tr/xhtml1/#h-4.8).
방법 A를 사용하는 주요 단점 중 하나는 일부 오래된 브라우저 (특히 Internet Explorer 4.X 및 NetScape 4.X)가 <Style> 태그에 지정된 CSS 효과를 표시하기 위해 최선을 다한다는 것입니다. 최신 브라우저 만 지원하는 고급 CSS 레이아웃 및 위치 규칙을 사용하는 경우 문제가 발생할 수 있습니다. <style> 태그에 복잡한 CSS 규칙을 넣으면 오래된 브라우저 사용자에 대한 혼란스럽고 조판 결과를 읽기가 어려울 수 있습니다. 캐시 할 수 없습니다.
임베디드 스타일 시트의 또 다른 단점은 다음과 같습니다. 페이지에 배치 된 경우 페이지를 읽을 때마다 함께 다운로드해야합니다. 대조적으로, 나중에 제공된 다른 방법을 사용하면 스타일 시트를 한 번만 다운로드 한 다음 브라우저의 캐시를 직접 사용할 수 있습니다. 여러 번 수정하십시오.
임베디드 스타일 시트는 XHTML 페이지에 저장되므로 웹 사이트의 많은 페이지에서 동일한 스타일이 사용되면 이러한 스타일에 동일한 사본이 많이 있음을 의미합니다. 이 스타일을 변경 해야하는 경우 동일한 스타일을 사용하는 모든 페이지를 수정해야합니다. 기억하다! 한 번에 많은 문서를 수정하는 것은 집안일이 될 것입니다. 개발하는 것이 편리합니다
이점에 대해 말하면, CSS 작성 및 테스트를 시작했을 때 메소드 A를 사용하여 테스트하는 데 사용한 페이지에 모든 규칙을 작성하는 것이 매우 편리하다는 것을 알았습니다.이를 통해 마크와 스타일을 동일한 문서에 넣을 수있었습니다. 테스트가 완료되면 다른 방식으로 공개 버전에 CSS를 적용합니다. 몇 가지 방법을 살펴 보겠습니다. 방법 B : 외부 스타일 시트
<! doctype html public- // w3c // dtd xhtml 1.0 전환 // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml xml : lang = en lang = en>
<헤드>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> CSS 적용 </title>
<link rel = 스타일 시트 유형 = 텍스트 /css href = styles.css _fckevedurl = styles.css /></head>
메소드 B는 외부 스타일 시트를 연결하는 연습을 보여줍니다. 모든 CSS 선언 내용을 별도의 문서에 넣은 다음 (x) html <head>에 <link> 태그를 사용하여 컨텐츠를 참조하십시오.
HREF 속성을 사용하여 문서의 위치를 지정합니다. 이 속성은 상대 경로 (위의 예와 같은) 또는 절대 경로 (스타일 시트의 전체 http : // 위치에 채워짐) 일 수 있습니다. 동시에 <link>는 단일 태그 또는 빈 태그이며 끝 내 / 끝에 닫아야합니다. 문서 분리 = 유지 보수에 편리합니다
태그가 지정된 컨텐츠와 다른 문서에 모든 CSS 규칙을 배치한다는 명백한 이점이 있습니다. 즉, 전체 웹 사이트에 대한 스타일 변경을 수정하여 메소드 A를 사용할 때와 같이 각 웹 페이지의 CSS 문을 반복적으로 수정하지 않고도 파일을 완료 할 수 있습니다.
물론 이것은 대규모 웹 사이트에서 매우 중요합니다. 수백 또는 수천 페이지가 단일 문서에서 동일한 스타일을 공유 할 수 있습니다. 한 번 다운로드하십시오
외부 스타일 시트를 연결하는 데있어 추가 장점 중 하나는이 문서가 일반적으로 한 번만 다운로드되며 브라우저는 캐시를 사용하여 동일한 페이지를 반복적으로 탐색 할 때 필요한 다운로드 시간을 절약 할 수 있으며 동일한 스타일 시트를 참조 할 수 있습니다. 여전히 완전히 숨길 수는 없습니다.
방법 A와 마찬가지로 방법 B는 여전히 오래 될 수 있으며 브라우저를 해석하기 위해 일부 CSS 기능 만 지원합니다. 최신 브라우저를 위해 설계된 모든 스타일은 지원되지 않는 브라우저에서 큰 혼란을 유발할 수 있습니다.
글쎄 ...이 문제를 두 번째로 언급 한 것은 다음 방법이 해결해야합니다. 방법 C : @import
<! doctype html public- // w3c // dtd xhtml 1.0 전환 // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml xml : lang = en lang = en>
<헤드>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> CSS 적용 </title>
<스타일 유형 = 텍스트/CSS> <! [cdata [ @import Styles.css; ]]> </스타일></head>
방법 B와 유사하게 @import를 사용하면 상대 경로 (예 : 위의 예) 또는 절대 경로가있는 외부 파일에서 CSS 정의를 가져올 수 있습니다.
방법 C는 <link> 태그를 사용하는 것과 동일한 장점이 있습니다. 스타일 시트는 외부 문서에 배치되므로 단일 문서를 수정하고 업데이트하면 전체 웹 사이트를 변경할 수 있으며 쉽고 빠르게 완료 할 수 있습니다. 외부 스타일 시트는 브라우저에 의해 캐시되며 동일한 스타일 시트의 모든 페이지를 가져 오는 데 다운로드 시간을 절약합니다.
메소드 C를 사용하면 다음 버전의 Netscape 4.x가 @import 구문을 지원하지 않으므로 참조 된 CSS 컨텐츠를 숨길 것입니다. 레이아웃과 같은 디자인 세부 사항을 처리하기 위해 고급 CSS 구문을 작성할 수 있으므로이를 처리 할 수있는 최신 브라우저가 이러한 구문을 무시할 수 있기 때문에 이것은 유용한 트릭입니다.
NetScape 4.x의 문제점은 CSS 지원 기능이 실제로 지원되는 기능만큼 우수하다고 생각한다는 것입니다. 따라서 Netscape 4.x를 제외하고는 브라우저가 올바른 효과를 자체적으로 표시할지 여부를 결정할 수 있습니다.
이것은 표준 디자인을 기반으로 웹 사이트를 디자인 할 때의 핵심 요점입니다. 구조화 된 태그 코드를 디스플레이 모드와 분리하고 지원되는 브라우저의 레이아웃 세부 사항 및 기타 스타일을 제공하십시오. 오래된 브라우저는 구조화 된 컨텐츠를 사용하여 쉽게 읽고 표시 할 수 있지만 숨겨진 고급 CSS 규칙을 다루지는 않습니다. 스타일을 열고 긴밀한 스타일.
그림 10-1 및 10-2를보고 비교하십시오. 이것은 전체 CSS를 사용하는 개인 웹 사이트입니다. 그런 다음 CSS의 디스플레이 효과를 끄십시오 (이전 브라우저의 디스플레이 효과에 매우 가깝습니다). CSS를 사용하지 않을 때의 구조는 여전히 매우 분명하며 모든 사람이 읽고 사용하기 쉽습니다. 디스플레이 레이아웃에 필요한 CSS를 숨기지 않으면 오래된 브라우저 사용자가 읽기 어려운 콘텐츠를 얻을 수 있습니다.
그림 10-1 CSS를 사용하는 개인 웹 사이트
그림 10-2 : 같은 페이지에서 CSS를 제거하면 이전 브라우저가 여러 스타일 시트를 적용하기 위해 메소드 B와 메소드 C의 조합으로 표시 될 수 있습니다.
때로는 많은 스타일 시트를 하나의 문서에 소개하는 것이 유용 할 수 있습니다. 예를 들어, 모든 레이아웃 규칙을 하나의 문서와 글꼴 설정에 다른 문서에 넣을 수 있으며, 이는 대규모의 복잡한 디자인을 위해 많은 수의 규칙을 더 쉽게 유지할 수 있습니다. 카멜레온 효과
Fast Company Magazine 용 웹 사이트를 만들 때 매월 웹 사이트의 색 구성표를 변경하여 현재 잡지의 표지 이미지와 일치 할 수있었습니다. 정규 수정 작업을 단순화하기 위해 모든 색상 관련 CSS 규칙을 하나의 문서에 넣고 매월 수정되지 않는 다른 규칙을 다른 문서에 넣습니다.
디자인을 구성하는 수백 가지의 다른 규칙에서 변경 해야하는 컨텐츠를 천천히 찾을 필요없이 매달 모든 색상을 다루는 것이 더 쉽고 빠릅니다. 이 문서가 수정되는 한 전체 웹 사이트의 색상이 즉시 변경됩니다. 방법
메소드 B 및 메소드 C와 함께 여러 스타일 시트를 소개하려면이 메소드는 페이지의 <link> 태그를 사용하여 CSS 기본 문서, 메소드 B 데모와 동일하고 Styles.css에 링크하는 것입니다.
Styles.css의 내용에는 몇 가지 @import 규칙 만 포함되어 있으며 필요한 다른 CSS 파일을 소개합니다.
예를 들어, 3 개의 스타일 시트, 하나는 레이아웃을 처리하고, 하나는 글꼴을 정의하고, 하나는 색상을 정의하기 위해, styles의 내용이 다음과 같이 보일 수 있습니다.
/*이전 브라우저는 이러한 가져 오기 규칙을 해석하지 않습니다*/
@import url (layout.css);
@import url (fonts.css);
@import url (colors.css);
이러한 방식으로 웹 사이트 전체에서 동일한 <link> 태그를 사용할 수 있으며 Styles.css 파일 만 참조합니다. 이 문서는 @import 규칙으로 다른 스타일 시트를 계속 가져올 수 있습니다. 새로운 스타일 시트 가이 문서에 추가되는 한 전체 웹 사이트에서 역할을 수행 할 수 있습니다.
따라서 CSS를 업데이트하고 교체하기가 매우 쉽습니다. 예를 들어, 갑자기 도로의 4 개의 파일로 CSS를 자르려면 모든 XHTML 태그 소스 코드를 수정하지 않고이 문서의 @Import 규칙 만 변경하면됩니다.
메소드 C의 @Import 규칙을 사용하여 이전 브라우저에서 CSS를 숨기는 또 다른 트릭이 있습니다.
이전 브라우저는 지원할 수있는 콘텐츠 만 얻을 수 있지만 최신 브라우저는 사용하려는 모든 스타일을 얻을 수 있습니다.
이 기술의 코드가 어떻게 보이는지 봅시다.
<! doctype html public- // w3c // dtd xhtml 1.0 전환 // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml xml : lang = en lang = en>
<헤드>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> CSS 적용 </title>
<link rel = 스타일 시트 유형 = 텍스트 /css href = lofi.css _fcksavedurl = lofi.css /> <스타일 유형 = 텍스트/CSS> @import hifi.css; </스타일></head>
여기서 lofi.css에는 링크 색상 및 글꼴 크기와 같은 기본 CSS 규칙이 포함되어야합니다. hifi.css는 레이아웃, 위치, 배경 사진 등과 같은 고급 규칙을 포함합니다.
서버 측에서 어떤 식 으로든 스크립트를 작성하거나 브라우저 버전을 식별하지 않고도 LOFI 및 HI-FI 버전 스타일을 모두 전송할 수 있습니다. 주문이 중요합니다
태그 소스 코드에서 <link> 및 <style> 태그의 순서를 지정하는 것이 중요합니다. CSS의 캐스케이드는 규칙의 우선 순위를 말하며, 이는 발생 순서에 따라 결정됩니다.
예를 들어, 대부분의 최신 브라우저는 두 가지 메소드를 모두 지원하므로 모든 스타일 시트가 다운로드되고 모든 스타일이 적용됩니다. 현재 Hifi.css의 스타일 규칙은 동일한 태그에 대해 lofi.css가 지정한 스타일을 무시합니다. 이유는 무엇입니까? 태그 소스 코드에서 hifi.css는 lofi.css 다음에 나타납니다.
이전 브라우저는 @import 규칙이 지원되지 않기 때문에 Hifi.css를 무시하므로 lofi.css에 의해 정의 된 스타일 만 사용합니다. 캐스케이드 기능을 수용하십시오
CSS 캐스케이드의 이점은 다양한 방식으로 이루어집니다. 예를 들어, 전체 웹 사이트에서 레이아웃, 위치 설정, 글꼴, 색상 설정 설정에 대한 외부 CSS를 공유한다고 가정하면 각 페이지의 @Import 스타일 시트를 사용하여 이전 브라우저에 대한 이러한 규칙을 숨 깁니다.
웹 사이트에 레이아웃 및 위치 설정을 공유하려는 페이지가있는 경우 글꼴 또는 색상을 조정해야합니다. 이 페이지 (웹 사이트의 다른 페이지와 다름)에서 CSS 기본 문서를 여전히 소개 할 수 있습니다. 참조를 완료하면이 페이지의 특별한 스타일을 정의하는 두 번째 CSS 문서를 참조합니다. 두 번째 CSS 파일의 모든 규칙이 선호되며 동일한 레이블의 첫 번째 CSS 파일에서 지정된 스타일 규칙을 덮어 씁니다.
예를 살펴 보겠습니다. Mas
<! doctype html public- // w3c // dtd xhtml 1.0 전환 // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http : //www.w3.org/1999/xhtml xml : lang = en lang = en>
<헤드>
<meta http-equiv = content-type content = text/html; charset = utf-8 />
<title> CSS 적용 </title>
<스타일 유형 = 텍스트/CSS> @import Master.css; @import custom.css; </스타일></head>
Custom.CSS는 태그 소스 코드의 두 번째이므로 동일한 태그에 지정된 스타일은 Master.css 내에서 공식화 된 내용을 무시합니다.
예를 들어, Main.CSS 내에서 빨간색 세리프 글꼴을 사용하려면 <H1> 태그가 필요하고 <H2>는 파란색 세리프 글꼴을 사용한다고 가정 해 봅시다.
H1 {
유대 가족 : 조지아, 세리프;
색상 : 빨간색;
}
H2 {
유대 가족 : 조지아, 세리프;
색상 : 파란색;
}
특정 페이지에서는 <H1> 태그의 스타일 설정 만 변경하고 <H2>의 스타일을 따라야합니다. 그런 다음 Custom.CSS에서는 <H1>의 새로운 스타일 만 선언하면됩니다.
H1 {
Font-Family : Verdana, Sans-Serif;
색상 : 오렌지;
}
이 선언은 Mas 페이지가 먼저 Mas Mas
CSS의 계단식 기능은 일반적인 스타일을 공유하기위한 훌륭한 도구이며 수정 해야하는 규칙 만 다룰 수 있습니다.
<H1 스타일 = Font-Family : Georgia, Serif; 색상 : 오렌지;> 이것은 제목입니다 </h1>
이것은 우리가 인라인 스타일과 접촉 한 네 번째 CSS 응용 프로그램 방법입니다. 거의 모든 태그를 스타일 속성으로 추가 할 수있어 위의 예와 마찬가지로 CSS 스타일 규칙을 태그에 직접 적용 할 수 있습니다.
인라인 스타일은 가장 낮은 스태킹 레이어이므로 <Head>의 <style> 태그 내에서 선언 된 모든 외부 스타일 선언 및 규칙을 무시합니다.
이것은 페이지 전체에 스타일을 추가하는 간단한 방법이지만 사용하려면 비용을 지불해야합니다. 스타일은 레이블에 묶여 있습니다
페이지의 스타일을 만들 때 메소드 D에 너무 많이 의존하면 컨텐츠와 디스플레이 방법을 분리하지 않습니다. 돌아가서 수정하면 소스 코드를 깊이 표시하고 CSS를 별도의 파일에 넣어야합니다.
남용 방법 D는 소스 코드를 오염시키기 위해 <font>와 같은 디스플레이 효과 레이블을 사용하는 것과 다르지 않습니다. 이러한 디자인 세부 사항은 항상 다른 곳에 배치해야합니다. 사용하도록주의하십시오
물론, 때로는 인라인 스타일을 사용할 수있는 기회는 페이지에 스타일을 추가해야 할 때 생명을 구하는 것이지만 외부 파일에 액세스 할 수 없거나 <head>를 수정할 수 없거나 일시적으로 스타일을 사용할 수 없으며 다른 태그와 공유하지 않을 때는 스타일을 사용할 수 있습니다.
예를 들어, 웹 사이트에 나중에 제거 될 자선 판매를 미리 보는 페이지가있는 경우이 페이지의 고유 한 스타일을 디자인하려면 영구 스타일 시트에 추가하지 않고도 이러한 스타일 규칙을 태그에 포함시킬 수 있습니다.
지금 해보겠습니다. 그러나 이러한 스타일을 쉽게 변경할 수 없거나 전체 웹 사이트의 페이지에서 사용됩니다.
이전 페이지 1 2 3 다음 페이지 전체 텍스트 읽기