Kategorie: css
-
6 COOKIES! divs Schachteln / dein erstes Projekt
Das folgende Beispiel (vielen Dank Thorben) zeigt dir, wie du divs auch Schachteln kannst.Hier wird ein Layout erzeugt, das für eine Webseite gut geeignet ist, da Bereiche wie vorhanden sind. Hier kommt die index.html <html> <head> <title>Meine Cookie Webseite</title> <link rel="stylesheet" type="text/css" href="design.css"></head> <body> <div id="webseite"> <div id="header"> <h1>I Like Cookies</h1> </div> <div id="main"> …
-
7.1 Den Link verändern für Profis
Manchmal kann es notwendig sein, dass Aussehen des „a“ – Tags zu verändern. Dieser ist ja laut Vorgabe immer blau und unterstrichen. Dieses Aussehen passt nicht immer gut zum restlichen Design einer website. Die folgenden Vorgaben verändern das Aussehen des Links. a:link { font-family: Verdana,Arial; font-size: 11px; color: #000000; text-decoration: none; text-underline: none; }…
-
9. Karteireiter und Listen
In diesem Kapitel lernst du, wie ein horizontales Menü, auch Karteireiter genannt, erstellt wird. Dazu habe ich dir ein Beispiel erstellt, dass du im Downloadbereich unter dem Dateinamen karteireiter.zip findest. Erstelle das Verzeichnis Karteireiter und speichere/ entpacke hier die zip-Datei. Lies erst mal in Ruhe den Code und versuche ihn zu verstehen. Wenn du alles…
-
8 Listen zur Navigation anpassen
Listen hast du bereits imk Grundkurs verwendet. An Dieser Stelle musst du evtl. noch mal im HTML Lehrgang die Definition der Listen und Aufzälungen durchstöbern. Denn der folgende Code verändert hier die Darstellung der Listen, sodass ein mit einfachen Mitteln ein recht ansprechendes Menu entsteht. Probiere es innerhalb deines Projektes aus und experimentiere mit dein Einstellungen.…
-
7 Links anpassen
Das folgende Beispiel zeigt dir einige Veränderungen an den Grundeinstellungen des Links.Evtl. ist es notwendig, dass du für dein Projekt die Links in Farbe und Textart anpassen musst.Kopiere den folgenden Code in deine css-Datei und experimentiere mit verschiedenen Einstellungen. a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow;…
-
10.1 Boxmodell, Zeit für Abkürzugen
Innenabstände in der Box werden über padding gesetzt. Es gibt die Abstände oben, rechts, unten und links (achte auf die Reihenfolge!). Zum Beispiel: padding-top: 10px;padding-right: 30px;padding-bottom: 50px;padding-left: 70px; Das ist eine Menge Tipperei und kann ersetzt werdsen durch: padding: 10px 30px 50px 70px; Nochwas: padding: 20px; setzt überall einen Abstand von 20 Pixeln. Das gleiche…
-
5. divs
Divs werden verwendet um Abschnitte zu markieren. Alle Elemente, die in ein <div> eingebettet sind gehören zur gleichen Gruppe. Divs sollen dir helfen, deiner Seite mehr Struktur zu geben. Deutlich wirds hoffentlich an dem folgenden Beispiel: Erstelle die Datei /ai/css/divs/design.css und kopiere den folgenden Code. #kastenrot { background-color: red; width:200px;…
-
10 Boxmodell für Profis
Was du mit Boxen alles machen kannst zeigt dir das Projekt „Schulbar“. Beachte hier insbesondere den „Garantiekasten.
-
4 Klassen
Was sind Klassen? Es folgt ein einfaches Beispiel um das Prinzip einer Klasse zu verstehen. Angenommen es soll auf deiner Seite die Schriftart für einen Absatz, das <p>-Tag, Arial seinund die Farbe rot, so lautet dafür die Anweisung in deiner css-Datei: p { font-family: arial; color: red; } Nun kann es aber sein, dass…
-
3.2 Hintergrund
In einem HTML-Dokument erscheint der Hintergrund, sofern nichts Anderes bestimmt wurde, üblicherweise Weiß. Der Hintergrund kann auf verschiedene Arten verändert werden. Die einfachste besteht darin, eine Farbe zu bestimmen. Dies geschieht im Stylesheet als Attribut des Body-Tags und sieht so aus: body { background-color: #E6E8FA; }.
-
3.1 Weitere Definitionen für Schriften
Schrift und Abstände font-weight:bold; Die Schriftstärke, zur Auswahl stehen normal|bold|bolder|lighter font-style:italic; Anzeige der Schrift (kurz ob kursiv oder normal)italic = kursiveoblique = schräggestelltnormal = normal letter-spacing:0.3em; Abstände zwischen den einzelnen Buchstaben – sollte relativ angegeben werden, also in EM word-spacing:0.5em; Abstände zwischen den einzelnen Wörtern – sollte relativ angegeben werden, also in EM border-bottem:5px dotted;…
-
3 Schriftgestaltung und Farbe mit css
Beispiel 1 Im ersten Beispiel wird der Überschrift h1 die Größe 28pt, die Farbe Orange und die Schriftart Arial zugewiesen. Für die Gestaltung der Schrift werden folgende CSS-Befehle benötigt: color:#FF9F00; Farbe: orange, kann entweder als Hex-Wert:“#FF9F00″ oder als Farbnamen angegeben werden: „orange“, also „color:orange;“ – die Farbnamen sind immer auf Englisch! font-size:28pt; Schriftgröße: hier als…
-
2.1 Auslagern von CSS-Befehlen
Grundsätzlich Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll. Bevor wir beginnen erstelle ein neues Arbeitsverzeichnis: /ai/css/2_auslagernJetzt erstelle in diesem Verzeichnis die Datei anfang1.htmlKopiere den folgenden Code.…
-
1 Was CSS ist
Schneller, schöner Formatieren mit CSS HTML hauptsächlich mit der Struktur eines Dokumentes beschäftigt, CSS dagegen ist für das Aussehen verantwortlich. Über CSS kann eine wesentlich schlankere Seite erstellt werden, d.h. die Seite kann viel schneller geladen werden. Über CSS können die Formatierungen einfach und elegant vorgenommen werden. So können z. B. Schriftattribute wie Farbe, Schriftart…