Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche Rolle spielen CSS-Stile in HTML?
Welche Rolle spielen CSS-Stile in HTML?
- 藏色散人Original
- 2023-02-02 10:31:272530Durchsuche
Die Funktion des CSS-Stils in HTML besteht darin, den Seiteninhalt und die Änderungseffekte separat zu verwalten. Über CSS können verschiedene Änderungseffekte für HTML-Tags hinzugefügt werden. Der resultierende Seiteneffekt ist relativ einfach, obwohl es Attribute gibt Modifikation, aber mehr Die Diversifizierung der Seiteneffekte erfordert immer noch die Hilfe von CSS-Stylesheets.
Welche Funktion hat der CSS-Stil in HTML?
Die Rolle des CSS-Stylesheets in HTML
1 Die Rolle des CSS-Stylesheets:
Bei HTML-Tags ist der resultierende Seiteneffekt relativ einfach mehr Die Diversifizierung von Seiteneffekten erfordert immer noch die Hilfe von CSS-Stylesheets. Durch die Verwendung von Stylesheets können Seiteninhalte und Änderungseffekte getrennt und verwaltet werden (HTML generiert Seiten und zugehörige Inhalte, und CSS wird zum Hinzufügen verschiedener Änderungseffekte verwendet).
2 Anwendung von CSS-Stylesheets 1 (internes Stylesheet): Put in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1
Format 1:
<style type="text/css">
选择器(关键词) {属性1:属性值1;属性2:属性值2...}
</style>font-size: Legen Sie die Schriftgröße fest
font-family: Legen Sie den Schriftstil fest
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微软雅黑";}
h3 {color: pink;}
</style>
</head>
<body>这是我的第一句话。
这是我的第二句话
这是我的第三句话
<h1>我是标题标签H1</h1>
<h2>我是标题标签H2</h2>
<h3>我是标题标签H3</h3>
</body>
</html>Format 2:
Many times, Some tags erfordern den gleichen Stileffekt, sodass Sie den Stil als gemeinsame Operation festlegen können. Solange das Tag ihn benötigt, können Sie direkt darauf verweisen.
<style type="text/css">
.类名 {属性1:属性值1;属性2:属性值2...}
</style>Tag-Referenz:
892e0901e003af7ebde40e8952eab92ab730fef05756e96f81aaf6bcd154b1e5
Frage: Wenn ein Tag sowohl Selektorstil-Verwendung als auch Klassenstil-Referenzen enthält, was war letztendlich das Ergebnis?
Die Attribute verschiedener Teile werden zusammengeführt. -Familie
| Schriftstil | Schriftstil (Stil) |
|---|---|
| Legen Sie die Farbe des Textes fest oder rufen Sie sie ab | |
| Text-align | |
| CSS-Stylesheet Einstellung des Hintergrundattributs: | Hintergrundfarbe: Hintergrundfarbe |
| Legen Sie die Kachelmethode des Hintergrundbilds fest: Hintergrundwiederholung: | Wiederholungs-X-Kachel entlang des X Achse |
| keine Wiederholung Verwenden Sie das tatsächliche Bild, um die Hintergrundposition einzunehmen | Wiederholen Sie, um die gesamte Seite abzudecken |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微软雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一个段落文字
我是第二个段落文字
我是斜体标签i
我是第二个斜体标签i
我是删除线标签del
</body>
</html>
3. Anwendung von CSS-Stylesheet 2 (Inline-Stylesheet)
3.1 Übersicht: Das Stylesheet wird nur geändert Auswirkung auf eine bestimmte Inhaltszeile oder den Stil. Die Tabelle ist in eine bestimmte Zeile (innerhalb eines bestimmten Tags) eingebettet. 3.2-Format: Behandeln Sie den Stil als Attribut.<开始标签 style="属性1:属性值1;属性2:属性值2..."></结束标签>. Ich bin der Inhalt des ersten Absatzes.
Ich bin Der Inhalt des zweiten Absatzes
Ich bin ein großer Tag-Inhalt
4. CSS-Stylesheet-Anwendung drei (externes Stylesheet)4.1 Übersicht: Die Deklaration des Stylesheets ist nicht mehr in der HTML-Datei verschachtelt, sondern in einer separaten CSS-Datei abgelegt. Im wahrsten Sinne des Wortes sind die HTML-Datei und die CSS-Datei unabhängig voneinander getrennt. Wenn die HTML-Datei Stile benötigt, verknüpfen Sie sie einfach.
4.2 Format: Erstellen Sie eine separate CSS-Datei, kopieren Sie den Inhalt in das Tag c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 und schreiben Sie die Stilanweisung direkt. Wie werden 4.3html-Dateien mit externen Stylesheets verknüpft? Sie sind alle in 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 platziert.
Methode 1:
<link href="写上引用的外部css文件" rel="stylesheet" type="text/css" /> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css</title> <link href="css/外部css.css" rel="stylesheet" type="text/css" /> </head> <body> 我是段落一 <h1 >我是标题标签h1</h1> <h2 class="test5">我是标题标签h2</h2> </body> </html>
Empfohlenes Lernen: „
css-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonWelche Rolle spielen CSS-Stile in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!