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

MySQL-Praxiskenntnisse: Analyse von Methoden zum Vergleichen, ob zwei Tabellen unterschiedliche Daten haben

Dieser Artikel beschreibt anhand eines Beispiels,...

Implementierung des Vue-Zählers

Inhaltsverzeichnis 1. Implementierung des Zählers...

So konfigurieren Sie eine JDK-Umgebung unter Linux

1. Gehen Sie zur offiziellen Website, um das JDK-...

Gründe und Lösungen für die Auswahl des falschen Index durch MySQL

In MySQL können Sie mehrere Indizes für eine Tabe...

Stellen Sie einen Varnish-Cache-Proxyserver basierend auf Centos7 bereit

1. Lackübersicht 1. Einführung in Varnish Varnish...

So entwerfen Sie MySQL-Statistikdatentabellen

Inhaltsverzeichnis Ist eine Echtzeitaktualisierun...

Einführung in die Verwendung mehrerer spezieller Attribut-Tags in HTML

Die folgenden Attribute sind nicht sehr browserkom...

Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen

1. addtime() Füge die angegebene Anzahl Sekunden ...

MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten

Die in MySQL integrierte Datumsfunktion TIMESTAMP...

HTML-adaptives Layout links, zentriert und rechts (mithilfe des Calc-CSS-Ausdrucks)

Im neuesten HTML-Standard gibt es einen Calc-CSS-A...

So implementieren Sie die JavaScript-Ausgabe der Fibonacci-Folge

Inhaltsverzeichnis Thema analysieren Basislösung ...

Nginx tp3.2.3 404 Problemlösung

Vor Kurzem habe ich Apache auf nginx umgestellt. ...

Lösung für das Problem, dass nach dem Domänennamen zwei Schrägstriche // erscheinen, wenn nginx für den Domänennamenzugriff konfiguriert ist

Ich habe vor Kurzem meine persönliche Website neu...

Detailliertes Tutorial zur Installation von mysql-8.0.13 (ZIP-Installation) auf einem Windows 10-System

Beschreibung der Installationsumgebung •Systemver...

Beispiel für den Aufbau eines Jenkins-Dienstes mit Docker

Ziehen Sie das Bild root@EricZhou-MateBookProX: D...