Het deelvenster CSS-stijlen

Met het deelvenster CSS-stijlen kunt u de CSS-regels en -eigenschappen volgen, die van invloed zijn op het momenteel geselecteerde pagina-element (modus Huidig), of alle regels en eigenschappen die voor het document beschikbaar zijn (modus Alles). Met een knop boven aan het paneel kunt u schakelen tussen de twee modi. Via het deelvenster CSS-stijlen kunt u ook CSS-eigenschappen wijzigen in zowel de modus Alles als de modus Huidig.

In de modus Huidig bestaat het deelvenster CSS-stijlen uit drie deelvensters: een deelvenster Samenvatting voor selectie waarin de CSS-eigenschappen voor de huidige selectie in het document worden weergegeven, een deelvenster Regels waarin de locatie van geselecteerde eigenschappen (of een getrapte versie van regels voor het label, afhankelijk van uw selectie) wordt weergegeven, en een deelvenster Eigenschappen waarin u CSS-eigenschappen van de op de selectie toegepaste regel kunt bewerken.

U kunt het formaat van elk van de deelvensters wijzigen door de randen tussen de deelvensters te slepen, terwijl u de grootte van kolommen kunt wijzigen door het slepen van de kolomscheidingen.

Het deelvenster Samenvatting voor selectie geeft een overzicht van CSS-eigenschappen weer, alsmede hun waarden voor het op dat moment in het actieve document geselecteerde object. De samenvatting toont de eigenschappen van alle regels die rechtstreeks op de selectie van toepassing zijn. Alleen ingestelde eigenschappen worden getoond.

De volgende regels maken bijvoorbeeld een klassenstijl en een labelstijl (in dit geval een alinea):

Als u in het documentvenster alineatekst met een klassenstijl .foo selecteert, worden in het deelvenster Samenvatting voor selectie de relevante eigenschappen voor beide regels weergegeven, omdat beide regels van toepassing zijn op de selectie. In dit geval zou het deelvenster Samenvatting voor selectie de volgende eigenschappen vermelden:

Het deelvenster Samenvatting voor selectie schikt eigenschappen in toenemende mate van specificiteit. In het bovenstaande voorbeeld definieert de labelstijl de tekengrootte, terwijl de klassenstijl de lettertypefamilie en de kleur definieert. (De door de klassenstijl gedefinieerde lettertypefamilie onderdrukt de lettertypefamilie die wordt gedefinieerd door de labelstijl, omdat klassekiezers een hogere specificiteit hebben dan labelkiezers. Zie www.w3.org/TR/CSS2/cascade.html voor meer informatie over CSS-specificiteit).

Het deelvenster Regels toont twee verschillende weergaven—infoweergave of regelweergave—afhankelijk van uw selectie. In de infoweergave (de standaardweergave) toont het deelvenster de naam van de regel die de geselecteerde CSS-eigenschap definieert, alsmede de naam van het bestand met die regel. In de regelweergave toont het deelvenster een getrapte versie, of hiërarchie, van alle regels die direct of indirect van toepassing zijn op de huidige selectie. (De label waarop de regel direct van toepassing is, staat in de rechterkolom.) U kunt schakelen tussen de twee weergaven door op de knoppen Informatie tonen en Trapsgewijs tonen in de rechterbovenhoek van het deelvenster Regels te klikken.

Als u in het paneel Samenvatting voor selectie een eigenschap selecteert, verschijnen alle eigenschappen van de definiërende regel in het paneel Eigenschappen. (De definiërende regel wordt ook geselecteerd in het deelvenster Regels, als de regelweergave wordt geselecteerd.) Als u bijvoorbeeld een regel hebt met de naam .maintext die een lettertypefamilie, tekengrootte en kleur definieert, worden door de selectie van een van deze eigenschappen in het deelvenster Samenvatting voor selectie zowel alle eigenschappen die zijn gedefinieerd door de regel .maintext in het deelvenster Eigenschappen, als de geselecteerde regel .maintext in het deelvenster Regels weergegeven. (Daarnaast worden bij selectie van een regel in het deelvenster Regels de eigenschappen van die regel weergegeven in het deelvenster Eigenschappen.) Vervolgens kunt u het deelvenster Eigenschappen gebruiken om snel uw CSS te wijzigen, ongeacht of deze is ingebed in het huidige document of is gekoppeld door middel van een gekoppelde stijlpagina Standaard toont het deelvenster Eigenschappen alleen die eigenschappen die reeds zijn ingesteld, en schikt deze in alfabetische volgorde.

U kunt er ook nog voor kiezen om het deelvenster Eigenschappen te tonen in twee andere weergaven. In de categorieweergave worden eigenschappen gegroepeerd in categorieën weergegeven, zoals Lettertype, Achtergrond, Blok, Rand, enzovoort, met ingestelde eigenschappen boven aan elke categorie, weergegeven in blauwe tekst. Bij weergave als lijst wordt een alfabetische lijst van alle beschikbare eigenschappen weergegeven, waarbij ingestelde eigenschappen bovenaan worden gerangschikt, weergegeven in blauwe tekst. Als u tussen de verschillende weergaven wilt schakelen, klikt u op de knop Categorieën weergeven, Lijst weergeven of Alleen ingestelde eigenschappen weergeven in de linkerbenedenhoek van het deelvenster Eigenschappen.

In alle weergaven worden ingestelde eigenschappen weergegeven in blauw; eigenschappen die niet van belang zijn voor een selectie, worden weergegeven als met een rode streep doorgehaalde tekst. Als u met de muis over een regel gaat die niet van belang is, wordt in een melding uitgelegd waarom de eigenschap niet van belang is. Doorgaans is een eigenschap niet van belang, omdat deze wordt onderdrukt of omdat het geen overgenomen eigenschap is.

Alle wijzigingen die u aanbrengt in het deelvenster Eigenschappen, worden onmiddellijk toegepast, waardoor u een voorbeeld van uw werk kunt zien terwijl u doorwerkt.

Het deelvenster CSS-stijlen in de modus Alles

In de modus Alles bestaat het deelvenster CSS-stijlen uit twee deelvensters: een deelvenster Alle regels (bovenaan) en een deelvenster Eigenschappen (onderaan). Het deelvenster Alle regels geeft een lijst van regels weer, zowel die welke zijn gedefinieerd in het huidige document, als alle regels die zijn gedefinieerd in aan het huidige document gekoppelde stijlpagina's. In het deelvenster Eigenschappen kunt u CSS-eigenschappen bewerken van elke regel die wordt geselecteerd in het deelvenster Alle regels.

U kunt het formaat van een van beide deelvensters wijzigen door de randen tussen de deelvensters te slepen, terwijl u de grootte van kolommen Eigenschappen kunt wijzigen door het slepen van de kolomscheiding ervan.

Als u een regel selecteert in het deelvenster Alle regels, worden alle eigenschappen die in die regel zijn gedefinieerd, weergegeven in het deelvenster Eigenschappen. Vervolgens kunt u het deelvenster Eigenschappen gebruiken om snel uw CSS te wijzigen, ongeacht of deze is ingebed in het huidige document of is gekoppeld in een gekoppelde stijlpagina. Standaard toont het deelvenster Eigenschappen alleen die eigenschappen die eerder zijn ingesteld, en schikt deze in alfabetische volgorde.

U kunt ervoor kiezen om het deelvenster Eigenschappen te tonen in twee andere weergaven. In de categorieweergave worden eigenschappen gegroepeerd in categorieën weergegeven, zoals Lettertype, Achtergrond, Blok, Rand, enzovoort, met ingestelde eigenschappen boven aan elke categorie. Bij weergave als lijst wordt een alfabetische lijst van alle beschikbare eigenschappen weergegeven, waarbij ingestelde eigenschappen bovenaan worden gerangschikt. Als u tussen de verschillende weergaven wilt schakelen, klikt u op de knop Categorieën weergeven, Lijst weergeven of Alleen ingestelde eigenschappen weergeven in de linkerbenedenhoek van het deelvenster Eigenschappen. In alle weergaven worden ingestelde eigenschappen weergegeven in blauw.

Alle wijzigingen die u aanbrengt in het deelvenster Eigenschappen, worden onmiddellijk toegepast, waardoor u een voorbeeld van uw werk kunt zien terwijl u doorwerkt.

Knoppen en weergaven in het deelvenster CSS-stijlen

In zowel de modus Alles als de modus Huidig bevat het deelvenster CSS-stijlen drie knoppen, waarmee u de weergave in het deelvenster Eigenschappen (het onderste deelvenster) kunt wijzigen:

Hiermee verdeelt u de door Dreamweaver ondersteunde CSS-eigenschappen in acht categorieën: lettertype, achtergrond, blok, rand, vak, lijst, positionering en extensies. De eigenschappen van elke categorie staan vermeld in een lijst die u uitvouwt of samenvouwt door op de knop Plus (+) naast de naam van elke categorie te klikken. Ingestelde eigenschappen staan (in blauw) boven aan de lijst.

Hiermee geeft u alle door Dreamweaver ondersteunde CSS-eigenschappen weer in alfabetische volgorde. Ingestelde eigenschappen staan (in blauw) boven aan de lijst.

Hiermee geeft u alleen die eigenschappen weer, die zijn ingesteld. Ingestelde eigenschappen is de standaardweergave.

In zowel de modus Alles als de modus Huidig bevat het deelvenster CSS-stijlen ook de volgende knoppen:

Hiermee opent u het dialoogvenster Externe stijlpagina koppelen. Selecteer een externe stijlpagina die u koppelt aan of importeert in uw huidige document.

Hiermee opent u een dialoogvenster waarin u het type te maken stijl selecteert—bijvoorbeeld, het maken van een klassenstijl, het opnieuw definiëren van een HTML-tag of het definiëren van een CSS-kiezer.

Hiermee opent u een dialoogvenster waarin u de stijlen in het huidige document of in een externe stijlpagina kunt bewerken.

Hiermee verwijdert u de geselecteerde regel of eigenschap uit het deelvenster CSS-stijlen en verwijdert de opmaak uit elk element waarop deze werd toegepast. (Klasse- of id-eigenschappen waarnaar door die stijl wordt verwezen, worden echter niet verwijderd.) Met de knop CSS-regel verwijderen kunt u ook een gekoppelde CSS-stijlpagina afkoppelen (of “de koppeling verbreken").

Het deelvenster CSS-stijlen openen

U gebruikt het deelvenster CSS-stijlen voor het bekijken, maken, bewerken en verwijderen van CSS-stijlen, alsmede voor het koppelen van externe stijlpagina's aan documenten.