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

Detailliertes Installationstutorial zur dekomprimierten Version von mysql5.7.19 (mit rein geknackter chinesischer Version von SQLYog)

Die Version Mysql5.7.19 ist eine neue Version, di...

So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

Der spezifische Code lautet wie folgt: <Stil&g...

Webdesign muss Zweck, Ideen, Gedanken und Beständigkeit haben

<br />Einleitung: Diese Idee kam mir, als ic...

Eine Liste der Fallstricke beim regulären JS-Matching

Ich habe vor Kurzem eine Falle bei der regulären ...

Wenn ein Linux (Ubuntu)-Benutzer N-mal hintereinander ein falsches Passwort eingibt, um sich anzumelden, wird das System automatisch für X Minuten gesperrt

1. Bearbeiten Sie die PAM-Konfigurationsdatei sud...

Detaillierte Erklärung der Primärschlüssel und Transaktionen in MySQL

Inhaltsverzeichnis 1. Kommentare zu MySQL-Primärs...

Detaillierte Erklärung zum Bereitstellen von SpringBoot in Docker und zum Ersetzen von JAR-Paketen

Inhaltsverzeichnis Projektverzeichnis Docker-Date...

Docker+Nextcloud zum Erstellen eines persönlichen Cloud-Speichersystems

1. Docker-Installation und -Start yum installiere...

Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)

Hintergrund Alles begann, als ein Klassenkamerad ...

33 Eis- und Schnee-Schriftarten zum Download empfohlen (privat und kommerziell)

01 Winterflocken (nur einzeln) 02 Snowtop Caps (k...

Lösung für den Docker-Container, der keine Schreibberechtigung für das Host-Verzeichnis hat

Beim Anwenden von Docker-Containern mounten wir h...

Einführung in MySQL-Trigger, Erstellen von Triggern und Analyse von Nutzungsbeschränkungen

Dieser Artikel beschreibt anhand von Beispielen d...

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#

Obwohl Microsoft T4-Vorlagen bereitstellt, finde ...

Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7

1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....

Detaillierte Erklärung zum schnellen Betrieb einer MySQL-Datenbank in einer Node.js-Umgebung

GitHub-Adresse: https://github.com/dmhsq/dmhsq-my...