css-schule.de » CSS http://css-schule.de Alles für den Webmaster. Sat, 14 Nov 2009 20:20:07 +0000 en hourly 1 CSS – Button Border – Farbe ändern http://css-schule.de/css-button-border-farbe-andern.html http://css-schule.de/css-button-border-farbe-andern.html#comments Sat, 14 Nov 2009 20:20:07 +0000 admin http://css-schule.de/?p=171 In diesem Beispiel gibts den Code der die Seiten eines Button farblich verändern.

Code:

<html>
<head>

<style type=”text/css”>
input.button4 {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #0066CC;
border-bottom-color: #339966;
border-left-color: #FFCC00;

}
</style>
</head>
<body>
<input type=”submit” name=”Button4″ value=”Farbiger Button” >
</body>
</html>

Das Ergebnis:


]]> http://css-schule.de/css-button-border-farbe-andern.html/feed 0 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 Die ID-Selektor http://css-schule.de/die-id-selektor.html http://css-schule.de/die-id-selektor.html#comments Sat, 31 Oct 2009 09:12:19 +0000 admin http://css-schule.de/?p=18 Die ID-Selektor wird verwendet, um einen Stil für eine einzige, eindeutige Element angeben.

Die ID-Selektor verwendet das id-Attribut des HTML-Elements, und ist definiert mit einem “#”.

Der Stil der Regel unten wird das Element mit id = “PARA1″ angewendet werden:
Beispiel
# PARA1
{
text-align: center;
Farbe: rot
}

Tun NICHT Starten Sie eine ID mit einer Nummer! Es wird nicht funktionieren in Mozilla / Firefox.
Die Klasse Selector

Die Klasse-Selektor wird verwendet, um einen Stil für eine Gruppe von Elementen angeben. Im Gegensatz zu den id Selektor, ist die Klasse-Selektor meist auf mehrere Elemente verwendet.

Damit können Sie einen bestimmten Stil für alle HTML-Elemente mit der gleichen Klasse.

Die Klasse-Selektor verwendet das HTML-Klasse Attribut wird definiert und mit ein “.”

In dem Beispiel unten, werden alle HTML-Elemente mit class = “center” zentriert werden:
Beispiel
. center (text-align: center)

Sie können auch festlegen, dass nur bestimmte HTML-Elemente von einem Betroffenen sollten Klasse.

In dem Beispiel unten, alle p-Elemente mit class = “center” zentriert werden:
Beispiel
p.center (text-align: center)

Tun NICHT Start einer Klasse mit einer Nummer! Dies ist nur in Internet Explorer unterstützt.

]]> http://css-schule.de/die-id-selektor.html/feed 1 Die ID und Klasse Selektoren http://css-schule.de/die-id-und-klasse-selektoren.html http://css-schule.de/die-id-und-klasse-selektoren.html#comments Sat, 31 Oct 2009 09:08:52 +0000 admin http://css-schule.de/?p=16 Zusätzlich zum Setzen Sie einen Stil für ein HTML-Element, können Sie angeben, CSS Eigene Selektoren genannt “id” und “Klasse”.

]]> http://css-schule.de/die-id-und-klasse-selektoren.html/feed 0 Syntax http://css-schule.de/syntax.html http://css-schule.de/syntax.html#comments Sat, 31 Oct 2009 09:05:20 +0000 admin http://css-schule.de/?p=13 Die CSS-Syntax besteht aus drei Teilen zusammen: einem Selektor, eine Eigenschaft und einen Wert:

selector (property: value)

Der Selektor ist in der Regel das HTML-Element / Tag, das Sie definieren möchten, ist das Gebäude der Attribut, das Sie ändern möchten, und jede Eigenschaft kann einen Wert zu nehmen.

Das Eigentum und Wert sind getrennt durch einen Doppelpunkt, und umgeben von geschweiften Klammern:

h1 (color: blue)

Hinweis: Ist der Wert mehrere Wörter, in Anführungszeichen setzen Sie den Wert:

p (font-family: “Sans Serif”)

Hinweis: Wenn Sie mehr als eine Eigenschaft für ein Selektor angeben möchten, müssen Sie trennen Objekt mit einem Semikolon.

Das folgende Beispiel zeigt, wie man ein Zentrum ausgerichtet Absatz zu definieren, mit einem roten Textfarbe:

p (color: red; text-align: center)

Um den Stil-Definitionen besser lesbar, können Sie eine Eigenschaft für jede Zeile beschreiben, wie folgt aus:

Beispiel

p
{
color: red;
text-align: center;
}

]]> http://css-schule.de/syntax.html/feed 0 CSS spart eine Menge Arbeit! http://css-schule.de/css-spart-eine-menge-arbeit.html http://css-schule.de/css-spart-eine-menge-arbeit.html#comments Sat, 31 Oct 2009 09:00:16 +0000 admin http://css-schule.de/?p=9 CSS definiert, wie HTML-Elemente angezeigt werden sollen.

Styles werden in der Regel in externen gespeichert. CSS-Dateien. Externe Stylesheets können Sie die Änderung Aussehen und das Layout aller Seiten in einer Website, nur durch die Bearbeitung einer einzigen Datei!

]]> http://css-schule.de/css-spart-eine-menge-arbeit.html/feed 0 Styles Solved ein großes Problem http://css-schule.de/styles-solved-ein-groses-problem.html http://css-schule.de/styles-solved-ein-groses-problem.html#comments Sat, 31 Oct 2009 08:25:25 +0000 admin http://css-schule.de/?p=6 HTML war nie beabsichtigt, Tags für die Formatierung eines Dokuments enthalten.

HTML sollte den Inhalt eines Dokuments, wie definieren:

<h1> Das ist eine Überschrift </ h1>

<p> Das ist ein Absatz. </ p>

Wenn die Tags wie <font> und Farbe Attribute, die HTML 3.2 aufgenommen Spezifikation, fing es ein Alptraum für Web-Entwickler. Entwicklung von großen Web-Seiten, wo Schriftarten und Farbinformationen wurden für jeden einzelnen hat Seite wurde ein langer und teurer Prozess.

Um dieses Problem zu lösen, erstellt das World Wide Web Consortium (W3C) CSS.

In HTML 4.0 können alle Formatierungen aus dem HTML-Dokument entfernt und gespeichert werden in einer separaten CSS-Datei.

Von allen Browsern unterstützt CSS heute.

]]> http://css-schule.de/styles-solved-ein-groses-problem.html/feed 0 Was ist CSS? http://css-schule.de/hallo-welt.html http://css-schule.de/hallo-welt.html#comments Fri, 30 Oct 2009 19:52:10 +0000 admin http://css-schule.de?p=1
  • CSS steht für Cascading Style SATENBLÄTTER
  • Formatvorlagen definieren wie Display zu HTML-Elemente
  • Stile wurden in HTML 4.0 eingeführt ein Problem zu lösen
  • Externe Style Sheets können eine Menge Arbeit
  • Externe Style Sheets werden gespeichert in CSS-Dateien
    • ]]>     http://css-schule.de/hallo-welt.html/feed 0