WIKI
Abituraufgaben
Referate
Fächer
FORUM
News
Ankündigungen
Schule
Nach der Schule
Freizeit und Miteinander
Computer & Internet
OffTopic
CHAT
IRC
Tutorial
TOOLS
html2wiki
GAMES
WIKISCHOOL
Impressum
LinksCSS - Grundlagen
Aus WikiSchool
|
Achtung: Klassenprojekt
|
[Bearbeiten] Info zum Projekt
Diese Kurzeinführung in CSS ist ein Teil des Klassenprojekts Einstieg ins Programmieren - digitale Mitschrift und wurde vorwiegend von SchülerInnen erstellt.
Inhaltsverzeichnis |
[Bearbeiten] Allgemein
Ein Vorteil von CSS ist, dass man Formatierungen extern auslagern kann. Das heißt, man hat eine Datei (Casding Stylsheet Document) wo alle Formatierungen von allen Tags drin stehen. Diese Datei wird als .css abgespeichert.
Wie z.B.:
body {background-image: url(bilder/background1.jpg);
font-family:Verdana, Helvetica, Arial, sans-serif;}
h1 {font-weight:300; color:#0000FF;}
Ein CSS – Tag besteht aus:
Selektor: {Element: Wert} z.B. body {background-color:#FF0000}
Formateigenschaften intern definieren im „head“ oder auslagern.
Intern definiert:
<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 {color:red; font-size:48px; }
</style>
</head>
oder Formateigendschaften in einer ausgelagerten DAtei:
<head> <title>Externe Css Datei</title> <link rel="stylesheet" type="text/css" href="xxxx.css" /> </head>
Kommentare innerhalb einer CSS – Sheet werden so angeschrieben: /* Anmerkung */
[Bearbeiten] Selektortypen
Es gibt:
- Universalselektor:
* {font–family: Arial;}
- Bewirkt, dass alle Texte mit der Schriftart „Arial“ geschrieben werden.
- Verschachtelte Tags:
p i {font-size: 16pt; font-weight: bold;}
- Class
.wichtig {background-color: #1155EE; font-weight: bold}
- Class wird aufgerufen mit “span und div”
- <span class=“wichtig“> ... </span>
- Pseudoclass
a: link {color: #00FF00; text-decoration: underline}
a: visited
a: hover
a: active
a: focus