wie man CSS verwendet

CSS ist eine Stylesheet-Sprache für Webdesign, die steuert, wie HTML oder XHTML angezeigt und formatiert wird. CSS ist ein wichtiger Bestandteil der WEB-Frontend-Entwicklung, und die Beherrschung von CSS ist eine wesentliche Fähigkeit für die heutige Frontend-Entwicklung.

Also, wie verwendet man CSS? In diesem Artikel werden die grundlegende Verwendung und allgemeine Regeln von CSS vorgestellt, um Anfängern dabei zu helfen, CSS schnell zu beherrschen.

1. CSS-Datei erstellen
   Zuerst müssen Sie eine CSS-Datei erstellen. Es kann mit einem Texteditor (wie Notepad, Sublime Text usw.) erstellt und als CSS-Datei gespeichert werden. Normalerweise speichern Sie die CSS-Datei in einer separaten Datei und verwenden dann das -Element in HTML, um die CSS-Datei mit der HTML-Seite zu verbinden.
2. CSS-Selektoren
   Der häufigste Selektor in CSS ist der Elementselektor, der den Markup-Typ darstellt, auf den Sie den Stil anwenden möchten (z. B. h1, p usw.). Das Präfix „#“ vor dem Selektornamen weist auf einen ID-Selektor hin, während das Präfix „.“ vor dem Namen auf einen Klassenselektor hinweist.

Um beispielsweise einem Element mit der ID „Header“ einen Stil hinzuzufügen, lautet der CSS-Code wie folgt:

#header{
  background-color: #ccc;
  width: 100%;
}

3. CSS-Eigenschaften
   In CSS werden Eigenschaften verwendet, um den Stil anzugeben, der auf ein angewendet werden soll Element. Der folgende CSS-Stil legt beispielsweise die Schriftgröße für alle p-Tags auf 16 Pixel fest: Das Attribut

   p{
     font-size: 16px;
   }

   kann auch mehrere Werte annehmen. Die folgende CSS-Regel legt beispielsweise 4 Werte für die Randeigenschaft eines Elements fest:

   margin: 10px 5px 15px 20px;

   Der erste Wert ist der obere Abstand, der zweite der rechte Abstand, der dritte der untere Abstand und der vierte der linke Abstand. Wenn die linke Polsterung nicht bereitgestellt wird, wird standardmäßig die gleiche Polsterung wie die rechte Polsterung verwendet; wenn die untere Polsterung nicht bereitgestellt wird, wird standardmäßig die gleiche Polsterung wie die obere Polsterung verwendet.

4. CSS Style Sheet
   Für große Websites wird empfohlen, das Stylesheet zur besseren Verwaltung in mehrere Teile aufzuteilen. Der gebräuchlichste Ansatz besteht darin, den Stil der Website in verschiedene Stylesheets zu unterteilen, die jeweils einen anderen Teil der Website steuern.

Zum Beispiel kann eine typische Website einige Stylesheets haben: Das globale Stylesheet der Website ist für den Stil der gesamten Website, der Navigationsleiste, der Kopfzeile, der Fußzeile usw. verantwortlich; ein anderes Stylesheet ist für den Stil der internen Website verantwortlich Seiten; und ein typisches Stylesheet ist für das responsive Design verantwortlich, sodass sich die Website an die unterschiedlichen Bildschirmgrößen verschiedener Geräte anpassen kann.

5. Verwenden Sie CSS-Frameworks und Präprozessoren
   Ein CSS-Framework ist eine Reihe allgemeiner Stylesheets und Regeln, die das Website-Design beschleunigen. Präprozessoren sind Tools, die die Funktionalität von CSS erweitern, wie z. B. LESS, SASS und Stylus. Sie ermöglichen Entwicklern, den Stil der Website mithilfe von Variablen, Funktionen und verschachtelten Regeln zu steuern.

Hier sind zum Beispiel einige beliebte CSS-Frameworks:

-Bootstrap: Eines der beliebtesten und am weitesten verbreiteten CSS-Frameworks, es enthält verschiedene Komponenten, darunter Formulare, Navigation, Schaltflächen, Raster und Layouts.

-Foundation: Ein weiteres sehr beliebtes CSS-Framework, das viele Layout- und UI-Komponenten integriert und Anpassungsoptionen bietet. Bietet mehr Layoutanpassung als Bootstrap.

-Materialise CSS: Ein auf Material Design basierendes CSS-Framework mit vielen nativen Steuerelementen, ein sehr schönes Framework.

Zusammenfassung
Dieser Artikel stellt die grundlegende Verwendung und allgemeine Regeln von CSS vor. Darüber hinaus gibt es viele weitere CSS-Eigenschaften und Überlegungen, die in der praktischen Arbeit beherrscht werden müssen. Übung ist der beste Weg, um zu lernen, indem Sie Projekte umsetzen und verschiedene Methoden ausprobieren, um Ihr Verständnis und die Anwendung von CSS zu verbessern.

Das obige ist der detaillierte Inhalt vonwie man CSS verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!