CSS ist nicht schwer (Sie vermissen nur diese Grundlagen)

Als ich zum ersten Mal mit der Webentwicklung anfing, dachte ich, meine größte Herausforderung wäre JavaScript (was nicht heißt, dass JS nicht immer noch eine Handvoll ist), aber dann kamen so viele schlechte Rufe und Horrorgeschichten über CSS.

Trotz alledem habe ich mich intensiv mit der Frontend-Entwicklung beschäftigt, und Junge, hat mir CSS einiges gebracht? Nichts hat jemals gut geklappt, und ich habe noch nicht einmal angefangen, einen Div zu zentrieren. Es war ein Albtraum.

Aber dann wurde mir Folgendes klar: CSS war nicht das Problem, das Problem war, dass ich die Grundlagen nicht verstand, und sobald ich den Dreh raus hatte, wurde das Styling irgendwie einfacher und machte überraschend viel Spaß.

In diesem Artikel möchte ich Sie durch zwei grundlegende Konzepte führen, die den Grundstein für die Beherrschung von CSS legen:

1. CSS-Selektoren
2. Box-Modell
3. Positionierung und Layout

• CSS-Selektoren: CSS-Selektoren sind Tools, mit denen Sie auf bestimmte HTML-Elemente abzielen können, die ein Styling benötigen.

Lassen Sie uns einige der häufig verwendeten Selektoren erkunden:

A. Universelle Selektoren: Dies wird verwendet, um jedes Element auf einer Seite gezielt auszuwählen. Es wird durch das Sternchensymbol (*) dargestellt und wird normalerweise für globale Zurücksetzungen oder zum Anwenden von Basisstilen verwendet.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

B. Klassenselektoren: Dies wird verwendet, um HTML-Elemente mit einem bestimmten Klassenattributwert auszuwählen. Um Elemente mit einer bestimmten Klasse auszuwählen, schreiben Sie einen Punkt (.), gefolgt vom Wert des Klassenattributs.

<div>





<pre class="brush:php;toolbar:false">.box{
  background-color: teal;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

C. Typselektoren: Dies wird verwendet, um auf alle Elemente eines bestimmten Typs abzuzielen. Es wird auch Elementselektor genannt.

p{
text-align: center;
font-size: 1.2rem
}

Anwendungsfall: Dies wendet einen einheitlichen Stil auf alle

Tags an.

D. Attributselektoren:Dieser Selektor zielt auf HTML-Elemente basierend auf ihren Attributen und Werten ab.

input[type = "text"] {
background-color: cyan;
color: gray;
}

E. Pseudoklassen:Diese wählen Elemente für das Styling basierend auf ihrem Zustand aus.

a:hover{
color: blue;
transition: ease-in 0.5s;
}

Es gibt noch andere nützliche CSS-Selektoren, aber diese würden vorerst genügen.

• Das Box-Modell

Das Box-Modell ist im Wesentlichen eine Box, die HTML-Elemente umschließt. Im Grunde ist jedes Element in HTML nur eine große (oder kleine) rechteckige Box. Mit dem Boxmodell lässt sich steuern, wie viel Platz jede Box einnimmt und wie sie mit anderen Elementen interagiert.

Jede Box besteht aus vier Hauptteilen:

1. Inhalt: Das ist der Inhalt der Box – Texte, Bilder und andere Elemente.
2. Polsterung: Dies ist der Abstand zwischen dem Inhalt und dem Rand der Box.
3. Rand: Dies ist der Rand der Box.
4. Rand: Dies ist der Raum außerhalb des Randes, der diese Box von anderen Boxen trennt.

Hier ist eine Illustration, die das Box-Modell erklärt

Hinweis:Die gestrichelte Linie ist der Rand des Feldes.

Das Box-Modell ist für alles, was Sie in CSS tun möchten, von entscheidender Bedeutung, von der Positionierung von Elementen bis zur Verwaltung von Abständen. Zum Beispiel habe ich die Box-Modell-Illustration nur mit HTML und CSS gezeichnet, um zu zeigen, wie die verschiedenen Ebenen zusammenarbeiten.

Hier ist der Code, der mir geholfen hat, die Illustration zum Leben zu erwecken:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

ABSCHLUSS(es ist an der Zeit)
CSS mag auf den ersten Blick viel erscheinen, aber wenn Sie sich erst einmal die Grundlagen angeeignet haben, sind Sie bereit, die Welt zu erobern (zumindest Ihre Welt).
Hier ist die wichtigste Erkenntnis aus diesem Artikel: CSS ist nicht schwer, Sie müssen sich nur mehr auf die Grundlagen konzentrieren.
Lernen Sie weiter und üben Sie vor allem weiter, und schon bald werden Sie Webseiten wie ein Profi gestalten.

Was kommt als nächstes?
Nachdem Sie nun die Grundlagen von CSS-Selektoren und dem Box-Modell erlernt haben, sind Sie der Beherrschung von CSS einen Schritt näher gekommen, aber es gibt noch mehr zu entdecken.
Im nächsten Artikel befassen wir uns mit CSS-Positionierung und Layouttechniken wie Flexbox und Grid.

Viel Spaß beim Codieren!!!!

Das obige ist der detaillierte Inhalt vonCSS ist nicht schwer (Sie vermissen nur diese Grundlagen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!