css-schule.de » Einfügen CSS http://css-schule.de Alles für den Webmaster. Sat, 14 Nov 2009 20:20:07 +0000 en hourly 1 Drei Wege zum Einfügen CSS http://css-schule.de/drei-wege-zum-einfugen-css.html http://css-schule.de/drei-wege-zum-einfugen-css.html#comments Sat, 31 Oct 2009 11:44:38 +0000 admin http://css-schule.de/?p=22 Es gibt drei Möglichkeiten zum Einfügen eines Stylesheet:

  • Externe Stylesheets
  • Interne Stylesheet
  • Inline-Stil

Externe Style Sheet

Ein externes Stylesheet ist ideal, wenn der Stil ist für viele Seiten angewendet. Mit einem externes Stylesheet, können Sie das Aussehen einer ganzen Website, indem Sie eine Datei. Jede Seite muss einen Link zu dem Stylesheet mit dem <link> Tag. Die <link>-Tag geht in den Head-Abschnitt:

<head>
<link rel = “stylesheet” type = “text / css” href = “mystyle.css” />
</ head>

Ein externes Stylesheet kann in einem beliebigen Texteditor geschrieben werden. Die Datei sollte keine HTML-Tags. Das Stylesheet sollte mit einer. Css gespeichert werden. Ein Beispiel für eine Stylesheet-Datei ist unten dargestellt:

hr (color: Sienna)
p (margin-left: 20px)
body (background-image: url ( “images/back40.gif”))

Remark Lassen Sie keine Leerzeichen zwischen Wert der Eigenschaft und die Einheiten! “margin-left: 20 px” (anstelle von “margin-left: 20px”) wird im IE funktionieren, aber nicht in Firefox oder Opera.

Interne Style Sheet

Ein internes Stylesheet sollte verwendet werden, wenn ein einzelnes Dokument einen ganz eigenen Stil hat. Sie definieren interne Stile in den Head-Abschnitt einer HTML-Seite, indem Sie die <style> tag, wie folgt aus:

<head>
<style type=”text/css”>
hr (color: Sienna)
p (margin-left: 20px)
body (background-image: url ( “images/back40.gif”))
</ style>
</ head>

Inline-Styles

Eine Inline-Stil verliert viele der Vorteile von Style Sheets durch Mischen Inhalte mit der Präsentation. Mit dieser Methode sparsam!

So verwenden Sie Inline-Styles verwenden Sie das style-Attribut in den jeweiligen Tag. Der style-Attribut kann eine beliebige CSS-Eigenschaft. Das Beispiel zeigt, wie zu ändern die Farbe und den linken Rand eines Absatzes:

<p style=”color:sienna;margin-left:20px”> Das ist ein Absatz. </ p>

Mehrere Style Sheets

Wenn einige Eigenschaften wurden für die gleiche Auswahl in verschiedenen Stylesheets gesetzt, die Werte werden von den mehr Stylesheet geerbt werden.

Zum Beispiel hat ein externes Stylesheet diese Eigenschaften für die h3-Selektor:

h3
{
color: red;
text-align: left;
font-size: 8pt
}

Und ein internes Stylesheet hat diese Eigenschaften für die h3-Selektor:

h3
{
text-align: right;
font-size: 20pt
}

Wenn die Seite mit den internen Stylesheet-Links auch auf die externen Stylesheet die Eigenschaften für h3 werden:

color: red;
text-align: right;
font-size: 20pt

Die Farbe ist von der externen Stylesheets und der Text geerbt-Ausrichtung und der font-size wird durch die interne Stylesheet ersetzt.

Mehrere Styles Cascade in One

Styles können angegeben werden:

  • in ein HTML-Element
  • im Head-Abschnitt einer HTML-Seite
  • in einer externen CSS-Datei

Tipp: Auch mehrere externe Stylesheets können in einer einzigen HTML-Dokument referenziert werden.

Cascading bestellen

Welchen Stil verwendet werden, wenn es mehr als einen Stil für ein HTML-Element angegeben?

Generell können wir sagen, dass alle Stile “Cascade” in eine neue, “virtuelle”-Stil Blatt durch die folgenden Regeln, wobei die Nummer vier hat die höchste Priorität:

  1. Standard-Browser
  2. Externe Stylesheets
  3. Interne Stylesheet (im Kopfteil)
  4. Inline-Stil (in einem HTML-Element)

So hat ein Inline-Stil (in einem HTML-Element) die höchste Priorität, was bedeutet, dass sie einen Stil innerhalb des <head> Tag, oder in bestimmten überschreibt ein externes Stylesheet, oder in einem Browser (Standardwert).

Hinweis: Wenn Sie den Link zum externen Stylesheet wird nach den internen Style Sheets in HTML gesetzt <head>, der äußere Stil Eintrag überschreibt die internen Stylesheet!

vodafone.de
]]> http://css-schule.de/drei-wege-zum-einfugen-css.html/feed 0