웹디자인에 CSS를 활용하는 방법과 특징

　초보자를 위한 CSS 기능을 소개하고 웹 페이지에서 이미 설정된 CSS를 사용하는 방법을 소개합니다.

　　캐스케이딩 스타일 시트의 특징

과거 웹 페이지의 역동성이 부족했던 것은 말할 것도 없고, 전문가나 인내심이 없는 사람이라면 웹 콘텐츠 레이아웃에도 어려움이 많습니다. 사람이라면 자신의 생각과 창의성에 따라 정보를 표시하는 웹 페이지를 만드는 것이 어렵습니다. HTML 언어의 본질을 마스터한 사람이라도 이 정보의 레이아웃을 마스터하려면 많은 테스트를 통과해야 합니다. 그 과정은 매우 길고 고통스럽습니다.

스타일 시트는 이러한 요구에 따라 탄생했습니다. 가장 먼저 해야 할 일은 웹 디자이너가 텍스트와 그림으로 구성된 배우를 감독처럼 쉽게 제어할 수 있도록 웹 페이지에 요소를 정확하게 배치하는 것입니다. 웹 페이지 단계의 스크립트 요구 사항에 따라.

둘째, 웹페이지의 콘텐츠 구조와 형식 제어를 분리합니다. 시청자가 보고 싶어하는 것은 웹 페이지의 콘텐츠 구조이며, 시청자가 이 정보를 더 잘 볼 수 있도록 하려면 형식 제어를 활용해야 합니다. 예전에는 웹페이지에서 두 가지를 엇갈리게 배치해 결합해 보거나 수정하는 것이 매우 불편했습니다. 이제는 두 가지를 분리하면 웹 디자이너가 훨씬 편리해집니다. 콘텐츠 구조와 형식 제어가 분리되어 웹페이지는 콘텐츠만으로 구성될 수 있으며, 모든 웹페이지의 형식 제어는 특정 CSS 스타일 시트 파일로 지정됩니다. 이는 두 가지 측면에서 유익합니다:

첫째, 웹 페이지의 형식 코드가 단순화되었습니다. 외부 스타일 시트도 브라우저에 의해 캐시에 저장되어 다운로드 및 표시 속도가 빨라지고 업로드해야 하는 코드 수(반복되는 형식은 한 번만 저장되므로).

둘째, 웹사이트 형식을 저장하는 CSS 스타일 시트 파일을 수정하는 것만으로도 사이트 전체의 스타일과 특성이 바뀔 수 있는데, 이는 페이지 수가 많은 사이트를 수정할 때 특히 유용합니다. 웹 페이지를 하나씩 수정하는 것을 방지하고 반복 작업의 작업량을 크게 줄여줍니다

　　캐스케이딩 스타일 시트를 추가하는 방법

　웹 페이지에 스타일 시트를 추가하는 네 가지 방법이 있습니다:

1.가장 쉬운 방법은 HTML 식별자(태그)에 직접 추가하는 것입니다:

　< 태그 스타일=”속성”>웹 페이지 콘텐츠< /tag>

　예:

　　< p style=”color: blue; 글꼴 크기: 10pt”>CSS 예시< /p>

　 코드 설명: 글꼴 크기가 10pt인 "CSS 인스턴스"를 파란색으로 표시합니다. 사용이 간단하고 표시가 직관적이지만 이러한 추가는 "콘텐츠 구조와 형식 제어가 별도로 저장됩니다"라는 스타일 시트의 장점을 충분히 활용할 수 없기 때문에 일반적으로 사용되지 않습니다.

　 2. HTML 헤더 정보 식별자 < head>에 추가합니다:

< head> 
　　< style type=”text/css”> 
　　< !-- 样式表的具体内容 --> 
　　< /style> 
　　< /head>

　　3、链接样式表

　　同样是添加在HTML的头信息标识符< head>里:

< head> 
　　< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”> 
　　< /head>

　　Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围:

　　·Screen(默认):输出到电脑屏幕

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

　　·Braille:输出到凸字触觉感知设备

　　·Tty:输出到电传打字机

　　·All:输出到以上所有设备

　　如果要输出到多种媒体，可以用逗号分隔取值表。

　　Rel属性表示样式表将以何种方式与HTML文档结合。取值范围:

　　·Stylesheet:指定一个外部的样式表

　　·Alternate stylesheet:指定使用一个交互样式表

　　4、联合使用样式表

　　同样是添加在HTML的头信息标识符< head>里:

< head> 
　　< style type=”text/css”> 
　　< !-- 
　　@import “*.css” 
　　其他样式表的声明 
　　--> 
　　< /style> 
　　< /head>

　　需要注意的是:

　　·联合法输入样式表必须以@import开头。

　　·如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版。

　　·如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。