CSS: Unterschied zwischen den Versionen

Aus WKwiki
Zur Navigation springen Zur Suche springen
(Die Seite wurde neu angelegt: CSS ist die Abkürzung für "'''C'''ascading '''S'''tyle'''s'''heets. Sie dienen dazu, den Style von HTML-Elementen zu definieren. == Warum CSS? == Es gibt viele Grün...)
 
 
(5 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
CSS ist die Abkürzung für "'''C'''ascading '''S'''tyle'''s'''heets.
CSS ist die Abkürzung für <i>'''C'''ascading '''S'''tyle'''s'''heets</i>.
Sie dienen dazu, den Style von HTML-Elementen zu definieren.
Sie dienen dazu, den Style von HTML-Elementen zu definieren.


== Warum CSS? ==
== Warum CSS? ==
Es gibt viele Gründe, CSS anstelle von [[HTML]]-Styles zu verwenden. Beispielsweise kann man über eine externe CSS-Datei, die man in allen Seiten einer Homepage einbindet, den gesamten Style bestimmen. Will man das Design verändern reicht eine einzige Änderung in dieser Datei.
Es gibt viele Gründe, CSS anstelle von [[HTML]]-Styles zu verwenden. Beispielsweise kann man über eine externe CSS-Datei, die man in allen Seiten einer Homepage einbindet, den gesamten Style bestimmen. Will man das Design verändern reicht eine einzige Änderung in dieser Datei. Sollte dies nicht möglich sein besteht die Möglichkeit, CSS innerhalb eines <code><style></code>-Tags innerhalb des <code><head></code>-blocks zu hinterlegen. Als letzte Alternative unterstützt beinahe jedes HTML-Tag das <code>style</code>-Attribut, diese Variante sollte aber nur als Notlösung benutzt werden, da sie sehr unflexibel ist.
Weiterhin lassen es sich alle CSS-Befehle auf nahezu jedes HTML-Tag anwenden. Während mit reinem HTML beispielsweise die Textfarbe nur in font-Tags angegeben werden kann, ist die CSS-Angabe für fast alle Elemente möglich (Tabellen, Text-Absätze, Buttons, Eingabefelder, usw.).


== Wie verwende ich es? ==
== Wie verwende ich es? ==
CSS-Codes werden, vergleichbar mit [[Javascript]], entweder in einer externen Datei abgelegt und im Head des Dokuments verlinkt.
CSS-Codes werden, vergleichbar mit [[Javascript]], entweder in einer externen Datei abgelegt und im Head des Dokuments verlinkt.
Das kann so aussehen:
Das kann so aussehen:
<code>
<pre>
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" type="text/css" href="/style.css">
</code>
</pre>


Oder sie werden direkt in den HTML-Code eingebunden. Dazu wird entweder ein style-Tag im Head genutzt,
Oder sie werden direkt in den HTML-Code eingebunden. Dazu wird entweder ein style-Tag im Head genutzt,
<code>
<pre>
  <style type="text/css">
<style type="text/css">
    body{
  body {
      background-color:#ff6600; /*Hintergrundfarbe: orange*/
    background-color: #ff6600; /* Hintergrundfarbe: orange */
      color:#00ffff; /*Textfarbe: türkis*/
    color: #00ffff; /* Textfarbe: türkis */
      text-align:center; /*Ausrichtung: Zentriert*/
    text-align: center; /* Ausrichtung: Zentriert */
    }
  }
  </style>
</style>
</code>
</pre>


oder das style-Attribut direkt im betroffenen HTML-Tag.
oder das style-Attribut direkt im betroffenen HTML-Tag.
<code>
<pre>
   <body style="background-color:#ff6600;color:#00ffff;text-align:center;">
   <body style="background-color: #ff6600; color: #00ffff; text-align: center;">
</code>
</pre>
 
Die beiden Beispiele bewirken das gleiche. Eine Angabe im Head bietet aber mehr Möglichkeiten, z.B. Mouse-Over-Effekte und Bestimmen von CSS-Klassen.
 
Im Chat findet CSS auch Anwendung. Sowohl für die Nutzer als auch für die [[Administrator|Administratoren]] hat das aber wenig Bedeutung.
 
Selbst können Admins beispielsweise Stylesheets in der [[Ankündigung]] einsetzen um das Hintergrundbild zu fixieren:
<code>
  <style type="text/javascript">body{background-attachment:fixed;}</style>
</code>
Genaugenommen sind solche Angaben nicht Standardgerecht, da sich die Ankündigung im Body des Dokuments befindet und diese Form der CSS-Angaben in den Head gehört, die [[Browser]] tollerieren das jedoch in der Regel ohne Probleme.


== Weblinks ==
== Weblinks ==
http://de.selfhtml.org/navigation/html.htm ein nützliches Nachschlagewerk für CSS-Befehle
[https://developer.mozilla.org/en-US/docs/Web/CSS Mozilla Developer Network]
[[Kategorie:Programmieren und Webdesign]]

Aktuelle Version vom 26. Februar 2016, 12:04 Uhr

CSS ist die Abkürzung für Cascading Stylesheets. Sie dienen dazu, den Style von HTML-Elementen zu definieren.

Warum CSS?

Es gibt viele Gründe, CSS anstelle von HTML-Styles zu verwenden. Beispielsweise kann man über eine externe CSS-Datei, die man in allen Seiten einer Homepage einbindet, den gesamten Style bestimmen. Will man das Design verändern reicht eine einzige Änderung in dieser Datei. Sollte dies nicht möglich sein besteht die Möglichkeit, CSS innerhalb eines <style>-Tags innerhalb des <head>-blocks zu hinterlegen. Als letzte Alternative unterstützt beinahe jedes HTML-Tag das style-Attribut, diese Variante sollte aber nur als Notlösung benutzt werden, da sie sehr unflexibel ist.

Wie verwende ich es?

CSS-Codes werden, vergleichbar mit Javascript, entweder in einer externen Datei abgelegt und im Head des Dokuments verlinkt. Das kann so aussehen: 

  <link rel="stylesheet" type="text/css" href="/style.css">

Oder sie werden direkt in den HTML-Code eingebunden. Dazu wird entweder ein style-Tag im Head genutzt, 

<style type="text/css">
  body {
    background-color: #ff6600; /* Hintergrundfarbe: orange */
    color: #00ffff; /* Textfarbe: türkis */
    text-align: center; /* Ausrichtung: Zentriert */
  }
</style>

oder das style-Attribut direkt im betroffenen HTML-Tag. 

  <body style="background-color: #ff6600; color: #00ffff; text-align: center;">

Weblinks

Mozilla Developer Network

Abgerufen von „http://wiki.webkicks.de/index.php?title=CSS&oldid=3755“