Teil von  SELFPHP   Teil von  Praxisbuch
Letztes Update: 16.08.2005 17:53:45


Navigation

Seite News *

Seite Startseite
Seite Über SELFPHP
Seite Werbung
Seite Kontakt
Seite Forum *
Seite Download *
Seite SELFPHP Banner *
Seite SELFPHP in Buchform
Seite Newsletter *
Seite Impressum
 
* Link führt ins Internet


Anbieterverzeichnis
Informieren Sie sich über die Unternehmen in unserem Anbieterverzeichnis!  
 


SELFPHP Forum
Fragen rund um die Themen PHP? In über 79.000 Beiträgen finden Sie sicher die passende Antwort!  
Newsletter
Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 



 

CSS-Kurzreferenz




Mit Styles Sheets lassen sich diverse Eigenschaften von HTML-Tags beeinflussen. Beim Einsatz von CSS geht es vor allem um die Anpassung des Layouts an die Bedürfnisse der Zielgruppe, dies gilt es bei der Definition von Style Sheet Formatierungen immer zu berücksichtigen.

Die Formatierungen durch CSS können entweder, im betroffenen Dokument selbst vorgenommen werden und müssen zwischen dem <title>- und <head>-Tag platziert werden oder können in eine Style-Sheet-Datei (.css) ausgelagert werden.

Sie haben die Möglichkeit sowohl bestehende HTML-Tags zu beeinflussen, oder sog. CSS-Klassen für das gewünschte Layout zu definieren.


HTML/CSS

Hier zwei HTML-Tags, <h1>- und <p>-Tag, die durch CSS-Definitionen in Ihren Eigenschaften beeinflusst werden.


Beispiel - intern



<html>
<head>
<title>CSS (Intern)</title>
<style type="text/css">
<!--
h1 {  
    font-family: Arial; 
    font-size: 18px; 
    font-weight: bold;
    color: #000000; 
    text-decoration: underline
}
p {  
    font-family: Arial; 
    font-size: 10px; 
    color: #000000
}
-->
</style>
</head>
<body>
<h1>&Uuml;berschrift</h1>
<p>Mein erste Absatz<br>
  mehr<br>
  mehr mehr<br>
  und noch mehr</p>
</body>
</html>



Beispiel - extern



<html>
<head>
<title>CSS (Extern)</title>
<link rel="stylesheet" href="htmllayout.css" type="text/css">
</head>
<body>
<h1>&Uuml;berschrift</h1>
<p>Mein erste Absatz<br>
  mehr<br>
  mehr mehr<br>
  und noch mehr</p>
</body>
</html>



Inhalt - htmllayout.css



h1 {  
    font-family: Arial; 
    font-size: 18px; 
    font-weight: bold;
    color: #000000; 
    text-decoration: underline
}
p {  
    font-family: Arial; 
    font-size: 10px; 
    color: #000000
}



CSS-Klassen

Hier Beispiele für den Einsatz von CSS-Klassen.


Beispiel - intern



<html>
<head>
<title>CSS-Klassen (Intern)</title>
<style type="text/css">
<!--
.headlines {  
    font-family: Arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000000
}
.textabsatz {  
    font-family: Arial; 
    font-size: 10px; 
    color: #000000
}
-->
</style>
</head>
<body>
<p class="headlines">&Uuml;berschrift</p>
<p class="textabsatz">Mein erste Absatz<br>
  mehr<br>
  mehr mehr<br>
  und noch mehr</p>
</body>
</html>



Beispiel - extern



<html>
<head>
<title>CSS-Klassen (Extern)</title>
<link rel="stylesheet" href="layout.css" type="text/css">
</head>
<body>
<p class="headlines">&Uuml;berschrift</p>
<p class="textabsatz">Mein erste Absatz<br>
  mehr<br>
  mehr mehr<br>
  und noch mehr</p>
</body>
</html>



Inhalt - layout.css



.headlines {  
    font-family: Arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000000
}
.textabsatz {  
    font-family: Arial; 
    font-size: 10px; 
    color: #000000
}


Hinweis: CSS Formatierungsklassen sollten in Ihrer Bezeichnung immer mit einem Punkt begonnen werden, so lassen Sie sich von den eigentlichen Formatzuweisungen unterscheiden.



Letztes Update: {UPDATEZEIT} CSS und Hover-Links
Letztes Update: {UPDATEZEIT} Basiseinheiten von CSS
Letztes Update: {UPDATEZEIT} Einsatz von Schrift
Letztes Update: {UPDATEZEIT} Einsatz von Text
Letztes Update: {UPDATEZEIT} Einsatz von Rahmen
Letztes Update: {UPDATEZEIT} Einsatz von Konturen
Letztes Update: {UPDATEZEIT} Einsatz von Äussere- und Innereabstände
Letztes Update: {UPDATEZEIT} Einsatz von Listen
Letztes Update: {UPDATEZEIT} Einsatz von Tabellen
Letztes Update: {UPDATEZEIT} Einsatz von Hintergrundbilder
Letztes Update: {UPDATEZEIT} Einsatz von absoluter Positionierung

 


 




 sponsored by

Host Europe


HighText iBusiness


Host Europe




© 2001-2006 E-Mail SELFPHP - Damir Enseleit, info@selfphp.de, Impressum, Kontakt
© 2005-2006 E-Mail PHP5 Praxisbuch - Matthias Kannengiesser, m.kannengiesser@selfphp.de