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:43)] – [Kommentare] 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 189: 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.1447843400.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki