Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign-lernen:css-spickzettel

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
fortbildungen:webdesign-lernen:css-spickzettel [18.11.2015 (09:30)] retemirabilefortbildungen:webdesign-lernen:css-spickzettel [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 2: Zeile 2:
  
  
 +CSS steht für **//Cascading Stylesheets//**. 
  
-{{youtube>80KGiY7cSVM?640x360}}+**//style//** bedeutet „Stil“, im Kontext der Gestaltung von digitalen Produkten meint man damit meist das Aussehen von Elementen. 
 + 
 +**//sheet//** bedeutet „Blatt“ oder „Bogen“ – Ein Stylesheet ist also eine „Blatt voller Stilanweisungen“. 
 + 
 +**//cascading//** kommt von „Kaskade“, das ist meist ein Wasserfall, der über mehrere Stufen herabfließt. Im übertragenen Sinn ist bei CSS ein Prinzip gemeint, nach dem //stufenweise// festgelegt wird, welche CSS-Regeln für welche Elemente gelten. Der CSS-Mitautor Håkon Wium Lie schreibt [[http://people.opera.com/howcome/2006/phd/#h-357|auf seiner Website]] 
 + 
 +> //cascading:\\  The process of combining several style sheets and resolving conflicts between them.// 
 + 
 +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  [[http://www.sitepoint.com/web-foundations/cascade/|The Cascade]]  näher erklärt. 
 + 
 +===== Erklärvideo: Cascading Stylesheets ===== 
 + 
 + 
 +{{youtube>CPKDQIvLrGY?640x360}}
  
 ===== Prinzip von CSS ===== ===== Prinzip von CSS =====
-Eine CSS-Datei enthält die Darstellungsinformationenmit denen eine verknüpfte HTML-Struktur visuell gestaltet werden soll. Anstatt die Informationen über z.B. Schriftgröße, Farben, Layout etcmit dem HTML-Inhalt zu mischenwerden all diese Informationen in eine oder wenige CSS-Dateien ausgelagert. So sind sie übersichtlicher und leichter zu pflegen+Modernem HTML und CSS liegt das Prinzip zugrundedass man Inhalt und Gestaltung in zwei verschiedene Bereiche trennt 
 +  * HTML ist strukturierter Inhalt,  
 +  * CSS liefert die Gestaltungsinformationen für den Inhalt
  
-Jede HTML-Datei enthält nur Inhalte, der mit [[fortbildungen:webdesign-lernen:html-spickzettel|HTML-Elementen]] strukturiert ist. Im <head>-Bereich der Datei wird eine Verknüpfung zur CSS-Datei hergestellt, von der die HTML-Datei ihre Darstellungsinformationen „holt“ ([[#verbindung-von-html-und-css-dateisiehe unten]]). +Eine CSS-Datei enthält also die Darstellungsinformationen, mit denen eine verknüpfte HTML-Struktur visuell gestaltet werden soll. Anstatt die Informationen über z.B. Schriftgröße, Farben, Layout etc. mit dem HTML-Inhalt zu mischen, werden all diese Informationen in eine oder wenige CSS-Dateien ausgelagert. So sind sie übersichtlicher und leichter zu pflegen.  
 + 
 +Jede HTML-Datei enthält nur Inhalte, der mit [[fortbildungen:webdesign-lernen:html-spickzettel|HTML-Elementen]] strukturiert ist. Im <head>-Bereich der Datei wird eine Verknüpfung zur CSS-Datei hergestellt, von der die HTML-Datei ihre Darstellungsinformationen „holt“ ([[#verbindung-von-html-und-css-datei|siehe unten]]). 
  
 {{:fortbildungen:webdesign-lernen:html-css-prinzip.png?nolink|}} {{:fortbildungen:webdesign-lernen:html-css-prinzip.png?nolink|}}
 +
 +==== 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). 
  
 {{:fortbildungen:webdesign-lernen:css-geraetespezifisch.png?nolink|}} {{:fortbildungen:webdesign-lernen:css-geraetespezifisch.png?nolink|}}
  
-===== Aufbau einer CSS-Regel =====  +===== 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 '';''   
 {{:fortbildungen:webdesign-lernen:css-regel.png?nolink|}} {{:fortbildungen:webdesign-lernen:css-regel.png?nolink|}}
  
 ===== 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 |''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 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|
 +
 +
 +Weitere Selektoren erklärt der Artikel [[http://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors]]. 
  
 ===== 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://www.w3schools.com/cssref/|W3Schools CSS Properties]]** Stück für Stück weitere Eigenschaften aneignen. 
 +
 +
 +<note tip>
 +Einige dieser Eigenschaften gibt es als „Zusammenfassungen“, um weniger schreiben zu müssen. 
 +
 +Anstatt z.B. ''border-width'', ''border-style'' und ''border-color'' jeweils einzeln anzugeben, was viel Tipperei wäre, kann man sie in der Eigenschaft ''border'' zusammen fassen. 
 +
 +
 +Die folgenden beiden **Beispiele** sind in ihrer Wirkung identisch: 
 +
 +<code css>
 +article {
 +    border-width:1px;
 +    border-style: solid;
 +    border-color:#ccc;
 +}
 +
 +article {
 +    border: 1px solid #ccc;
 +}
 +
 +</code>
 +
 +</note>
 +
 +Ähnliches gilt z.B. für ''background'' (umfasst ''background-color'', ''background-image'' etc.), ''margin'' (umfasst ''margin-top'', ''margin-right'' etc.), ''font'' (umfasst ''font-family'', ''font-size'' etc.) und andere. 
 +
 +^Eigenschaft^Erklärung^
 +|[[http://www.w3schools.com/cssref/pr_background-color.asp|background-color]]|Hintergrundfarbe eines Elements|
 +|[[http://www.w3schools.com/cssref/css3_pr_background.asp|background]]|Zusammenfassung verschiedener ''background''-Eigenschaften|
 +|[[http://www.w3schools.com/cssref/pr_border.asp|border]]|Zusammenfassung verschiedener ''border''-Eigenschaften|
 +|[[http://www.w3schools.com/cssref/pr_margin.asp|margin]]|Zusammenfassung verschiedener ''margin''-Eigenschaften|
 +|[[http://www.w3schools.com/cssref/pr_padding.asp|padding]]|Zusammenfassung verschiedener ''padding''-Eigenschaften|
 +|[[http://www.w3schools.com/cssref/pr_dim_line-height.asp|line-height]]|Zeilenhöhe eines Textes|
 +|[[http://www.w3schools.com/cssref/pr_text_text-align.asp|text-align]]|Text-Aurichtung (linksbündig, rechtsbündig, zentriert etc.)|
 +|[[http://www.w3schools.com/cssref/pr_text_text-decoration.asp|text-decoration]]|Unterstreichung u.ä.|
 +|[[http://www.w3schools.com/cssref/pr_font_font-family.asp|font-family]]|Schriftfamilie|
 +|[[http://www.w3schools.com/cssref/pr_font_font-size.asp|font-size]]|Schriftgröße|
 +|[[http://www.w3schools.com/cssref/pr_font_font.asp|font]]|Zusammenfassung verschiedener Schrift-Eigenschaften|
  
  
Zeile 62: Zeile 140:
  
  
 +/* dient für Randbemerkungen */
 article aside { article aside {
  margin:1em 0;  margin:1em 0;
Zeile 68: Zeile 147:
 } }
  
 +
 +/* in der Infobox erscheinen weiterführende Links zu einem Artikel */
 aside.infobox { aside.infobox {
  width: 40%;  width: 40%;
Zeile 75: Zeile 156:
 } }
 </code> </code>
 +
 +==== 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, ist es sinnvoll, Kommentare zu hinterlassen. Man schreibt den Kommentar zwischen folgende Zeichenkombination ''/ dies ist ein Kommentar  */''
 +
 +
 ===== Verbindung von HTML- und CSS-Datei ===== ===== Verbindung von HTML- und CSS-Datei =====
 +Die CSS-Datei wird durch ein ''link''-Element im ''<head>''-Bereich einer HTML-Datei mit dieser verbunden. Einzeln sieht dieses Element so aus: 
  
 <code html5> <code html5>
-<link rel="stylesheet" href="styles.css">+<link rel="stylesheet" href="meinestile.css"
 +</code> 
 + 
 +Im Kontext der ganzen HTML-Datei so:  
 + 
 +<code html5> 
 +<!doctype html> 
 +<html> 
 +  <head> 
 +    <meta charset="UTF-8"> 
 +    <title>Seitentitel</title> 
 +     
 +    <link rel="stylesheet" href="meinestile.css"> <!-- Dieses Element stellt die Verbindung  
 +    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. --> 
 + 
 +  </head> 
 +  <body> 
 + 
 +   
 +  <!-- Hier stehen weitere HTML-Elemente --> 
 +   
 +  
 +  </body> 
 +</html>
 </code> </code>
fortbildungen/webdesign-lernen/css-spickzettel.1447835405.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki