Heim > Artikel > Web-Frontend > Welche Arten von CSS-Stilen gibt es? Zusammenfassung der drei Methoden des CSS-Stylesheets (mit Code)

Welche Arten von CSS-Stilen gibt es? Zusammenfassung der drei Methoden des CSS-Stylesheets (mit Code)

不言Original: 2018-08-02 16:52:098691Durchsuche

Welche Arten von CSS-Stilen gibt es? Die Formen der CSS-Codeeinfügung können grundsätzlich in die folgenden drei Typen unterteilt werden: Inline, eingebettet und extern. Ihre Priorität ist: Inline > Spezifischer Inhalt und Code der drei CSS-Stiltypen.

Hinweis: Eingebettet>Der externe Stil hat eine Prämisse: Die Position des eingebetteten CSS-Stils muss hinter dem externen Stil liegen. Im richtigen Code-Editor steht beispielsweise der Code f87a5964fcebb93d98ebca11ba9d357b vor dem Code 080b747a20f9163200dd0a7d304ba388...23c171ac647252ae4dea0469ea7c573a531ac245ce3e4fe3d50054a55f265927-Tags. Der folgende Code setzt beispielsweise den Text in den drei 45a2772a6b6107b401db3c9b82c049c2-Tags auf Rot:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

Der eingebettete CSS-Stil muss zwischen c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 geschrieben werden und wird im Allgemeinen eingebettet Der CSS-Stil wird zwischen 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 geschrieben. Wie zum Beispiel der Code im Editor rechts.

<style type="text/css">
span{
color:red;
}
</style>

3. Externer CSS-Stil (auch externer Stil genannt) ist das Schreiben des CSS-Codes in eine separate externe Datei hat „“ als Erweiterung und das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag wird innerhalb des 93f0f5c25f18dab9d176bd4f6de5d30e-Tags (nicht innerhalb des c9ccee2e6ea535a969eb3f532ad9fe89-Tags) verwendet, um die CSS-Stildatei mit der HTML-Datei zu verknüpfen, wie in der Abbildung gezeigt Folgender Code:

15eade7e080fad912a1efb1e436802dc

bfd7070c6914dc1f0b7b088cfc0e92b4Hinweis:

1. Die CSS-Stildatei wird mit aussagekräftigen englischen Buchstaben benannt, z. B. main.css.

2. rel="stylesheet" type="text/css" ist eine feste Schreibmethode, die nicht geändert werden kann.

3. Die Position des 2cdf5bf648cf2f33323966d7f58a7f3f

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</html>

style.css

<!DOCTYPE HTML>
<html>
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

Empfohlene verwandte Artikel:

CSS-Faltstil (1) - CSS-Stil Drei verwenden Möglichkeiten

HTML-CSS-Stylesheet

Priorität von Stilen im CSS-Stylesheet

Das obige ist der detaillierte Inhalt vonWelche Arten von CSS-Stilen gibt es? Zusammenfassung der drei Methoden des CSS-Stylesheets (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html href 样式表

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was sind die CSS-Layoutmethoden? Zusammenfassung der CSS-LayoutmethodenNächster Artikel：Was sind die CSS-Layoutmethoden? Zusammenfassung der CSS-Layoutmethoden

In Verbindung stehende Artikel

Mehr sehen