Porno Webmaster

Ja man hat die Schnauze voll von CSS oder könnte daran verzweifen? Hier bei CSS Templates findet man echt scharfe Layouts für die eigene Hompage und das alles für Lau. Eine echt gigantische Auswahl von denen ihr sicher was brauchen könnt. Einfach was aussuchen eventuell anpassen und benutzen so wie jeder es will.

Zellen Eigenschaften zu bestimmen ist eine der wichtigsten Aufgaben. Hier wird gezeigt wie man Zellen stylen kann.

Wenn man eine gestrichelte Linie um seine Zellen haben will nimmt man diesen CSS Code:

td.dashed {
background-color: silver;
border-top-width:2px;
border-top-style:dashed;
border-bottom-width:2px;
border-bottom-style:dashed;
border-right-width:2px;
border-right-style:dashed;
border-left-width:2px;
border-left-style:dashed;
border-color: black;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
width: 130px;
height: 25px;
}

Beispiel für Dashed Style

Wenn man eine durchgehende Linie um seine Zelle haben möchte sollte man diesen Code benutzen:

td.solid {
background-color: silver;
border-top-width:2px;
border-top-style:solid;
border-bottom-width:2px;
border-bottom-style:solid;
border-right-width:2px;
border-right-style:solid;
border-left-width:2px;
border-left-style:solid;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 130px;
height: 25px;
}

Beispiel für Solid Style

Wer lieber eine gepunktete Linie für seine Zellen benutzen möchte sollte das probieren:

td.dotted {
background-color: silver;
border-top-width:2px;
border-top-style:dotted;
border-bottom-width:2px;
border-bottom-style:dotted;
border-right-width:2px;
border-right-style:dotted;
border-left-width:2px;
border-left-style:dotted;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 130px;
height: 25px;
}

Beispiel für Dotted Style

Man kann auch eine doppelt gestrichelte Linie für sein Layout verwenden:

td.double {
background-color: silver;
border-top-width:2px;
border-top-style:double;
border-bottom-width:2px;
border-bottom-style:double;
border-right-width:2px;
border-right-style:double;
border-left-width:2px;
border-left-style:double;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 130px;
height: 25px;
}

Beispiel für Double Style

CSS Table Style

Hier kann man eine Tabelle für seinen Internet Auftritt per CSS stylen es gibt da mehr Möglichkeiten als man denken sollte. Die Border Stylings kann man natürlich auch noch untereinander mischen so das man eine gestrichelte Linie und eine gepunktete Linie in einer Tabelle hat. CSS Styling bedeutet schlanker Code und die volle Styling Kontrolle über seinen Internet Auftritt.

background-color: – Hier kann man die Farbe des Hintergrundes festlegen.
border-top-width: Hier wird die Breite des Rahmens oben festgelegt.
border-top-style: Hier wird der Style des Rahmens der Tabelle für den oberen Rand festgelegt.
border-bottom-width: Hier wird die Breite des Rahmens unten festgelegt.
border-bottom-style: Hier wird der Style des Rahmens der Tabelle für den unteren Rand festgelegt.
border-right-width: Hier wird die Breite des Rahmens rechts festgelegt.
border-right-style: Hier wird der Style des Rahmens der Tabelle für den rechten Rand festgelegt.
border-left-width: Hier wird die Breite des Rahmens links festgelegt.
border-left-style: Hier wird der Style des Rahmens der Tabelle für den linken Rand festgelegt.
border-color: Hier wird die Frabe des Rahmens festgelegt.

Bei der Margin Angabe wird der Abstand zum Browser Fenster festgelegt. Natürlich dürfen sich solche Angaben nicht überschneiden.

margin-top: Hier wird der Abstand zum nächst höheren Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.
margin-bottom: Hier wird der Abstand zum nächst unteren Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.
margin-left: Hier wird der Abstand zum nächst linken Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.
margin-right: Hier wird der Abstand zum nächst rechten Objekt entweder der Browser Rand oder eine andere Tabelle angezeigt.

Bei der Padding Angabe werden Abstände innerhalb der Tabelle für Objekte wie Zellen, Texte oder Bilder zum inneren Rand festgelegt.

padding-top: Zeigt den Abstand innerhalb der Tabelle zum oberen Rand an.
padding-bottom: Zeigt den Abstand innerhalb der Tabelle zum unteren Rand an.
padding-right: Zeigt den Abstand innerhalb der Tabelle zum rechten Rand an.
padding-left: Zeigt den Abstand innerhalb der Tabelle zum linken Rand an.

Durch diese Angaben kann die Höhe und Breite der Tabelle festgelegt werden:

width: Hier wird die Breite der Tabelle festgelegt.
height: Hier wird die Höhe der Tabelle festgelegt.
color: – hier legt man die Schriftfarbe fest.

Style Dashed hier handelt es sich um eine gestrichelte Linie Beispiel für Dashed Style:

table.dashed {
background-color: yellow;
border-top-width:10pt;
border-top-style:dashed;
border-bottom-width:10pt;
border-bottom-style:dashed;
border-right-width:10pt;
border-right-style:dashed;
border-left-width:10pt;
border-left-style:dashed;
border-color: black;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 100px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
width: 600px;
height: 400px;
}

Style Solid hier handelt es sich um eine durchgehende Linie Beispiel für Solid Style:

table.solid {
background-color: red;
border-top-width:10pt;
border-top-style:solid;
border-bottom-width:10pt;
border-bottom-style:solid;
border-right-width:10pt;
border-right-style:solid;
border-left-width:10pt;
border-left-style:solid;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 600px;
height: 400px;
}

Style Double hier handelt es sich um zwei durchgehende Linien Beispiel für Double Style:

table.double {
background-color: red;
border-top-width:10pt;
border-top-style:double;
border-bottom-width:10pt;
border-bottom-style:double;
border-right-width:10pt;
border-right-style:double;
border-left-width:10pt;
border-left-style:double;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 600px;
height: 400px;
}

Style Dotted hier handelt es sich um eine gepunktete Linie Beispiel für Dotted Style:

table.dotted {
background-color: red;
border-top-width:10pt;
border-top-style:dotted;
border-bottom-width:10pt;
border-bottom-style:dotted;
border-right-width:10pt;
border-right-style:dotted;
border-left-width:10pt;
border-left-style:dotted;
border-color: black;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
width: 600px;
height: 400px;
}

Wenn man die Beispielseiten aufruft sollte man mal in den Quelltext schauen um zu sehen wie man die externe CSS Datei einbindet und um zu sehen das man einen echt schlanken Code durch CSS Style erzeugen kann. Außerdem kann man auch sehen wie man die Objekte benennen muß. Man kann die Codes kopieren und damit ein wenig rumspielen, das macht Spaß und bringt neue Erkentnisse.

CSS ist ein mächtiges Werkzeug um Seiten zu stylen und sie in eine angenehme Form zu bringen. Hier sollen die wichtigsten Attribute genannt werden um CSS für eigene Seiten einzusetzen.

In einer CSS Style Datei sollte man mit dem Body Bereich anfangen hier wird alles als Standart ausgewießen was ansonsten nicht anders festgelegt wird. Man sollte die CSS Datei auslagern um mehr Kontrolle über seine Seite zu haben. Um das zu tun speichert man einfach eine leere Seite als style.css ab in den Ordner seiner Wahl oder in das Hauptverzeichnis.

Der Body und was man da so machen kann:

background: – Hier kann man ein Hintergrundbild festlegen.
background-color: – Hier kann man die Farbe des Hintergrundes festlegen.
font-family: – Hier legt man die Schriftfarbe fest. Weitere Schriftarten müßen durch ein Komma getrennt werden.
font-size: – Hier legt man die Schriftgröße fest.
text-align: – Hier legt man die Ausrichtung des Textes fest.
color: – hier legt man die Schriftfarbe fest.
margin: – Hier legt man Abstände zwischen Objekten fest, für alle Abstände hier kann man noch speziell werden.

Alternativ kann man noch diese Angaben machen, die aber nur im IE sichtbar sind:
scrollbar-base-color: #000080;
scrollbar-arrow-color: #FFFFFF;
Hier wird die Farbe der Scrollbar festgelegt.

Praktisch sieht das ganze so aus man kann das kopieren und abspeichern, die Pfade müßen angepasst werden:

body {
background: url(Pfad_Zum_Bild/bild.jpg);
background-color: #FFFFFF;
scrollbar-base-color: #000000;
scrollbar-arrow-color: #FFFFFF;
font-family : Times New Roman;
font-size: 12px;
text-align: justify;
color: #000000;
margin: 0;
margin-top 0;
margin-bottom 0;
margin-left 0;
margin-right 0;
}

Speichere diesen Code ab und experimentiere damit ein bischen rum.