• Skriptum
• Software
• Expression Web: CSS

CSS in Expression Web

Da Expression Web von Microsoft ist, werden für manche CSS-Begriffe die selben Bezeichnungen verwendet wie für ähnliche Funktionen in Word.

CSS	Expression Web
CSS-Regel	Formatvorlage
Selektor	Auswahl
Klasse	Klasse
ID	ID
Kontextselektor	komplexe Auswahl
stylesheet	stylesheet

CSS-Regeln werden in Expression Web am besten im Panel "Formatvorlagen verwalten" bearbeitet.

Falls dieses Panel nicht angezeigt wird, könnt ihr es auf folgende Weisen aufrufen:
Menü Format | CSS-Formatvorlagen | Formatvorlagen verwalten…
Menü Bereiche | Formatvorlagen verwalten (9. Befehl von oben)

CSS-Regeln verwalten

Das Panel "Formatvorlagen verwalten" sieht folgendermaßen aus:

Obere (graue) Fläche

Ganz oben steht eine "Hyperlink"-Schaltfläche "Neue Formatvorlage…", mit der neue CSS-Regeln erstellt werden können.

Darunter kann man mit der "Hyperlink"-Schaltfläche "Stylesheet anfügen …" von dieser HTML-Datei auf eine externe CSS-Dateien verlinken.

Klickt man auf Optionen, öffnet sich eine Liste, in der man mehrere Auswahlen treffen kann:

…kategorisieren

In welcher Reihenfolge sollen die CSS-Regeln angezeigt und in Gruppen zusammengefasst (kategorisieren) werden.
Bei professionellen Einsatz von CSS ist nur "Nach Reihenfolge kategorisieren" wirklich sinnvoll.

…anzeigen

Normalerweise ist die Auswahl "Alle Formatvorlagen anzeigen" am praktischten. Mit "In der aktuellen Seite verwendete Formatvorlagen anzeigen" kann man CSS-Regeln, die nicht auf der aktullen Webseite verwendet werden, ausblenden. Dies sollte aber bei professionellen Einsatz von CSS nicht notwendig sein. Die dritte Möglichkeit "In der Auswahl verwendete Formatvorlagen anzeigen" funktioniert nicht sinnvoll: es werden nicht alle CSS-Regeln angezeigt, die innerhalb einer Auswahl/Markierung auf der Webseite wirken, sondern nur die, die an der Stelle wirken, an der sich die Einfügemarke befindet bzw. an der die Auswahl endet. Für eine Analyse und Fehlersuche gibt es bessere Werkzeuge.

…trennen

"Gruppierte Auswahlzeiger trennen" gedeutet, dass gruppierte Selektoren getrennt angezeigt werden, was aber den Sinn der Sacher eher widerspricht, also immer ausgeschaltet lassen.

…Formatvorlagenvorschau anzeigen

Bei aktivierten "Ausgewählte Formatvorlagenvorschau anzeigen" wird im Panel ganz unten das Vorschaufeld angezeigt. Somit wird eine Vorschau der gerade ausgewählten CSS-Regel angezeigt.
Benötigt man diesen Platz um mehr CSS-Regeln gleichzeitig anzuzeigen, kann man die Vorschau deaktivieren. Hat man genug Platz, ist diese Vorschau durchaus informativ.

Listenfeld "CSS-Formatvorlagen"

Unter der Bezeichnung "CSS-Formatvorlagen" steht eine Liste der CSS-Regeln, die auf diese HTML-Datei Einfluss haben. Dabei gibt es folgende Symbole:

blauer Punkt

Der Selektor ist ein Element-Selektor (auch Typ-Selektor genannt).

grüner Punkt

Der Selektor ist ein Klassen-Selektor.

roter Punkt

Der Selektor ist ein ID-Selektor.

Kontextselektor

Bei Kontextselektoren funktioniert diese Symbole nicht sinnvoll. Entscheident wäre das rechteste Element des Selektors, es wird aber anhand des linkesten Element eingefärbt.

Punkt ohne Ring

Diese Regel wird nicht angewendet, da in der HTML-Datei keine Element dem Selektor entspricht, d.h. es gibt keine Übereinstimmung.
Dies kann bei allen Selektoren vorkommen, es sind daher Punkte auch in grün und rot möglich.

Man jede einzelne Regel ändern, löschen, kopieren oder umbenennen, wenn man sie mit der rechten Maustaste anklickt und im Kontextmenü den entsprechenden Befehl auswählt.

Ebenso kann die Reihenfolge der Regeln verändert und an die eigenen Wünsche angepasst werden.

Und natürlich kann einer Textstelle oder HTML-Element in der Webseite eine Klasse zuweisen.

Wenn man mit der Maus auf eine CSS-Regel zeigt (also hinzeigt und circa für eine Sekunde nicht bewegt), wird der Code der CSS-Regel eingeblendet:

Vorschaufeld "Ausgewählte Formatvorlagenvorschau"

Nicht alle Eigenschaften der markierten CSS-Regel werden hier dargestellt, aber man bekommt einen ersten Eindruck. Auf alle Fälle hilft es zu erkennen, ob man z.B. auch wirklich die gewünschte Klasse markiert hat.

CSS-Regeln erstellen und bearbeiten

Erstellen einer CSS-Regel

In Expression Web werden CSS-Regeln im Dialogfenster "Neue Formatvorlage" erstellt. Das Dialogfenster öffnet man entweder mit:

• Panel "Formatvorlagen verwalten": "Hyperlink"-Schaltfläche "Neue Formatvorlage…" (ganz oben)
• Menü: Format | Neue Formatvorlage…
• Symbolleiste "Formatvorlage": Schaltfläche "Neue Formatvorlage…"
• Tastenkombination: n.v.

oder man erstellt die CSS-Regel

• direkt im Quellcode

Erstellen der Regeln im Dialogfenster "Neue Formatvorlage"

Bearbeiten einer CSS-Regel (nachträgliches ändern oder ergänzen)

Sowohl die Selektoren als auch die Deklarationen einer CSS-Regel kann man im Dialogfenster "Formatvorlage ändern" verändern, welches mit dem Dialogfenster "Neue Formatvorlage" identisch ist. Das Dialogfenster öffnet man entweder mit:

• Panel "Formatvorlagen verwalten": auf den Selektor der gewünschten Regel mit der rechten Maustaste klicken (Kontextmenü), dort den Befehl "Formatvorlage ändern …" anklicken
• Menü: n.v.
• Symbolleiste: n.v.
• Tastenkombination: n.v.

oder man ändert die CSS-Regel

• direkt im Quellcode

Ändern bedeutet für Deklarationen, dass man:

• Einen neue Deklaration erstellt: In das Steuerelement neben der gewünschten CSS-Eigenschaft einen Wert eingeben.
• Einen Deklaration ändert: Im Steuerelement neben der gewünschten CSS-Eigenschaft den Wert ändern.
• Einen Deklaration löscht: Im Steuerelement neben der gewünschten CSS-Eigenschaft den Wert löscht, damit dieses leer ist.

Ändern bedeutet für Selektoren, dass man:

• die Zuordnung ändert will, das heißt, dass sie an anderen Stellen wirken.
  Hat man z.B. eine Regel für alle h2 erstellt, möchte sie aber nun für alle h3 wirken lassen, so kann man dazu den Selektor von "h2" auf "h3" verändern. Genauso kann man Gruppierungen von Selektoren erstellen oder Kontextselektoren erstellen.
• die Zuordnung belassen will, aber den Namen einer Klasse oder ID verändern will.
  Vorsicht: Ändern man nur den Namen im Selektor der CSS-Regel, aber nicht auch im HTML-Quellcode, so ändert sich die Zuordnung: Sie wirkt nicht mehr, weil die Namen nun unterschiedlich sind.
  Um die Zuordnung zu belassen, muss der Name sowohl im Selektor der CSS-Regel verändert werden, als auch bei jedem Vorkommen im HTML-Code. Dies erreicht man am Besten durch die Benutzung von "Suchen und Ersetzen" (Menü Bearbeiten | Ersetzen…). Für Klassennamen gibt es in Expression Web noch den Befehl "Klasse umbenennen".

Ändern der Regeln im Dialogfenster "Neue Formatvorlage"

Klassen umbenennen

Für das Umbenennen einer Klasse gibt es ein eigenes Dialogfenster namens "Klasse umbenennen ". Das Dialogfenster öffnet man mit:

• Panel "Formatvorlagen verwalten": auf den Selektor der gewünschten Regel mit der rechten Maustaste klicken (Kontextmenü), dort den Befehl "Klasse 'Klassenname' umbennen…" anklicken.

oder man ändert die CSS-Regel

• direkt im Quellcode. Bringt aber keinen Nutzen, da man bei jedem Vorkommen im HTML-Code den Namen verändern muss..

Im Dialogfenster den neuen Namen eingeben (ohne den Punkt, der das Trennzeichen ist) und das Kontrollfeld "Klassenverweise auf dieser Seite umbenennen" aktivieren. Geht das auch in allen Dateien der Site?

Löschen einer CSS-Regel

Um eine CSS-Regel vollständig zu löschen (und nicht nur einzelne Deklarationen), ruft man entweder den entsprechenden Befehl auf mit:

• Panel "Formatvorlagen verwalten": auf den Selektor der gewünschten Regel mit der rechten Maustaste klicken (Kontextmenü), dort den Befehl "Löschen" anklicken. Es kommt noch die Sicherheitsabfrage "Möchten Sie diese Formatvorlage wirklich löschen?"
• Menü: n.v.
• Symbolleiste: n.v.
• Tastenkombination: Entf-Taste

oder man ändert die CSS-Regel

• direkt im Quellcode

Der Begriff löschen wird auch nocht anders verwendet.

Kopieren einer CSS-Regel

Möchte man eine CSS-Regel erstellen, die einer bereits vorhandenen sehr ähnlich ist, kann man in Expression Web diese kopieren.
Dazu sucht man sich die zu kopierende CSS-Regel aus und ruft dazu den entsprechenden Befehl auf, worauf sich das Dialogfenster "Neue Formatvorlage" öffnet. Im Unterschied zum Erstellen einer neuen CSS-Regel werden die vorhandenen Deklarationen übernommen, das heißt, bei den entsprechenden Eigenschaften sind schon die Werte eingetragen. Das Dialogfenster öffnet man mit:

• Panel "Formatvorlagen verwalten": auf den Selektor der gewünschten, zu kopierenden Regel mit der rechten Maustaste klicken (Kontextmenü), dort den Befehl "Neue Formatvorlagekopie …" anklicken
• Menü: n.v.
• Symbolleiste: n.v.
• Tastenkombination: n.v.

oder man kopiert die CSS-Regel

• direkt im Quellcode

Anmerkung: Wenn man das Design einer Website gut konzipiert und die Umsetzung mit CSS-Regeln professionell durchführt, ergibt sich meist kein Bedarf Regeln zu kopieren.

Ändern der kopierten Regeln im Dialogfenster "Neue Formatvorlage"

Dialogfenster "Neue Formatvorlage"

Beim Erstellen, Ändern oder Kopieren einer CSS-Regeln wird stets das Dialogfenster "Neue Formatvorlage" geöffnet, auch wenn es beim Ändern den Namen "Formatvorlage ändern" trägt.

Folgende Bereiche gibt es in diesem Dialogfenster:

1. Selektor: in Expression Web "Auswahl" genannt
2. Position der CSS-Regel
3. Deklarationen
4. Vorschau der Darstellung, die durch die CSS-Regel erzeugt wird
5. Code-Ansicht der Deklarationen
6. Möglichkeit, die Regel gleich der Auswahl im HTML zuzuordnen

Selektor

Im Kombinationsfeld mit der Bezeichnung "Auswahl" kann man den gewünschten Selektor eingeben. In Expression Web wird der Selektor "Auswahl" genannt.

Man kann entweder den Selektor eintippen oder die Dropdown-Liste des Kombinationsfeldes öffnen. In dieser Liste befinden sich (fast) alle HTML-Elemente, die man für einen Element-Selektor (auch Typ-Selektor genannt) verwenden kann sowie ein Listeneintrag "(Inlineformatvorlage)". Natürlich kann man den Elementenamen auch eintippen, was bei kurzen Namen wie p oder h1 schneller ist. Namen für Klassen und IDs muss man eintippen, da diese ja nicht vordefiniert sind.

Element-Selektor

Entweder öffnet man die Dropdown-Liste und wählt einen HTML-Elementnamen aus, oder man tippt diesen ein, wobei man den vorgegeben Punkt an Anfang löschen muss.

Klasse-Selektor

Einfach den gewünschten, ausgedachten Klassennamen eintippen, der Punkt als Trennzeichen ist schon vorgegeben, der Default-Name "NeueFormatvorlage1" ist vorweg markiert und wird daher beim ersten Tipper gelöscht. Diesen Default-Namen sollte man nie verwenden, da er schlichtweg unbrauchbar ist.
Möchte man die Klasse nicht mit dem Universalselektor (bzw. weglassen) verwenden, kann man vor dem Punkt (Trennzeichen) den gewünschten HTML-Elementenamen angeben.

ID-Selektor

Einfach den gewünschten, ausgedachten ID-Namen eintippen, den Punkt löschen und an seiner Stelle die Raute # (auch Nummernzeichen genannt) als Trennzeichen eingeben, der Default-Name "NeueFormatvorlage1" ist vorweg markiert und wird daher beim ersten Tipper gelöscht. Diesen Default-Namen sollte man nie verwenden, da er schlichtweg unbrauchbar ist.
Möchte man die ID nicht mit dem Universalselektor (bzw. weglassen) verwenden, kann man vor der Raute (Trennzeichen) den gewünschten HTML-Elementenamen angeben.

Kontext-Selektor

Wie oberhalb beschrieben einen Selektor eingeben und dann links davon den Kontext eintippen. In Expression Web wird der Kontextselektor "komplexe Auswahl" genannt.

Pseudo-Elemente und Pseudo-Klassen

Für Hyperlinks (<a>) sind die Pseudoklassen active, hover, link und visited in der Dropdown-Liste vorgegeben. Alle anderen müssen eingetippt werden.

Inline-style

Sollen anstelle einer CSS-Regel die Deklarationen "inline" angegeben werden, kann man in der Dropdown-Liste den Eintrag "(Inlineformatvorlage)" wählen. Die angegebenen Deklarationen werden dann als Wert des HTML-Attributs "style" direkt in den HTML-Code geschrieben und zwar in den Anfangstag in dessen Gültigkeitsbereich die Einfügemarke unmittelbar steht.
Inline-styles stehen im HTML-Tag, damit ist die Zuordnung vorgegeben und es wird kein Selektor benötigt.
Bei der professionellen Nutzung von CSS werden Inline-styles nur in Ausnahmefällen verwendet.

Position der CSS-Regel

CSS-Regeln stehen entweder im Kopfbereich (<head>) einer HTML-Datei und gelten dann für diese eine Datei. Damit die neue CSS-Regel in den Kopfbereich geschrieben wird, wählt man im Kombinationsfeld mit der Bezeichnung "Definieren in" den Eintrag "Aktuelle Seite".

Oder CSS-Regeln stehen in einer eigenen CSS-Datei. Sie gelten dann in allen HTML-Dateien, die auf diese CSS-Datei verlinken. Existiert diese CSS-Datei schon beim Erstellen der CSS-Regel (was der Normalfall ist), dann wählt man im Kombinationsfeld mit der Bezeichnung "Definieren in" den Eintrag "Vorhandenes Stylesheet". Dadurch wird das rechts davon stehende Textfeld mit der Bezeichnung "URL" aktiviert und man kann entweder die CSS-Datei (gegebenenfalls mit Pfad) eintippen oder mit der Schaltfläche "Durchsuchen…" das Dialogfeld "Stylesheet wählen" öffnen. Dieses ist identisch mit dem Dialogfenster "Öffnen" (wie es jedes Anwendungsprogramm verwendet um Dateien zu öffnen), somit kann die gewünschte CSS-Datei geöffnet und somit ausgewählt werden. Wählt man im Kombinationsfeld mit der Bezeichnung "Definieren in" den Eintrag "Neues Stylesheet" wird beim Bestätigen des Dialogfensters (nach einer Sicherheitsabfrage) eine neue CSS-Datei angelegt und im Bearbeitungsfenster angezeigt. Sie muss später noch gespeichert und somit benannt werden.

Sollen die Deklarationen inline in einem HTML-Element stehen, so wählt man schon vorher im Kombinationsfeld mit der Bezeichnung "Auswahl" den Listeneintrag "(Inlineformatvorlage)". Dabei wird auch das Kombinationsfeld mit der Bezeichnung "Definieren in" deaktiviert.

Natürlich kann man diese Varianten mischen und die CSS-Regeln jeweils dort postionieren, wo man es wünscht.

Deklarationen

In der linken Spalte mit der Bezeichnung "Kategorie" stehen Überbegriffe, mit denen die Menge der CSS-Eigenschaften in Gruppen geteilt werden.

Diese Überbegriffe und die Auswahl welche CSS-Eigenschaften diese enthalten, unterscheiden sich von anderen Web-Editoren. Einige Übersetzungen sind auch schlecht gewählt, denn:
Rahmen (border), die eigentlich überall so übersetzt werden, heißen hier Randbereich
Das Boxmodell (box), wird meist nicht übersetzt, heißt hier Kasten.

Überblick über die Namen und Inhalte der Kategorien:

Zeichen und Block

typografische Eigenschaften, alles was Schrift formatiert

Hintergrund

Hintergrundfarbe und Hintergrundbilder

Randbereich

Rahmen: Strichtyp, -stärke und -farbe

Rahmenradius

abgerundete Ecken eines Rahmens oder Hintergrundes (Farbe, Bild)

Kasten

Boxmodell von CSS (Innen- und Außenabstände), Schatten der Box

Position

Anordnung, Positionierung und Größe von Boxen

Layout

Sichbarkeit, Darstellungsform, Umfließen, …(kurz: Restln)

Liste

Listenformatierungen

Tabelle

Tabellenformatierungen

Wenn in einer Kategorie Eigenschaften einen Wert zugewiesen haben, wird der Name der Kategorie fett dargestellt. Man sieht daher auf einen Blick, in welcher Kategorie schon Deklarationen existieren. Einen ähnlichen Überblick erhält man durch die Codedarstellung im Bereich Beschreibung (Nr. 5 in der Übersichtsabbildung).

Im zentralen Bereich stehen die Namen von CSS-Eigenschaften und daneben Steuerelemente, in denen man entsprechende Werte auswählen oder eingeben kann. Jedes dieses Pärchens entspricht einer Deklaration in CSS: sobald ein Wert in einem Steuerelement steht, wird eine Deklaration im CSS-Code erstellt, wird der Wert gelöscht, verschwindet auch die Deklaration.

Für jede Kategorie die man auswählt, werden rechts im Zentrum passende CSS-Eigenschaften angezeigt. Die Bezeichnungen der CSS-Eigenschaften entsprechen den englischen Originalnamen, sodass man sehr gut in Nachschlagewerken entsprechende Hintergrundinformationen finden kann.

Bei den CSS-Eigenschaften sind schon viele aus der Version CSS 3 enthalten. Da diese aber noch in Entwicklung ist und Expression Web aus dem Jahr 2012 stammt, sind nicht alle vollständig vertreten. Dazu kann man aber andere Hilfsmittel im WWW verwenden. Welche:

Informationen zu den Eigenschaften im Kapitel CSS. besser formulieren und link

Vorschau der Darstellung, welche die CSS-Regel erzeugt

Nicht alle Eigenschaften werden hier dargestellt, aber man bekommt einen ersten Eindruck.

Hilft auch zu erkennen, was einzelne Schlüsselwörter bedeuten bzw. was sie bewirken, z.B. dass bei Rahmenlinien "groove" graviert und "dashed" strichliert bedeutet.

Code-Ansicht der Deklarationen

Hier werden die Deklarationen, die durch die Zuweisung von Werten bei den CSS-Eigenschaften entstehen, in CSS-Code angezeigt. Dient zur Kontrolle.

Möglichkeit, die Regel gleich der Auswahl im HTML zuzuweisen

Hier kann man einem zuvor markierten Textabschnitt oder dem HTML-Element, in dem die Einfügemarke unmittelbar positioniert ist, die Regel gleich zugewiesen werden.

Ist aber bei professioneller Nutzung eher sinnlos:

• Kann nur bei Klassen und IDs verwendet werden, da hier eine Zuweisung "wahlfrei" ist, bei Element-Selektoren erfolgt die Zuordnung automatisch und ist nicht beeinflussbar.
• Klassen werden meist mehrmals zugewiesen (auf der selben Seite oder zumindest auf jeder Seite einmal), daher ist die Arbeitsersparnis nicht gegeben.

Diese Möglichkeit verleitet eher zu einer unprofessionellen Nutzung von CSS.

Reihenfolge von Regeln oder Deklarationen ändern

Da Expression Web eine neue Regel immer zu unterst anreiht, ist es sinnvoll, die Reihenfolge der Regeln ändern zu können.

Umsortieren der Reihenfolge der CSS-Regeln im Panel

Die Regeln, die umsortiert werden soll mit der Maus an die gewünschte Position ziehen. Dabei wird bei gedrückter Maustaste eine dünne Linie in der Näche des Mauszeigers angezeigt, und zwar zwischen den beiden angrenzenden Regeln. Wenn man die Maustaste ausläßt, wird die Regel an die Stelle der dünnen Linie zwischen diesen beiden Regeln verschoben.

Man kann auch mehrere Regeln auf einmal verschieben oder auch kopieren. Dabei werden die selben Prinzipien verwendet wie beim Verschieben und Kopieren im Windows Explorer:

mehrere Regeln markieren

Die erste Regel anklicken, bei jeder weiteren Regel die Strg-Taste gedrückt halten wenn die Regel angeklickt wird. Dadurch bleibt die bisherige Markierung erhalten.

mehrere Regeln, die hintereinander stehen, markieren

Die erste Regel anklicken, danach die Umschalt(Shift)-Taste gedrückt halten und die letzte Regel anklicken. Dadurch wird "von bis" markiert.

Kopieren

Wird beim ziehen mit der Maus die Strg-Taste (in dem Moment, wenn die Maustaste ausgelassen wird) gedrückt gehalten, wird die Regel bzw. Regeln kopiert statt verschoben. Bei gedrückter Strg-Taste wird beim Mauszeiger ein Plus in einem Quadrat als Hinweis des Kopierens angezeigt.
Anmerkung: Wie bereits erwähnt, ist das Kopieren von CSS-Regeln selten sinnvoll.

Umsortieren der Reihenfolge der CSS-Regeln in der Codeansicht

Falls die CSS-Regeln in einer eigenen CSS-Datei stehen, muss man die CSS-Datei öffnen. Zur Regel kann man dann scrollen.
Falls die CSS-Regeln im Kopf der HTML-Dateien stehen, muss diese in der Codeansicht angezeigt werden. Zur Regel kann man dann scrollen.

Altenativ kann man in beiden Fällen auch auf die entsprechene Regel mit der rechten Maustaste klicken und im Kontextmenü auf "Gehe zu Code" klicken.

Danach kann die Reihenfolge händisch geändern werden, entweder mit Ausschneiden (Strg+X) und Einfügen (Strg+V) an der gewünschten Position oder durch ziehen mit der Maus.

Dazu müssen ganze Zeilen inklusive Zeilenumbruch markiert werden, ansonsten kommt nach dem Einfügen der ausgeschnittenen Zeile die Zeilenumbrüche durcheinander (Leerzeilen, zwei Deklarationen hintereinander in einer Zeile). Daher Tipps zum richtigen Markieren:

• Wenn man mit der Maus ganz nach links in die Leiste mit den Zeilennummern fährt, sodass sich der Mauszeiger in einen Pfeil nach rechts oben (Standard ist nach links oben) ändert und dann klickt, wird die Zeile inklusive des passenden Zeilenumbruches markiert. Zieht man mit gedrückter Maustaste die Maus über die gewünschten Zeilen, so markiert man mehrere Zeilen.
• Man auch mit gleicher Methode wie im vorigen Punkt die erste Zeile markiert und dann bei gedrückter Umschalt(Shift)-Taste die letzte Zeile ebenso markieren. Dadurch wird "von bis" markiert.
• Zeile(n ) mit davor liegenden Zeilenumbruch ausschneiden: Am Ende der vorigen Zeile nach dem letzten Zeichen die Maustaste drücken und nach unten bis hinter das letzte Zeichen ziehen.
• Zeile(n ) mit davor liegenden Zeilenumbruch ausschneiden: Am Ende der vorigen Zeile nach dem letzten Zeichen die Maustaste klicken und dann bei gedrückter Umschalt(Shift)-Taste hinter das letzte Zeichen klicken. Dadurch wird "von bis" markiert.

Entweder nun mit der Maus die markieren Zeilen verschieben oder mit Strg+X ausschneiden (alternativ Menü Bearbeiten | Ausschneiden oder auch im Kontextmenü | Ausschneiden) und an der gewünschten Position wieder mit Strg+V einfügen (alternativ Menü Bearbeiten | Einfügen oder auch im Kontextmenü | Einfügen). Hat man ganze Zeilen markiert, dann ist die Position vor dem ersten Zeichen, das in der Zeile steht, an deren Stelle die Regeln stehen soll. Hat man mit dem davor liegenden markiert, dann ist die Position nach dem letzten Zeichen der vorherigen Zeile.

Umsortieren der Reihenfolge von CSS-Eigenschaften in der Codeansicht

CSS-Eigenschaften können nur in der Codeansicht umsortiert werden. Dies passiert genauso wie oben beim händischen Umsortieren von CSS-Regeln beschrieben ist.

Zuordnung von Regeln

Element-Selektoren (Typ-Selektoren) müssen nicht zugewiesen werden. Dies macht der Browser, wenn er die HTML-Datei interpretiert und mit den CSS-Regeln die Darstellung aufbaut.

Kontext-Selektoren müssen ebenfalls nicht zugewiesen werden wenn das rechteste Element des Selektors ein Element-Selektor ist, da sich für den Browser die Zuordnung zu den einzelnen HTML-Elementen in der HTML-Datei aus dem "Kontext" ableiten lässt.

Klassen und IDs müssen händisch den gewünschten HTML-Elementen einzeln zugewiesen werden, da die Auswahl aus "Browser-Sicht" willkürlich ist - Es hängt nicht von formalen Zusammenhängen ab, welche Tags ausgewählt werden, sondern den Gedanken der Autorin oder des Autors.

Zuweisen von Klassen und IDs

Als erstes muss die CSS-Regel mit dem Klassen-Selektor bzw. mit dem ID-Selektor erstellt werden.

Wenn Klassen bzw. IDs als CSS-Regel existieren, können sie einzelnen HTML-Elementen in der HTML-Datei zugewiesen werden. Klassen können beliebig oft, IDs dürfen nur einmal pro HTML-Datei zugewiesen werden.

Anmerkung: Sollte man eine ID ein zweites Mal zuweisen, erscheint ein Dialogfenster namens "Bestätigen" mit dem Hinweis, dass die ID erneut zugewiesen werden würde:

Um den HTML-Code valide zu halten, muss man hier mit Nein antworten; und man sollte keinenfalls das Auswahlkästchen "Bei doppelten IDs nicht mehr nachfragen" aktivieren.

In der HTML-Datei sind Klassen und IDs einzelnen tags zugewiesen und formatieren somit die Inhalte in dessen Gültigkeitsbereich. Die Zuweisung erfolgt im Quellcode, indem im Anfangstag bei Klassen das Attribut class verwendet und der Klassenname ohne Punkt (Trennzeichen) als Wert angegeben wird bzw. indem bei IDs das Attribut id verwendet und der ID-Name ohne Raute (Trennzeichen) als Wert angegeben wird. Also z.B.:

<p class="wichtig">…</p>
<div id="navigation">…</div>

Wie können die Klassen und IDs den HTML-Elementen zugewiesen werden?

• Eingabe im Quellcode
  Den gewünschten Anfangstag suchen und Quellcode wie oben beschrieben ergänzen..
• Panel "Formatvorlagen verwalten":
  Zuerst in der HTML-Datei ein HTML-Element auswählen (siehe unten) oder die Einfügemarke innerhalb des Gültigkeitsbereich platzieren.
  Dann im Panel "Formatvorlagen verwalten" mit der rechten Maustaste (Kontextmenü) auf den Selektor der gewünschten Klasse oder ID klicken, dort den Befehl "Formatvorlage übernehmen" anklicken.
  Anmerkung: Ist der Selektor ein Element-Selektor, ist dieser Befehl abgeblendet, also nicht verfügbar.
• Menü: n.v.
• Symbolleiste "Formatvorlage":
  Zuerst in der HTML-Datei ein HTML-Element auswählen (siehe unten) oder die Einfügemarke innerhalb des Gültigkeitsbereich platzieren.
  Zuweisen durch auswählen des Namens der gewünschten Klasse im Kombinationsfeld "Klasse" bzw. des Namens der gewünschten ID im Kombinationsfeld "ID" (nicht den Eintrag <Eindeutige ID zuweisen> auswählen).
  Anmerkung:
• Tastenkombination: n.v.

Empfehlung für das Zuweisen

Existiert ein HTML-Element und möchte man diesem eine Klasse oder ID zuweisen, sollte man dieses zuvor auswählen. Dies kann man über die Leiste "Direktauswahl von Tags" machen oder mittels der Esc-Taste (Details). Danach sollte die gewünschte Klasse oder ID über die Symbolleiste "Formatvorlagen" zugewiesen werden.

Möchte man einer Textstelle eine Klasse zuweisen, ohne dass diese Textstelledurch ein HTML-Element umschlossen ist, kann man diese Textstelle markieren und danach sollte die gewünschte Klasse über die Symbolleiste "Formatvorlagen" zugewiesen werden. Dadurch wird ein neutrales HTML-Element span eingefügt, dem dann die Klasse zugewiesen wird. Dabei sollte aber beachtet werden, dass sich keine weiteren HTML-Elemente innerhalb dieser Markierung befinden dürfen. Ist dies jedoch der Fall, sollte man zuerst mit der Tastenkombination Strg+Q das Dialogfenster "Direkt-Editor für Tags" aufrufen und mit dem Befehl "Mit Tag umschließen" das span um die Auswahl herum einfügen. Danach ist dieses span markiert und dann sollte die gewünschte Klasse über die Symbolleiste "Formatvorlagen" zugewiesen werden.

Alle Möglichkeiten des Zuweisens

Einfügemarke - Klassen und IDs zuweisen (sinnvoll)

Befindet sich die Einfügemarke im Text (also keine Textstelle und kein Element wie ein Bild ist markiert), so wird dem unmittelbar umgebende HTML-Element die Klasse bzw. ID zugewiesen.

Markierung - Klassen zuweisen (teilweise sinnvoll)

Ist eine Textstelle markiert, so wird beim Zuweisen einer Klasse das neutrale HTML-Element span um die Textstelle herum eingefügt und dann diesem span die Klasse zugewiesen. Zu beachten ist:

• Befindet sich innerhalb dieser Markierung eine weiteres HTML-Element, funktioniert die Zuweisung nicht passend. Die Klasse sollte immer nur dem eingefügten span zugewiesen werden, aber es wird auch den verschachtelten HMTL-Elementen zugewiesen oder es werden auch mehrere spans eingefügt. Man sollte diese unerwünschten Klassenzuweisungen aus dem HTML-Code entfernen.
• Erstreckt sich die Markierung über die Grenzen eines Blockelements, also beginnt sie ein einem Blockelement und endet sie in einem anderen, so werden zwei spans eingefügt. Dies ist korrekt, da sonst die Verschachtelung falsch wäre. In der Praxis wird diese Situation eher selten auftreten.

Markiert man mit der Maus einen ganzen Absatz (oder Überschrift etc.), so ist nur der Inhalt aber nicht das ganze HTML-Element markiert. Daher wird auch in dieser Situation ein span eingefügt, was aber meistens nicht so erwünscht ist.

Markierung - IDs zuweisen (nicht sinnvoll)

Ist eine Textstelle markiert, so wird beim Zuweisen einer ID einem HTML-Element diese ID zugewiesen.
Befindet sich innerhalb der Markierung ein einziges HTML-Element, so wird diesem die ID zugewiesen, befindet sich innerhalb der Markierung kein HTML-Element, so wird dem unmittelbar umgebenden HTML-Element die ID zugewiesen.
Befinden sich mehr als ein HTML-Element innerhalb der Markierung, so würde allen die ID zugewiesen werden. Daher erscheint ein Dialogfenster namens "Bestätigen" mit dem Hinweis, dass die ID erneut zugewiesen werden würde. Um den HTML-Code valide zu halten, muss man hier mit Nein antworten; und man sollte keinenfalls das Auswahlkästchen "Bei doppelten IDs nicht mehr nachfragen" aktivieren.
Erstreckt sich die Markierung über die Grenzen eines Blockelements, also beginnt sie ein einem Blockelement und endet sie in einem anderen, so würden beiden HTML-Elemente die ID zugewiesen werden. Daher erscheint ein Dialogfenster namens "Bestätigen" mit dem Hinweis, dass die ID erneut zugewiesen werden würde. Um den HTML-Code valide zu halten, muss man hier mit Nein antworten; und man sollte keinenfalls das Auswahlkästchen "Bei doppelten IDs nicht mehr nachfragen" aktivieren.

HTML-Element (Tag) ausgewählt - Klassen und IDs zuweisen (sinnvoll)

Die Klasse bzw. die ID wird dem ausgewählten HTML-Element zugewiesen.

HTML-Element (Tag) auswählen

Um eine gewünschtes HTML-Element auszuwählen, positioniert man zuerst die Einfügemarke innerhalb dieses.

Auswählen über die Leiste "Direktauswahl von Tags"

Ist die Einfügemarke innerhalb des gewünschten HTML-Elements (Tags) positioniert, so sieht man dieses in der Leiste "Direktauswahl von Tags" und kann es anklicken und somit auswählen.

Auswählen mittels der Esc-Taste

Ist die Einfügemarke innerhalb des gewünschten HTML-Elements (Tags) positioniert, so tippt man die Esc-Taste wiederholt solange, bis das gewünschte HTML-Element ausgewählt ist.

Unterschied des Zuweisen über Panel "Formatvorlagen verwalten" zu Symbolleiste "Formatvorlagen"

Bei Kontextselektoren ist die Zuweisung über das Panel "Formatvorlagen verwalten" nur eingeschränkt möglich. Dies ist störend, da wir in der Praxis fast nur Kontextselektoren verwenden werden.

Eine Klasse eines Kontextselektors kann nur dann zugewiesen werden, wenn sich das ausgewählte HTML-Element bzw. die Einfügemarke oder Markierung tatsächlich in diesem Kontext befindet, ansonsten ist im Kontextmenü der Befehl "Formatvorlage übernehmen" abgeblendet.

Eine ID, von der nur Regeln mit Kontextselektoren existieren, kann über das Panel "Formatvorlagen verwalten" nicht zugewiesen werden.

HTML-Code: Klassen werden im HTML-Code im Anfangstag durch das Attribut class zugeordnet. Daher sehen die tags eines Absatzes, dem die Klasse mit dem Namen "wichtig" zugeordnet wird, folgendermaßen aus: <p class="wichtig"> … </p>
Beim Namen wird kein . (Punkt) verwendet, da dieser nur in Selektoren in CSS-Regel als Trennzeichen zwischen HTML-Element (oder auch Universalselektor * oder auch ohne HTML-Element) und Klassenname verwendet wird.