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 (09:18)] – retemirabile | fortbildungen:webdesign-lernen:css-spickzettel [19.11.2016 (15:25)] – [Erklärvideo: Cascading Stylesheets] retemirabile | ||
---|---|---|---|
Zeile 2: | Zeile 2: | ||
+ | CSS steht für **// | ||
- | {{youtube> | + | **// |
+ | |||
+ | **// | ||
+ | |||
+ | **// | ||
+ | |||
+ | > // | ||
+ | |||
+ | Auf deutsch also etwa: Die Methode, wie verschiedene Stylesheets kombiniert werden und wie Konflikte zwischen ihnen aufgelöst werden. Diese Regeln sind durchaus komplex und werden im Artikel | ||
+ | |||
+ | ===== Erklärvideo: | ||
+ | |||
+ | |||
+ | {{youtube> | ||
===== Prinzip von CSS ===== | ===== Prinzip von CSS ===== | ||
+ | Modernem HTML und CSS liegt das Prinzip zugrunde, dass man Inhalt und Gestaltung in zwei verschiedene Bereiche trennt. | ||
+ | * HTML ist strukturierter Inhalt, | ||
+ | * CSS liefert die Gestaltungsinformationen für den Inhalt. | ||
+ | |||
+ | Eine CSS-Datei enthält also die Darstellungsinformationen, | ||
+ | |||
+ | Jede HTML-Datei enthält nur Inhalte, der mit [[fortbildungen: | ||
+ | |||
{{: | {{: | ||
+ | |||
+ | ==== Verschiedene CSS-Dateien für verschiedene Geräte ==== | ||
+ | |||
+ | Durch das Prinzip der Trennung von Inhalt und Gestaltung erlaubt es auch, den gleichen HTML-Inhalt je nach Kontext oder Gerät unterschiedlich zu gestalten. Man kann eine CSS-Datei für die Darstellung der Website auf dem Desktop anbieten, eine weitere für die kleinen Displays von Mobilgeräten und wieder eine andere für die Ausgabe an einen Drucker (wo z.B. Navigationselemente überflüssig sind und daher ausgeblendet werden können). | ||
{{: | {{: | ||
- | ===== Aufbau einer CSS-Regel ===== | + | ===== Aufbau einer CSS-Regel ===== |
+ | Eine CSS-Regel besteht aus dem **Selektor // | ||
{{: | {{: | ||
===== Arten von Selektoren ===== | ===== Arten von Selektoren ===== | ||
+ | Es gibt eine ganze Reihe von CSS-Selektoren. Hier sollen nur die wichtigsten erklärt werden. | ||
+ | |<100% 15em 10em >| | ||
+ | ^Name^Beispiel^Erklärung^ | ||
+ | |Element-Selektor |'' | ||
+ | |mehrere Element-Selektoren|'' | ||
+ | |verschachtelte Element-Selektoren|'' | ||
+ | |ID-Selektor|''# | ||
+ | |class-Selektor|'' | ||
+ | |Pseudo-Klasse-Selektor|'': | ||
+ | |||
+ | |||
+ | 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:// | ||
+ | |||
+ | |||
+ | <note tip> | ||
+ | Einige dieser Eigenschaften gibt es als „Zusammenfassungen“, | ||
+ | |||
+ | Anstatt z.B. '' | ||
+ | |||
+ | |||
+ | Die folgenden beiden **Beispiele** sind in ihrer Wirkung identisch: | ||
+ | |||
+ | <code css> | ||
+ | article { | ||
+ | border-width: | ||
+ | border-style: | ||
+ | border-color:# | ||
+ | } | ||
+ | |||
+ | article { | ||
+ | border: 1px solid #ccc; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | Ä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 ===== | ||
+ | |||
+ | Eine CSS-Datei hat einen sehr einfachen Aufbau: Sie enthält meist einfach eine Sammlung von CSS-Regeln. Die Reihenfolge der Regeln ist nur in fortgeschrittenen Spezialfällen von Bedeutung (Stichwort: „[[http:// | ||
+ | |||
+ | Hier ein Beispiel: | ||
+ | |||
+ | <code css> | ||
+ | body { | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | header { | ||
+ | margin: 2em 0; | ||
+ | padding: 1em; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | nav { | ||
+ | margin: 2px 0px; | ||
+ | padding: 0.5em; | ||
+ | border: 1px solid #ccc; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | article { | ||
+ | margin: 2em 0; | ||
+ | padding: 1em; | ||
+ | background-color:# | ||
+ | } | ||
+ | |||
+ | #main { | ||
+ | background-color:# | ||
+ | } | ||
+ | |||
+ | article section { | ||
+ | margin: 2em 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* dient für Randbemerkungen */ | ||
+ | article aside { | ||
+ | margin:1em 0; | ||
+ | border:1px solid #ccc; | ||
+ | background-color:# | ||
+ | } | ||
+ | |||
+ | |||
+ | /* in der Infobox erscheinen weiterführende Links zu einem Artikel */ | ||
+ | aside.infobox { | ||
+ | width: 40%; | ||
+ | float: right; | ||
+ | margin-left: | ||
+ | padding: 1em; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== 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