CSS (Cascading Style Sheets) gibt es schon eine Weile jetzt,
und als Ergänzung zu Plain Old HTML-Dateien. Style Sheets
damit ein Entwickler zur Trennung von HTML-Code Formatierung Regeln
und Stilrichtungen. Es scheint, wie viele HTML-Anfänger "unter-Schätzung
die Leistungsfähigkeit und Flexibilität der Stylesheet. In diesem Artikel,
Ich gehe zu beschreiben, was Cascading Style Sheets sind, ihre
Leistungen, und zwei Wege, um sie umzusetzen.

---------------------------------------
Cascading was ist?
---------------------------------------

Cascading Style Sheets.that 's was! Sie sind, was Farbe ist
Leinwand, was Richtfest ist zu Eis. sie ergänzen HTML
und erlauben uns zu definieren, den Stil ( "Look and Feel") für unser gesamtes
Website in nur einer Datei!

Cascading Style Sheets wurden eingeführt, um die Web-Entwicklung
Welt Weg zurück in 1996. Sie bekommen ihren Namen von der Tatsache, dass
jeweils anderen Stil Erklärung kann "kaskadiert" unter dem
darüber ein, die eine Mutter-Kind-Beziehung zwischen der
Stile.

Sie wurden schnell standardisiert, und die beiden Internet-Explorer und
Netscape baute ihre neuesten Browser-Versionen mit dem CSS
Standard-(oder, um es so eng wie möglich).

Also, bist du noch fragen, was ein Stylesheet genau ist? Ein Stil
Blatt ist ein frei fließendes Dokument, das kann entweder referenzierten
von oder auch in ein HTML-Dokument. Style Sheets verwenden Blöcke
von formatierten Code zu definieren Stile für bestehende HTML-Elemente,
oder neue Stile, so genannte Klassen.

Style Sheets können verwendet werden, um die Höhe von einigen Text,
Ändern der Hintergrundfarbe einer Seite, um die Standard-Grenze
Farbe eines table.the Liste ließe sich beliebig fortsetzen. Einfach aber,
Style Sheets werden verwendet, um die Formatierung, ein Farbschema und
Stil einer HTML-Seite.

Style Sheets verwendet werden sollte anstelle des Standard-,,
und Tags, weil:

-- Ein Stylesheet kann referenziert werden von vielen Seiten, was bedeutet,
dass jede Datei ist auf ein Mindestmaß zu Größe und erfordert nur
nur zusätzliche Zeile zum Laden der externen Stylesheet-Datei

-- Wenn Sie jemals ändern müssen jeden Teil Ihrer Websites Look / fühlen,
es kann getan werden, schnell und nur getan werden muss, in einem
Ort: das Stylesheet.

-- Mit Cascading Style Sheets, gibt es viele, viele Seite
Attribute, die einfach nicht gesetzt werden kann, ohne sie:
einzelne Tags können verschiedene Hintergrundfarben,
Grenzen Spiegelstriche, Schatten, etc.

Style Sheets können entweder Inline (als Teil einer HTML -
Dokument), oder extern referenziert (enthalten in einem separaten
Datei aus und verweist auf das HTML-Dokument). Inline-Stylesheets
enthalten sind vollständig innerhalb eines HTML-Dokuments und wird nur
Ändern Sie das Aussehen und das Layout der HTML-Datei.

Öffnen Sie Ihren Lieblings-Text-Editor und geben Sie den folgenden Code.
Speichern Sie die Datei als stylesheet.html und öffnen Sie sie in Ihrem Browser:



Cascading Style Sheet Beispiel <itel>



Dies ist ein großes H1-Tag!



Wenn Sie starten Sie Ihren Browser, sollten Sie den Text "Dies ist
ein großes H1-Tag! "in einem großen, blauen Verdana font Gesicht.

Let's Schritt durch die Stil-Code Schritt für Schritt. Erstens haben wir
eine hübsche Standard-HTML-Header. Die Seite beginnt mit dem
Tag, gefolgt von dem Tag. Weiter verwenden wir ein Standard -
- Tag, um den Titel der Seite arbeiten wir mit.

Beachten Sie aber, dass vor dem Tag geschlossen ist, haben wir
unser - Tag.



Wenn Sie das Stylesheet Inline-Code (als Teil des HTML -
Dokument), muss sie gebunden Tags
. Unser Beispiel ist das Arbeiten mit dem Tag. Wir sind
verändernden drei Attribute der 's-Stil: die Textfarbe
(Farbe), die Schriftart, dass alle Tags auf der Seite werden
in (font-family), und schließlich die Größe der Schriftart
(Größe).

Der Code zwischen den () und sind bekannt als die Attribute. Unser
Beispielcode hat drei. Versuchen Sie den Hexadezimalwert der
die Farbe Attribut # A00808 und speichern Sie und aktualisieren Sie die
Seite. Sie sollten den gleichen Text, nur rot statt
von Blue.

---------------------------------------
Ein Beispiel für ein externes Stylesheet
---------------------------------------

Externe Style Sheets sind vergleichbar mit internen Style-Sheets,
sind sie jedoch von der stripped Tags,
und müssen referenziert werden aus einem anderen HTML-Datei verwendet werden soll.

Erstellen Sie eine neue Datei mit dem Namen "mystyle.css" und geben Sie die folgenden
Code hinein:

H1
(
color: # a00808;
font-family: Verdana;
Größe: 18 pt
)

Als nächstes erstellen Sie eine HTML-Datei und nennen Sie ihn external.html. Geben Sie die
folgenden Code in external.html:



Externe Style Sheet Reference Beispiel <itel>



Dies ist ein großes H1-Tag!



Wie bereits erwähnt, können Sie sehen, dass der eigentliche Code in
mystyle.css ist genau die gleiche wie in der Inline-Beispiel.
In unserem HTML-Datei, wir einfach ein - Tag in der
Teil unserer Seite. Die rel = "stylesheet" Attribut erzählt die
Browser, dass der Link zu der externen Datei ist ein Stylesheet.
Die type = "text / css" erzählt die Attribut-Browser, mystyle.css
ist eine Textdatei mit CSS (Cascading Style Sheet)
Erklärungen. Schließlich hat die href = "mystyle.css" Attribut erzählt
der Browser, dass die tatsächliche Datei laden wollen mystyle.css ist.

---------------------------------------
Fazit
---------------------------------------

Nun, da haben Sie es, einen kurzen Blick auf Style Sheets und wie
zur Umsetzung sowohl ein Inline-und externe Version. Kasse der
Links unten, wenn Sie noch nie gearbeitet mit Cascading Style Sheets
vor. Sie werden überrascht sein, einige der Dinge, die Sie tun können
mit ihnen!

-- Http://www.devarticles.com/art/1/7
-- Http://hotwired.lycos.com/webmonkey/98/15/index0a.html
-- Http://www.webreview.com/style/index.shtml
-- Http://jigsaw.w3.org/css-validator/


Über den Autor
Mitchell ist der Gründer und leitender Redakteur von
http://www.devarticles.com. DevArticles bietet seinen Lesern
Top-Qualität mit ASP, PHP und. NET-Artikel, Interviews und
Bewertungen vor. Wenn Sie nach Insider-Tipps und Tricks,
Sie können auch auf sie zu DevArticles. Besuchen Sie DevArticles
mit einem Klick auf diesen Link: http://www.devarticles.com.