diedVIPs

html knowhow

style-Tags














Ich habe Ihnen hier 25 interessante Info´s zusammengestellt.
Neuester Upload: CSS/Bilder.html

Eigentlich ist <style type="text/css"> ganz einfach zu verstehen.

Normalerweise müßten Sie im BODY für jedes CSS-Element einen Wert eingeben. Aber mit <style> legen Sie die Werte für die ganze Seite oder für mit Vorzeichen markierte Elemente fest und sparen sich eine Menge Arbeit.

Im body müssen Sie jetzt nur noch die Funktion <div>, <span> oder <class> aufrufen und alles ,was Sie im <style> vorgegeben haben, wird hier ausgeführt.

 

Ganz wichtige Funktionen im style sind:

<style type="text/css">
1.   Beispiel     => wird aufgerufen mit: <p>Irgend ein Text></p>
2.  .Beispiel     => wird aufgerufen mit: <p class="Beispiel">Irgend ein Text</p>
3.  #Beispiel   => wird aufgerufen mit: <p id="Beispiel">Irgend ein Text</p>

</style>

Hier habe ich ein paar gängige <style>-Befehle zusammenstellt. Übrig geblieben sind nur eine Handvoll guter Befehle.

Natürlich können Sie ihre css/style-Daten auch in eine externe Datei auslagern und in Ihre Seiten einbinden. Speichern Sie Ihre Daten in eine Datei: z.B.: stylesheet. Siehe Beispiel

Fügen Sie dann in Ihren head-Bereich einfach den Link: <link rel="stylesheet" href="stylesheet.css"> ein. Und schon haben Sie auf ihrer Seite eine Menge Platz gespart. Im Übrigen können Sie diese externe Datei auf jede Ihrer Seite einbinden. Aufgrund meiner Erfahrung macht das nicht viel Sinn, da in der Regel jede Seite anders aussieht.

Externes CSS =
<
head><link rel="stylesheet" href="mystyle.css"></head>
Internes CSS =
<
style>

body {background-color: linen;}
h1 {color: maroon; margin-left: 40px;}
</style>
Inline CSS =
<
h1 style="color:blue;text-align:center;">
This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>




Beispiele:

Normalerweise müßten Sie im body jedes Mal eingeben:

<table align="center" style="width: 95%" cellpadding="5" cellspacing="0"> oder
<p id="p" align="center" style="width: 95%" cellpadding="5" cellspacing="0"> oder
<div id="style" style="left: 15%; top: 1em; position: absolute; height: 4.6em; width: 22.6em">

 

Wenn Sie aber im style diese Befehle eingeben:

table {align: center; width: 95%; cellpaddin: 5; cellspacing: 0;} oder
#p {border: 1em; border-color: white; height: 4.6em; width: 22.6em} oder
.tr {border-width: thin; border-color: #008080; text-align: left; width:33%; font-family: Cambria, font-size: 1.1em;}

 

Dann müssen Sie im Body nur noch das eingeben:

<table>
<p id="p">Das ist alles</p>
<td class="tr">