CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite

CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite

1. CSS-Schreibformat

1. Inline-Stile

Sie können CSS-Code direkt in das öffnende Tag schreiben

<div style="color:red">Ich bin div</div>

2. Inline-Stile

Sie können eine Reihe von Stil-Tags in ein Paar Head-Tags schreiben und dann CSS-Code in die Stil-Tags schreiben

<Kopf>
    <Stil>
        div{
            Farbe: rot;
        }
</Stil>
</Kopf>

3. Externer Linkstil

Schreiben Sie eine separate CSS-Datei, schreiben Sie den CSS-Code in diese Datei und verknüpfen Sie diese Datei dann über das Link-Tag in der HTML-Datei mit der HTML-Datei.

Dies ist die HTML-Datei

<Kopf>
    <link rel="stylesheet" href="194_Css.css">
</Kopf>
 Dies ist die CSS-Datei div {
            Farbe: rot;
}

4. Stile importieren

Ähnlich wie die dritte Methode, aber die Importmethode ist anders

<Kopf>
    <Stil>
        @import "194_Css.css";
    </Stil>
</Kopf>

Hinweis: Bei den meisten Unternehmensentwicklungen werden externe Link-Stile verwendet, die Struktur und Stil voneinander trennen. Warum also keine Importstile verwenden?

Externe Link-Stile werden über das Link-Tag verknüpft und importierte Stile über @import . @import wurde nach CSS2.1 eingeführt, deshalb kann es zu Kompatibilitätsproblemen kommen. Beim Anzeigen der Benutzeroberfläche lädt der externe Link-Stil zuerst den CSS-Stil und dann die Struktur. Wenn der Benutzer die Benutzeroberfläche nicht sehen kann, muss der Stil daher festgelegt worden sein. Beim Anzeigen der Benutzeroberfläche lädt der importierte Stil zuerst die Struktur und dann den Stil. Wenn der Benutzer die Benutzeroberfläche sieht, sieht er daher möglicherweise nicht die vollständige Benutzeroberfläche.

2. Erstellen Sie eine Website von 0 auf 1

1. Das erste, was Sie beim Schreiben einer Website tun sollten

Erstellen Sie einen Site-Ordner und einige Unterordner und Unterdateien, z. B.: CSS-Ordner, js-Ordner, Bildordner, index.html

Hinweis: Sie können beim Erstellen von Site-Ordnern chinesische Namen verwenden, chinesische Schriftzeichen dürfen jedoch nicht in Unterordnern und Unterdateien der Site-Ordner erscheinen.

2. Setzen Sie alle Standardstile zurück, legen Sie einige globale Stile fest und verknüpfen Sie die CSS-Dateien, die die Stile festlegen, mit den entsprechenden Schnittstellen

3. Erstellen Sie eine Nubia-Website

(1) Schauen wir uns zunächst das Strukturverzeichnis an

(2) Betreff-Inhaltscode

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="CSS/index.css">
</Kopf>
<Text>
<!--Oberer Bereich-->
<div Klasse="oben"></div>
<!--Werbebereich-->
<div Klasse="Banner"></div>
<!--Inhaltsbereich-->
<div Klasse="Inhalt"></div>
<!--Unterer Bereich-->
<div Klasse="Fußzeile"></div>
</body>
</html>

(3) CSS-Style-Code

/*Oberer Bereich*/
.Spitze{
    Höhe: 60px;
    width:100%;/*Die Breite entspricht der des übergeordneten Elements. Hier verwenden wir die Prozentform, damit die Webseite beim Vergrößern oder Verkleinern nicht verformt wird*/
    Hintergrundfarbe: rot;
​
}
/*Werbefläche*/
.Banner{
    Höhe: 800px;
    Breite: 100 %;
    Hintergrundfarbe: grün;
}
/*Inhaltsbereich*/
.Inhalt{
    Höhe: 1883px;
    Breite: 100 %;
    Hintergrundfarbe: blau;
}
/*Unterer Bereich*/
.Fußzeile{
}

3. Quellcode:

D194_CSSWritingFormat.html

Projekt: Nubia

Adresse:

https://github.com/ruigege66/HTML_learning/blob/master/D194_CSSWritingFormat.html

https://github.com/ruigege66/HTML_learning/tree/master/Nubia

Zusammenfassen

Damit ist dieser Artikel über das CSS-Schreibformat und eine ausführliche Erläuterung der Grundstruktur einer mobilen Seite abgeschlossen. Weitere relevante Inhalte zum CSS-Schreibformat 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!

<<:  Verwenden Sie Schaltflächenauslöserereignisse, um einen blinkenden Hintergrundfarbeffekt zu erzielen

>>:  MySQL Series 7 MySQL-Speicher-Engine

Artikel empfehlen

Einführung in die Wissenspunkte MySql-Tabelle, Datenbank, Sharding und Partitionierung

1. Einleitung Wenn die Datenmenge in der Datenban...

CSS verwendet Position + Rand, um die Methode der horizontalen und vertikalen Zentrierung fester Boxen zu erreichen

Rand: automatisch; + Position: absolut; oben, unt...

Verhindern von SQL-Injection in Webprojekten

Inhaltsverzeichnis 1. Einführung in SQL-Injection...

So benennen Sie in Linux mehrere Dateien gleichzeitig um

Vorwort In unserer täglichen Arbeit müssen wir hä...

MySQL-Unterabfrage und Details zur Verknüpfungstabelle

Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...

So implementieren Sie die Kontrollkästchen- und Radioausrichtung

Nicht nur das Verhalten verschiedener Browser ist...

Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen

Grundlegende Syntax Die Verwendung von Text-Overf...

Front-End-Statusverwaltung (Teil 2)

Inhaltsverzeichnis 1. Wiederholen 1.1. Shop (Bibl...

JavaScript-Funktion Currying

Inhaltsverzeichnis 1 Was ist Funktions-Currying? ...

Detaillierte Diskussion mehrerer Methoden zur Deduplizierung von JavaScript-Arrays

Inhaltsverzeichnis 1. Deduplizierung einrichten 2...

So verwenden Sie ein Feld in einer Tabelle, um ein Feld in einer anderen Tabelle in MySQL zu aktualisieren

1. 1 Spalte ändern Update Student S, Stadt C setz...

Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 für WinX64

Detailliertes Installations-Tutorial zur Dekompri...

vue.js Router verschachtelte Routen

Vorwort: Manchmal ist der Hauptteil einer Route d...

Grafisches Tutorial zur Installation von MySQL 5.6.35 unter Windows 10 64-Bit

1. Laden Sie MySQL Community Server 5.6.35 herunt...

Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

Inhaltsverzeichnis 1. Einleitung 2. Implementieru...