Start CSS

Unterlagen

Bilder & Farben
Content-Management
CSS
Drupal
Fotogalerie
HTML
Internet Marketing
Joomla
Webseiten gestalten
 

Recht

Überblick
zu beachten
Impressum
Datenschutz
Datenschutzerklärung
 

Bücher & Links

HTML & CSS
Farben
Shop-Systeme
PHP, Mysql, Joomla
 

Sprache

Lexika
 
CSS - Beispiele PDF Drucken E-Mail
Style Sheets haben den Vorteil, dass man Formatierungen für alle verknüpften Seiten schnell ändern kann. Sie erlauben mehr Anzeige- und Formatierungs-Techniken als das HTML-Dokument.

Sie können alle Standard-Absatzformatierungen wie <h1></h1> <p></p> umformatieren und eigene Formatierungen vornehmen, außerdem können Sie unterschiedliche Formatierungen für verschiedene Ausgabe-Medien vorschreiben, z.B. Druck und Bildschirm oder kleine mobile Endgeräte.
>> Information zu "Handhelds"

 

Beispiel:

Style Sheet Angabe im <head></head> des HTML Dokuments:

<head>

<!-- ... -->

<link rel=stylesheet href="/style.css" type="text/css" media="screen">
<link rel=stylesheet href="/print-style.css" type="text/css" media="print">
<link rel=stylesheet href="/print-style.css" type="text/css" media="handheld">

<!-- ... -->

</head>

style.css:

Detaillierte Informationen zu möglichen Formatierungsangaben finden Sie bei

http://de.selfhtml.org/css/eigenschaften/schrift.htm

Farbangaben finden Sie hier


Alles zu Style-Sheets einschließlich Beispielvorlagen finden Sie hier:

http://de.selfhtml.org/css/index.htm

 

body {
font-family:Arial, Verdana, Tahoma, Georgia;
font-size:12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: none;}

 

a:link {
font-family: Arial, Verdana;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: underline;
}

a:visited {
font-family: Arial, Verdana, Tahoma, Georgia;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: underline;
}

a:hover {
font-family: Arial, Verdana, Tahoma, Georgia;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #706363;
text-decoration: underline;
}

a:active {
font-family: Arial, Verdana, Tahoma, Georgia;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #706363;
text-decoration: underline;
}

.fetteueberschrift {
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #706363;
font-family: Arial, Verdana, Tahoma, Georgia;
text-decoration: none;
}

strong {
font-size:12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
font-family: Arial, Verdana, Tahoma, Georgia;
text-decoration: none;}

print-style.css  - wie style-css mit einer zusätzlichen Angabe:

div.print {display:none}

body, a:visited, a:link, a:hover, a:active werden automatisch für den gesamten Textbereich und alle Linkangaben des verknüpften HTML-Dokuments wirksam

strong wird bei jeder Angabe von <strong></strong> wirksam

.fetteueberschrift ist eine eigene Definition und wird wirksam bei der Angabe <span class="fetteueberschrift"></span>

 

bei Druckausgabe - und nur bei Druckausgabe wird div.print wirksam:

<div class="print"></div>

sinnvoll ist dies zum Beispiel bei Bildern:

<div class="print"><img src="/bild.jpg" width="100" height="100" alt="mein Bild"></div>

 

Beispiel für Absatzformatierungen im Style-Sheet

p
{
font-family: "Tahoma, Helvetica, Geneva",sans-serif;
color:#000000;
font-size:100%;
margin-top:10pt;
margin-bottom: 6pt;
margin-right: 5pt;
margin-left: 5pt;
}

.p1
{
font-size: 85%;
margin-top: 1pt;
margin-bottom: 3pt;
margin-left: 3pt;
margin-right: 3pt;
}

.p2
{
color:#003366;
font-size:85%;
margin-right: 20pt;
margin-left: 10pt;
margin-bottom: 4pt;
}

 

die Absatzformatierungen werden im HTML-Dokument aktiviert durch: <p class="p1"></p>  <p class="p2"></p> etc.

 

Browser reagieren auf CSS-Angaben teilweise unterschiedlich. Ob Ihr Style-Sheet den Regeln entspricht, können Sie überprüfen bei:

http://jigsaw.w3.org/css-validator/
 

Das könnte Sie außerdem interessieren