| CSS Kategorie Syntax
|
|
Durch das Verwenden eines Punktes (.) gefolgt vom class Namen, erkl�rst du eine CSS class. Du bildest den class Namen sich. Wenn du die Eigenschaften/die Werte zu deiner class eintragen m�chtest, kannst du sie nach dem class Namen zuweisen.
|
|
.class-name { property:value; }
|
|
|
Du kannst den Punkt mit dem HTML Elementnamen, wenn du den gleichen Kategorie Namen f�r mehrfache Elemente verwenden m�chtest, aber jeden mit einer anderen Art vorsetzen.
|
|
html-element-name.class-name { property:value; }
|
|
|
Du k�nntest Artblattkategorien f�r jedes definieren, wenn du einen purpurroten Schriftkegelpunkt und einen blauen Schriftkegelpunkt w�nschst.
|
.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}
.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}
|
|
|
Dieses an den unterschiedlichen Punkten mit nach Code dann anwenden:
|
<p
class="purple">The
purple paragraph text
will go here.</p>
<p
class="blue">The
blue paragraph
text will go
here.</p>
|
|
|
The <span> tag
|
|
Mit dem <span> Umbau kannst du dieses an den Abschnitten von HTML so auch anwenden:
|
|
<p
class="purple">This
text will be purple
until you get to
<span
class="blue">these
words, which are
blue</span> and
then the text
carries on being
purple.</p>
|
|
|
Wenn du Code in einem unterschiedlichem anzeigen m�chtest, abh�ngig von seiner Sprache f�rben:
|
code.html { color: #4b0082 }
code.css { color: #191970 }
|
|
|
Z.B. mit " dem Sch�fer " class~=, k�nnen wir Artinformationen allen Elementen zuweisen, wie folgt:
|
|
*.pastoral { color: green } /* all elements with class~=pastoral */
|
|
|
The following assigns style only to H2 elements with class~="pastoral":
|
|
H2.pastoral { color: green } /* H1 elements with class~=pastoral */
|
|
|
Diese Richtlinien gegeben, w�rde die erste Instanz H2 unten nicht gr�nen Text haben, w�hrend die Sekunde wurde:
|
<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>
|
|
|
Ohne ein verbundenes Element kannst du Kategorien erkl�ren, wie folgt:
|
|
.note { font-size: small }
|
|
|
CSS Class Beispiel
|
<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>
|
|
|
|
|
CSS Class
CSS Class k�nnen sehr n�tzlich sein
|
|
