Heim  >  Artikel  >  Web-Frontend  >  Das Odin-Projekt – Einführung in CSS

Das Odin-Projekt – Einführung in CSS

WBOY
WBOYOriginal
2024-09-08 13:00:371137Durchsuche

The Odin Project -Intro to CSS

Hallo?,

Ich bin ein Frontend-Entwickler mit 3 Jahren Erfahrung. Ich wollte schon immer die Lücke in meinem Wissen schließen und ein Full-Stack-Entwickler werden. Ich habe mehrere Versuche unternommen, das Odin-Projekt zu starten, konnte es aber nicht konsequent durchziehen. Dieses Mal bin ich fest entschlossen, dabei zu bleiben und meine Fähigkeiten zu verbessern.

Um meine Fortschritte zu verfolgen, werde ich eine Reihe von Blogbeiträgen veröffentlichen, in denen ich meine Erkenntnisse aus den einzelnen Kapiteln des Odin-Projekts detailliert beschreibe. Betrachten Sie diese als meine Entwicklungstagebücher.

Ich werde die Themen hinzufügen, die ich gelernt habe, und Dinge teilen, die ich vorher nicht wusste.

Ich beginne mit CSS als HTML und all den einführenden Dingen, die ich zuvor gemacht habe oder die mir zumindest bekannt sind.

Gelernte Themen

  • Selektoren
  1. Universeller Selektor
  2. Typauswahl
  3. Klassenauswahl
  4. ID-Auswahl
  5. Gruppierungsauswahl
  6. Kettenauswahl
  • Kombinator Ich wusste zwar, wie man den Kombinator verwendet, aber dieser spezielle Begriff war mir nicht bekannt. Auch die Definition, dass es um eine Beziehung zwischen Selektoren geht, die nicht um deren Gruppierung oder Verkettung geht.
  • Absteigender Kombinator

Grundlegende CSS-Eigenschaften

  • Farbe, Hintergrundfarbe
  • Typografie
  1. Schriftfamilie und generische Schriftfamilie
  • Bildhöhe und -breite
    Eine weitere Sache, die ich hier gelernt habe, ist, dass es ratsam ist, in HTML immer sowohl Breiten- als auch Höhenattribute für Bilder anzugeben. Dadurch wird sichergestellt, dass der Browser beim Rendern der Seite den entsprechenden Platz für das Bild reserviert, wodurch unerwartete Verschiebungen im Inhaltslayout beim Laden von Bildern verhindert werden. Um das ursprüngliche Seitenverhältnis eines Bildes beizubehalten, können Sie nur das Breitenattribut ändern und die Höhe auf „Auto“ setzen. Dadurch wird die Höhe automatisch an die Proportionen des Bildes angepasst.

  • Externes CSS

  • Internes und Inline-CSS

Ich erinnere mich an einen Fall, als mein technischer Leiter unserem HTML Inline-CSS hinzufügte. Ich zögerte, seine Entscheidung in Frage zu stellen, da er ein erfahrener Profi war und ich noch relativ neu auf dem Gebiet war.

Jetzt verstehe ich jedoch, dass ein effektiverer Ansatz darin bestanden hätte, den Einsatz von Inline-CSS zu minimieren. Indem wir Inline-Stile auf diejenigen beschränken, die für die Funktion der Regel unbedingt erforderlich sind, können wir eine übermäßige Anwendung von Spezifität vermeiden und eine sauberere, wartbarere Codebasis beibehalten.

Ich plane außerdem, einen wöchentlichen Podcast zu veröffentlichen, der die Dinge, die ich gelernt habe, noch einmal zusammenfasst.

Das obige ist der detaillierte Inhalt vonDas Odin-Projekt – Einführung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn