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

Beheben Sie das Problem, dass der Name des Dateiänderungsformulars vom Typ = Datei nicht normal wiedergegeben werden kann

Artikel

SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Beheben Sie das Problem, dass der Name des Dateiänderungsformulars vom Typ = Datei nicht normal wiedergegeben werden kann

SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

Grafisches Tutorial zur Installation von VMware15.5 und Ubuntu20.04

Win10 verwendet die Tsinghua-Quelle, um die PyTorch-GPU-Version schnell zu installieren (empfohlen)

Entwerfen Sie einen Datensammler mit Vue

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

CentOS7 verwendet RPM, um MySQL 5.7-Tutorialdiagramm zu installieren

Implementierung der Validierungsregel für Vue Element-ui-Formulare

Verwendung von Linux-Netzwerkkonfigurationstools

CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)

Artikel empfehlen

mysql + mybatis implementiert gespeicherte Prozedur + Transaktion + gleichzeitigen Mehrfachabruf von Seriennummern

So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen

Zusammenfassung der sieben MySQL JOIN-Typen

JavaScript imitiert den Jingdong-Karusselleffekt

Detaillierte Beschreibung der HTML-Tabellenrahmensteuerung

Mehrere Möglichkeiten zum Aktualisieren von Batches in MySQL

Windows Server 2008-Tutorial zur Überwachung der Serverleistung

Das Vue-Projekt implementiert einen grafischen Überprüfungscode

Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker

CSS - overflow:hidden in Projektbeispielen

Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)

MySQL vollständig deinstallieren. Persönlicher Test!

Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Lösung für das Problem, dass Docker-Protokolle nicht abgerufen werden können

Kann Asynchronität in JavaScript „Await“ speichern?