Wie man CSS im Webdesign verwendet und welche Eigenschaften es hat

Einführung in CSS-Funktionen für Anfänger und wie man bereits festgelegtes CSS in Webseiten verwendet.

W3C (The World Wide Web Consortium) unterteilt dynamisches HTML (Dynamic HTML) in drei zu implementierende Teile: Skriptsprache (einschließlich JavaScript, Vbscript, usw.), Browser, die dynamische Effekte unterstützen (einschließlich Internet Explorer, Netscape Navigator usw.) und CSS-Stylesheets.

　Eigenschaften von Cascading Style Sheets

Ganz zu schweigen davon, dass es den Webseiten in der Vergangenheit selbst im Layout an Dynamik mangelte Der Webinhalt ist mit vielen Schwierigkeiten verbunden. Wenn Sie kein Fachmann oder besonders geduldig sind, ist es schwierig, die Anzeige von Informationen auf der Webseite nach Ihren eigenen Vorstellungen und Ihrer Kreativität zu gestalten. Selbst diejenigen, die das Wesentliche der HTML-Sprache beherrschen, müssen viele Tests bestehen, bevor sie das Layout dieser Informationen beherrschen. Der Prozess ist sehr langwierig und mühsam.

Das Stylesheet wurde unter dieser Forderung geboren. Das erste, was es tun muss, ist, die Elemente auf der Webseite genau zu positionieren, damit der Webdesigner sie wie ein Regisseur leicht steuern kann . Die aus Worten und Bildern zusammengesetzten Schauspieler agieren entsprechend dem Drehbuch auf der Bühne der Webseite.

Zweitens trennt es die Inhaltsstruktur und die Formatsteuerung auf der Webseite. Was der Betrachter sehen möchte, ist die Inhaltsstruktur auf der Webseite. Damit der Betrachter diese Informationen besser erkennen kann, muss die Formatkontrolle hilfreich sein. In der Vergangenheit war die Verteilung der beiden auf der Webseite gestaffelt und kombiniert, was beim Anzeigen und Ändern sehr umständlich war. Jetzt wird die Trennung der beiden Webdesignern eine große Erleichterung sein. Die Inhaltsstruktur und die Formatsteuerung sind getrennt, sodass eine Webseite ausschließlich aus Inhalten bestehen kann und die Formatsteuerung aller Webseiten an eine bestimmte CSS-Stylesheet-Datei gerichtet ist. Dies ist in zweierlei Hinsicht von Vorteil:

Erstens wird der Formatcode der Webseite vereinfacht und das externe Stylesheet wird auch vom Browser im Cache gespeichert, was die Geschwindigkeit beschleunigt Die Geschwindigkeit beim Herunterladen reduziert auch die Menge an Code, die hochgeladen werden muss (da wiederholte Formate nur einmal gespeichert werden).

Zweitens können Sie den Stil und die Eigenschaften der gesamten Website ändern, indem Sie einfach die CSS-Stylesheet-Datei ändern, in der das Website-Format gespeichert ist. Dies ist besonders nützlich, wenn Sie eine Website mit einem großen Format ändern Anzahl der Seiten. Dadurch wird vermieden, dass Webseiten einzeln geändert werden müssen, wodurch die Arbeitsbelastung durch wiederholte Arbeiten erheblich reduziert wird

　So fügen Sie kaskadierende Stylesheets hinzu

Es gibt vier Möglichkeiten, Stylesheets zu Webseiten hinzuzufügen:

　1. Die einfachste Methode besteht darin, es direkt zur HTML-Kennung (Tag) hinzuzufügen:

　7d7a9c924936b34fa540ae0d7c484f3dWebseiteninhalt1f4adad8210bcff33d697ff6d5b62570

Zum Beispiel:

　bf5846d60b5a75b2f295cc56c692cc27CSS-Beispiel6fb279ad3fd4344cbdd93aac6ad173ac

Codebeschreibung:Zeigen Sie „CSS-Beispiel“ in Blau mit einer Schriftgröße von 10pt an. Obwohl es einfach zu verwenden und intuitiv anzuzeigen ist, wird diese Methode nicht häufig verwendet, da ein solcher Zusatz die Vorteile des Stylesheets „Inhaltsstruktur und Formatsteuerung werden separat gespeichert“ nicht vollständig nutzen kann.

　2. Fügen Sie es zur HTML-Header-Informationskennung 93f0f5c25f18dab9d176bd4f6de5d30e hinzu:

Das Folgende ist ein Zitat: 　

< 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开头。

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

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

Das obige ist der detaillierte Inhalt vonWie man CSS im Webdesign verwendet und welche Eigenschaften es hat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!