So entwerfen Sie CSS

CSS ist eine Stilsprache für Webdesign. Sie ermöglicht es uns, die Präsentation von Webseiten zu gestalten, um ein besseres Benutzererlebnis zu schaffen. In diesem Artikel beschreibe ich die grundlegenden Konzepte, Designprinzipien und gängigen Designtechniken von CSS und hoffe, Anfängern dabei zu helfen, CSS besser zu verstehen und zu verwenden.

1. Grundkonzepte von CSS

1. CSS-Selektoren werden verwendet, um die HTML-Elemente anzugeben, auf die Stile angewendet werden sollen, darunter Tag-Selektoren, ID-Selektoren und Pseudo-Selektoren. Klassenselektoren usw. Beispielsweise kann der Tag-Selektor das Tag formatieren, indem er den HTML-Tag-Namen angibt, etwa:

p {
    font-size: 16px;
    color: #333;
}

Dadurch wird die Schriftgröße aller p-Tags auf 16 Pixel und die Farbe auf #333 festgelegt.

Attribute

2. CSS-Attribute werden verwendet, um den Stil von HTML-Elementen zu definieren, wie z. B. Schriftfarbe, Größe, Hintergrundfarbe usw. Zu den allgemeinen CSS-Eigenschaften gehören Schriftgröße, Farbe, Hintergrundfarbe usw.

p {
    font-size: 16px;
    color: #333;
    background-color: #fff;
}

Dadurch wird die Schriftgröße aller p-Tags auf 16 Pixel, die Farbe auf #333 und die Hintergrundfarbe auf #fff gesetzt.

Wert

3. Der CSS-Wert stellt den spezifischen Wert dar, der für das Attribut festgelegt werden soll. Dabei kann es sich um Pixel, Prozentsätze, Zeichenfolgen usw. handeln. Der Wert des Attributs „font-size“ kann beispielsweise in Form von Pixeln, Prozentsätzen usw. vorliegen.

p {
    font-size: 16px;
    font-size: 1em;
}

Die Werte 16px und 1em sind hier die Werte des Attributs „font-size“. Ersteres gibt an, dass die Schriftgröße 16 Pixel beträgt, und letzteres gibt an, dass die Schriftgröße ein Vielfaches der Schriftgröße des übergeordneten Elements ist Element. Einmal ist die Standardgröße.

2. CSS-Designprinzipien

Vererbung

1. CSS-Vererbung bedeutet, dass untergeordnete Elemente den Stil des übergeordneten Elements erben können, wodurch eine Duplizierung von Code- und Stileinstellungen vermieden wird. Wenn Sie beispielsweise möchten, dass die Schriftfarbe sowohl des p-Tags als auch eines Tags blau ist, können Sie das Farbattribut für das übergeordnete Element festlegen. Die untergeordneten Elemente erben dann automatisch dessen Stil.

body {
    color: blue;
}

Dadurch wird die Schriftfarbe aller a-Tags und p-Tags auf der Seite blau.

Kaskadierung

2. Die Kaskadierung von CSS bedeutet, dass unterschiedliche Stileinstellungen desselben Elements unterschiedliche Effekte basierend auf unterschiedlichen Prioritäten erzeugen. Wenn beispielsweise die Attribute „Farbe“ und „Schriftgröße“ gleichzeitig in einem Tag festgelegt werden, hat ihre Priorität Auswirkungen.

p {
    color: red;
    font-size: 20px;
    color: blue;
}

Das Farbattribut hier wird durch das nachfolgende Blau überschrieben, sodass die endgültige Schriftfarbe Blau ist und das Schriftgrößenattribut wirksam wird.

Einfache

3. CSS-Stileinstellungen sollten so prägnant und klar wie möglich sein, um wiederholte und redundante Codes zu vermeiden und die Ladegeschwindigkeit und Wartbarkeit der Seite zu verbessern. Durch die Reduzierung der Selektorebene und die Abkürzung von Attributen lassen sich einfache Effekte erzielen.

Zum Beispiel:

/* 不优雅的写法 */
.wrapper .content .list .item .title {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

/* 优雅的写法 */
.title {
    font: 16px/1.5 sans-serif;
    color: #333;
    margin-bottom: 10px;
}

3. CSS-Designfähigkeiten

Box-Modell

1. Das Box-Modell von CSS bedeutet, dass alle HTML-Elemente als rechteckige Box betrachtet werden können, einschließlich Inhalt, Polsterung, Rahmen und Ränder. Warten Sie vier Teile.

div {
    width: 300px;
    height: 200px;
    border: 10px solid #ccc;
    padding: 20px;
    margin: 30px;
}

Die Attribute „width“ und „height“ definieren hier die Breite und Höhe des Felds, das Attribut „border“ definiert den Rahmenstil und die Breite des Felds, das Attribut „padding“ definiert den inneren Rand des Felds und das Attribut „margin“ definiert den äußeren Rand der Box.

Floating-Layout

2. CSS-Floating-Layout bezieht sich auf die Realisierung des Seitenlayout-Layouts durch Festlegen des Float-Attributs von Elementen. Schwebende Elemente lösen sich vom Dokumentenfluss und nehmen nicht mehr ihre eigene Position ein. Stattdessen schweben sie nach links oder rechts und beeinflussen die Position der Elemente um sie herum.

img {
    float: left;
    margin-right: 20px;
}

Das img-Tag setzt hier das Float-Attribut auf links, was bedeutet, dass es nach links gleitet, und setzt das Margin-Right-Attribut auf 20 Pixel, was bedeutet, dass der rechte Rand 20 Pixel beträgt.

Responsives Design

3. CSS-Responsive-Design bezieht sich auf die Verwendung von Medienabfragen, um Stile für verschiedene Geräte und Bildschirmgrößen festzulegen und so eine Seitenpräsentation mit unterschiedlichen Effekten zu erreichen. Dies kann durch die Einrichtung verschiedener CSS-Stylesheets oder die Definition verschiedener Medienabfragen im selben Stylesheet erreicht werden.

@media (max-width: 768px) {
    /* 在窄屏幕下的样式设置 */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* 在宽屏幕下的样式设置 */
}

@media (min-width: 1025px) {
    /* 在超宽屏幕下的样式设置 */
}

Das Obige sind die Grundkonzepte, Designprinzipien und gängigen Designtechniken von CSS. In praktischen Anwendungen müssen je nach Bedarf unterschiedliche Techniken und Methoden eingesetzt werden, um die Effekte und Funktionen der Seite zu erzielen. Gleichzeitig ist das kontinuierliche Lernen und Beherrschen von CSS-bezogenem Wissen auch der Schlüssel zur Verbesserung der Webdesign-Fähigkeiten.

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