Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- fortbildungen:webdesign-lernen:css-spickzettel [18.11.2015 (13:25)] – [Häufig benutzte CSS Eigenschaften] retemirabile
+++ fortbildungen:webdesign-lernen:css-spickzettel [01.09.2025 (10:04)] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 17: / Zeile 17: @@
-{{youtube>80KGiY7cSVM?640x360}}
+{{youtube>CPKDQIvLrGY?640x360}}
 ===== Prinzip von CSS =====
@@ Zeile 38: / Zeile 37: @@
 ===== Aufbau einer CSS-Regel =====
-Eine CSS-Regel besteht aus dem **Selektor //(selector)//**, einer Liste von **Eigenschaften //(property)//** und deren konkreten **Werten //(value)//**. Wie bei allen „Computer-Sprachen“ muss man die exakte **Schreibweise** bis ins Detail beachten, damit keine Darstellungsfehler passieren. Achte also auf die Position der geschwungenen Klammern ''{}'', des Doppelpunkts '':'' und des Semikolons '';''  .
+Eine CSS-Regel besteht aus dem **Selektor //(selector)//**, einer Liste von **Eigenschaften //(property)//** und deren konkreten **Werten //(value)//**. Wie bei allen „Computer-Sprachen“ muss man die exakte **Schreibweise** bis ins Detail beachten, damit keine Darstellungsfehler passieren. Achte also auf die Position der geschwungenen Klammern ''{}'', des Doppelpunkts '':'' und des Semikolons '';''
 {{:fortbildungen:webdesign-lernen:css-regel.png?nolink|}}
@@ Zeile 47: / Zeile 46: @@
 |<100% 15em 10em >|
 ^Name^Beispiel^Erklärung^
-|Element-Selektor |''header''|Wählt das jeweilige HTML-Element aus, hier z.B. \\ \\ ''< header >…</header >''|
+|Element-Selektor |''header''|Wählt das jeweilige HTML-Element aus, hier z.B. \\ \\ ''<header>…</header >''|
 |mehrere Element-Selektoren|''h1, h2, h3'' |Wählt alle genannten HTML-Elemente aus, hier also \\ \\ ''<h1>…</h1>'', ''<h2>…</h2>'' und ''<h3>…</h3>''|
 |verschachtelte Element-Selektoren|''header h2'' |Wählt nur die HTML-Elemente aus, die der Verschachtelung entsprechen. Hier also nur die ''h2''-Elemente, die sich innerhalb des Elements ''header'' befinden\\ \\ ''<header><h2>…</h2></header>'' |
 |ID-Selektor|''#hauptartikel''|Wählt das HTML-Element aus, welches das ''id''-Attribut ''hauptartikel'' hat\\ \\ ''<article id="hauptartikel">…</article>''. \\ \\ Ein ''id''-Attribut kann nur ein Mal pro HTML-Seite verwendet werden. |
 |class-Selektor|''.infobox'' |Wählt die HTML-Elemente aus, welche das class-Attribut ''infobox'' haben. \\ \\ ''<aside class="infobox">…</aside>''. \\ \\ Im Gegensatz zum ''id''-Attribut kann das ''class''-Attribut mehrfach auf einer HTML-Seite vorkommen, man kann es benutzen, um mehrere Elemente zu einer Gruppe („Klasse“) zusammen zu fassen und gemeinsam zu gestalten.|
-|Pseudo-Klasse-Selektor|'':link''\\ '':visited''\\ '':hover''\\ …|Besondere Art von Selektor, der Element in bestimmten Zuständen auswählt, meist in Kombination mit dem ''a''-Element verwendet. \\ \\ ''a:link'' gilt für einen nicht besuchten Link\\ ''a:visited'' gilt für einen besuchten Link\\ ''a:hover'' gilt für einen Link, solange der Mauszeiger darüber steht|
+|Pseudo-Klasse-Selektor|'':link''\\ '':visited''\\ '':hover''\\ …|Besondere Art von Selektor, der ein Element in  einem bestimmten Zustand auswählt – meist in Kombination mit dem ''a''-Element verwendet. \\ \\ ''a:link'' gilt für einen nicht besuchten Link\\ ''a:visited'' gilt für einen besuchten Link\\ ''a:hover'' gilt für einen Link, solange der Mauszeiger darüber steht|
@@ Zeile 60: / Zeile 59: @@
-Wenn man beginnt, mit CSS zu arbeiten helfen die folgenden Eigenschaften schnell weiter. Wenn man konkrete Ideen hat, die darüber hinaus gehen, sollte man sich mit einer Referenz-Website wie z.B. **[[http://www.w3schools.com/cssref/|W3Schools CSS Properties]]** Stück für Stück weitere Eigenschaften aneignen.
+Wenn man beginnt, mit CSS zu arbeiten, helfen die folgenden Eigenschaften schnell weiter. Wenn man konkrete Ideen hat, die darüber hinaus gehen, sollte man sich mit einer Referenz-Website wie z.B. **[[http://www.w3schools.com/cssref/|W3Schools CSS Properties]]** Stück für Stück weitere Eigenschaften aneignen.