마크업 언어 - 웹페이지 응용을 위한 CSS 스타일_HTML/Xhtml_웹페이지 제작

웹 교육 네트워크의 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 선언을 (X)HTML 파일에 직접 작성할 수 있는 내장 스타일 시트가 되었습니다.

부분적인 이해
방법 A 사용의 주요 단점 중 하나는 일부 오래된 브라우저(특히 Internet Explorer 4.X 및 Netscape 4.X)가

(메소드 포함) B와 마찬가지로 @import를 사용하여 상대 경로(위의 예와 같은) 또는 절대 경로가 있는 외부 파일에서 CSS 정의를 가져올 수 있습니다.
방법 C는 시트는 외부 문서에 배치되므로 단일 문서를 수정하고 업데이트하면 전체 웹 사이트가 변경될 수 있으며 외부 스타일 시트는 브라우저에 의해 캐시되므로 동일한 스타일 시트를 가져오는 모든 페이지에 대한 다운로드 시간이 절약됩니다. . 숨바꼭질
방법 C를 사용하는 가장 큰 장점은 Netscape 버전 4 이하입니다. CSS 구문은 레이아웃과 같은 디자인 세부 사항을 처리하므로 이를 처리할 수 있는 최신 브라우저가 이를 표시할 수 있도록 허용하는 동시에 이전 브라우저는 이러한 구문을 무시할 수 있습니다.
문제 Netscape 4.x의 경우 CSS를 지원할 수 있다고 생각합니다. 실제로 지원하는 브라우저만큼만 좋습니다. 따라서 Netscape 4를 제외하고 마크업 코드는 디스플레이와 분리되어 있으며 레이아웃 세부 정보 및 기타 스타일을 제공합니다. 지원되는 브라우저 이전 브라우저는 표시된 콘텐츠 구조를 쉽게 읽을 수 있지만 숨겨진 고급 CSS 규칙은 처리하지 않습니다. 스타일 열기, 스타일 닫기
그림 10-1과 10-2를 보고 비교해 보세요. 완전한 CSS를 사용하고 CSS 표시 효과를 끄는 제 개인 웹사이트입니다(표시 효과에 매우 가깝습니다). 이전 브라우저) 효과) CSS를 사용하지 않는 구조는 여전히 매우 명확하며 레이아웃을 표시하는 데 필요한 CSS를 숨기지 않으면 이전 브라우저 사용자는 여전히 누구나 쉽게 읽고 사용할 수 있습니다.

그림 10-1 CSS를 사용한 내 개인 웹사이트

그림 10-2 같은 페이지, CSS 제거, 이전 브라우저에 따라 변경될 수 있습니다. 다음과 같이 표시됩니다. 여러 스타일 시트를 적용하기 위해 방법 B와 방법 C를 결합
때때로 문서에 많은 스타일 시트를 도입하는 것이 유용할 수 있습니다. 예를 들어 모든 레이아웃 규칙을 하나의 문서에 넣고 글꼴 설정을 지정할 수 있습니다. 또 다른 문서를 사용하면 크고 복잡한 설계에 대해 많은 수의 규칙을 더 쉽게 유지할 수 있습니다. 카멜레온 효과
패스트컴퍼니 매거진 홈페이지 제작 시, 정기적인 수정작업을 단순화하기 위해 매달 홈페이지 컬러를 현 매거진 표지 이미지에 맞춰 변경하고자 합니다. 관련 CSS 규칙을 하나의 문서에 넣고, 매달 수정되지 않는 다른 규칙을 다른 문서에 넣습니다.
구성하는 수백 개의 다른 규칙을 추가할 필요 없이 매달 모든 색상을 포괄하는 것이 더 쉽고 빠릅니다. 디자인 변경이 필요한 내용을 천천히 검색해 보세요. 이 문서가 수정되는 한 전체 웹사이트의 색상은 즉시 변경됩니다. 방법
방법 B와 방법 C를 결합하여 여러 스타일 시트를 도입하는 방법은 다음과 같이 페이지의 에 있는 태그를 사용하는 것입니다. 방법 B 시연, styles.css에 대한 링크.
styles.css의 내용에는 다른 필수 CSS 파일을 소개하는 몇 가지 @import 규칙이 포함되어 있습니다.
예를 들어 세 가지 스타일 시트를 소개하려는 경우, 하나는 레이아웃의 경우와 글꼴 정의 및 색상 정의의 경우 styles.css의 내용은 다음과 같습니다.

/*이전 브라우저는 이러한 가져오기 규칙을 해석하지 않습니다*/
@import url( "layout .css");
@import url("fonts.css");
@import url("colors.css");

이런 방식으로 동일한 URL을 웹사이트 전체에서 사용되는 태그는 styles.css 파일만 참조합니다. 이 문서는 @import 규칙을 사용하여 다른 스타일 시트를 계속 가져올 수 있습니다.
이를 통해 CSS 업데이트 및 교체가 매우 간단해졌습니다. 예를 들어 이동 중에 갑자기 CSS를 4개의 파일로 분할하려는 경우 이 문서의 @import 규칙만 변경하면 됩니다. 모든 XHTML 마크업 소스 코드를 수정해야 합니다. Lo-Fi 및 Hi-Fi 스타일
기존 브라우저에서 CSS를 숨기기 위해 방법 C의 @import 규칙을 사용할 때 사용할 수 있는 또 다른 트릭은 CSS의 계단식 효과를 사용하여 방법 A 또는 방법을 제공하는 것입니다. 방법 B. Lo-Fi 효과는 이전 브라우저와 최신 브라우저 모두에서 지원되며 @import를 사용하여 지원되는 다른 브라우저에 고급 효과를 제공합니다.
오래된 브라우저는 지원할 수 있는 콘텐츠만 가져오고 최신 브라우저는 지원하는 콘텐츠만 가져옵니다. 브라우저는 여러분이 사용하고 싶은 모든 스타일을 얻을 것입니다.
그런 다음 이 기술의 코드가 어떻게 보이는지 살펴보겠습니다:

환 //EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

여기서 lofi.css에는 링크 색상 및 글꼴 크기와 같은 기본 CSS 규칙이 포함되어야 하며, hifi.css에는 레이아웃, 위치 지정, 배경 이미지 등과 같은 고급 규칙이 포함되어야 합니다.
동시에 Fi를 보낼 수 있습니다. 스크립트를 작성하거나 서버 측에서 브라우저 버전을 식별할 필요 없이 Hi-Fi 버전 스타일을 사용할 수 있습니다. 순서가 중요합니다
마크업 소스 코드에서 및

사용자 정의로 인해 CSS가 나타납니다. 두 번째 태그이므로 동일한 태그에 대해 지정하는 스타일이 master.css에 지정된 콘텐츠를 재정의합니다.
예를 들어, main.css 내에서 ,

는 파란색 세리프 글꼴을 사용합니다.

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: 스타일은 각 페이지의 에 배치되어야 합니다. 많은 페이지는 동일한 스타일 시트를 공유할 수 없으며 페이지를 읽을 때마다 다시 다운로드해야 합니다.

여전히 계단식으로 진행됩니다.
주의해야 할 중요한 점이 있습니다. 즉, CSS의 계단식 효과가 여전히 존재한다는 것입니다. 대체 스타일 시트는 다른 스타일 시트와 동일합니다. 즉, 공통 규칙을 덮어쓰게 됩니다. default.css에서 레이아웃과 위치 지정을 지정합니다. 이러한 규칙은 프록시 스타일 시트가 이러한 규칙을 반복하지 않는 경우에도 해당 규칙이 계속 적용됩니다. 대체 스타일 시트 작동
좋습니다. 이제 대체 스타일 시트를 사용할 준비가 되었습니다. 안타깝게도 대체 스타일 시트가 내장된 브라우저는 거의 없으며 Mozilla도 그 중 하나입니다.
대체 스타일 시트가 있는 경우 브라우저 창 왼쪽 하단에 작은 아이콘이 나타납니다. Mozilla 사용자는 이 아이콘을 클릭하여 대체 스타일 시트 메뉴에서 실행할 수 있습니다. 3).
그림 10-3 Mozilla의 교체 스타일 시트 목록.
더 많은 브라우저 제조업체가 유사한 기능을 구현할 수 있기를 바라지만 그때까지는 스타일 시트를 전환하고 교체하는 또 다른 방법이 있습니다. 쿠키의 마법을 사용하여 사용자의 선택 사항을 저장하세요.
Paul Sowden은 A List Apart에 "대체 스타일: 대체 스타일 시트 작업"(http://www.php.cn/)이라는 제목의 보기 드문 튜토리얼을 작성했습니다. 이 기사에서는 브라우저에서 JavaScript를 사용하여 대체 스타일 시트를 시작하고 닫는 방법을 설명합니다.
전환 작업은 페이지의 슈퍼에 의해 제어됩니다. 링크가 완료된 후 모든 스타일 시트를 선택할 수 있습니다. 제목 속성에서 이 JavaScript는 사용자의 마지막 선택을 기록하도록 쿠키를 설정하므로 다음에 사용자가 웹 사이트를 탐색할 때 기본 스타일 시트 외에도 올바른 스타일 시트도 활성화됩니다.
예를 들어 이 콘텐츠를 작성할 때 내 개인 웹사이트에서는 세 가지 색상 매칭 방법을 제공하는데, 각 색상 매칭은 아이콘을 클릭하면 첫 번째 아이콘이 기본값이고 두 번째와 세 번째 아이콘이 됩니다. 아이콘은 서로 다른 색상 일치 방법을 제공하는 두 가지 교체 스타일 시트입니다(그림 10-4).
그림 10-4 아이콘을 클릭하면 교체 스타일 시트가 시작됩니다.
JavaScript는 사용자 측에서 실행되므로, 전체 페이지를 다시 읽지 않고도 전환 작업이 즉시 적용되며 전환 속도가 매우 빠릅니다.
전체 JavaScript 프로그램은 Paul Sowden의 A List Apart에서 찾을 수 있습니다. 작성된 기사를 다운로드하세요(http://www. php.cn/). 글꼴 크기를 조정할 수 있을 뿐만 아니라
계단식 효과를 실험하고 교체 스타일 시트에 특정 규칙을 추가하고 일부 기본 규칙을 재정의함으로써 웹 사이트에서 매우 흥미로운 대화형 효과를 만들 수 있습니다. 스크립트와 몇 가지 CSS 규칙은 작은 대역폭에서도 큰 영향을 미칠 수 있습니다. DOM의 친절함
스타일 시트를 스크립트 액세스로 대체할 수 있게 해주는 또 다른 W3C 표준에 감사해야 합니다. 소위 DOM 또는 문서 개체 모델은 실제로... W3C 방법을 살펴보겠습니다. 설명:
문서 객체 모델은 플랫폼과 언어에 독립적인 인터페이스로, 주로 프로그램과 스크립트가 파일의 내용, 구조 및 스타일에 동적으로 액세스하고 수정할 수 있도록 하며, 파일을 추가로 처리할 수도 있습니다. 결과는 표시된 페이지에 통합됩니다. 이는 W3C 및 인터넷상의 기타 DOM 리소스의 개념입니다.
익숙하지 않습니까? 이것이 바로 스타일 전환 스크립트가 수행하는 작업입니다. 문서의 스타일 설정에 동적으로 액세스하고 업데이트하는 것입니다. W3C 표준을 따르면 개발자가 다음과 같은 태그를 사용할 수 있는 스크립트를 작성할 수 있습니다. 확립된 방식으로 마크업 소스 코드에 액세스합니다. 표준을 준수하는 마크업 소스 코드를 작성하기 위해 열심히 노력하면 향후 표준 DOM을 준수하는 스크립트를 작성하는 것이 더 쉬워지고 이러한 페이지를 탐색하는 사용자 경험이 향상될 수 있습니다. .
스타일 전환 스크립트 DOM용 스크립트 작성의 표면만 살펴봤지만 이는 여전히 웹페이지를 표준에 맞게 작성하여 얻을 수 있는 큰 이점을 보여주는 대표적인 예입니다. 결론
이번 장에서는 CSS를 태그, 문서, 전체 웹사이트에 적용하는 여러 가지 방법에 대해 논의했으며, 이전 브라우저에서 CSS를 숨기는 방법과 여러 스타일 시트를 참조하는 방법에 대해서도 알아보았습니다. 서버 측에서 스크립트를 작성하거나 브라우저 유형을 감지할 필요 없이 다양한 지원 수준을 갖춘 브라우저용 Hi-Fi 스타일 시트
마지막으로 DOM을 사용하여 스타일 시트를 교체하는 방법을 배웠습니다. JavaScript를 사용하면 사용자가 동적으로 이점을 얻을 수 있습니다. 스타일 시트를 전환하여 사용자가 글꼴 크기, 색상 및 레이아웃까지 선택할 수 있습니다.
마지막으로, 이 팁이 스타일 디자인을 원활하게 시작하는 데 도움이 되기를 바랍니다!