Einstieg in die Frontend-Webentwicklung > 2. CSS-Grundlagen

Elias Häußler · elias-haeussler.de CSS-Grundlagen Einstieg in die Frontend-Webentwicklung 2.
Dezember 2018

Inhalte ‣ Einführung ‣ Einbindungsmöglichkeiten ‣ Selektoren ‣ Speziﬁtät ‣
Hilfreiche Links CSS-Grundlagen > Inhalte 2. Dezember 2018

Einführung

‣ CSS = Cascading Style Sheets ‣ Stylesheet-Sprache ‣ (Wie
auch HTML) vom W3C weiterentwickelt ‣ Kommt bei HTML und XML zum Einsatz CSS-Grundlagen > Einführung 2. Dezember 2018 Einführung

‣ Enthält Style-Anweisungen, die der Browser in die entsprechende Darstellung
umwandelt ‣ Style-Anweisungen werden auf HTML-/XML-Elemente angewendet ‣ Einzelne Elemente können mehrere Style-Anweisungen gleichzeitig verarbeiten ‣ Browser geben bereits bestimmte Style-Anweisungen vor ‣ Standard-Browser-Styles sind jedoch von Browser zu Browser unterschiedlich und  auch das verwendete Betriebssystem beeinﬂusst die Standard-Darstellung im Browser CSS-Grundlagen > Einführung 2. Dezember 2018 Einführung

‣ Style-Anweisungen werden anhand von Style-Eigenschaften bestimmt ‣ Jeder Style-Eigenschaft
wird ein bestimmter Wert zugewiesen ‣ Konvention: style-eigenschaft: wert; ‣ Semikolon ist notwendig, um verschiedene Style-Eigenschaften miteinander zu verknüpfen ‣ Wert der Style-Eigenschaft kann je nach Eigenschaft unterschiedlich festgelegt werden, teilweise ist auch die Angabe mehrerer Werte zulässig CSS-Grundlagen > Einführung 2. Dezember 2018 Einführung

Einbindungsmöglichkeiten

‣ Style-Anweisungen können über verschieden Wege in das Dokument eingebunden
werden: – Direkt an den entsprechenden HTML-/XML-Elementen über deren style-Attribut – Im Kopfbereich des HTML-Dokuments über das <style>-Element – Über eine externe CSS-Datei, die über den Kopfbereich eingebunden werden kann ‣ Einbindungsreihenfolge und Art der Einbindung entscheiden letztendlich, welche  Style-Anweisungen der Browser verarbeitet oder durch andere Style-Anweisungen überschreibt → Stichwort: Speziﬁtät (mehr dazu später) CSS-Grundlagen > Einbindungsmöglichkeiten 2. Dezember 2018 Einbindungsmöglichkeiten

‣ Deﬁnition der Style-Anweisungen direkt im HTML-Dokument bei den entsprechenden 
HTML-/XML-Elementen ‣ Angabe erfolgt mithilfe des style-Attributs ‣ Das style-Attribut darf nur validen CSS-Code enthalten! ‣ Mehrere Style-Anweisungen mit Semikolon und Leerzeichen voneinander trennen CSS-Grundlagen > Einbindungsmöglichkeiten > Inline-CSS 2. Dezember 2018 Einbindungsmöglichkeiten > Inline-CSS

<a style="text-decoration: underline;">...</a> <section style="background: red; color: white;">...</section> <p style="font-size:
20px; border-bottom: 1px solid gray;">...</p> CSS-Grundlagen > Einbindungsmöglichkeiten > Inline-CSS 2. Dezember 2018 Einbindungsmöglichkeiten > Inline-CSS

‣ Weitere Möglichkeit: Angabe der Style-Anweisungen im Kopfbereich des HTML-Dokuments
‣ Angabe mithilfe des <style>-Elements ‣ Innerhalb des <style>-Elements darf nur gültiger CSS-Code vorhanden sein! CSS-Grundlagen > Einbindungsmöglichkeiten > Kopfbereich 2. Dezember 2018 Einbindungsmöglichkeiten > Kopfbereich

<!DOCTYPE html> <html> <head> ... <style>...</style> </head> <body>...</body> </html> CSS-Grundlagen
> Einbindungsmöglichkeiten > Kopfbereich 2. Dezember 2018 Einbindungsmöglichkeiten > Kopfbereich

‣ Weitere Möglichkeit: Deﬁnition der Style-Anweisungen in einer externen Datei
‣ Dateiendung: .css ‣ Datei darf nur validen CSS-Code enthalten! ‣ Wird über den Kopfbereich des HTML-Dokuments mithilfe des <link>-Elements eingebunden ‣ Mehrere CSS-Dateien können eingebunden werden, indem für jede Datei ein eigenes  <link>-Element hinzugefügt wird CSS-Grundlagen > Einbindungsmöglichkeiten > Externe Datei 2. Dezember 2018 Einbindungsmöglichkeiten > Externe Datei

<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="style.css" /> </head>
<body>...</body> </html> CSS-Grundlagen > Einbindungsmöglichkeiten > Externe Datei 2. Dezember 2018 Einbindungsmöglichkeiten > Externe Datei

‣ Fragestellung: Wie können Style-Anweisungen auf HTML-/XML-Elemente angewendet werden, wenn
diese an anderer Stelle als die Elemente deﬁniert werden (bei der Deﬁnition im Kopfbereich oder einer externen Datei)? ‣ Lösung: CSS-Selektoren CSS-Grundlagen > Einbindungsmöglichkeiten > Fragestellung 2. Dezember 2018 Einbindungsmöglichkeiten > Fragestellung

Selektoren

‣ Zu gestaltende HTML-/XML-Elemente müssen mithilfe von sog. Selektoren bestimmt
werden ‣ Ein Selektor gibt an, auf welche Elemente eines HTML-Dokumentes die darauf folgenden  Style-Anweisungen angewendet werden sollen ‣ Dem Selektor folgt immer ein Bereich mit Style-Anweisungen, der mit  geschweiften Klammern gekennzeichnet ist ‣ Konvention: selektor { style-eigenschaft: wert; ... } CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

‣ Konventionen für bessere Lesbarkeit: – Erste Zeile: Selektor und
öffnende geschweifte Klammer – Nachfolgend eingerückt (!) pro Zeile genau 1 Style-Anweisung, mit Semikolon abschließend – Letzte Zeile: schließende geschweifte Klammer – Leerzeile CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

selektor-1 { style-eigenschaft-1: wert-1; style-eigenschaft-2: wert-2; } selektor-2 { style-eigenschaft-1:
wert-1; } CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

‣ Verschiedene Typen von Selektoren: – Universal-Selektor (selektiert alle Elemente
des HTML-Dokuments): * – Element-Selektor: section – Klassen-Selektor (mit führendem Punkt): .menu – ID-Selektor (mit führender Raute): #page – Attribut-Selektor (innerhalb eckiger Klammern): [type] oder [type="text"] – Pseudo-Selektor (mit führendem Doppelpunkt): :focus CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

‣ Selektoren können auch verschachtelt werden: – Leerzeichen (selektiert ein
Element innerhalb eines anderen Elements):  selektor-1 selektor-2 – Spitze Klammer (selektiert ein Element, das genau eine Hierarchieebene im Dokument tiefer liegt als das erste Element): selektor-1 > selektor-2 – Plus-Zeichen (selektiert ein Element, das der direkte Nachfolger des erstselektierten Elements ist): selektor-1 + selektor-2 CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren Nachfahre Kind Nachbar

‣ Sie können auch beliebig kombiniert werden (ausgenommen der Universal-Selektor!):
– ul.menu – section#content – input[type="text"] – a:focus – input#checkout[disabled] – ul.menu.menu-active – usw. CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

‣ html body { ... } ‣ .page .page-content {
... } ‣ .menu-item:focus .menu-sub-items { ... } ‣ #page .page-content { ... } ‣ body * { ... } ‣ form input[type="text"] { ... } ‣ .menu .menu-items .menu-item .menu-link { ... } CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

‣ ul > li { ... } ‣ select >
option { ... } ‣ .menu-items > .menu-item { ... } ‣ #page > .page-content { ... } ‣ label + input { ... } ‣ h1 + p { ... } ‣ .form-input[type="text"] + .error { ... } CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

‣ Fragestellung: Wenn ein Element im HTML-Dokument mit derselben Style-Eigenschaft
mehrfach selektiert wird, welche Style-Eigenschaft wird dann angewendet? ‣ Lösung: Speziﬁtät CSS-Grundlagen > Selektoren 2. Dezember 2018 Selektoren

Speziﬁtät

‣ Berechnet die Wichtigkeit eines Selektors ‣ Je höher die
Gewichtung, desto eher wird die Style-Anweisung angewendet ‣ Spezifität ist nur von Bedeutung, wenn mehrere Selektoren eine gleiche Style-Anweisung auf ein Element anwenden wollen ‣ Unterschiedliche Style-Anweisungen werden unabhängig von der Spezifität der zugehörigen Selektoren immer auf die Elemente angewendet CSS-Grundlagen > Spezifität 2. Dezember 2018 Spezifität

p { font-size: 16px; } section > p { color:
red; } <p>...</p> <section><p>...</p></section> CSS-Grundlagen > Speziﬁtät 2. Dezember 2018 Speziﬁtät font-size: 16px; font-size: 16px; color: red; CSS

p { color: black; } section > p { color:
red; } <p>...</p> <section><p>...</p></section> CSS-Grundlagen > Speziﬁtät 2. Dezember 2018 Speziﬁtät color: black; color: red; CSS

p { color: black; } section > p { color:
red; } <p style="color: blue;">...</p> <section><p>...</p></section> CSS-Grundlagen > Speziﬁtät 2. Dezember 2018 Speziﬁtät color: blue; color: red; CSS

CSS-Grundlagen > Speziﬁtät 2. Dezember 2018 Selektor-Typ Wertung Beispiel Universal-Selektor
0 * { ... } Element-Selektor 1 input { ... } Klassen-Selektor 2 .input-text { ... } Attribut-Selektor 3 [disabled] { ... } Pseudo-Selektor 4 :focus { ... } ID-Selektor 5 #checkout { ... } Inline-CSS 6 <input style="..." />

Hilfreiche Links

‣ MDN zur Speziﬁtät: https://mzl.la/2FNZ9AC ‣ CSS-Validator: https://bit.ly/1PuqMIf ‣ w3schools.com
(Referenz von CSS-Selektoren): https://bit.ly/2mMWokL ‣ Cheat Sheet: https://bit.ly/2PdG62i CSS-Grundlagen > Hilfreiche Links 2. Dezember 2018 Hilfreiche Links

Einstieg in die Frontend-Webentwicklung > 2. CS...

Einstieg in die Frontend-Webentwicklung > 2. CSS-Grundlagen

More Decks by Elias Häußler

Other Decks in Programming

Featured

Transcript