Normalerweise müßten Sie im BODY für jedes Element einen Wert eingeben. Aber mit CSS 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 css-style vorgegeben haben, wird hier ausgeführt. Hier habe ich ein paar gängige CSS 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.
|
|
Beispiele: |
|
Normalerweise müßten Sie im body jedes Mal eingeben: <table align="center" style="width: 95%" cellpadding="5" cellspacing="0"> oder Wenn Sie aber im css Sie diese Befehle eingeben: table {align: center; width: 95%; cellpaddin: 5; cellspacing: 0;} oder Dann müssen Sie im Body nur noch das eingeben: <table> |
| Beschreibung | tag-Befehle | |
| Autostyle<auto-style> | ||
| Aufzählungszeichen<ul><li> | ||
| Absatz<p> | ||
| Abstand<padding><margin> | ||
| AttributeDiverse Befehle | ||
| Audio/Video<audio><video> | ||
| Außenrahmen<outline> | ||
| Bilder<img><figure> | ||
| Bildoptimierung<alt> | ||
| Bilderecken<corners> | ||
| Bildcontainer<figure> | dddddddddddddddddddddddd | |
| Bildschirm<@media> | ||
| DivisionAbschnitt<div><span> | Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Über die Attribute der Elemente, kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei können die Elemente geschachtelt werden. | |
| Einbindung<frame> | ||
| Formulare<form><textarea> | ||
| Formatierung<blockquote><strong> | ||
| Grundaufbau<div><span> | ||
| Hintergrund<background> | ||
| Klassifizierung<display><float> | ||
| Links<a><link> | ||
| Listen<list> | ||
| Positionieren<position> | ||
| Programmierung<script> | ||
| Rahmen<border> | ||
| Schrift<font> | ||
| Schrifteinbindung<link> | <link href="https://fonts.googleapis. com/css2? family=Rock+Salt& display=swap" rel="Stylesheet" /> | |
| Seitenstruktur<header><main><footer> | ||
| Stile<style> | ||
| Seitenrahmen<container> | ||
| Seitenöffnung<target> etc | Das Attribut gibt an, wo das verknüpfte Dokument geöffnet werden soll. | |
| Silbentrennung<justify> | ||
| Tabellen<table><border><tr><td><th> | ||
| Text<font><text> | ||
| Textausrichtung<align><float> | ||
| Textcontainer<container ><textarea> | ||
| Textkolumnen<column> | ||
| Textmarke<name> | Eine Textmarke funktioniert wie ein Lesezeichen in einem Buch: Sie markiert eine Stelle, die Sie einfach verlinken möchten. | |
| Textrand | <borderimg> | |
| Textschatten | <schatten> | |
| Texttrennung | <hyphens> | |
| Textzeilenhöhe | <line-height> | |
| Überschriften | <h1> bis <h2> | |
| Überlagerung | <z-index> | |
| Vorzeichen | <nix - # - . > | |
| WennElemente | <on ...> | |
| Zellen/Spalten | <div><span> | |
Kontakt Datenschutz Impressum |