Suchen
Inside Wiki
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > phpforum.de Wiki > phpforum.de Wiki

PHP Wiki Dieses Wiki sammelt Lösungen, zu Problemen, welche immer wieder im Forum auftauchen.

 
 
Artikel-Optionen Ansicht
  #1  

Standard Cascading Style Sheet (CSS)

 

Inhalte

Was sind Cascading Style Sheets?


Cascading Style Sheet ist eine Auszeichnungssprache. Sie wird eingesetzt um das Design einer Webseite zu gestallten. Mit ihr kann man die nahezu vollständige Trennung von Logik und Design erreichen. Entwickelt wurden sie um dem Webdesigner bei der Gestaltung seiner Webseiten mehr Freiheiten einzuräumen und die veralteten Layouttabellen abzuschaffen.

Problematik


Leider unterstützen viele Browser Cascading Style Sheets nicht vollständig. Besonders der Internet Explorer hat mit dem Box Modell viele Probleme bei der Darstellung. Dies führt oft zu verzerrten Layouts. In der Regel existieren aber sogenannte Browser-Hacks mit denen sich die verzerrten Layouts ausgleichen lassen. Ob ein Browser nahezu vollständig CSS unterstütz, kann man mit dem ACID 2 Browsertest überprüfen. Aktuell bestehen der Firefox 3 Beta 2 und Opera in der aktuellen Version diesen Test. Der Internet Explorer wird voraussichtlich in der Version 8 den Test meistern.

Verwenden von CSS


Cascading Style Sheets können auf mehrere Arten verwendet werden.

Einbinden in HTML-Tags


CSS kann direkt im HTML verwendet werden, indem man das Attribut "style" verwendet.
HTML Quellcode:
<h1 style="css-regel1;css-regel2">Eine Überschrift</h1>

Dadurch geht allerdings die Trennung von Logik und Design verloren.

Verwenden des Style-Tags


Eine weitere Möglichkeit ist das verwenden eines Style-Tags im head-Bereich der HTML Seite.
HTML Quellcode:
<head>
<title>Seitentitel</titel>
<style type="text/css">
css-block1
{
css-regel1;
css-regel2;
}
css-block2
{
css-regel3
}
</style>
</head>

Verwendung von Textdateien


Die Möglichkeit, die wohl am meisten eingesetzt wird, ist die Verwendung von externen Textdateien (meist mit der Endung .css). Dazu notiert man im <head> Bereich einer Seite das Link-Tag.
HTML Quellcode:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Die Syntax die in der Datei verwendet wird, entspricht der Syntax aus dem zweiten Beispiel.

Grundlegende Sytax


Folgende Syntax ist definiert:
HTML Quellcode:
selektor1
{
eigenschaft1:css-wert1;
eigenschaft2:css-wert2;
}
selektor2
{
eigenschaft1:css-wert1;
eigenschaft2:css-wert2;
}

Es können beliebig viele Eigenschaft und Selektoren verwendet werden.

Selektoren


Ein Selektor bestimmt, auf welche Bereiche einer HTML-Seite die Eigenschaften angewandt werden sollen.

HTML-Tags


Um die Eigenschaften auf ganze HTML-Tags anzuwenden, wird einfach der Name des Tags als Selektor notiert.
Um z.B. alle Überschriften(h1) auszuwählen, schreibt man
HTML Quellcode:
h1
{
eigenschaft1:wert1;
}

Jetzt haben alle Überschriften die Eigenschaft1 mit dem Wert1.

Verwenden von Klassen


Es können auch Klassen definiert werden. Diese beginnen mit einem Punkt, der von dem Namen der Klasse gefolgt wird.
HTML Quellcode:
.klasse1
{
eigenschaft1:wert1;
}

Klassen kann man mehreren einzelnen Tags mithilfe des class-Attributs zuweisen.
HTML Quellcode:
<h1 class="klasse1">Überschrift</h1>
<h2 class="klasse2">Überschrift2</h2>

Verwenden von IDs


IDs funktionieren wie Klassen. Es wird den Namen der ID ein # vorangestellt.
HTML Quellcode:
#ID1
{
eigenschaft1:wert1;
}

Im Gegensatz zu Klassen dürfen IDs nur einmal verwendet werden.

Auswählen aller Elemente


Mit dem * Operator können alle Elemente einer Webseite ausgewählt werden.
HTML Quellcode:
*
{
eigenschaft1:wert1;
}


Eigenschaften und Werte


Es gibt sehr viele Eigenschaften, mit denen das Aussehen einer Webseite nahezu beliebig angepasst werden kann.
Wichtige Eigenschaften sind weiter unten aufgeführt.

Wichtige Eigenschaften


EigenschaftMöglicher WertBeschreibung
font-size16pxBestimmt die Textgröße in Pixel
font-familyArial, Helvetica, sans-serifBestimmt die Schriftart. Die Schriftart muss auf dem Betriebssystem, auf dem der Browser ausgeführt wird vorhanden sein. Um Problemen vorzubeugen können mehrerer Schriftarten getrennt durch ein Komma angegeben werden.
text-aligncenterBestimmt die Ausrichtung des Textes (center, left, right)
Diese Auflistung ist unvollständig und sollte weiter ergänzt werden.

Links


CSS Referenz von CSS4You
CSS-Validator des W3C


Mitwirkende: Sebbl, dacat
Erstellt von Sebbl, 03.02.2008 am 16:02
Zuletzt bearbeitet von Sebbl, 03.02.2008 am 16:02
0 Kommentare , 2990 Betrachtungen

Dieser Text steht unter der GNU-Lizenz für freie Dokumentation


 

Lesezeichen

Artikel-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Style mit php definieren Kabel PHP 7 18.09.2005 17:34
PHP Style definieren citymuenchen PHP 6 28.07.2005 12:15
Php in Css-style citymuenchen CSS 6 17.07.2005 15:57
Einzelne Daten aus Mysql in fertiges Excel-sheet Notator Sonstiges 1 08.11.2004 02:17
Php-style suicide PHP 6 21.04.2004 19:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:58 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC