VANILLA CSS-GRUNDLAGEN, DIE SIE WISSEN SOLLTEN

GRUNDLAGEN VON CSS (Cascading Style Sheets)

Hier in CSS erhalten wir ein Ziel und wählen das spezifische Element, an dem wir arbeiten möchten, von der Webseite aus.

So funktioniert CSS.

CSS besteht hauptsächlich aus 2 Teilen, das heißt;

• Selektoren
• Erklärung: Dies ist auch unterteilt in: Eigentum und dann Wert.

DREI CSS-EBENEN;

Inline-CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

Internes CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

Externes CSS

• In diesem Fall wird die CSS-Datei mit der Datei index.html verknüpft.

• Beim Kompilieren des CSS-Codes basiert CSS auch auf der Priorität. In einem solchen Fall hat Inline-CSS immer die höchste Priorität, gefolgt von internem CSS und dann externem CSS.

CSS-SELEKTOREN

• Mit diesen Selektoren können wir wissen, wie Elemente aus der HTML-Datei ausgewählt werden. Für die CSS-Selektoren müssen wir lediglich wissen, welchen Selektortyp wir verwenden möchten und was er mit dem Zielelement macht.

Im Folgenden sind einige der am häufigsten verwendeten CSS-Selektoren aufgeführt.

Universeller Selektor: Wenn ein solcher Selektor verwendet wird, wird alles in der HTML-Datei (alle HTML-Tags) als Ziel ausgewählt oder ausgewählt.

Zum Beispiel:
*{
Hintergrundfarbe: grau
}
Das bedeutet, dass die gesamte Webseite eine graue Hintergrundfarbe hat

Individueller Selektor

• Dies zielt auf einzelne Elemente ab, zum Beispiel

  zielt entsprechend auf alle Absätze in der index.html ab.

• Wenn Sie möchten, dass jeder Absatz eine eigene Farbe oder ein eigenes Aussehen hat, können wir uns für *Klassen- oder ID-Selektoren entscheiden.

Klassen- und ID-Selektoren

• Für die Klassenselektoren verwenden wir beim Anwenden einen Punkt. Für einen ID-Selektor verwenden wir dann beim Anwenden eine Raute (#).

Zum Beispiel;
.warning{
Elemente ausrichten: zentrieren;
}

• Ein ID-Name sollte nicht mehrfach angewendet oder verwendet werden, obwohl selbst dann beim Kompilieren kein Fehler in unserer Datei ausgegeben wird. Aber das wäre eine schlechte Codierungspraxis.

• Für einen Klassennamen können Sie jedoch denselben Namen mehrmals verwenden.

Kinderauswahl

• In diesem Selektor zielen wir auf das untergeordnete Element des übergeordneten Elements.
• Zum Beispiel: nav ul{ Anzeige: Flex }
• Das bedeutet, dass wir auf das ul-Element abzielen, das ein untergeordnetes Element des übergeordneten Elements nav ist.

Wir haben auch andere Selektoren

• Wie der n-te Kinderselektor.

Die am häufigsten verwendeten Selektoren sind die Klassen- und ID-Selektoren

NOTIZ:

• Bei der Verwendung von Farben für CSS empfiehlt es sich immer, Standardfarbcodes (wie #4d4d4d) zu verwenden, im Gegensatz zu Wortfarben wie Rot oder Grün.

• Das liegt daran, dass verschiedene Browser die Farben auf unterschiedliche Weise anzeigen. Wenn jedoch Farbcodes verwendet werden, verhält sich dies wie eine Standard-Gesamtfarbe, die auch in verschiedenen Browsern als dieselbe Farbe angezeigt wird.

RAND UND POLSTERUNG.

• Rand ist der Abstand von außen und Polsterung ist der Abstand von innen, wo sich der Text befindet.*

Hinweis: Wir wenden FOCUS nur auf Eingabe-Tags an.

POSITIONEN ZU CSS

Absolut;

• Dies gibt die Position des Ziels abhängig von der übergeordneten Webseite an, d. h. den Rand der gesamten Webseite.

Relativ;

• Dies gibt die Position des Zielelements abhängig vom Körper oder den Kästchen an, in denen sich das aktuelle Ziel befindet, d. h. abhängig von der ursprünglichen Position des Ziels.

Klebrig;

• Dadurch wird dem Ziel die Position zugewiesen, und danach wird es sich nicht mehr an eine andere Position bewegen.

Behoben;

• Nachdem dies angewendet wurde, wird das Ziel nicht mehr geändert oder modifiziert. Es würde an dieser Position fixiert sein, wie es zugewiesen wurde.

FLEX-BOXEN

Wenn Flex angewendet wird, bedeutet dies, dass die Zielelemente nur in einer horizontalen Dimension platziert werden können.

• Daher ist der Flex unidirektional. Bei der Verwendung von Flex beugen wir das übergeordnete Element. Und basierend auf den Eltern wird sich das Kind verhalten.

Falls wir eine dynamische Anzeige wünschen, können wir hier das Raster verwenden.

• Das Gitter ist daher bidirektional.

ABSCHLUSS

Wir verwenden CSS, um unsere Webseiten zu ändern, da es uns hilft, unseren Text einfacher zu gestalten.

Das obige ist der detaillierte Inhalt vonVANILLA CSS-GRUNDLAGEN, DIE SIE WISSEN SOLLTEN. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!