Erklärung der CSS-Stilklassen (mit Beispielen)

Dieser Artikel enthält eine Erklärung der CSS-Stilklassen (mit Beispielen). Freunde in Not können darauf verweisen.

CSS-Übersicht

CSS bezieht sich auf Cascading Style Sheets
Stile definieren, wie HTML-Elemente angezeigt werden
Stile werden normalerweise in Stilen gespeichert
Stile werden in der Tabelle zu HTML 4.0 hinzugefügt, um das Problem der Trennung von Inhalt und Präsentation zu lösen
Externe Stylesheets können die Arbeitseffizienz erheblich verbessern
Externe Stylesheets werden normalerweise in CSS-Dateien gespeichert
Viele Stildefinitionen können in ein

HTML-Tag kaskadiert werden soll, wurde ursprünglich zur Definition von Dokumentinhalten entwickelt. Durch die Verwendung von Tags wie

,

, bestand die ursprüngliche Absicht von HTML darin, Informationen wie „Dies ist ein Titel“, „Dies ist ein Absatz“, „Dies ist eine Tabelle“ auszudrücken. . Gleichzeitig wird das Dokumentlayout vom Browser vervollständigt, ohne dass Formatierungs-Tags verwendet werden.

Alle gängigen Browser unterstützen Cascading Style Sheets

Verständnis von div und span

1. div ist ein HTML-Tag, ein Block -Level-Element (zeigt nur eine Zeile an), hat bei alleiniger Verwendung keine Bedeutung und muss in Verbindung mit CSS verwendet werden. Es wird hauptsächlich für das Seitenlayout verwendet HTML-Tag, ein inneres verknüpftes Element (zeigt eine Zeile an), hat bei alleiniger Verwendung keine Bedeutung und muss in Kombination mit CSS verwendet werden, hauptsächlich um den Stil des eingeschlossenen Inhalts zu ändern

2. <p></p>Klassenselektor

Bevor Sie den Klassenselektor verwenden, müssen Sie das Jahrhundertdokument markieren, damit der Klassenselektor funktionieren kann.

.name{text-align:center}

Wählen Sie später im Dokument explizit den spezifischen Fall für dieses Tag aus, indem Sie das mit dem Stil verknüpfte „Klasse“-Attribut einschließen und einen der vordefinierten Stile als „Name“-Wert angeben. Welcher Stil verwendet werden soll

<p></p>

rrree<p></p> <p></p>

ID-Selektor

ID-Selektor ähnelt Klassenselektor, ID-Selektoren wird ein vorangestellt #-Zeichen – auch Schachbrettzahl oder Nummernzeichen genannt. Wie bei Klassenselektoren können Platzhalterselektoren in ID-Selektoren ignoriert werden. ID ist eine eindeutige Kennung und kann nur einmal verwendet werden

nbsp;html>


    <meta>
    <title>类选择器</title>
    <style>
        .sheen{font-size: large;color: salmon}
    </style>


<div>
    Sie sprechen gut Deutsch.
</div>
<div>
    Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
    Nein,ich studiere.
</div>

Tag-Selektor

nbsp;html>


    <meta>
    <title>ID选择器</title>
    <style>
        #sheen{font-size: x-large;color: rosybrown}
        #star{font-size: large;color: #c0ffff}
        #clotho{font-size: xx-large;color: darkgreen}
    </style>


    <div>
        Sheen:Sie sprechen gut Deutsch.
    </div>
    <div>
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    </div>
    <div>
        Clotho:Nein,ich studiere.
    </div>

Legen Sie den Linkstil fest

Es gibt viele CSS-Eigenschaften, die den Linkstil festlegen können (z. B. Farbe, Schriftart- Familie, Herkunft usw.). Das Besondere an Links ist die Möglichkeit, sie basierend auf ihrem Status zu gestalten. Vier Zustände von Links:

a:link – gewöhnlicher, nicht besuchter Link

a:visited – Link, den der Benutzer besucht hat
a:hover – der Mauszeiger befindet sich über dem Link
a :aktiv – Der Moment, in dem auf den Link geklickt wird


Einführung des CSS-Stils

Einführungsmethode: 1). ="inline eingeführter Stil">

2). Interne Einführung: Der im Style-Tag im Head-Tag geschriebene Stil;

3). Externe Einführung: Trennen Sie den CSS-Stil in eine Datei über Verknüpft mit der aktuellen HTML-Datei.

Priorität der drei Einführungsmethoden: Proximity-Prinzip

nbsp;html>


    <meta>
    <title>标签选择器</title>
    <style>
        div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

    </style>


<h3>使用CSS</h3>
<div>
    类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>

//CSS文件
div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

<p></p>

Das obige ist der detaillierte Inhalt vonErklärung der CSS-Stilklassen (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!