웹디자인에 CSS를 활용하는 방법과 특징-CSS 튜토리얼-php.cn

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

　 W3C(The World Wide Web Consortium)는 동적 HTML(Dynamic HTML)을 세 부분으로 나누어 구현합니다: 스크립팅 언어(JavaScript, Vbscript 등 포함), 동적 효과를 지원하는 브라우저(Internet Explorer 포함, Netscape Navigator 등) 및 CSS 스타일 시트.

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

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

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

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

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

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

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

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

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

　706ab72be934508039af744476e9cfaf웹 페이지 콘텐츠1f4adad8210bcff33d697ff6d5b62570

　예:

　　83432e8e44e923ecf24ddc7319e96336CSS 예시6fb279ad3fd4344cbdd93aac6ad173ac

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

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

다음은 인용문입니다: 　

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

　　type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“3715a918f7df294094b5b00e68d9f0a0”。

　　3、链接样式表

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

以下是引用片段：　　

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

　　*.css是单独保存的样式表文件，其中不能包含6c1d9d1c5e7690ed0ad94b24a12b6eb7标识符，并且只能以css为后缀。

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

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

　　·Print:输出到打印机

　　·TV:输出到电视机

　　·Projection:输出到投影仪

　　·Aural:输出到扬声器

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

　　·Tty:输出到电传打字机

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

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

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

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

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

　　4、联合使用样式表

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

以下是引用片段：　　

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

　　以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

　　需要注意的是:

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

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

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

위 내용은 웹디자인에 CSS를 활용하는 방법과 특징의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!