CSS: Unterschied zwischen den Versionen

Aus KGS-Wiki
(Tabellen reorganisiert, RGB verlinkt)
K (HTML-Template)
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
'''CSS''' ist eine Sprache, um Gestaltungsregeln für [[HTML]]-Dokumente festzulegen.
[[CSS|CSS (''C''ascading ''S''tyle ''S''heets)]] ist eine Sprache, um Gestaltungsregeln für [[HTML]]-Dokumente festzulegen.


Diese Regeln folgen diesem Aufbau:
Diese Regeln folgen diesem Aufbau:
Selektor '''{'''
<syntaxhighlight lang="css">
  Attribut 1''':''' Wert 1''';'''
Selektor {
  Attribut 2''':''' Wert 2''';'''
  Attribut 1: Wert 1;
  ...
  Attribut 2: Wert 2;
'''}'''
  ...
}
</syntaxhighlight>
 
Der '''Selektor''' gibt hierbei an, für welche Elemente die folgenden Regeln gelten sollen. Jede Regel hat den Aufbau ''Attribut''<code>:</code>''Wert''<code>;</code>, wobei die Attribute z.B. die Hintergrundfarbe, die Breite der Umrandung oder die Schriftgröße sein können und der Wert in Abhängigkeit davon frei gewählt werden kann.
Der '''Selektor''' gibt hierbei an, für welche Elemente die folgenden Regeln gelten sollen. Jede Regel hat den Aufbau ''Attribut''<code>:</code>''Wert''<code>;</code>, wobei die Attribute z.B. die Hintergrundfarbe, die Breite der Umrandung oder die Schriftgröße sein können und der Wert in Abhängigkeit davon frei gewählt werden kann.


Diese Gestaltungsregeln werden mit dem Tag <code><style></code>...<code></style></code> umgeben und im <code><head></code>-Teil der Seite platziert.
Diese Gestaltungsregeln werden entweder mit dem Tag {{HTML|<style>...</style>}} umgeben und im {{HTML|<head>}}-Teil der Seite platziert oder (besser) in einer separaten Datei mit der Endung <code>.css</code> gespeichert und mit {{HTML|1=<link rel="stylesheet" href="DATEINAME.css"/>}} im {{HTML|<head>}}-Teil der HTML-Seite verlinkt.


'''Achtung:''' CSS ist '''sehr streng''', was die korrekte Schreibweise betrifft! Wenn eine geschweifte Klammer, ein Doppelpunkt oder das Semikolon am Ende einer Regel fehlt, führt dies in der Regel dazu, dass der gesamte Block von Regeln nicht zur Anwendung kommt. Im Umgang mit CSS ist daher '''höchste Sorgfalt geboten'''!
{{Achtung|CSS ist sehr streng, was die korrekte Schreibweise betrifft! Wenn eine geschweifte Klammer, ein Doppelpunkt oder das Semikolon am Ende einer Regel fehlt, führt dies in der Regel dazu, dass der gesamte Block von Regeln nicht zur Anwendung kommt.
 
'''Im Umgang mit CSS ist daher höchste Sorgfalt geboten!'''}}


==Selektoren==
==Selektoren==
Die einfachsten Selektoren sind die HTML-Tags selbst. In diesem Fall verwendet man einfach den Namen des Tags, ohne die spitzen Klammern und ohne alle Attribute, als Selektor. Um beispielsweise alle <code><nowiki><h1></nowiki></code>-Elemente in blauer Schrift darzustellen, schreibt man<syntaxhighlight lang="css" line="1">
Die einfachsten Selektoren sind die HTML-Tags selbst. In diesem Fall verwendet man einfach den Namen des Tags, ohne die spitzen Klammern und ohne alle Attribute, als Selektor. Um beispielsweise alle {{HTML|<h1>}}-Elemente in blauer Schrift darzustellen, schreibt man<syntaxhighlight lang="css" line="1">
h1 {
h1 {
   color: blue;
   color: blue;
}
}
</syntaxhighlight>Wenn eine Regel für mehrere Tags auf einmal gelten soll, kann man diese durch Kommata getrennt angeben. Wenn also nicht nur <code><nowiki><h1></nowiki></code>-, sondern auch <code><nowiki><h2></nowiki></code>- und <code><nowiki><h3></nowiki></code>-Überschriften blau gedruckt werden sollen, kann man das folgendermaßen aufschreiben:<syntaxhighlight lang="css" line="1">
</syntaxhighlight>Wenn eine Regel für mehrere Tags auf einmal gelten soll, kann man diese durch Kommata getrennt angeben. Wenn also nicht nur {{HTML|<h1>}}-, sondern auch {{HTML|<h2>}}- und {{HTML|<h3>}}-Überschriften blau gedruckt werden sollen, kann man das folgendermaßen aufschreiben:<syntaxhighlight lang="css" line="1">
h1, h2, h3 {
h1, h2, h3 {
   color: blue;
   color: blue;
Zeile 24: Zeile 29:
</syntaxhighlight>
</syntaxhighlight>


==Regeln==
== Regeln==
CSS ist ein sehr mächtiges Gestaltungswerkzeug. Aus diesem Grund werden hier nur einige Regeln kurz beschrieben.
CSS ist ein sehr mächtiges Gestaltungswerkzeug. Aus diesem Grund werden hier nur einige Regeln kurz beschrieben.


Zeile 34: Zeile 39:
|-
|-
|<code>font&#8209;family</code>
|<code>font&#8209;family</code>
|<code>Arial</code><br/><code>Georgia</code><br/><code>sans-serif</code><br/><code>serif</code><br/><code>monospace</code><br/><code>"Source Sans Pro", "Linux Libertine", "Cambria", serif</code>
|<code>Arial</code><br /><code>Georgia</code><br /><code>sans-serif</code><br /><code>serif</code><br /><code>monospace</code><br /><code>"Source Sans Pro", "Linux Libertine", "Cambria", serif</code>
|Legt die '''Schriftart''' des ausgewählten Elements fest. Es können mehrere Schriftarten angegeben werden; verwendet wird dann die erste, die zur Verfügung steht.
|Legt die '''Schriftart''' des ausgewählten Elements fest. Es können mehrere Schriftarten angegeben werden; verwendet wird dann die erste, die zur Verfügung steht.
sans-serif, serif und monospace sind so genannte Schriftfamilien für [https://de.wikipedia.org/wiki/Antiqua Antiqua]-, [https://de.wikipedia.org/wiki/Grotesk_(Schrift) Grotesk]- und [https://de.wikipedia.org/wiki/Nichtproportionale_Schriftart Festbreitenschriften]; für deren Darstellung wird auf die entsprechenden Einstellungen des Browsers zurückgegriffen.
sans-serif, serif und monospace sind so genannte Schriftfamilien für [https://de.wikipedia.org/wiki/Antiqua Antiqua]-, [https://de.wikipedia.org/wiki/Grotesk_(Schrift) Grotesk]- und [https://de.wikipedia.org/wiki/Nichtproportionale_Schriftart Festbreitenschriften]; für deren Darstellung wird auf die entsprechenden Einstellungen des Browsers zurückgegriffen.
|-
|-
|<code>font&#8209;size</code>
|<code>font&#8209;size</code>
|<code>xx-small</code><br/><code>x-small</code><br/><code>small</code><br/><code>medium</code><br/><code>large</code><br/><code>x-large</code><br/><code>xx-large</code><br/><code>smaller</code><br/><code>larger</code><br/><code>20px</code><br/><code>70%</code><br/><code>2rem</code>
|<code>xx-small</code><br /><code>x-small</code><br /><code>small</code><br /><code>medium</code><br /><code>large</code><br /><code>x-large</code><br /><code>xx-large</code><br /><code>smaller</code><br /><code>larger</code><br /><code>20px</code><br /><code>70%</code><br /><code>2rem</code>  
|Legt die '''Schriftgröße''' des ausgewählten Elements fest. <code>xx-small</code> bis <code>xx-large</code> sind Kategorien, deren Interpretation dem Browser überlassen wird. <code>smaller</code>, <code>larger</code> und Prozentangaben wie <code>50%</code> beziehen sich auf die Schriftgröße des umgebenden Elements. Es können auch absolute Angaben wie <code>40px</code> (40 [[Pixel]] hoch) oder <code>3mm</code> (nur für den Druck zu empfehlen) verwendet werden. <code>1rem</code> ist die Standardschriftgröße des <code><body></code>, eine Schriftgröße von <code>1.5rem</code> ist also anderthalbmal so groß.
|Legt die '''Schriftgröße''' des ausgewählten Elements fest. <code>xx-small</code> bis <code>xx-large</code> sind Kategorien, deren Interpretation dem Browser überlassen wird. <code>smaller</code>, <code>larger</code> und Prozentangaben wie <code>50%</code> beziehen sich auf die Schriftgröße des umgebenden Elements. Es können auch absolute Angaben wie <code>40px</code> (40 [[Pixel]] hoch) oder <code>3mm</code> (nur für den Druck zu empfehlen) verwendet werden. <code>1rem</code> ist die Standardschriftgröße des <code><body></code>, eine Schriftgröße von <code>1.5rem</code> ist also anderthalbmal so groß.
|-
|-
|<code>font&#8209;weight</code>
|<code>font&#8209;weight</code>
|<code>normal</code><br/><code>bold</code><br/><code>100</code><br/><code>400</code><br/><code>900</code>
|<code>normal</code><br /><code>bold</code><br /><code>100</code><br /><code>400</code><br /><code>900</code>
|Legt die '''Dicke der Schrift''' des ausgewählten Elements fest. <code>normal</code> ist normal, <code>bold</code> ist fett, mit einer Zahl zwischen 0 und 1000 kann die Größe, wenn die Schriftart das unterstützt, sehr fein festgelegt werden.
| Legt die '''Dicke der Schrift''' des ausgewählten Elements fest. <code>normal</code> ist normal, <code>bold</code> ist fett, mit einer Zahl zwischen 0 und 1000 kann die Größe, wenn die Schriftart das unterstützt, sehr fein festgelegt werden.
|-
|-
|<code>font&#8209;style</code>
|<code>font&#8209;style</code>
|<code>normal</code><br/><code>italic</code><br/><code>oblique</code>
|<code>normal</code><br /><code>italic</code><br /><code>oblique</code>
|Legt fest, ob die Schrift des ausgewählten Elements '''normal, kursiv''' (<code>italic</code>) '''oder schräg''' (<code>oblique</code>) erscheinen soll.
|Legt fest, ob die Schrift des ausgewählten Elements '''normal, kursiv''' (<code>italic</code>) '''oder schräg''' (<code>oblique</code>) erscheinen soll.
|-
|
|
|
|}
|}


Zeile 62: Zeile 63:
|-
|-
|<code>color</code>
|<code>color</code>
| rowspan="2" |<code>blue</code><br/><code>hot-pink</code><br/><code>#BADB01</code><br/><code>rgb(42,69,123)</code>
| rowspan="2" |<code>blue</code><br /><code>hot-pink</code><br /><code>#BADB01</code><br /><code>rgb(42,69,123)</code>
|Legt die Schriftfarbe des ausgewählten Elements fest, entweder durch die Angabe eines Farbnamens oder durch den [[RGB-Farbmodell|RGB-Farbcode]].
|Legt die Schriftfarbe des ausgewählten Elements fest, entweder durch die Angabe eines Farbnamens oder durch den [[RGB-Farbmodell|RGB-Farbcode]].
|-
|-
Zeile 69: Zeile 70:
|}
|}


=== Größen und Abstände ===
===Größen und Abstände===
{| class="wikitable"
{| class="wikitable"
|+
|+
Zeile 76: Zeile 77:
!Erklärung
!Erklärung
|-
|-
|<code>width</code><br/><code>max-width</code><br/><code>min-width</code>
|<code>width</code><br /><code>max-width</code><br /><code>min-width</code>
| rowspan="4" |<code>500px</code><br/><code>40%</code><br/><code>50vw</code><br/><code>20vh</code>
| rowspan="4" |<code>500px</code><br /><code>40%</code><br /><code>50vw</code><br /><code>20vh</code>
|Legt die Breite, maximale Breite oder minimale Breite eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, <code>1vw</code> ist ein Prozent der Breite des Browserfensters.
|Legt die Breite, maximale Breite oder minimale Breite eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, <code>1vw</code> ist ein Prozent der Breite des Browserfensters.
|-
|-
|<code>height</code><br/><code>max-height</code><br/><code>min-height</code>
|<code>height</code><br /><code>max-height</code><br /><code>min-height</code>
|Legt die Höhe, maximale Höhe oder minimale Höhe eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, <code>1vh</code> ist ein Prozent der Höhe des Browserfensters.
|Legt die Höhe, maximale Höhe oder minimale Höhe eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, <code>1vh</code> ist ein Prozent der Höhe des Browserfensters.
|-
|-
|<code>margin</code><br/><code>margin&#8209;top</code><br/><code>margin&#8209;right</code><br/><code>margin&#8209;bottom</code><br/><code>margin&#8209;left</code>
|<code>margin</code><br /><code>margin&#8209;top</code><br /><code>margin&#8209;right</code><br /><code>margin&#8209;bottom</code><br /><code>margin&#8209;left</code>
|Legt die Breite des Freiraums fest, der ein Element umgibt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.
|Legt die Breite des Freiraums fest, der ein Element umgibt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.
|-
|-
|<code>padding</code><br/><code>padding&#8209;top</code><br/><code>padding&#8209;right</code><br/><code>padding&#8209;bottom</code><br/><code>padding&#8209;left</code>
|<code>padding</code><br /><code>padding&#8209;top</code><br /><code>padding&#8209;right</code><br /><code>padding&#8209;bottom</code><br /><code>padding&#8209;left</code>
|Legt die Breite des Freiraums fest, der zwischen dem Text eines Elements und dessen (gedachter) Rahmenlinie liegt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.
|Legt die Breite des Freiraums fest, der zwischen dem Text eines Elements und dessen (gedachter) Rahmenlinie liegt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.
|}
|}


=== Rahmen ===
===Rahmen===
{| class="wikitable"
{| class="wikitable"
|+
|+
Zeile 97: Zeile 98:
!Erklärung
!Erklärung
|-
|-
|<code>border</code><br/><code>border&#8209;top</code><br/><code>border&#8209;right</code><br/><code>border&#8209;bottom</code><br/><code>border&#8209;left</code>
|<code>border</code><br /><code>border&#8209;top</code><br /><code>border&#8209;right</code><br /><code>border&#8209;bottom</code><br /><code>border&#8209;left</code>
|<code>1px solid black</code><br/><code>2px dotted red</code><br/><code>5px dashed rgb(123,45,67)</code><br/><code>20px double #C0FFEE</code>
|<code>1px solid black</code><br /><code>2px dotted red</code><br /><code>5px dashed rgb(123,45,67)</code><br /><code>20px double #C0FFEE</code>  
|Legt das Aussehen der Rahmenlinie um das ausgewählte Element fest. Angegeben werden müssen Linienbreite, Linienstil und Linienfarbe. Die obere, rechte, linke und untere Rahmenlinie können individuell gestaltet werden.
| Legt das Aussehen der Rahmenlinie um das ausgewählte Element fest. Angegeben werden müssen Linienbreite, Linienstil und Linienfarbe. Die obere, rechte, linke und untere Rahmenlinie können individuell gestaltet werden.
|-
|-
|<code>border&#8209;collapse</code>
|<code>border&#8209;collapse</code>
|<code>separate</code><br/><code>collapse</code>
|<code>separate</code><br /><code>collapse</code>
|Legt fest, ob die Rahmenlinien zweier benachbarter Elemente einzeln (<code>separate</code>) oder als eine Linie (<code>collapse</code>) dargestellt werden sollen.
|Legt fest, ob die Rahmenlinien zweier benachbarter Elemente einzeln (<code>separate</code>) oder als eine Linie (<code>collapse</code>) dargestellt werden sollen.
|}
|}


== Zum Weiterlesen ==
==Zum Weiterlesen==


* [https://weiterbildung-informatik.wollw.de/chapter2/part2/sec2/ CSS-Referenz des IQSH]
* [https://weiterbildung.stichel.uk/chapter2/part2/sec2/ CSS-Referenz des IQSH 🇩🇪]
* [https://w3schools.com/CSS CSS-Tutorial von W3Schools]
* {{W3Schools|CSS|CSS-Tutorial}}
* [https://wiki.selfhtml.org/wiki/CSS CSS-Referenz von SelfHTML.org]
* [https://wiki.selfhtml.org/wiki/CSS CSS-Referenz von SelfHTML.org 🇩🇪]
* [https://www.w3schools.com/cssref/css_colors.php|Liste Liste der CSS-Farbnamen]
* {{W3Schools|cssref/css_colors.php|Liste der CSS-Farbnamen}}
[[Kategorie:Web-Programmierung]]
[[Kategorie:Web-Programmierung]]
[[Kategorie:Sprache]]
[[Kategorie:Sprache]]
[[Kategorie:Gestaltung]]
[[Kategorie:Gestaltung]]

Aktuelle Version vom 11. November 2024, 09:25 Uhr

CSS (Cascading Style Sheets) ist eine Sprache, um Gestaltungsregeln für HTML-Dokumente festzulegen.

Diese Regeln folgen diesem Aufbau: 

Selektor {
  Attribut 1: Wert 1;
  Attribut 2: Wert 2;
  ...
}

Der Selektor gibt hierbei an, für welche Elemente die folgenden Regeln gelten sollen. Jede Regel hat den Aufbau Attribut:Wert;, wobei die Attribute z.B. die Hintergrundfarbe, die Breite der Umrandung oder die Schriftgröße sein können und der Wert in Abhängigkeit davon frei gewählt werden kann.

Diese Gestaltungsregeln werden entweder mit dem Tag <style>...</style> umgeben und im <head>-Teil der Seite platziert oder (besser) in einer separaten Datei mit der Endung .css gespeichert und mit <link rel="stylesheet" href="DATEINAME.css"/> im <head>-Teil der HTML-Seite verlinkt.

⚠️
Achtung

CSS ist sehr streng, was die korrekte Schreibweise betrifft! Wenn eine geschweifte Klammer, ein Doppelpunkt oder das Semikolon am Ende einer Regel fehlt, führt dies in der Regel dazu, dass der gesamte Block von Regeln nicht zur Anwendung kommt.

Im Umgang mit CSS ist daher höchste Sorgfalt geboten!

Selektoren

Die einfachsten Selektoren sind die HTML-Tags selbst. In diesem Fall verwendet man einfach den Namen des Tags, ohne die spitzen Klammern und ohne alle Attribute, als Selektor. Um beispielsweise alle <h1>-Elemente in blauer Schrift darzustellen, schreibt man

h1 {
  color: blue;
}

Wenn eine Regel für mehrere Tags auf einmal gelten soll, kann man diese durch Kommata getrennt angeben. Wenn also nicht nur <h1>-, sondern auch <h2>- und <h3>-Überschriften blau gedruckt werden sollen, kann man das folgendermaßen aufschreiben:

h1, h2, h3 {
  color: blue;
}

Regeln

CSS ist ein sehr mächtiges Gestaltungswerkzeug. Aus diesem Grund werden hier nur einige Regeln kurz beschrieben.

Schrift

Attribut Beispielwerte Erklärung
font‑family Arial
Georgia
sans-serif
serif
monospace
"Source Sans Pro", "Linux Libertine", "Cambria", serif 		Legt die Schriftart des ausgewählten Elements fest. Es können mehrere Schriftarten angegeben werden; verwendet wird dann die erste, die zur Verfügung steht.

sans-serif, serif und monospace sind so genannte Schriftfamilien für Antiqua-, Grotesk- und Festbreitenschriften; für deren Darstellung wird auf die entsprechenden Einstellungen des Browsers zurückgegriffen.

font‑size xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
20px
70%
2rem 		Legt die Schriftgröße des ausgewählten Elements fest. xx-small bis xx-large sind Kategorien, deren Interpretation dem Browser überlassen wird. smaller, larger und Prozentangaben wie 50% beziehen sich auf die Schriftgröße des umgebenden Elements. Es können auch absolute Angaben wie 40px (40 Pixel hoch) oder 3mm (nur für den Druck zu empfehlen) verwendet werden. 1rem ist die Standardschriftgröße des <body>, eine Schriftgröße von 1.5rem ist also anderthalbmal so groß.
font‑weight normal
bold
100
400
900 		Legt die Dicke der Schrift des ausgewählten Elements fest. normal ist normal, bold ist fett, mit einer Zahl zwischen 0 und 1000 kann die Größe, wenn die Schriftart das unterstützt, sehr fein festgelegt werden.
font‑style normal
italic
oblique 		Legt fest, ob die Schrift des ausgewählten Elements normal, kursiv (italic) oder schräg (oblique) erscheinen soll.

Farben

Attribut Beispielwerte Erklärung
color blue
hot-pink
#BADB01
rgb(42,69,123) 		Legt die Schriftfarbe des ausgewählten Elements fest, entweder durch die Angabe eines Farbnamens oder durch den RGB-Farbcode.
background‑color Legt die Hintergrundfarbe des ausgewählten Elements fest.

Größen und Abstände

Attribut Beispielwerte Erklärung
width
max-width
min-width 		500px
40%
50vw
20vh 		Legt die Breite, maximale Breite oder minimale Breite eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, 1vw ist ein Prozent der Breite des Browserfensters.
height
max-height
min-height 		Legt die Höhe, maximale Höhe oder minimale Höhe eines Elements fest. Prozentangaben beziehen sich dabei auf die Größe des umgebenden Elements, 1vh ist ein Prozent der Höhe des Browserfensters.
margin
margin‑top
margin‑right
margin‑bottom
margin‑left 		Legt die Breite des Freiraums fest, der ein Element umgibt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.
padding
padding‑top
padding‑right
padding‑bottom
padding‑left 		Legt die Breite des Freiraums fest, der zwischen dem Text eines Elements und dessen (gedachter) Rahmenlinie liegt. Die Breite des oberen, rechten, linken und unteren Abstands kann einzeln festgelegt werden.

Rahmen

Attribut Beispielwerte Erklärung
border
border‑top
border‑right
border‑bottom
border‑left 		1px solid black
2px dotted red
5px dashed rgb(123,45,67)
20px double #C0FFEE 		Legt das Aussehen der Rahmenlinie um das ausgewählte Element fest. Angegeben werden müssen Linienbreite, Linienstil und Linienfarbe. Die obere, rechte, linke und untere Rahmenlinie können individuell gestaltet werden.
border‑collapse separate
collapse 		Legt fest, ob die Rahmenlinien zweier benachbarter Elemente einzeln (separate) oder als eine Linie (collapse) dargestellt werden sollen.

Zum Weiterlesen

Abgerufen von „https://wiki.kah.gs/index.php?title=CSS&oldid=6725“