fortbildungen:webdesign-lernen:css-spickzettel
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
fortbildungen:webdesign-lernen:css-spickzettel [18.11.2015 (11:41)] – [Grundlegender Aufbau einer CSS-Datei] retemirabile | fortbildungen:webdesign-lernen:css-spickzettel [19.11.2016 (15:25)] – [Erklärvideo: Cascading Stylesheets] retemirabile | ||
---|---|---|---|
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|'': |
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:// | + | 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:// |
Zeile 68: | Zeile 67: | ||
Anstatt z.B. '' | Anstatt z.B. '' | ||
- | **Beispiel** | + | |
- | Die folgenden beiden Beispiele sind in ihrer Wirkung identisch: | + | Die folgenden beiden |
<code css> | <code css> | ||
Zeile 100: | Zeile 99: | ||
|[[http:// | |[[http:// | ||
|[[http:// | |[[http:// | ||
- | |||
Zeile 142: | Zeile 140: | ||
- | // dient für Randbemerkungen | + | /* dient für Randbemerkungen |
article aside { | article aside { | ||
margin:1em 0; | margin:1em 0; | ||
Zeile 150: | Zeile 148: | ||
- | /* in der Infobox erscheinen weiterführende Links | + | /* in der Infobox erscheinen weiterführende Links zu einem Artikel */ |
- | zu einem Artikel */ | + | |
aside.infobox { | aside.infobox { | ||
width: 40%; | width: 40%; | ||
Zeile 163: | Zeile 160: | ||
- | 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, | + | 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, |
- | Es gibt zwei Schreibweisen: | ||
- | <code css> | ||
- | // für einzeilige Kommentare) | ||
- | /* für mehrzeilige | ||
- | Kommentare */ | ||
- | </ | ||
===== Verbindung von HTML- und CSS-Datei ===== | ===== Verbindung von HTML- und CSS-Datei ===== | ||
Die CSS-Datei wird durch ein '' | Die CSS-Datei wird durch ein '' | ||
Zeile 196: | Zeile 187: | ||
| | ||
- | <!-- Hier stehen weitere HTML-Elemente, die dem jeweiligen | + | <!-- Hier stehen weitere HTML-Elemente --> |
- | | + | |
- | unten zu sehen --> | + | |
| | ||
fortbildungen/webdesign-lernen/css-spickzettel.txt · Zuletzt geändert: 06.08.2020 (11:28) von 127.0.0.1