fortbildungen:webdesign-lernen:css-spickzettel
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
fortbildungen:webdesign-lernen:css-spickzettel [18.11.2015 (11:18)] – [Häufig benutzte CSS Eigenschaften] retemirabile | fortbildungen:webdesign-lernen:css-spickzettel [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1 | ||
---|---|---|---|
Zeile 17: | Zeile 17: | ||
- | {{youtube> | + | {{youtube> |
===== Prinzip von CSS ===== | ===== Prinzip von CSS ===== | ||
Zeile 38: | Zeile 37: | ||
===== Aufbau einer CSS-Regel ===== | ===== Aufbau einer CSS-Regel ===== | ||
- | Eine CSS-Regel besteht aus dem **Selektor // | + | Eine CSS-Regel besteht aus dem **Selektor // |
{{: | {{: | ||
Zeile 47: | Zeile 46: | ||
|<100% 15em 10em >| | |<100% 15em 10em >| | ||
^Name^Beispiel^Erklärung^ | ^Name^Beispiel^Erklärung^ | ||
- | |Element-Selektor |'' | + | |Element-Selektor |'' |
|mehrere Element-Selektoren|'' | |mehrere Element-Selektoren|'' | ||
|verschachtelte Element-Selektoren|'' | |verschachtelte Element-Selektoren|'' | ||
|ID-Selektor|''# | |ID-Selektor|''# | ||
|class-Selektor|'' | |class-Selektor|'' | ||
- | |Pseudo-Klasse-Selektor|'': | + | |Pseudo-Klasse-Selektor|'': |
Weitere Selektoren erklärt der Artikel [[http:// | Weitere Selektoren erklärt der Artikel [[http:// | ||
+ | |||
===== Häufig benutzte CSS Eigenschaften ===== | ===== Häufig benutzte CSS Eigenschaften ===== | ||
- | 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:// | + | 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:// |
<note tip> | <note tip> | ||
- | Einige dieser Eigenschaften gibt es als „Zusammenfassungen“, | + | Einige dieser Eigenschaften gibt es als „Zusammenfassungen“, |
- | Anstatt z.B. '' | + | Anstatt z.B. '' |
- | **Beispiel** | + | |
- | Die folgenden beiden Beispiele sind in ihrer Wirkung identisch: | + | Die folgenden beiden |
<code css> | <code css> | ||
article { | article { | ||
+ | border-width: | ||
border-style: | border-style: | ||
border-color:# | border-color:# | ||
- | border-width: | ||
} | } | ||
Zeile 80: | Zeile 81: | ||
} | } | ||
- | Ähnliches gilt z.B. für '' | + | </ |
</ | </ | ||
- | |'' | + | Ähnliches gilt z.B. für '' |
+ | |||
+ | ^Eigenschaft^Erklärung^ | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |[[http:// | ||
+ | |||
===== Grundlegender Aufbau einer CSS-Datei ===== | ===== Grundlegender Aufbau einer CSS-Datei ===== | ||
Zeile 124: | Zeile 140: | ||
+ | /* dient für Randbemerkungen */ | ||
article aside { | article aside { | ||
margin:1em 0; | margin:1em 0; | ||
Zeile 130: | Zeile 147: | ||
} | } | ||
+ | |||
+ | /* in der Infobox erscheinen weiterführende Links zu einem Artikel */ | ||
aside.infobox { | aside.infobox { | ||
width: 40%; | width: 40%; | ||
Zeile 137: | Zeile 156: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== Kommentare ==== | ||
+ | |||
+ | |||
+ | In CSS-Dateien kann man Kommentare einbauen, die vom Browser ignoriert werden. Das ist nützlich, um sich später noch erinnern zu können, warum man bestimmte Dinge so und nicht anders gestaltet hat. Auch wenn man mit anderen zusammenarbeitet, | ||
+ | |||
+ | |||
===== Verbindung von HTML- und CSS-Datei ===== | ===== Verbindung von HTML- und CSS-Datei ===== | ||
+ | Die CSS-Datei wird durch ein '' | ||
<code html5> | <code html5> | ||
- | <link rel=" | + | <link rel=" |
+ | </ | ||
+ | |||
+ | Im Kontext der ganzen HTML-Datei so: | ||
+ | |||
+ | <code html5> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | |||
+ | <link rel=" | ||
+ | der HTML-Datei mit der CSS-Datei her. Der Dateiname der CSS-Datei kann beliebig gewählt | ||
+ | werden. Man muss nur darauf achten, dass der Pfad zur CSS-Datei korrekt ist. --> | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | |||
+ | |||
+ | <!-- Hier stehen weitere HTML-Elemente --> | ||
+ | |||
+ | |||
+ | </ | ||
+ | </html> | ||
</ | </ |
fortbildungen/webdesign-lernen/css-spickzettel.txt · Zuletzt geändert: 06.08.2020 (11:28) von 127.0.0.1