CSS 외부 스타일 시트는 줄로 끝납니다. CLASS: Red Heading 속성을 사용하여 특정 스타일을 지정할 수 있습니다. 상속과 캐스케이드
인터넷의 러시아 부분은 날마다 성장하고 있습니다. 지난 1~2년 동안 러시아어 페이지의 총량이 두 배 이상 증가했습니다. 오늘날 러시아에서는 이 문구로 누구도 놀라지 않을 것입니다.<домашняя страничка>아니면 영어단어라도
우리는 여기서 이야기 할 것입니다<правильном>초보자를 위한 HTML, 즉 Internet Consortium(http://www.w3.org/)에서 공식적으로 승인한 몇 가지 추가 기능에 대한 내용입니다. 특히 동적 HTML(DHTML)이 제공하는 일부 기능에 대해 설명합니다. 더욱 정확하게는 CSS(캐스케이드 스타일 시트 또는 캐스케이드 스타일 시트)를 사용하여 CSS를 사용하여 만든 페이지보다 더 보기 좋은 페이지를 만드는 방법에 대해 설명합니다.<классического>HTML은 공간을 덜 차지하므로 로딩 속도가 더 빠릅니다.
처음으로 자신의 웹 사이트를 만들기로 결정한 사람들은 메모장이나 HomeSite와 같은 다른 텍스트 편집기로 무장합니다. 일반적으로 초보자는 다음과 같이 생각합니다.<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - 텍스트는 MS 워드로 작성하고, 프리젠테이션은 MS 파워포인트로 작성하므로 비슷한 프로그램으로 웹페이지를 작성하겠습니다. - MS FrontPage...> 그런 결심을 한 신인 웹조각가는 두 번이나 자해를 합니다.
처음으로 - 웹 공간의 합리적인 사용이라는 의미에서. 사실은 언급된 MS FrontPage를 포함하는 웹 페이지의 모든 시각적 편집기가 생성된 페이지에 삽입된다는 것입니다.<отсебятину>- 불필요한 태그가 너무 많습니다. 아마도 예외는 Macromedia Dreamweaver입니다(초보자와 전문가 모두에게 당연한 인기를 얻었습니다). 그러나 그는 이 점에서 이상적이지 않습니다. 그는 소스 텍스트를 따옴표(대부분의 경우 완전히 불필요함)로 어지럽히는 것을 좋아하고 가장 부적절한 위치에 잘림 방지 공백 문자를 삽입하기도 합니다. 공평하게 말하면 모든 시각적 편집기는 사용자에게 생성 중인 페이지의 소스 코드로 작업할 수 있는 기회를 제공하지만 많은 사람들에게 사랑받는 FrontPage는 모든 것을 자체 방식으로 다시 실행한다는 점에 주목할 가치가 있습니다. 다시 시각적 모드로 전환합니다.
이로 인해 초보자는 생성된 페이지 콘텐츠에 대한 유연성과 완전한 제어 측면에서 두 번째로 자신을 강탈하게 됩니다. 시각적 편집기는 생성되는 페이지의 소스 코드로 직접 작업하는 것과 동일한 창의성의 자유를 제공하지 않습니다. 당신에게.
자, 이제 바로 본론으로 들어가겠습니다. 계단식 스타일 시트를 사용하여 아름답고 작은 웹 페이지를 만드는 것입니다(추가 텍스트에서는 약칭인 CSS를 사용하겠습니다). 친애하는 독자 여러분, 소개를 읽고 나와 동의하고 시각적 편집기를 버리고 HTML에 관한 책을 얻었으며 최소한 몇 가지 기본 태그와 속성을 연구했으며 CSS가 무엇인지, 무엇인지 알고 싶어한다고 가정합니다. 와 함께 사용됩니다.
논리적 및 물리적 형식
현재 웹에서 가장 널리 퍼져 있는 클래식 HTML 버전 3.2는 특수 태그(예: 태그)가 있는 문서의 물리적 서식을 지정하는 수단을 제공합니다. , , ) 및 다양한 속성(크기, 색상, 높이, 너비 등)이 있습니다. 웹 형식 지정의 기능으로 인해 새 단락마다 이러한 태그와 속성을 계속해서 작성해야 하며, 이로 인해 페이지 코드의 크기가 크게 늘어납니다. 또한 이 형식 지정 방법을 사용하면 문서 구조를 분석하는 경우 이 단어가 굵게 강조 표시되는 이유가 불분명합니다. 단지 아름다움을 위해서인지 아니면 최종 사용자의 특별한 관심을 끌기 위해서인가요? 살아있는 사람이 여전히 클래식 HTML 페이지의 논리적 구성을 최소한 이해할 수 있다면 검색 엔진이나 음성 브라우저에 대해서는 말할 수 없습니다. 그것들을 꺼내서 페이지 구조에 순수한 논리를 넣으세요. 바로 이것 때문이다.<неподвластности>논리적으로 분석하자면, 이러한 포맷 방법을 물리적 포맷이라고 불렀습니다. 이에 반해 새로운 HTML 4.0 규격을 만들 때에는 논리적 서식, 즉 문서의 구조와 디자인이 명확하게 구분되는 서식을 최우선에 두었습니다. 이 형식 지정 방법은 인터넷에서 정보 검색을 위한 확장된 기능을 제공하고, 검색 엔진을 사용하여 정보를 보다 정확하게 구성 및 분석할 수 있으며, 페이지 크기와 소요 시간을 크게 줄일 수 있으므로 인터넷 컨소시엄에서 사용하는 것이 좋습니다. 완전히 로드합니다. 문서 구조와 디자인의 분리는 CSS를 사용하여 구현됩니다.
논리적 형식 지정의 시작이 기존 HTML 태그에도 존재한다는 사실은 주목할 가치가 있습니다.
, , , 물론 문서를 일부 논리적 블록으로 나누는 데 기여했습니다. 그러나 많은 페이지 작성자는 이러한 태그를 다른 목적으로 사용했으며 오늘날까지도 계속 사용하고 있습니다. 페이지 디자인을 위한 리소스가 부족하기 때문에 예를 들어 제목 태그는 페이지에서 실제로 제목이 아닌 요소를 강조하는 데 사용되었습니다. 반면에 CSS는 논리적 서식 규칙을 더 자세히 따르고 페이지 구조를 시각적 표현과 완전히 분리할 수 있는 충분한 스타일링 도구를 제공합니다.개별 페이지 요소에 스타일 할당
CSS를 사용하면 다음을 포함하여 모든 HTML 태그에 자신만의 시각적 스타일을 지정할 수 있습니다.
. 태그에 스타일이 설정된 경우 , 해당 요소에 대한 사용자 정의 스타일이 없는 경우 이 컨테이너 태그 내에 배치된 모든 요소(단락, 제목 등)에 의해 상속됩니다. 따라서 더 이상 태그를 작성할 필요가 없습니다. 페이지의 각 단락에 대한 속성 색상, 크기 등 - 태그에 특정 스타일을 설정하기만 하면 됩니다. , 페이지의 모든 단락이 이 스타일에 따라 표시됩니다. 어떻게 해야 하나요?모든 단락을 진한 녹색의 12포인트 Times New Roman 글꼴로 표시하려고 한다고 가정해 보겠습니다. 이렇게 하려면 태그의 스타일 속성을 지정해야 합니다.
, 적절한 값을 할당합니다. 구문은 다음과 같습니다.
따라서 페이지의 모든 단락이 원하는 대로 표시되고, 코드가 태그로 막히지 않습니다. 그리고 그들의 속성. 페이지가 많은 텍스트로 구성되어 있으면 파일 크기가 얼마나 절약될지 상상해 보십시오!
글꼴 스타일을 지정할 때 Times New Roman이라는 이름 뒤에 세리프 스타일을 지정했는데, 이는 세리프가 있는 모든 글꼴을 의미합니다. 최종 사용자의 컴퓨터에 Times New Roman 글꼴이 설치되어 있지 않으면 브라우저는 사용 가능한 세리프 글꼴을 대체하며 페이지 표시는 사용자가 의도한 것과 최대한 비슷하게 표시됩니다. 게다가 주어진 예는 IE(4.0 이상)와 NN(4.0 이상) 모두에서 이해할 수 있습니다. Netscape Navigator는 CSS 및 DHTML이 제공하는 모든 기능을 지원하지 않으며 이는 물론 팬 수를 늘리지 않는다는 점을 즉시 예약해야 합니다.
위의 예에서는 스타일을 문서 태그에 직접 삽입하는 방식(인라인 스타일이라고 함)을 사용합니다. CSS를 HTML 파일에 연결하는 이 방법은 고립된 경우에 권장됩니다. 즉, 이 스타일을 사이트의 한 페이지에 있는 한 요소에만 적용하려는 경우입니다. 스타일을 동일한 페이지의 여러 요소에 적용하거나 동시에 여러 페이지에 적용해야 하는 경우 CSS와 HTML을 연결하는 다른 방법을 권장하며 이에 대해서는 다음에 설명하겠습니다.
동일한 페이지의 여러 요소에 스타일 할당 - 포함된 스타일 시트 만들기
지금까지 우리는 하나의 요소에 하나의 스타일만 설정하는 것에 대해 이야기해왔습니다. 이제 스타일 시트를 만드는 방법을 알아 보겠습니다.
모든 첫 번째 수준 제목은 녹색 16포인트 굵은 이탤릭체 Arial로, 모든 두 번째 수준 제목은 14포인트 Helvetica 굵은 이탤릭체 황록색으로 되어 페이지의 모든 단락이 이전 예처럼 보이도록 하려고 한다고 가정해 보겠습니다. 이렇게 하려면 다음을 생성해야 합니다.<голове>페이지(태그 사이 어디든지
그리고) 한 번에 여러 규칙을 작성하는 내장 스타일 시트입니다. 이렇게 하려면 여는 태그로 시작하는 스타일 시트 컨테이너 태그를 만듭니다.. 이 컨테이너 태그 내에서 중괄호로 묶인 선택기(규칙이 적용될 HTML 태그의 이름)와 해당 정의(직접 포맷터 세트)로 구성된 CSS 규칙을 원하는 수만큼 정의할 수 있습니다. . 위 예의 구문은 다음과 같습니다.
...
...
CSS와 HTML을 연결하는 이러한 방식을 임베딩이라고 합니다. 사이트의 한 페이지에만 특정 서식 규칙 세트를 설정하기로 결정하고 계획에 따라 다른 모든 페이지가 다르게 표시되어야 하는 경우에 사용하는 것이 좋습니다.
여러 사이트 페이지에 동시에 스타일 할당
인라인 및 임베딩 외에도 스타일 시트 가져오기 및 연결을 사용하여 CSS와 HTML을 연결합니다. 물론 이는 동일한 사이트의 여러(또는 전체) 페이지에 일관된 모양과 느낌을 제공하는 가장 좋은 방법입니다. 이 경우 전체 스타일 시트가 하나의 파일에 저장됩니다(파일 확장자는 표준 - .css여야 함).
다음은 해당 파일(예: my.css) 내용의 예입니다.
본문( 글꼴 계열: "Times New Roman", serif; 글꼴 크기: 12pt; 색상: darkgreen; ) h1 ( 글꼴 계열: Arial, sans-serif; 글꼴 크기: 16pt; 색상: 녹색; 글꼴 두께 : 굵은 글씨; ) h2 ( 글꼴 계열: Arial, sans-serif; 글꼴 크기: 14pt; 색상: 녹색 노란색; 글꼴 두께: 굵은 글꼴; 글꼴 스타일: 기울임꼴; )
참고: 태그파일 내부에는 스타일 시트가 사용되지 않습니다. .css 확장자는 파일이 스타일 시트임을 브라우저에 명확하게 나타냅니다. 이러한 파일 하나를 한 번에 여러 페이지에 연결할 수 있습니다(또는 한 번에 여러 페이지로 가져올 수 있습니다). 연결을 위한 html 파일에서 태그 사이에 아무 곳에나 작성해야 합니다.
그리고다음 줄:
...
...
이 행은 링크되는 파일이 스타일 시트(rel="stylesheet")이고 이 파일의 형식이 .css(type="text/css")이며 html 파일과 동일한 디렉토리에 있음을 나타냅니다. 또는 다른 URL(href="my.css")이 있습니다. 분명히, 우리는 html 파일 중 어느 것(또는 전부)에 이 줄을 쓸 수 있습니다. 따라서 한 번에 여러 페이지에 대해 단일 스타일 디자인이 규정됩니다.
인라인 스타일(style 속성을 사용하여 개별 페이지 요소에 대해 지정된 스타일)과 임베디드 스타일(스타일은<голове>컨테이너 태그 내부의 페이지
...
가져온 스타일 시트의 주소 외에 컨테이너 태그에 쓸 수 있습니다.
...
...
기자의 질문
인터뷰 대상자의 답변
...
위의 예에서 기자의 질문은 페이지 왼쪽 가장자리에서 15픽셀 들여쓰기된 회색 Arial 글꼴, 굵은체, 기울임꼴, 10포인트로 표시됩니다. 답변은 12포인트 검정색 Times New Roman 글꼴로 표시됩니다. HTML 코드에서 직접 다양한 단락 클래스에 클래스 매개변수를 할당하는 것을 잊지 않는 것이 중요합니다. 모든 페이지 요소에 대해 원하는 만큼의 클래스를 만들 수 있습니다.
아이디 선택기
다른 사례를 들어보자. 나중에 JavaScript 프로그램에서 액세스할 페이지에 몇 가지 고유한 요소를 만들고 싶다고 가정해 보겠습니다. 아마도 이러한 요소는 다른 페이지에서 반복될 것이며 CSS를 사용하여 일관된 모양을 제공하고 싶을 것입니다. 이 경우 계단식 스타일 시트에는 고유 요소에 식별자(id)를 할당하는 기능이 있습니다. 식별자의 가장 일반적인 사용은 HTML 4.0 사양에서 요소에 따라 CSS를 전체 또는 제한적으로 지원하는 양식 요소에 대한 것입니다. 다음은 이러한 요소에 ID 및 CSS 규칙을 할당하는 예입니다.
...
...
...
...
마찬가지로, 고유 식별자를 원하는 수의 페이지 요소에 할당할 수 있습니다. 이는 JavaScript 프로그램에서 요소에 액세스하고 사용자 입력에 따라 표시 스타일을 변경하는 데 유용할 수 있으므로 다양한 동적 효과를 만들 수 있습니다.
컨텍스트 선택기
페이지의 모든 첫 번째 수준 제목이 회색 배경에 빨간색으로 표시되고, 모든 단락이 노란색 배경에 녹색으로 표시되며, 모든 항목이 태그를 사용하여 강조 표시되는 스타일 시트를 생성했다고 가정해 보겠습니다. 단락 내 단어 1개 - 은색 바탕에 검정색. 짐작할 수 있듯이 스타일 시트 코드는 다음과 같습니다.
H1 ( 색상: 빨간색; 배경색: 회색; ) p ( 색상: 녹색; 배경색: 노란색; ) em ( 색상: 검정색; 배경색: 은색; )
동일한 태그를 사용하여 제목의 일부 단어를 강조표시하고 싶다고 가정해 보겠습니다. , 하지만 헤더의 은색 배경에 검은색 텍스트가 나타나는 것은 만족스럽지 않습니다. 회색 배경에 부르고뉴 색상의 제목 단어를 강조하고 싶습니다. 이를 위한 컨텍스트 선택기가 있습니다. 이를 위해 스타일 시트에 추가할 규칙 항목은 다음과 같습니다.
H1 em ( 색상: #CC0000; 배경색: 회색; )
다음은 이 컨텍스트 선택기를 사용하는 페이지 코드의 예입니다.
...
...
...
이것은 다음과 같은 첫 번째 수준 제목입니다. 강조 표시됨한마디로
그리고 이것은 다음과 같은 일반적인 단락입니다. 강조 표시된 단어로
...
오늘은 그게 다야. 다음 시간에는 블록 페이지 요소의 형식 지정 규칙, 요소 위치 지정 및 CSS를 사용하여 구현된 기타 흥미롭고 유용한 기능에 대해 이야기하겠습니다.
다섯 가지 유형의 CSS 스타일을 살펴보았습니다. 그 중 네 가지(스타일 클래스, 태그 재정의 스타일, 명명된 스타일 및 결합된 스타일)는 다음에만 존재할 수 있습니다. 스타일 시트.
스타일 시트, 보관 장소에 따라 두 가지 유형으로 나뉩니다.
CSS 확장자를 가진 파일에 웹 페이지와 별도로 저장됩니다. 스타일 정의를 위한 CSS 코드가 포함되어 있습니다.
목록 7.4는 외부 스타일 시트의 예를 보여줍니다.
보시다시피 여기에는 네 가지 스타일이 정의되어 있습니다. 원칙적으로 모든 것이 우리에게 친숙합니다.
외부 스타일 시트가 웹 페이지와 별도로 저장되어 있는 경우 이를 웹 페이지에 연결해야 합니다. 이것이 단일 메타 태그의 목적입니다. , 해당 웹 페이지의 헤더 섹션에 위치합니다. (메타 태그와 웹 페이지 섹션은 1장에서 논의했습니다.) 작성 형식은 다음과 같습니다.
유형="텍스트/css">
스타일 시트 파일의 인터넷 주소는 이 태그의 HREF 속성 값으로 기록됩니다.
기타 태그 속성 우리에게는 중요하지 않습니다. REL 속성은 태그가 참조하는 파일이 무엇인지 지정합니다. , 현재 웹 페이지의 경우; "stylesheet" 값은 이 파일이 외부 스타일시트임을 의미합니다. 그리고 TYPE 속성은 태그가 참조하는 파일의 MIME 유형을 지정합니다. 외부 스타일 시트에는 MIME 유형의 text/css가 있습니다.
목록 7.5의 예에서는 main.css 파일에 저장된 외부 스타일 시트를 현재 웹 페이지에 연결했습니다.
외부 스타일 시트의 장점은 한 번에 여러 웹 페이지에 연결할 수 있다는 것입니다. 단 하나의 단점이 있으며 그조차도 중요하지 않습니다. 외부 스타일 시트는 별도의 파일에 저장되므로 "분실"될 가능성이 있습니다.
(목록 7.6)은 웹 페이지의 HTML 코드에 직접 작성됩니다. 그녀 도착 pair 올라
…
관련 스타일
도움을 받으면 전체 웹 사이트를 동일한 스타일로 쉽게 디자인할 수 있기 때문에 가장 편리합니다. 연결된 스타일은 모든 CSS 스타일이 확장자를 가진 별도의 파일에 있음을 의미합니다. .css.
이 접근 방식은 페이지 디자인 규칙을 콘텐츠와 분리하고, HTML 파일을 방해하지 않고 CSS 코드를 쉽게 변경할 수 있으며, 특히 대규모 프로젝트에서는 코드 분리 원칙이 매우 중요하기 때문에 편리합니다.
CSS 파일의 규칙을 HTML 페이지에 연결하려면 태그를 사용하세요.
컨테이너에 추가됨
, 그리고 그 속성.
다음은 파일의 규칙을 연결하는 줄입니다. 마이스타일.css HTML 페이지 포함:
rel="스타일시트"태그가 스타일시트 파일을 참조하도록 지정합니다. href="mysyle.css"주소를 설정합니다. 주소 지정 규칙은 일반 링크와 동일합니다. 경로는 절대 경로, 상대 경로 등이 될 수 있습니다.
가져온 스타일
명령 사용 @수입 CSS 파일의 스타일을 현재 테이블에 추가할 수 있습니다. 예를 들어, 글로벌 스타일을 사용하여 정의된 문서의 개별 디자인을 별도 파일의 범용 규칙으로 보완하려는 경우 필요할 수 있습니다. 이 메서드는 인라인 스타일과 함께 사용할 수 없습니다.
아래 코드는 파일 테이블을 문서로 가져옵니다. 모든.css, 편집된 HTML 문서가 있는 폴더에 있습니다.
@import url(any.css);
명령은 여는 태그 아래 줄에 작성됩니다.
스타일 시트의 용도는 무엇입니까?
캐스케이딩 스타일 시트 또는 CSS(영어 캐스케이딩 스타일 시트)는 HTML의 추가 개발의 결과이며 정보 표현의 다음 단계로 이동할 수 있는 기회를 제공합니다. 스타일 시트를 사용하면 페이지의 의미적 콘텐츠를 디자인에서 분리할 수 있습니다. 우리가 기억하는 것처럼 HTML 표준의 첫 번째 버전은 정보의 모양을 제어하는 수단을 제공하지 않았습니다. 하이퍼텍스트의 일반적인 개념은 텍스트를 재생할 수 있는 모든 장치에서 정보에 접근할 수 있도록 하는 것을 목표로 했습니다. 마크업의 경우 제목, 부제목, 목록, 단락, 인용문 등을 정의하는 논리적 태그만 사용하는 것이 좋습니다. -즉, 문서의 구조를 구성하는 요소입니다. 외관에 대한 해석은 전적으로 터미널 터미널의 양심에 맡겼습니다.
그러나 그 이후로 많은 것이 바뀌었고 HTML 표준은 원래의 조화를 잃었습니다. 초기에 Netscape는 표시되는 정보의 모양을 보다 효과적으로 제어할 수 있는 "향상된 태그"를 추가했습니다. 혁신이 이어지면서 모든 Netscape 확장은 사실상의 표준이 되었습니다. 그런 다음 Microsoft도 똑같이했습니다. 그들이 그것을 깨달았을 때 HTML은 논리적 태그와 디자인 태그, 호환되지 않는 확장의 끔찍한 혼합이었고 정보 출력 특성에 관계없이 모든 장치에 정보를 표시한다는 원래 개념과 완전히 일치하지 않았습니다.
그 후 대규모 표준화가 이루어졌습니다. 그 결과 HTML 3.2 표준이 탄생했습니다. 혁명적이지는 않았지만 모든 혁신을 적용하고 브라우저 제조업체를 위한 일반적인 권장 사항을 개발했습니다. 새로운 표준인 HTML 4.0 또는 동적 HTML이라고 불리는 혁명적인 변화가 도입되었습니다. 레이어, 스타일 시트 및 범용 브라우저 개체 모델이 도입되었습니다.
새로운 표준은 HTML 개념의 근원으로 돌아가려고 노력했습니다. 네 번째 버전은 첫 번째 버전과 마찬가지로 21인치 모니터든 작은 흑백 휴대폰 화면이든 모든 장치에서 재생할 수 있는 방식으로 페이지를 생성할 것을 권장합니다.
정보의 모습을 표현하는 문제는 어떻게 해결되었나요? 여기에 혁명적 접근 방식이 있습니다. 모든 디자인을 외부 스타일 파일에 넣는 것이 좋습니다. 메인 페이지에는 필요한 스타일에 대한 정보와 링크만 포함됩니다.
특정 장치에 페이지를 표시할 때 적절한 스타일 시트를 사용해야 합니다. 물론 휴대폰과 컴퓨터 모니터는 서로 달라야 합니다. 첫 번째 경우에는 최소한의 디자인을 사용하여 가장 최적이고 간결한 방식으로 정보를 제공할 수 있습니다. 두 번째 경우에는 다양한 글꼴과 색상 디자인을 마음대로 사용할 수 있습니다.
스타일 시트는 정보가 표시될 각 장치에 대한 사이트를 생성할 때 한 번만 작성하면 됩니다. 또한 스타일 시트는 전체 사이트에 대해 동일할 수 있습니다. 따라서 각 페이지에서 동일한 스타일 설명을 반복할 필요가 없습니다.
모든 스타일 정보를 하나의 외부 파일에 배치하면 우리에게 또 다른 유용한 기회가 열립니다. 결국 단 하나의 스타일 파일(!)의 내용을 변경하면 전체 사이트 디자인을 몇 초 만에 변경할 수 있습니다. 또한 다른 수정이 필요하지 않습니다. 물론 이는 사이트가 원래 올바르게 설계된 경우에만 해당됩니다.
이론에 대해 조금 이해한 후 실습으로 넘어가 스타일 시트를 HTML 파일에 연결하는 문제부터 시작하겠습니다.
스타일 시트 연결
이 작업을 수행하기 위해 제안된 3가지 방법 중 하나를 사용할 수 있습니다.
외부 파일
헤더 섹션의 설명
인라인 설명
인라인 설명 또는 태그에 내장된 설명을 사용하여 가장 간단한 것부터 시작해 보겠습니다.
이 텍스트는 스타일에 의해 재정의됩니다.
추가 스타일 속성을 사용하면 모든 태그에 필요한 스타일 매개변수를 정의할 수 있습니다. 이것이 가장 쉬운 방법이며 하나의 태그 내에서만 작동합니다. 하지만 파일 크기가 얼마나 커지는지, 태그별로 스타일을 지정하면 수정하는 것이 얼마나 불편할지 상상해 보세요. 이 방법은 예를 들어 태그를 이용하여 외관을 직접적으로 기술하는 것과 크게 다르지 않습니다.
필요한 모든 디자인 스타일을 미리 정의한 다음 이를 적절한 태그에 적용하는 것이 훨씬 더 편리합니다. 이것이 두 번째 방법이 될 것입니다 - 제목 섹션의 설명입니다. 그 효과는 전체 페이지로 확장됩니다. 스타일은 필요한 모든 디자인 매개변수가 정의된 목록인 클래스를 사용하여 정의됩니다.
이 방법을 사용하는 경우 스타일 설명을 헤더 섹션에 배치해야 합니다.
....
이제 이러한 스타일을 HTML 코드의 어느 곳에나 적용할 수 있습니다. 이를 위해 다음 구성이 사용됩니다.
이 텍스트는 헤더 스타일로 작성되었습니다.
이 텍스트는 빨간색으로 작성되었습니다.
보시다시피 모든 것이 그렇게 복잡하지 않습니다. 가장 중요한 것은 기본 원리를 이해하는 것입니다. 새 클래스를 정의하는 것 외에도 표준 태그를 재정의하는 기능도 있습니다. 예를 들어 태그
이제 태그로 묶인 모든 텍스트는 이 스타일에 정의된 대로 표시됩니다. 이는 매우 편리하며 스타일을 사용하도록 기존 페이지를 쉽게 조정할 수 있습니다. 또한 불필요한 클래스 속성이 없기 때문에 파일 크기가 다소 줄어듭니다.
마지막으로 세 번째 방법은 스타일 설명을 외부 파일로 전송하는 것입니다. 영향 범위는 설명이 포함된 모든 파일로 확장됩니다. 이 방법은 HTML 4.0의 개념과 가장 일치합니다. 사이트의 모양을 변경해야 하는 경우 이 파일 하나만 조정하면 충분합니다. 이전 방법과 비교해 보세요. 그 중 하나에서는 각 페이지의 설명을 변경해야 하고 다른 페이지에서는 훨씬 더 많은 설명을 변경해야 합니다. 물론 전혀 영감을 주지 않는 각 태그 옆에 있습니다.
외부 파일은 어떻게 삽입되나요? 먼저, 필요한 모든 클래스에 대한 설명이 포함된 스타일 파일(mystyle.css)이 생성됩니다.
헤더(텍스트 정렬: 가운데; 글꼴 크기: 27pt;)
.red (색상: 빨간색;)
p (텍스트 정렬: 중앙; 글꼴 크기: 12pt;)
....
....
가장 편리한 방법이며, 메인 스타일 시트로 사용하는 것을 권장합니다.
왜 "메인"이라고 말했나요? 실제로는 세 가지 방법을 모두 사용해야 하며, 여기서 스타일의 "계단식"이 작용하게 됩니다. 하지만 이에 대해서는 다음 시간에 이야기하겠습니다.
스타일 시트 사용에 대한 대화를 계속해 보겠습니다. 먼저 계단식 스타일을 살펴본 다음 구문을 검토하고 스타일을 만들 때 사용되는 가장 일반적인 매개 변수를 검토해 보겠습니다.
계단식 스타일
먼저 스타일을 계단식이라고 부르는 이유를 알아 보겠습니다. 친애하는 독자 여러분, 페이지에 스타일을 구현하는 방법을 다시 한 번 알려드리겠습니다.
별도의 스타일 파일을 사용하고 태그를 사용하여 삽입
문서 헤더의 스타일 설명
스타일을 태그의 매개변수로 적용합니다.
계단식은 스타일을 재정의할 수 있음을 의미합니다. 위의 스타일 구현 방법 목록은 재정의 순서를 따릅니다. 다운스트림 메서드는 더 높은 메서드를 재정의할 수 있습니다.
예를 들어, 태그의 텍스트가 외부 스타일 파일에 정의되어 있습니다.
10포인트 폰트로 작성해야 합니다. 그러나 페이지 제목에 동일한 텍스트가 태그에 있음을 추가로 표시하는 경우
12포인트 글꼴로 작성해야 하며, 텍스트는 정확히 해당 크기로 표시됩니다. 페이지 헤더의 스타일이 외부 파일의 스타일을 재정의했습니다.
그것은 무엇을 위한 것입니까? 아 이거 정말 유용한 내용이군요. 이제 구체적인 예를 들어 보여 드리겠습니다. 페이지 헤더의 모든 링크에 대해 다음 스타일이 정의되어 있다고 가정해 보겠습니다.
따라서 하이퍼링크인 텍스트는 자동으로 빨간색으로 바뀌고 더 이상 밑줄이 그어지지 않습니다. 그래서 우리는 페이지 끝 부분에 저작권을 표시하기로 결정했지만, 주의가 집중되지 않도록 눈에 띄지 않게 표시했습니다. 그러나 그럼에도 불구하고 우리는 저작권도 링크가 되기를 원합니다. 페이지의 한 곳에서만 이 작업을 수행해야 하며 이를 위해 추가 클래스를 정의하는 것은 부적절합니다. 이 경우 계단식 스타일이 도움이 될 것입니다. 링크 색상을 로컬로 재정의하는 것으로 충분합니다.
저작권(C)
1998-2001 체리 디자인
우리는 스타일 매개변수를 사용하여 이 작업을 수행했으며, 기억하는 것처럼 이 매개변수는 정의된 태그 내에서만 작동합니다. 이것이 바로 우리에게 필요한 것입니다.
위의 예에서 제가 새 태그를 도입했다는 사실을 눈치채셨을 것입니다. 이러한 경우를 위해 특별히 설계되었습니다. 그것이 하는 일은 스타일을 적용할 수 있는 영역을 정의하는 것뿐입니다. 이것은 매우 편리한 태그입니다. 왜냐하면... 태그와 달리 자체 앞이나 뒤에 불필요한 패딩(예: 빈 수직 공간)을 삽입하지 않습니다.
클래스를 사용하여 스타일을 정의하는 것이 어떤 태그에 더 좋나요? 대부분의 경우 다음 디자인 중 하나가 사용됩니다.
무엇
무엇
무엇
꼬리표
비슷한 , 그러나 이전과 이후에 비트를 수행한다는 차이점만 있습니다(정확히). 그러나 페이지의 주요 내용을 입력하는 데 사용되는 텍스트 스타일은 태그를 재정의하는 것이 가장 좋습니다.
그리고 별도의 클래스를 정의하는 것이 아닙니다.
그리고 두 브라우저 모두에서 올바른 표시와 관련된 작은 추가 사항입니다. 웹 사이트 디자인에 테이블 레이아웃을 사용하는 경우 태그뿐만 아니라 기본 텍스트의 스타일도 결정해야 합니다.
, 왜냐하면 Netscape는 테이블 이전에 할당된 스타일 상속을 절대적으로 거부합니다. 계단식 배열을 다루었으니 구문에 대해 이야기해 보겠습니다.
CSS 구문
각 클래스에 대한 설명은 다음과 같은 구성을 사용하여 수행됩니다.
작게(글꼴 크기: 9pt; )
먼저, 클래스의 이름이 표시됩니다. 임의적일 수 있지만 여전히 의미 있는 이름을 지정하는 것이 좋습니다. 다음으로, 이 클래스에 필요한 모든 매개변수가 중괄호() 안에 나열됩니다. 매개변수는 세미콜론으로 서로 구분됩니다. 더 긴 설명을 사용한 또 다른 예는 다음과 같습니다.
작음( 글꼴 크기: 9pt; 색상: #eeeeee; 텍스트 정렬: center; )
두 구성 모두에서 클래스 이름을 점으로 시작하여 일반 클래스를 정의했습니다. 어떤 태그에도 적용할 수 있는 것입니다. 그리고 이는 다음 구성을 사용하여 수행됩니다.
보편적인 클래스가 있으므로 다른 클래스도 있을 수 있습니까? 그렇습니다. 소위 태그 클래스도 있습니다.
p.small (글꼴 크기: 9pt; )
이런 방식으로 정의된 클래스는 의도한 태그에서만 작동하며 다른 모든 클래스에서는 무시됩니다.
이 텍스트는 작은 스타일로 표시됩니다.
하나의 태그뿐만 아니라 여러 태그에 대해서도 동시에 매개변수를 정의할 수 있습니다. 이렇게 하려면 스타일 정의에서 쉼표로 구분하여 나열하면 충분합니다.
p, td (글꼴 크기: 9pt; 색상: 녹색;)
이 기술을 그룹화라고 하며 이 경우 다음과 같이 정의했습니다.
텍스트 크기와 색상이 동일합니다. 기존 태그를 재정의하는 경우 스타일 설명에 모든 매개변수를 지정할 수는 없고 변경하려는 매개변수만 지정할 수 있습니다. 다른 모든 매개변수는 태그마다 다른 기본값을 사용합니다.
의사 클래스
CSS에는 의사 클래스(pseudo-class)라는 것이 있습니다. 일반 클래스와 달리 의사 클래스의 효과는 이 스타일이 적용된 텍스트 전체에 적용되지 않고 일부에만 적용되며 특정 상태에서만 가능합니다. 좀 더 명확하게 설명하기 위해 링크 위로 마우스를 가져갈 때만 밑줄이 그어지는 효과를 살펴보겠습니다. 그 효과는 매우 일반적이며 이 사이트에서도 관찰할 수 있습니다. 다음은 위에서 설명한 효과를 얻을 수 있는 스타일 시트의 일부입니다.
a (텍스트 장식: 없음; )
a:hover ( 텍스트 장식: 밑줄; )
맨 윗줄은 표준 태그를 재정의합니다. , 이는 링크에 밑줄이 그어지는 것을 금지하지만 맨 아래에 있는 것은 커서가 위에 있을 때 링크의 스타일을 설명하는 hover 의사 클래스에 대한 스타일 정의입니다.
그리고 여기에 의사 클래스의 또 다른 예가 있습니다. 단락 시작 부분에 첫 문자 장식을 정의하는 것입니다.
p:첫 글자( 글꼴 크기: 200%; 글꼴 두께: 굵게; )
두 경우 모두 스타일은 특정 상태(사용자가 링크를 클릭하려고 함) 또는 텍스트 부분(단락의 첫 글자만 변경됨)에 영향을 미칩니다. 이것이 의사 클래스의 의미입니다.
계단식(다중 레벨) 스타일 시트
-
계단식 스타일 시트(CSS)
데이터가 브라우저에 표시되는 방식을 정의하는 강력한 텍스트 기반 형식 표준입니다. HTML이 문서 구성에 대한 정보를 제공하는 반면, 스타일 시트는 문서가 어떤 모습이어야 하는지 알려줍니다. 따라서 계단식 스타일 시트는 콘텐츠를 프레젠테이션과 별도로 저장할 수 있는 기능을 제공합니다. 스타일에는 글꼴, 배경, 텍스트, 링크 색상, 여백, 페이지의 개체 배치 등 모든 유형의 디자인 요소가 포함됩니다. CSS는 텍스트와 그래픽의 배치를 더 효과적으로 제어할 수 있도록 설계되었습니다. 계단식 스타일 시트는 사이트 개발 중에 HTML만으로는 불가능한 디자인, 구성 및 제어 수준의 일관성을 제공합니다.
CSS에는 인라인, 포함(내부), 링크(외부)의 3가지 유형의 스타일 시트가 있습니다.
CSS를 사용하여 HTML 문서의 형식을 지정한다는 아이디어는 1996년 W3C에서 처음 권장되었습니다. 1998년에 업데이트된 이 권장 사항은 오늘날에도 웹 개발자가 여전히 사용하고 있습니다.
그 단어는 무엇을 의미합니까? "종속"?"계단식"이라는 용어는 동일한 HTML 페이지 내에서 다양한 스타일을 사용할 수 있음을 의미합니다. 스타일시트를 지원하는 브라우저는 스타일시트 정보를 해석할 때 해당 순서(계단식)를 따릅니다. 즉, 세 가지 유형의 스타일을 모두 사용할 수 있으며 브라우저는 관련 스타일을 먼저 해석한 다음 삽입된 스타일, 마지막으로 인라인 스타일을 해석합니다. 전체 사이트에 샘플 스타일을 적용하더라도 인라인 스타일을 사용하여 페이지의 특정 측면을 제어하고 인라인 스타일을 사용하여 해당 페이지 내의 특정 영역을 제어할 수 있습니다. 캐스케이딩의 또 다른 측면은 상속(계승).
상속이란 달리 지정하지 않는 한 특정 스타일이 HTML 페이지의 다른 요소에 상속됨을 의미합니다. 예를 들어 태그에 특정 텍스트 색상을 적용하면 <р>
을 선택하면 달리 명시하지 않는 한 해당 단락 내의 모든 태그가 해당 색상을 상속합니다.
스타일 시트를 HTML 문서에 적용할 수 있는 방법에는 여러 가지가 있습니다. 구문은 스타일시트에 포함된 정보의 실제 구조를 따릅니다.
HTML 문서에 스타일 시트를 적용하는 방법에는 세 가지가 있습니다.
내장(인라인).이 방법을 사용하면 HTML 태그에 스타일을 추가할 수 있습니다. 내장된 방법을 사용하면 웹 페이지의 모든 속성을 최대한 제어할 수 있습니다. 단일 단락의 모양을 설정한다고 가정해 보겠습니다. 단락 태그에 스타일 속성을 추가하기만 하면 브라우저는 코드에 추가한 스타일 옵션을 사용하여 해당 단락을 렌더링합니다.
임베디드포함을 사용하면 전체 HTML 페이지를 제어할 수 있습니다. 태그를 사용하는 경우
, 물론 문서를 일부 논리적 블록으로 나누는 데 기여했습니다. 그러나 많은 페이지 작성자는 이러한 태그를 다른 목적으로 사용했으며 오늘날까지도 계속 사용하고 있습니다. 페이지 디자인을 위한 리소스가 부족하기 때문에 예를 들어 제목 태그는 페이지에서 실제로 제목이 아닌 요소를 강조하는 데 사용되었습니다. 반면에 CSS는 논리적 서식 규칙을 더 자세히 따르고 페이지 구조를 시각적 표현과 완전히 분리할 수 있는 충분한 스타일링 도구를 제공합니다.개별 페이지 요소에 스타일 할당
CSS를 사용하면 다음을 포함하여 모든 HTML 태그에 자신만의 시각적 스타일을 지정할 수 있습니다.
. 태그에 스타일이 설정된 경우 , 해당 요소에 대한 사용자 정의 스타일이 없는 경우 이 컨테이너 태그 내에 배치된 모든 요소(단락, 제목 등)에 의해 상속됩니다. 따라서 더 이상 태그를 작성할 필요가 없습니다. 페이지의 각 단락에 대한 속성 색상, 크기 등 - 태그에 특정 스타일을 설정하기만 하면 됩니다. , 페이지의 모든 단락이 이 스타일에 따라 표시됩니다. 어떻게 해야 하나요?모든 단락을 진한 녹색의 12포인트 Times New Roman 글꼴로 표시하려고 한다고 가정해 보겠습니다. 이렇게 하려면 태그의 스타일 속성을 지정해야 합니다.
, 적절한 값을 할당합니다. 구문은 다음과 같습니다.
따라서 페이지의 모든 단락이 원하는 대로 표시되고, 코드가 태그로 막히지 않습니다. 그리고 그들의 속성. 페이지가 많은 텍스트로 구성되어 있으면 파일 크기가 얼마나 절약될지 상상해 보십시오!
글꼴 스타일을 지정할 때 Times New Roman이라는 이름 뒤에 세리프 스타일을 지정했는데, 이는 세리프가 있는 모든 글꼴을 의미합니다. 최종 사용자의 컴퓨터에 Times New Roman 글꼴이 설치되어 있지 않으면 브라우저는 사용 가능한 세리프 글꼴을 대체하며 페이지 표시는 사용자가 의도한 것과 최대한 비슷하게 표시됩니다. 게다가 주어진 예는 IE(4.0 이상)와 NN(4.0 이상) 모두에서 이해할 수 있습니다. Netscape Navigator는 CSS 및 DHTML이 제공하는 모든 기능을 지원하지 않으며 이는 물론 팬 수를 늘리지 않는다는 점을 즉시 예약해야 합니다.
위의 예에서는 스타일을 문서 태그에 직접 삽입하는 방식(인라인 스타일이라고 함)을 사용합니다. CSS를 HTML 파일에 연결하는 이 방법은 고립된 경우에 권장됩니다. 즉, 이 스타일을 사이트의 한 페이지에 있는 한 요소에만 적용하려는 경우입니다. 스타일을 동일한 페이지의 여러 요소에 적용하거나 동시에 여러 페이지에 적용해야 하는 경우 CSS와 HTML을 연결하는 다른 방법을 권장하며 이에 대해서는 다음에 설명하겠습니다.
동일한 페이지의 여러 요소에 스타일 할당 - 포함된 스타일 시트 만들기
지금까지 우리는 하나의 요소에 하나의 스타일만 설정하는 것에 대해 이야기해왔습니다. 이제 스타일 시트를 만드는 방법을 알아 보겠습니다.
모든 첫 번째 수준 제목은 녹색 16포인트 굵은 이탤릭체 Arial로, 모든 두 번째 수준 제목은 14포인트 Helvetica 굵은 이탤릭체 황록색으로 되어 페이지의 모든 단락이 이전 예처럼 보이도록 하려고 한다고 가정해 보겠습니다. 이렇게 하려면 다음을 생성해야 합니다.<голове>페이지(태그 사이 어디든지
그리고) 한 번에 여러 규칙을 작성하는 내장 스타일 시트입니다. 이렇게 하려면 여는 태그로 시작하는 스타일 시트 컨테이너 태그를 만듭니다.. 이 컨테이너 태그 내에서 중괄호로 묶인 선택기(규칙이 적용될 HTML 태그의 이름)와 해당 정의(직접 포맷터 세트)로 구성된 CSS 규칙을 원하는 수만큼 정의할 수 있습니다. . 위 예의 구문은 다음과 같습니다.... ...
CSS와 HTML을 연결하는 이러한 방식을 임베딩이라고 합니다. 사이트의 한 페이지에만 특정 서식 규칙 세트를 설정하기로 결정하고 계획에 따라 다른 모든 페이지가 다르게 표시되어야 하는 경우에 사용하는 것이 좋습니다.
여러 사이트 페이지에 동시에 스타일 할당
인라인 및 임베딩 외에도 스타일 시트 가져오기 및 연결을 사용하여 CSS와 HTML을 연결합니다. 물론 이는 동일한 사이트의 여러(또는 전체) 페이지에 일관된 모양과 느낌을 제공하는 가장 좋은 방법입니다. 이 경우 전체 스타일 시트가 하나의 파일에 저장됩니다(파일 확장자는 표준 - .css여야 함).
다음은 해당 파일(예: my.css) 내용의 예입니다.
본문( 글꼴 계열: "Times New Roman", serif; 글꼴 크기: 12pt; 색상: darkgreen; ) h1 ( 글꼴 계열: Arial, sans-serif; 글꼴 크기: 16pt; 색상: 녹색; 글꼴 두께 : 굵은 글씨; ) h2 ( 글꼴 계열: Arial, sans-serif; 글꼴 크기: 14pt; 색상: 녹색 노란색; 글꼴 두께: 굵은 글꼴; 글꼴 스타일: 기울임꼴; )
참고: 태그파일 내부에는 스타일 시트가 사용되지 않습니다. .css 확장자는 파일이 스타일 시트임을 브라우저에 명확하게 나타냅니다. 이러한 파일 하나를 한 번에 여러 페이지에 연결할 수 있습니다(또는 한 번에 여러 페이지로 가져올 수 있습니다). 연결을 위한 html 파일에서 태그 사이에 아무 곳에나 작성해야 합니다.
그리고다음 줄:... ...
이 행은 링크되는 파일이 스타일 시트(rel="stylesheet")이고 이 파일의 형식이 .css(type="text/css")이며 html 파일과 동일한 디렉토리에 있음을 나타냅니다. 또는 다른 URL(href="my.css")이 있습니다. 분명히, 우리는 html 파일 중 어느 것(또는 전부)에 이 줄을 쓸 수 있습니다. 따라서 한 번에 여러 페이지에 대해 단일 스타일 디자인이 규정됩니다.
인라인 스타일(style 속성을 사용하여 개별 페이지 요소에 대해 지정된 스타일)과 임베디드 스타일(스타일은<голове>컨테이너 태그 내부의 페이지 ...
가져온 스타일 시트의 주소 외에 컨테이너 태그에 쓸 수 있습니다. ...
...기자의 질문
인터뷰 대상자의 답변
...
위의 예에서 기자의 질문은 페이지 왼쪽 가장자리에서 15픽셀 들여쓰기된 회색 Arial 글꼴, 굵은체, 기울임꼴, 10포인트로 표시됩니다. 답변은 12포인트 검정색 Times New Roman 글꼴로 표시됩니다. HTML 코드에서 직접 다양한 단락 클래스에 클래스 매개변수를 할당하는 것을 잊지 않는 것이 중요합니다. 모든 페이지 요소에 대해 원하는 만큼의 클래스를 만들 수 있습니다.
아이디 선택기
다른 사례를 들어보자. 나중에 JavaScript 프로그램에서 액세스할 페이지에 몇 가지 고유한 요소를 만들고 싶다고 가정해 보겠습니다. 아마도 이러한 요소는 다른 페이지에서 반복될 것이며 CSS를 사용하여 일관된 모양을 제공하고 싶을 것입니다. 이 경우 계단식 스타일 시트에는 고유 요소에 식별자(id)를 할당하는 기능이 있습니다. 식별자의 가장 일반적인 사용은 HTML 4.0 사양에서 요소에 따라 CSS를 전체 또는 제한적으로 지원하는 양식 요소에 대한 것입니다. 다음은 이러한 요소에 ID 및 CSS 규칙을 할당하는 예입니다.
... ... ... ...
마찬가지로, 고유 식별자를 원하는 수의 페이지 요소에 할당할 수 있습니다. 이는 JavaScript 프로그램에서 요소에 액세스하고 사용자 입력에 따라 표시 스타일을 변경하는 데 유용할 수 있으므로 다양한 동적 효과를 만들 수 있습니다.
컨텍스트 선택기
페이지의 모든 첫 번째 수준 제목이 회색 배경에 빨간색으로 표시되고, 모든 단락이 노란색 배경에 녹색으로 표시되며, 모든 항목이 태그를 사용하여 강조 표시되는 스타일 시트를 생성했다고 가정해 보겠습니다. 단락 내 단어 1개 - 은색 바탕에 검정색. 짐작할 수 있듯이 스타일 시트 코드는 다음과 같습니다.
H1 ( 색상: 빨간색; 배경색: 회색; ) p ( 색상: 녹색; 배경색: 노란색; ) em ( 색상: 검정색; 배경색: 은색; )
동일한 태그를 사용하여 제목의 일부 단어를 강조표시하고 싶다고 가정해 보겠습니다. , 하지만 헤더의 은색 배경에 검은색 텍스트가 나타나는 것은 만족스럽지 않습니다. 회색 배경에 부르고뉴 색상의 제목 단어를 강조하고 싶습니다. 이를 위한 컨텍스트 선택기가 있습니다. 이를 위해 스타일 시트에 추가할 규칙 항목은 다음과 같습니다.
H1 em ( 색상: #CC0000; 배경색: 회색; )
다음은 이 컨텍스트 선택기를 사용하는 페이지 코드의 예입니다.
... ... ...
이것은 다음과 같은 첫 번째 수준 제목입니다. 강조 표시됨한마디로
그리고 이것은 다음과 같은 일반적인 단락입니다. 강조 표시된 단어로
...
오늘은 그게 다야. 다음 시간에는 블록 페이지 요소의 형식 지정 규칙, 요소 위치 지정 및 CSS를 사용하여 구현된 기타 흥미롭고 유용한 기능에 대해 이야기하겠습니다.
다섯 가지 유형의 CSS 스타일을 살펴보았습니다. 그 중 네 가지(스타일 클래스, 태그 재정의 스타일, 명명된 스타일 및 결합된 스타일)는 다음에만 존재할 수 있습니다. 스타일 시트.
스타일 시트, 보관 장소에 따라 두 가지 유형으로 나뉩니다.
CSS 확장자를 가진 파일에 웹 페이지와 별도로 저장됩니다. 스타일 정의를 위한 CSS 코드가 포함되어 있습니다.
목록 7.4는 외부 스타일 시트의 예를 보여줍니다.
보시다시피 여기에는 네 가지 스타일이 정의되어 있습니다. 원칙적으로 모든 것이 우리에게 친숙합니다.
외부 스타일 시트가 웹 페이지와 별도로 저장되어 있는 경우 이를 웹 페이지에 연결해야 합니다. 이것이 단일 메타 태그의 목적입니다. , 해당 웹 페이지의 헤더 섹션에 위치합니다. (메타 태그와 웹 페이지 섹션은 1장에서 논의했습니다.) 작성 형식은 다음과 같습니다.
유형="텍스트/css">
스타일 시트 파일의 인터넷 주소는 이 태그의 HREF 속성 값으로 기록됩니다.
기타 태그 속성 우리에게는 중요하지 않습니다. REL 속성은 태그가 참조하는 파일이 무엇인지 지정합니다. , 현재 웹 페이지의 경우; "stylesheet" 값은 이 파일이 외부 스타일시트임을 의미합니다. 그리고 TYPE 속성은 태그가 참조하는 파일의 MIME 유형을 지정합니다. 외부 스타일 시트에는 MIME 유형의 text/css가 있습니다.
목록 7.5의 예에서는 main.css 파일에 저장된 외부 스타일 시트를 현재 웹 페이지에 연결했습니다.
외부 스타일 시트의 장점은 한 번에 여러 웹 페이지에 연결할 수 있다는 것입니다. 단 하나의 단점이 있으며 그조차도 중요하지 않습니다. 외부 스타일 시트는 별도의 파일에 저장되므로 "분실"될 가능성이 있습니다.
(목록 7.6)은 웹 페이지의 HTML 코드에 직접 작성됩니다. 그녀 도착 pair 올라 …
관련 스타일
도움을 받으면 전체 웹 사이트를 동일한 스타일로 쉽게 디자인할 수 있기 때문에 가장 편리합니다. 연결된 스타일은 모든 CSS 스타일이 확장자를 가진 별도의 파일에 있음을 의미합니다. .css.
이 접근 방식은 페이지 디자인 규칙을 콘텐츠와 분리하고, HTML 파일을 방해하지 않고 CSS 코드를 쉽게 변경할 수 있으며, 특히 대규모 프로젝트에서는 코드 분리 원칙이 매우 중요하기 때문에 편리합니다.
CSS 파일의 규칙을 HTML 페이지에 연결하려면 태그를 사용하세요. 컨테이너에 추가됨 , 그리고 그 속성.
다음은 파일의 규칙을 연결하는 줄입니다. 마이스타일.css HTML 페이지 포함:
rel="스타일시트"태그가 스타일시트 파일을 참조하도록 지정합니다. href="mysyle.css"주소를 설정합니다. 주소 지정 규칙은 일반 링크와 동일합니다. 경로는 절대 경로, 상대 경로 등이 될 수 있습니다.
가져온 스타일
명령 사용 @수입 CSS 파일의 스타일을 현재 테이블에 추가할 수 있습니다. 예를 들어, 글로벌 스타일을 사용하여 정의된 문서의 개별 디자인을 별도 파일의 범용 규칙으로 보완하려는 경우 필요할 수 있습니다. 이 메서드는 인라인 스타일과 함께 사용할 수 없습니다.
아래 코드는 파일 테이블을 문서로 가져옵니다. 모든.css, 편집된 HTML 문서가 있는 폴더에 있습니다.
@import url(any.css);
명령은 여는 태그 아래 줄에 작성됩니다.
스타일 시트의 용도는 무엇입니까?
캐스케이딩 스타일 시트 또는 CSS(영어 캐스케이딩 스타일 시트)는 HTML의 추가 개발의 결과이며 정보 표현의 다음 단계로 이동할 수 있는 기회를 제공합니다. 스타일 시트를 사용하면 페이지의 의미적 콘텐츠를 디자인에서 분리할 수 있습니다.우리가 기억하는 것처럼 HTML 표준의 첫 번째 버전은 정보의 모양을 제어하는 수단을 제공하지 않았습니다. 하이퍼텍스트의 일반적인 개념은 텍스트를 재생할 수 있는 모든 장치에서 정보에 접근할 수 있도록 하는 것을 목표로 했습니다. 마크업의 경우 제목, 부제목, 목록, 단락, 인용문 등을 정의하는 논리적 태그만 사용하는 것이 좋습니다. -즉, 문서의 구조를 구성하는 요소입니다. 외관에 대한 해석은 전적으로 터미널 터미널의 양심에 맡겼습니다.
그러나 그 이후로 많은 것이 바뀌었고 HTML 표준은 원래의 조화를 잃었습니다. 초기에 Netscape는 표시되는 정보의 모양을 보다 효과적으로 제어할 수 있는 "향상된 태그"를 추가했습니다. 혁신이 이어지면서 모든 Netscape 확장은 사실상의 표준이 되었습니다. 그런 다음 Microsoft도 똑같이했습니다. 그들이 그것을 깨달았을 때 HTML은 논리적 태그와 디자인 태그, 호환되지 않는 확장의 끔찍한 혼합이었고 정보 출력 특성에 관계없이 모든 장치에 정보를 표시한다는 원래 개념과 완전히 일치하지 않았습니다.
그 후 대규모 표준화가 이루어졌습니다. 그 결과 HTML 3.2 표준이 탄생했습니다. 혁명적이지는 않았지만 모든 혁신을 적용하고 브라우저 제조업체를 위한 일반적인 권장 사항을 개발했습니다. 새로운 표준인 HTML 4.0 또는 동적 HTML이라고 불리는 혁명적인 변화가 도입되었습니다. 레이어, 스타일 시트 및 범용 브라우저 개체 모델이 도입되었습니다.
새로운 표준은 HTML 개념의 근원으로 돌아가려고 노력했습니다. 네 번째 버전은 첫 번째 버전과 마찬가지로 21인치 모니터든 작은 흑백 휴대폰 화면이든 모든 장치에서 재생할 수 있는 방식으로 페이지를 생성할 것을 권장합니다.
정보의 모습을 표현하는 문제는 어떻게 해결되었나요? 여기에 혁명적 접근 방식이 있습니다. 모든 디자인을 외부 스타일 파일에 넣는 것이 좋습니다. 메인 페이지에는 필요한 스타일에 대한 정보와 링크만 포함됩니다.
특정 장치에 페이지를 표시할 때 적절한 스타일 시트를 사용해야 합니다. 물론 휴대폰과 컴퓨터 모니터는 서로 달라야 합니다. 첫 번째 경우에는 최소한의 디자인을 사용하여 가장 최적이고 간결한 방식으로 정보를 제공할 수 있습니다. 두 번째 경우에는 다양한 글꼴과 색상 디자인을 마음대로 사용할 수 있습니다.
스타일 시트는 정보가 표시될 각 장치에 대한 사이트를 생성할 때 한 번만 작성하면 됩니다. 또한 스타일 시트는 전체 사이트에 대해 동일할 수 있습니다. 따라서 각 페이지에서 동일한 스타일 설명을 반복할 필요가 없습니다.
모든 스타일 정보를 하나의 외부 파일에 배치하면 우리에게 또 다른 유용한 기회가 열립니다. 결국 단 하나의 스타일 파일(!)의 내용을 변경하면 전체 사이트 디자인을 몇 초 만에 변경할 수 있습니다. 또한 다른 수정이 필요하지 않습니다. 물론 이는 사이트가 원래 올바르게 설계된 경우에만 해당됩니다.
이론에 대해 조금 이해한 후 실습으로 넘어가 스타일 시트를 HTML 파일에 연결하는 문제부터 시작하겠습니다.
스타일 시트 연결
이 작업을 수행하기 위해 제안된 3가지 방법 중 하나를 사용할 수 있습니다.외부 파일
헤더 섹션의 설명
인라인 설명
인라인 설명 또는 태그에 내장된 설명을 사용하여 가장 간단한 것부터 시작해 보겠습니다.
이 텍스트는 스타일에 의해 재정의됩니다.
추가 스타일 속성을 사용하면 모든 태그에 필요한 스타일 매개변수를 정의할 수 있습니다. 이것이 가장 쉬운 방법이며 하나의 태그 내에서만 작동합니다. 하지만 파일 크기가 얼마나 커지는지, 태그별로 스타일을 지정하면 수정하는 것이 얼마나 불편할지 상상해 보세요. 이 방법은 예를 들어 태그를 이용하여 외관을 직접적으로 기술하는 것과 크게 다르지 않습니다.
필요한 모든 디자인 스타일을 미리 정의한 다음 이를 적절한 태그에 적용하는 것이 훨씬 더 편리합니다. 이것이 두 번째 방법이 될 것입니다 - 제목 섹션의 설명입니다. 그 효과는 전체 페이지로 확장됩니다. 스타일은 필요한 모든 디자인 매개변수가 정의된 목록인 클래스를 사용하여 정의됩니다.
이 방법을 사용하는 경우 스타일 설명을 헤더 섹션에 배치해야 합니다.
....
이제 이러한 스타일을 HTML 코드의 어느 곳에나 적용할 수 있습니다. 이를 위해 다음 구성이 사용됩니다.
이 텍스트는 헤더 스타일로 작성되었습니다.
이 텍스트는 빨간색으로 작성되었습니다.
보시다시피 모든 것이 그렇게 복잡하지 않습니다. 가장 중요한 것은 기본 원리를 이해하는 것입니다. 새 클래스를 정의하는 것 외에도 표준 태그를 재정의하는 기능도 있습니다. 예를 들어 태그
이제 태그로 묶인 모든 텍스트는 이 스타일에 정의된 대로 표시됩니다. 이는 매우 편리하며 스타일을 사용하도록 기존 페이지를 쉽게 조정할 수 있습니다. 또한 불필요한 클래스 속성이 없기 때문에 파일 크기가 다소 줄어듭니다.
마지막으로 세 번째 방법은 스타일 설명을 외부 파일로 전송하는 것입니다. 영향 범위는 설명이 포함된 모든 파일로 확장됩니다. 이 방법은 HTML 4.0의 개념과 가장 일치합니다. 사이트의 모양을 변경해야 하는 경우 이 파일 하나만 조정하면 충분합니다. 이전 방법과 비교해 보세요. 그 중 하나에서는 각 페이지의 설명을 변경해야 하고 다른 페이지에서는 훨씬 더 많은 설명을 변경해야 합니다. 물론 전혀 영감을 주지 않는 각 태그 옆에 있습니다.
외부 파일은 어떻게 삽입되나요? 먼저, 필요한 모든 클래스에 대한 설명이 포함된 스타일 파일(mystyle.css)이 생성됩니다.
헤더(텍스트 정렬: 가운데; 글꼴 크기: 27pt;)
.red (색상: 빨간색;)
p (텍스트 정렬: 중앙; 글꼴 크기: 12pt;)
....
....
가장 편리한 방법이며, 메인 스타일 시트로 사용하는 것을 권장합니다.
왜 "메인"이라고 말했나요? 실제로는 세 가지 방법을 모두 사용해야 하며, 여기서 스타일의 "계단식"이 작용하게 됩니다. 하지만 이에 대해서는 다음 시간에 이야기하겠습니다.
스타일 시트 사용에 대한 대화를 계속해 보겠습니다. 먼저 계단식 스타일을 살펴본 다음 구문을 검토하고 스타일을 만들 때 사용되는 가장 일반적인 매개 변수를 검토해 보겠습니다.
계단식 스타일
먼저 스타일을 계단식이라고 부르는 이유를 알아 보겠습니다. 친애하는 독자 여러분, 페이지에 스타일을 구현하는 방법을 다시 한 번 알려드리겠습니다.별도의 스타일 파일을 사용하고 태그를 사용하여 삽입
문서 헤더의 스타일 설명
스타일을 태그의 매개변수로 적용합니다.
계단식은 스타일을 재정의할 수 있음을 의미합니다. 위의 스타일 구현 방법 목록은 재정의 순서를 따릅니다. 다운스트림 메서드는 더 높은 메서드를 재정의할 수 있습니다.
예를 들어, 태그의 텍스트가 외부 스타일 파일에 정의되어 있습니다.
10포인트 폰트로 작성해야 합니다. 그러나 페이지 제목에 동일한 텍스트가 태그에 있음을 추가로 표시하는 경우
12포인트 글꼴로 작성해야 하며, 텍스트는 정확히 해당 크기로 표시됩니다. 페이지 헤더의 스타일이 외부 파일의 스타일을 재정의했습니다.
그것은 무엇을 위한 것입니까? 아 이거 정말 유용한 내용이군요. 이제 구체적인 예를 들어 보여 드리겠습니다. 페이지 헤더의 모든 링크에 대해 다음 스타일이 정의되어 있다고 가정해 보겠습니다.
따라서 하이퍼링크인 텍스트는 자동으로 빨간색으로 바뀌고 더 이상 밑줄이 그어지지 않습니다. 그래서 우리는 페이지 끝 부분에 저작권을 표시하기로 결정했지만, 주의가 집중되지 않도록 눈에 띄지 않게 표시했습니다. 그러나 그럼에도 불구하고 우리는 저작권도 링크가 되기를 원합니다. 페이지의 한 곳에서만 이 작업을 수행해야 하며 이를 위해 추가 클래스를 정의하는 것은 부적절합니다. 이 경우 계단식 스타일이 도움이 될 것입니다. 링크 색상을 로컬로 재정의하는 것으로 충분합니다.
저작권(C)
1998-2001 체리 디자인우리는 스타일 매개변수를 사용하여 이 작업을 수행했으며, 기억하는 것처럼 이 매개변수는 정의된 태그 내에서만 작동합니다. 이것이 바로 우리에게 필요한 것입니다.
위의 예에서 제가 새 태그를 도입했다는 사실을 눈치채셨을 것입니다. 이러한 경우를 위해 특별히 설계되었습니다. 그것이 하는 일은 스타일을 적용할 수 있는 영역을 정의하는 것뿐입니다. 이것은 매우 편리한 태그입니다. 왜냐하면... 태그와 달리 자체 앞이나 뒤에 불필요한 패딩(예: 빈 수직 공간)을 삽입하지 않습니다.
클래스를 사용하여 스타일을 정의하는 것이 어떤 태그에 더 좋나요? 대부분의 경우 다음 디자인 중 하나가 사용됩니다.
무엇
무엇
무엇꼬리표
비슷한 , 그러나 이전과 이후에 비트를 수행한다는 차이점만 있습니다(정확히). 그러나 페이지의 주요 내용을 입력하는 데 사용되는 텍스트 스타일은 태그를 재정의하는 것이 가장 좋습니다.
그리고 별도의 클래스를 정의하는 것이 아닙니다.
그리고 두 브라우저 모두에서 올바른 표시와 관련된 작은 추가 사항입니다. 웹 사이트 디자인에 테이블 레이아웃을 사용하는 경우 태그뿐만 아니라 기본 텍스트의 스타일도 결정해야 합니다.
, 왜냐하면 Netscape는 테이블 이전에 할당된 스타일 상속을 절대적으로 거부합니다.계단식 배열을 다루었으니 구문에 대해 이야기해 보겠습니다.
CSS 구문
각 클래스에 대한 설명은 다음과 같은 구성을 사용하여 수행됩니다.작게(글꼴 크기: 9pt; )
먼저, 클래스의 이름이 표시됩니다. 임의적일 수 있지만 여전히 의미 있는 이름을 지정하는 것이 좋습니다. 다음으로, 이 클래스에 필요한 모든 매개변수가 중괄호() 안에 나열됩니다. 매개변수는 세미콜론으로 서로 구분됩니다. 더 긴 설명을 사용한 또 다른 예는 다음과 같습니다.
작음( 글꼴 크기: 9pt; 색상: #eeeeee; 텍스트 정렬: center; )
두 구성 모두에서 클래스 이름을 점으로 시작하여 일반 클래스를 정의했습니다. 어떤 태그에도 적용할 수 있는 것입니다. 그리고 이는 다음 구성을 사용하여 수행됩니다.
보편적인 클래스가 있으므로 다른 클래스도 있을 수 있습니까? 그렇습니다. 소위 태그 클래스도 있습니다.
p.small (글꼴 크기: 9pt; )
이런 방식으로 정의된 클래스는 의도한 태그에서만 작동하며 다른 모든 클래스에서는 무시됩니다.
이 텍스트는 작은 스타일로 표시됩니다.
하나의 태그뿐만 아니라 여러 태그에 대해서도 동시에 매개변수를 정의할 수 있습니다. 이렇게 하려면 스타일 정의에서 쉼표로 구분하여 나열하면 충분합니다.
p, td (글꼴 크기: 9pt; 색상: 녹색;)
이 기술을 그룹화라고 하며 이 경우 다음과 같이 정의했습니다.
텍스트 크기와 색상이 동일합니다.기존 태그를 재정의하는 경우 스타일 설명에 모든 매개변수를 지정할 수는 없고 변경하려는 매개변수만 지정할 수 있습니다. 다른 모든 매개변수는 태그마다 다른 기본값을 사용합니다.
의사 클래스
CSS에는 의사 클래스(pseudo-class)라는 것이 있습니다. 일반 클래스와 달리 의사 클래스의 효과는 이 스타일이 적용된 텍스트 전체에 적용되지 않고 일부에만 적용되며 특정 상태에서만 가능합니다. 좀 더 명확하게 설명하기 위해 링크 위로 마우스를 가져갈 때만 밑줄이 그어지는 효과를 살펴보겠습니다. 그 효과는 매우 일반적이며 이 사이트에서도 관찰할 수 있습니다. 다음은 위에서 설명한 효과를 얻을 수 있는 스타일 시트의 일부입니다.a (텍스트 장식: 없음; )
a:hover ( 텍스트 장식: 밑줄; )맨 윗줄은 표준 태그를 재정의합니다. , 이는 링크에 밑줄이 그어지는 것을 금지하지만 맨 아래에 있는 것은 커서가 위에 있을 때 링크의 스타일을 설명하는 hover 의사 클래스에 대한 스타일 정의입니다.
그리고 여기에 의사 클래스의 또 다른 예가 있습니다. 단락 시작 부분에 첫 문자 장식을 정의하는 것입니다.
p:첫 글자( 글꼴 크기: 200%; 글꼴 두께: 굵게; )
두 경우 모두 스타일은 특정 상태(사용자가 링크를 클릭하려고 함) 또는 텍스트 부분(단락의 첫 글자만 변경됨)에 영향을 미칩니다. 이것이 의사 클래스의 의미입니다.
계단식(다중 레벨) 스타일 시트 - 계단식 스타일 시트(CSS) 데이터가 브라우저에 표시되는 방식을 정의하는 강력한 텍스트 기반 형식 표준입니다. HTML이 문서 구성에 대한 정보를 제공하는 반면, 스타일 시트는 문서가 어떤 모습이어야 하는지 알려줍니다. 따라서 계단식 스타일 시트는 콘텐츠를 프레젠테이션과 별도로 저장할 수 있는 기능을 제공합니다. 스타일에는 글꼴, 배경, 텍스트, 링크 색상, 여백, 페이지의 개체 배치 등 모든 유형의 디자인 요소가 포함됩니다. CSS는 텍스트와 그래픽의 배치를 더 효과적으로 제어할 수 있도록 설계되었습니다. 계단식 스타일 시트는 사이트 개발 중에 HTML만으로는 불가능한 디자인, 구성 및 제어 수준의 일관성을 제공합니다.
CSS에는 인라인, 포함(내부), 링크(외부)의 3가지 유형의 스타일 시트가 있습니다.
CSS를 사용하여 HTML 문서의 형식을 지정한다는 아이디어는 1996년 W3C에서 처음 권장되었습니다. 1998년에 업데이트된 이 권장 사항은 오늘날에도 웹 개발자가 여전히 사용하고 있습니다.
그 단어는 무엇을 의미합니까? "종속"?"계단식"이라는 용어는 동일한 HTML 페이지 내에서 다양한 스타일을 사용할 수 있음을 의미합니다. 스타일시트를 지원하는 브라우저는 스타일시트 정보를 해석할 때 해당 순서(계단식)를 따릅니다. 즉, 세 가지 유형의 스타일을 모두 사용할 수 있으며 브라우저는 관련 스타일을 먼저 해석한 다음 삽입된 스타일, 마지막으로 인라인 스타일을 해석합니다. 전체 사이트에 샘플 스타일을 적용하더라도 인라인 스타일을 사용하여 페이지의 특정 측면을 제어하고 인라인 스타일을 사용하여 해당 페이지 내의 특정 영역을 제어할 수 있습니다. 캐스케이딩의 또 다른 측면은 상속(계승). 상속이란 달리 지정하지 않는 한 특정 스타일이 HTML 페이지의 다른 요소에 상속됨을 의미합니다. 예를 들어 태그에 특정 텍스트 색상을 적용하면 <р> 을 선택하면 달리 명시하지 않는 한 해당 단락 내의 모든 태그가 해당 색상을 상속합니다.
스타일 시트를 HTML 문서에 적용할 수 있는 방법에는 여러 가지가 있습니다. 구문은 스타일시트에 포함된 정보의 실제 구조를 따릅니다.
HTML 문서에 스타일 시트를 적용하는 방법에는 세 가지가 있습니다.
내장(인라인).이 방법을 사용하면 HTML 태그에 스타일을 추가할 수 있습니다. 내장된 방법을 사용하면 웹 페이지의 모든 속성을 최대한 제어할 수 있습니다. 단일 단락의 모양을 설정한다고 가정해 보겠습니다. 단락 태그에 스타일 속성을 추가하기만 하면 브라우저는 코드에 추가한 스타일 옵션을 사용하여 해당 단락을 렌더링합니다.
임베디드포함을 사용하면 전체 HTML 페이지를 제어할 수 있습니다. 태그를 사용하는 경우