hier erkläre ich wie man ein CSS (Cascading Style Sheets) Stylesheet erstellt.
# Einleitung
CSS braucht man um HTML zu formatieren, mit CSS lassen sich zb. rollover effekte erstellen, man kann auch text, tabellen oder andere HTML elemente formatieren.
also, fangen wir an.
# Stylesheet erstellen
1. erstelle in deinem website ordner eine textdatei. benenn sie stylesheet.css - somit ändert sich der dateityp automatisch in eine css datei.
2. öfffne das stylesheet im editor oder ein ähnliches programm
3. nun kannst du eigentlich hier alles einfügen was du willst, hier ein beispiel:
/* eine html "überschrift" formatieren */
h1 {
font-family:arial;
font-size:14px;
color:#000000;
text-align:center;
}
/* tabellenfelder formatieren */
td {
font-family:arial;
font-size:10px;
color:#000000;
}
/* links formatieren */
a:link {
color:#000000;
text-decoration:none;
font-size:9pt;
font-family:arial;
}
a:visited {
color:#000000;
text-decoration:none;
font-size:9pt;
font-family:arial;
}
a:hover {
color:#FF00FF;
text-decoration:none;
font-size:9pt;
font-family:arial;
}
a:active {
color:#000000;
text-decoration:none;
font-size:9pt;
font-family:arial;
}
/* das <body> tag formatieren.. */
body {
margin: 0px;
background-color: #FFFFFF;
background-image: url(background.jpg);
background-repeat: no-repeat;
}
/* beispiel: irgendein html tag formatieren */
img {
border: 0px;
}
/* somit werden alle <img> tags so formatiert! */
/* beispiel: eine class erstellen (zb. für eine navigation */
a.navi:link, a.navi:active, a.navi:visited {
background-color: #FFFFFF;
font-size: 18px;
font-family: verdana;
}
a.navi:hover {
background-color: #183050;
font-size: 18px;
font-family: verdana;
}
/* der html tag muss dann so sein: <a href="" class="navi" */# Erklärung
» im code - fragen könnt ihr ja unten posten.
# Einbinden
CSS einbinden ist einfach. wenn man ein stylesheet hat, muss man lediglich im head bereich ein tag einfügen welcher den pfad zum stylesheet beinhaltet.
<html>
<head>
<title></title>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>
CSS lässt sich auch direkt einbinden, erfordert einfach ein anderes tag im head bereich.
# Einsetzen
html eigenschaften (zb. die links oder <img>) werden automatisch so formatiert wie es im stylesheet vorgegeben ist. klassen muss man mit class="" "ansprechen"...siehe beispiel im code mit der navigation.
(man kann auch id="" einsetzen, kann man aber nur 1mal verwenden / seite).
# Links zu CSS
weitere infos zu css gibts auf
» selfhtml
» schattenbaum
» intensivstation
» css 4 you
» w3schools
so - ich hoffe das war verständlich..bei fragen schreibt einfach in den thread.
ps. das sind nur _grundlegende_ sachen - es lassen sich auch ganze layouts mit css und xhtml umsetzen, liest euch bitte noch auf den seiten die ich gepostet habe rum.
so long
//edit: hab noch ein paar sachen angepasst / verbessert
