Cascading Style Sheets
Benötigtes Vorwissen
Cascading Style Sheets (kurz: css) ist eine Scriptsprache, die das Aussehen von HTML beschreibt und festlegt. Dafür werden HTML-tags 1. native oder 2. mittels separater Selektoren (id, class) angesprochen, Erklräungen siehe unten.
CSS folgt dem verbreiteten Syntax-Format mit VariablenName -> Body (Attribut: Wert):
Das folgende Beispiel zeigt die Style-Zuweisung einer Überschrift <h1></h1>
Element-Selektoren
Element-Selektoren verfassen Styleanweisungen für native HTML-Elemente
Überschrift 1 fett und rot:
h1{
color:red;
font-weight: bold;
}
Paragraph Seitenabstand 5px und Hintergrundfarbe hellgrau:
p{
margin:5px;
background-color: #aaaaaa;
}
Tabelle mit der Breite 600px und Elefenbeinweißem Hintergrund:
table{
width:600px;
background-color: #D3D3D3;
}
class-Selektoren
Diese Selektoren verfassen für beliebige, dieser Klasse zugewiesene Elemente Styleanweisungen. Dabei können einem Element sogar mehrere Klassen zugewiesen werden. In der css-Umgebung werden die class-Selektoren durch einen führenden "." eingeleitet.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title></title>
<style>
.klasseHaupt {font-style: italic; border: 1px solid #000000; margin:10px;}
.klasseSub {color: green; background-color: #ff0000; padding:30px;}
</style>
</head>
<body>
<div class="klasseHaupt">
Text 1
</div>
<div class="klasseHaupt klasseSub">
Text 1
</div>
</body>
</html>
Ergebnis
id-Selektoren
id-Selektoren beziehen sich laut Konvention exklusiv auf ein einzigen Element in einem Skript. Das heißt,
anders als bei class-Selektoren werden id-Selektoren nicht mehrfach verwendet pro Skript.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title></title>
<style>
#idHaupt {font-style: italic; border: 1px solid #000000; margin:10px;}
#idSub {color: green; background-color: #ff0000; padding:30px;}
</style>
</head>
<body>
<div id="idHaupt">
Text 1
</div>
<div id="idSub">
Text 1
</div>
</body>
</html>
Ergebnis:
Lizenziert unter Creative Commons Attribution Share Alike License 4.0