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 (11:41)] – [Grundlegender Aufbau einer CSS-Datei] retemirabilefortbildungen:webdesign-lernen:css-spickzettel [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 17: Zeile 17:
  
  
-{{youtube>80KGiY7cSVM?640x360}} +{{youtube>CPKDQIvLrGY?640x360}}
  
 ===== 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 //(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|}} {{:fortbildungen:webdesign-lernen:css-regel.png?nolink|}}
Zeile 47: Zeile 46:
 |<100% 15em 10em >| |<100% 15em 10em >|
 ^Name^Beispiel^Erklärung^ ^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>''| |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>'' | |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. | |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.| |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ähltmeist 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 arbeitenhelfen 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. 
  
  
Zeile 68: Zeile 67:
 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.  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. 
  
-**Beispiel** + 
-Die folgenden beiden Beispiele sind in ihrer Wirkung identisch: +Die folgenden beiden **Beispiele** sind in ihrer Wirkung identisch: 
  
 <code css> <code css>
Zeile 100: Zeile 99:
 |[[http://www.w3schools.com/cssref/pr_font_font-size.asp|font-size]]|Schriftgröße| |[[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| |[[http://www.w3schools.com/cssref/pr_font_font.asp|font]]|Zusammenfassung verschiedener Schrift-Eigenschaften|
- 
  
  
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, ist es sinnvoll, Kommentare zu hinterlassen. +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  */''
  
-Es gibt zwei Schreibweisen:  
  
-<code css> 
-// für einzeilige Kommentare) 
-/*  für mehrzeilige  
-Kommentare */ 
-</code> 
 ===== 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:  Die CSS-Datei wird durch ein ''link''-Element im ''<head>''-Bereich einer HTML-Datei mit dieser verbunden. Einzeln sieht dieses Element so aus: 
Zeile 196: Zeile 187:
  
      
-  <!-- Hier stehen weitere HTML-Elemente, die dem jeweiligen  +  <!-- Hier stehen weitere HTML-Elemente -->
-       Inhalt entsprechen. Beispiele sind in der Abbildung +
-       unten zu sehen -->+
      
    
fortbildungen/webdesign-lernen/css-spickzettel.1447843273.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki