Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Klassifizierung von CSS-Stilen

1. Interner Stil ---- Inline-Stil

Verwenden des Style-Tags

<style type="text/css">
/* Stil */
</Stil>

Lernen Sie noch einen Trick: Schreiben Sie den allgemeinen Stil der Seite (wenn es nicht viele gibt) in das Style-Tag

2. Inline-Stile

Schreiben Sie es direkt in das Style-Attribut auf dem Tag

<div Stil="Farbe:rot;">
    Ich bin eine Kiste</div>

Lernen Sie noch einen Trick: Wird normalerweise von Backend-Programmierern verwendet, um die Seite zu ändern

3. Äußerer Stil

Erstellen Sie eine neue CSS-Datei und verknüpfen Sie sie mit der HTML-Seite

a) Tag-Zuordnung verwenden

<!-- Im Head-Tag des HTML -->
<link rel="stylesheet" type="text/css" href="css-Dateipfad">

b) Anweisungsassoziation verwenden

<style type="text/css">
/* Im Style-Tag */
    @import url("CSS-Dateipfad")
</Stil>

Lernen Sie noch einen Trick: Der am häufigsten verwendete externe Stil und Link-Tag in Projekten

Zusammenfassung der drei Stylesheets

Wissenspunktergänzung: CSS-Stilklassifizierung

CSS-Stile können in drei Kategorien unterteilt werden: Inline-Stile, interne Stylesheets und externe Stylesheets

1. Inline-Stil (der Stil wird in das HTML-Tag geschrieben und wirkt sich nur auf den Inhalt des Tags aus)

Hallo Welt!

2. Interner Stil (der Stil wird zwischen die Head-Tags des HTML geschrieben und wirkt sich nur auf den Inhalt des HTML aus)

<html>
    <Kopf>  
    <Titel></Titel>
    <style type="text/css">
    Textkörper {Schriftgröße: 12px}    
    </Stil>
    </Kopf>
    <Körper></Körper>
</html>

3. Externer Stil (Stilverweis wird zwischen die Head-Tags geschrieben und wirkt sich auf die Webseite aus, die auf die CSS-Datei verweist)

<html>
    <Kopf>  
    <Titel></Titel>
    <link href="common.css" rel="stylesheet" type="text/css"> 
    </Kopf>
    <Körper></Körper>
</html>

Im CSS-Stil steht # für den ID-Selektor und . für den Klassenselektor.

<div Klasse="Schriftart"></div>

<div id="top"></div> In HTML darf die ID nicht wiederholt werden.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Einführung in die Klassifizierung von CSS-Stilen (Grundkenntnisse). Weitere relevante Inhalte zur Klassifizierung von CSS-Stilen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  So schreiben Sie den Einführungsinhalt der Infoseite der Website

>>:  HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen

Artikel empfehlen

js, um den Popup-Effekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Verwenden Sie Python, um mithilfe des Moduls pymysql eine Verbindung zur MySQL-Datenbank herzustellen

Installieren Sie pymysql pip install pymysql 2|0V...

Lösung zum automatischen Absenden des Formulars und Springen zu anderen Seiten nach Drücken der Eingabetaste auf der Webseite

Nach dem Drücken der Eingabetaste auf der Webseite...

MySQL verwendet Trigger, um das Zeilenlimit der Tabelle in der Datenbank zu lösen. Detaillierte Erklärung und Beispiele

MySQL verwendet Trigger, um das Zeilenlimit der T...

Installieren Sie JDK1.8 in einer Linux-Umgebung

Inhaltsverzeichnis 1. Installationsumgebung 2. In...

Erste Schritte mit der Konvertierung von Vue in React

Inhaltsverzeichnis Design Komponentenkommunikatio...

Zusammenfassung der Verwendung von JavaScript JSON.stringify()

Inhaltsverzeichnis 1. Nutzung 1. Grundlegende Ver...

Verschiedene Möglichkeiten zum Ändern der Hintergrundbildfarbe mit CSS3

CSS3 kann die Farbe von Bildern ändern. Ab sofort...

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

Installieren Sie ZLMediaKit auf centos6 Der Autor...

Standardmäßige Stilanordnung von HTML4.0-Elementen

Code kopieren Der Code lautet wie folgt: html, Ad...

Attribute und Verwendung von INS- und DEL-Tags

ins und del wurden in HTML 4.0 eingeführt, um Auto...

Tipps zur Verwendung von Frameset zum Zentrieren des Breitbilds

Code kopieren Der Code lautet wie folgt: <fram...

So aktivieren Sie die schreibgeschützte Select-Unterstützung, wenn der Hintergrund bei festgelegtem deaktiviertem Attribut keine Daten lesen kann

Code kopieren Der Code lautet wie folgt: <span...

Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT

In einer Tabelle können Sie die Farbe des oberen ...

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Inhaltsverzeichnis Einführung in utf8mb4 Fehler b...