So verwenden Sie CSS

CSS (Cascading Style Sheets) ist eine Sprache, die Webseiten Stil, Layout und Design verleihen kann. CSS ist eine sehr beliebte Programmiersprache, die Webseiten verschiedene Erscheinungsbilder und Funktionen hinzufügen kann, z. B. Schriftarten, Farben, Abstände, Hintergründe, Animationen usw. In diesem Artikel befassen wir uns ausführlich mit der Verwendung von CSS, damit Sie es während der Webentwicklung besser beherrschen können.

1. So führen Sie CSS ein

Bevor Sie CSS lernen, müssen Sie zunächst verstehen, wie Sie CSS in Ihre HTML-Datei einführen. CSS-Stylesheets können auf drei verschiedene Arten eingeführt werden:

1. Inline-Stylesheets

Inline-Stylesheets werden durch die Verwendung von Stilattributen in Tags definiert. In einer HTML-Datei könnten Sie beispielsweise Folgendes schreiben:

93dfe5a74cfae0d72312ce80a39081e1Dies ist ein Absatz mit einem Inline-Stylesheet. 94b3e26ee717c64999d7867364b1b4a3

2. Internes Stylesheet

Definieren Sie ein internes Stylesheet, indem Sie das Tag c9ccee2e6ea535a969eb3f532ad9fe89 in der HTML-Datei verwenden. Zum Beispiel: c9ccee2e6ea535a969eb3f532ad9fe89 标签来定义内部样式表。例如：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一个内部样式表的标题</h1>
<p>这是一个带有内部样式表的段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

3.外部样式表

通过使用 2cdf5bf648cf2f33323966d7f58a7f3f

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表</title>
<link rel="stylesheet" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一个外部样式表的标题</h1>
<p>这是一个带有外部样式表的段落。</p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

3. Externes Stylesheet

Verknüpfen Sie ein externes Stylesheet in einer HTML-Datei mit dem Tag 2cdf5bf648cf2f33323966d7f58a7f3f. Zum Beispiel:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

color: red;
font-size: 32px;

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<title>类选择器</title>
<style>
    .selected {
        background-color: red;
        color: white;
    }
</style>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Hinweis: Bei Verwendung eines externen Stylesheets muss sich die verknüpfte Stylesheet-Datei im selben Verzeichnis wie die HTML-Datei befinden und die Dateierweiterung muss .css sein.

2. CSS-Syntax

Die CSS-Syntax ist sehr einfach und besteht hauptsächlich aus folgenden Teilen:

1. Selektor

Der Selektor wird verwendet, um das HTML-Element anzugeben, auf das der Stil angewendet werden soll. Der folgende Code gibt beispielsweise einen Stil für das ausgewählte Überschriftenelement an:

h1 {

<p class="selected">这个段落被选中了。</p>
<p>这个段落没有被选中。</p>
<p class="selected">这个段落也被选中了。</p>

}

2 Attribute Das

-Attribut wird verwendet, um den Typ des anzuwendenden Stils anzugeben. Die folgenden Attribute geben beispielsweise die Farbe und Schriftgröße des Titelelements an:

font-size: 32px

value gibt den spezifischen Wert des Attributs an. Der folgende Code gibt beispielsweise eine Schriftgröße von 32 Pixeln für das Titelelement an:

font-size: 32px;

Hinweis: CSS-Eigenschaften sind nicht auf diese beschränkt, es gibt viele andere für mehr CSS-Stilkontrolle.

3. Allgemeine CSS-Stilattribute

Die folgenden sind einige allgemeine CSS-Stilattribute, die Sie beim Anwenden von Stilen verwenden können:

1. Hintergrundfarbe (Hintergrundfarbe)

Das Attribut „Hintergrundfarbe“ wird zur Angabe von Elementen verwendet Hintergrundfarbe. Zum Beispiel:

background-color: red;

2. Schriftfarbe (Farbe) Das Attribut

color wird verwendet, um die Schriftfarbe des Elements anzugeben. Beispiel:

Farbe: weiß;

3. Textausrichtung (text-align) Das Attribut

text-align wird verwendet, um die Ausrichtung von Text in einem Element anzugeben. Zum Beispiel:

text-align: center;

4. Schriftgröße (font-size) Das Attribut

font-size wird verwendet, um die Größe der Schriftart des Elements anzugeben. Zum Beispiel:

Schriftgröße: 20px;

5. Rand (Rand)

Durch Hinzufügen des Randattributs können Sie dem Element einen Rand hinzufügen. Zum Beispiel:

Rahmen: 1 Pixel einfarbig schwarz;

Hinweis: Der Wert des Rahmenattributs umfasst: Rahmenbreite, Rahmenstil und Rahmenfarbe.

6. Breite (width)

Das width-Attribut wird verwendet, um die Breite des Elements anzugeben. Zum Beispiel:

width: 50 %;

7. Höhe (Höhe) Das Attribut

height wird verwendet, um die Höhe des Elements anzugeben. Zum Beispiel:

height: 100px;

8. Padding (Auffüllung) Das

padding-Attribut wird verwendet, um die Auffüllung eines Elements anzugeben. Zum Beispiel:

padding: 10px;

9. Rand (margin) Das

margin-Attribut wird verwendet, um den Rand eines Elements anzugeben. Zum Beispiel:

margin: 10px;

4. CSS-Selektoren

Zusätzlich zu den oben genannten grundlegenden Stilattributen gibt es viele verschiedene Selektortypen, die Ihnen helfen können, Ihren Stil zu verfeinern. Im Folgenden sind einige der gebräuchlichsten Selektoren aufgeführt:

1. Klassenselektor (Klassenselektor)

Der Klassenselektor wird verwendet, um Elemente mit demselben Klassennamen auszuwählen. Zum Beispiel:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>标签选择器</title>
<style>
    p {
        color: red;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

2.Tag-Selektor (Tag-Selektor)

Tag-Selektor wird verwendet, um alle Elemente mit demselben Tag-Namen auszuwählen. Zum Beispiel:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>id 选择器</title>
<style>
    #header {
        color: red;
        font-size: 24px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1 id="header">这是顶部标题</h1>
<p>这是一个段落。</p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

3 .id-Selektor (ID-Selektor)

Der ID-Selektor wird verwendet, um eindeutige Elemente mit einer angegebenen ID auszuwählen. Zum Beispiel:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1🎜93f0f5c25f18dab9d176bd4f6de5d30e🎜

<title>继承性</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

🎜9c3bca370b5104690d9ef395f2c5f8d1🎜6c04bd5ca3fcae76e30b72ad730ca86d🎜

<h1>这是标题1</h1>
<p>这是一个段落。</p>
<h2>这是标题2</h2>
<p>这是另一个段落。</p>

🎜36cc49f0c466276486e50c850b7e4956🎜73a6ac4ed44ffec12cee46588e518a5e🎜🎜 Viertens, CSS-Vererbung🎜

CSS 样式是可以从父元素继承到子元素的。例如，如果在 body 元素上应用了一个背景颜色，那么所有的子元素（如段落、标题等）都将继承该背景颜色。例如：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>继承性</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是标题1</h1>
<p>这是一个段落。</p>
<h2>这是标题2</h2>
<p>这是另一个段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

五、CSS的优先级

当多个样式应用到同一元素上时，CSS 样式有许多不同的规则来决定哪些样式结合在一起。以下是一些有关优先级的规则：

1.行内样式表的优先级最高

如果在元素上应用行内样式表，则行内样式表的样式将优先于内部或外部样式表。

2.选择器特殊性

如果选择器特殊性相同，则会根据选择器的出现位置决定优先级。例如，内部样式表的样式比外部样式表的样式更优先。

3.样式继承

当两个或多个样式同时应用于一个元素，且它们都是通过继承方式获得的，则优先选取本身的样式。

4.重载样式

如果两个样式在元素上应用，但具有相同的选择器和特殊性，则最后应用的样式将优先于其他样式。

六、总结

在本文中，我们已经深入了解了 CSS 的使用方法，包括引入样式表、基本 CSS 语法、常见样式属性、选择器、继承性和优先级。这些基本的 CSS 知识应该对您在网页开发中的样式和布局决策有所帮助。随着您的使用和实践，您会发现更多的 CSS 功能和方法，以及如何利用它们来创造出更好的网页设计。

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!