CSS-eigenschappen instellen

U kunt eigenschappen definiëren voor CSS-regels zoals lettertype voor tekst, achtergrondafbeelding en -kleur, spatiërings- en lay-outeigenschappen, alsmede het uiterlijk van lijstelementen. Maak eerst een nieuwe regel en stel vervolgens een of meer van de volgende eigenschappen in.

Hier volgt een beschrijving van enkele eigenschappen van CSS-typen die u kunt instellen.

Hiermee stelt u de lettertypefamilie (of een reeks families) in voor de stijl. Browsers geven tekst weer in het eerste lettertype in de reeks, dat op het systeem van de gebruiker is geïnstalleerd. Vermeld voor de compatibiliteit met Internet Explorer eerst een Windows-lettertype. Het kenmerk Font wordt door beide browsers ondersteund.

Hiermee geeft u als lettertypestijl Normal, Italic of Oblique op. De standaardinstelling is Normal. Het kenmerk Style wordt door beide browsers ondersteund.

Hiermee stelt u de hoogte van de regel in, waarop de tekst wordt geplaatst. Van oudsher wordt deze instelling interlinie genoemd. Selecteer Normal om de regelhoogte van de tekengrootte automatisch te laten berekenen of geef een exacte waarde op en selecteer een meeteenheid. Het kenmerk Line height wordt door beide browsers ondersteund.

Hiermee voegt u een onderstreping, een bovenstreep of een doorhaling aan de tekst toe of laat u de tekst knipperen. De standaardinstelling voor reguliere tekst is None (Geen). De standaardinstelling voor koppelingen is Underline (Onderstrepen). Wanneer u de instelling voor koppelingen instelt op none (Geen), kunt u de onderstreping verwijderen uit koppelingen door een speciale klasse te definiëren. Het kenmerk Decoration wordt door beide browsers ondersteund.

Hiermee past u een specifieke of relatieve hoeveelheid vet toe op het lettertype. De waarde Normal is gelijk aan 400; de waarde Bold is gelijk aan 700. Het kenmerk Weight wordt door beide browsers ondersteund.

Hiermee stelt u de variant voor kleinkapitalen in voor tekst. Dreamweaver geeft dit kenmerk niet weer in het documentvenster. Het kenmerk Variant wordt wel ondersteund door Internet Explorer, maar niet door Navigator.

Hiermee zet u de eerste letter van elk woord in de selectie om in een hoofdletter, of stelt u de tekst in op uitsluitend hoofdletters of uitsluitend kleine letters. Het kenmerk Case wordt door beide browsers ondersteund.

Hiermee stelt u de kleur van de tekst in. Het kenmerk Color wordt door beide browsers ondersteund.

Hiermee definieert u de grootte van de tekst. U kunt een specifieke grootte kiezen door het aantal en de meeteenheid te selecteren, maar u kunt ook een relatieve grootte kiezen. Pixels werken goed om te verhinderen dat browsers uw tekst vervormen. Het kenmerk Size wordt door beide browsers ondersteund.

Eigenschappen voor CSS-stijlachtergronden definiëren

U kunt de achtergrondeigenschappen toepassen op elk element op een webpagina. Maak bijvoorbeeld een stijl die een achtergrondkleur of achtergrondafbeelding aan elk pagina-element toevoegt, bijvoorbeeld achter tekst, een tabel, de pagina enzovoort. U kunt ook de positionering van een achtergrondafbeelding instellen.

Hier volgt een beschrijving van enkele achtergrondeigenschappen van CSS die u kunt instellen.

Hiermee stelt u de achtergrondafbeelding voor het element in. Het kenmerk Background image wordt door beide browsers ondersteund.

Hiermee bepaalt u of, en hoe, de achtergrondafbeelding wordt herhaald. Het kenmerk Repeat wordt door beide browsers ondersteund.

• Als u kiest voor No Repeat, wordt de afbeelding slechts één keer bij het begin van het element weergegeven.

• Bij Repeat wordt de afbeelding horizontaal en verticaal als een betegeling achter het element weergegeven.

• Met de opties Repeat‑x en Repeat‑y wordt respectievelijk een horizontale en verticale reeks afbeeldingen weergegeven. Afbeeldingen worden dusdanig bijgesneden dat deze passen binnen de grenzen van het element.

Opmerking: gebruik de eigenschap Repeat om de tag body opnieuw te definiëren en een achtergrondafbeelding in te stellen, die niet wordt herhaald of als een betegeling wordt weergegeven.

Hiermee bepaalt u of de achtergrondafbeelding is vastgezet op de oorspronkelijke positie of met de inhoud mee verschuift. Vergeet niet dat bepaalde browsers de optie Fixed behandelen als Scroll. Dit wordt wel ondersteund door Internet Explorer, maar niet door Netscape Navigator.

Hiermee geeft u de aanvankelijke positie van de achtergrondafbeelding op in verhouding tot het element. Hiermee kunt u een achtergrondafbeelding uitlijnen op het midden van de pagina, zowel verticaal (Y) als horizontaal (X). Als de eigenschap voor bijlage vast is ingesteld (Fixed), is de positie relatief ten opzichte van het documentvenster, niet ten opzichte van het element.

Hiermee stelt u de achtergrondkleur voor het element in. Het kenmerk Background Color wordt door beide browsers ondersteund.

Eigenschappen voor CSS-stijlblokken definiëren

U kunt de spatiëring en uitlijning voor tags en eigenschappen definiëren.

Hiermee vergroot of verkleint u de ruimte tussen letters of lettertekens. Voor het verkleinen van de ruimte tussen lettertekens geeft u een negatieve waarde op, bijvoorbeeld (‑4). Instellingen voor letterspatiëring onderdrukken instellingen voor uitgelijnde tekst. Het kenmerk Letter Spacing wordt ondersteund door Internet Explorer 4 en hoger, en Netscape Navigator 6.

Hiermee geeft u op hoe ver de eerste regel tekst inspringt. U kunt een negatieve waarde gebruiken om een uitspringing te maken, maar de weergave is afhankelijk van de browser. Dreamweaver geeft dit kenmerk alleen in het documentvenster weer wanneer de label wordt toegepast op elementen op blokniveau. Het kenmerk Text Indent laten inspringen wordt door beide browsers ondersteund.

Hiermee geeft u de verticale uitlijning op van het element, waarop deze wordt toegepast. Dreamweaver geeft dit kenmerk alleen in het documentvenster weer wanneer het wordt toegepast op de label <img>.

Hiermee stelt u in hoe de tekst wordt uitgelijnd binnen het element. Het kenmerk Text Align wordt door beide browsers ondersteund.

Hiermee bepaalt u hoe binnen het element met witruimte wordt omgesprongen. Selecteer uit de volgende drie opties: Bij Normal wordt witruimte samengevouwen; bij Pre wordt witruimte behandeld alsof de tekst is omgeven door de labels pre (d.w.z. alle witruimte, inclusief spaties, tabs en regeleinden, wordt gerespecteerd); via Nowrap geeft u op dat de tekst alleen omloopt wanneer een label br wordt gesignaleerd. Dreamweaver geeft dit kenmerk niet weer in het documentvenster. Het kenmerk Whitespace wordt ondersteund door Netscape Navigator en Internet Explorer 5.5.

Hiermee geeft u aan of een element wordt weergegeven, en hoe het wordt weergegeven. Met de optie None wordt de weergave uitgeschakeld van een element waaraan de optie is toegewezen.

Hiermee stelt u de spatiëring tussen woorden in. Voor het instellen van een bepaalde waarde selecteert u Value in het pop-upmenu en geeft u vervolgens een numerieke waarde op. Selecteer in het tweede pop-upmenu een meeteenheid (bijvoorbeeld, pixel, punten, enzovoort).

Opmerking: u kunt wel negatieve waarden opgeven, maar de weergave is afhankelijk van de browser. Dreamweaver geeft dit kenmerk niet weer in het documentvenster.

Eigenschappen voor CSS-stijlvakken definiëren

Gebruik de categorie Kader van het dialoogvenster Definitie van CSS-regel om instellingen te definiëren voor labels en eigenschappen waarmee u de plaatsing van elementen op de pagina bepaalt.

U kunt instellingen bij het toepassen van instellingen voor opvulling en marges toepassen op afzonderlijke zijkanten van een element, of u kunt de instelling Allemaal hetzelfde gebruiken om dezelfde instelling toe te passen op alle zijkanten van een element.

Geeft de zijde aan waar andere elementen rond het zwevende element zweven. Het zwevende element is vastgezet aan de zijde voor zweven en de overige inhoud zweeft aan de tegenoverliggende zijde rond het element.

Als u bijvoorbeeld een rechts zwevende afbeelding aan de rechterkant vastzet, kunt u later inhoud toevoegen die links van de afbeelding zweeft.

Zie http://css-tricks.com/all-about-floats/ voor meer informatie

Geeft de zijden van een element aan waar geen andere zwevende elementen zijn toegestaan.

Hiermee bepaalt u de hoeveelheid ruimte tussen de inhoud van een element en de rand ervan (of de marge ervan, als er geen rand is). Schakel de selectie van de optie Allemaal hetzelfde uit om de opvulling van afzonderlijke zijkanten van het element in te stellen.

Hiermee stelt u dezelfde eigenschappen voor opvulling in voor de zijkanten boven, rechts, onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

Hiermee bepaalt u de hoeveelheid ruimte tussen de rand van een element (of de opvulling ervan, als er geen rand is) en een ander element. Dreamweaver geeft dit kenmerk alleen weer in het documentvenster, wanneer het wordt toegepast op elementen op blokniveau (alinea's, koppen, lijsten, enzovoort). Schakel de selectie van de optie Allemaal hetzelfde uit om de marge van afzonderlijke zijkanten van het element in te stellen.

Hiermee stelt u de breedte en hoogte van het element in.

Eigenschappen voor CSS-stijlranden definiëren

Gebruik de categorie Rand van het dialoogvenster Definitie van CSS-regel om instellingen, zoals breedte, kleur en stijl, te bepalen voor de randen om elementen.

Hiermee bepaalt u de dikte van de rand van het element. Het kenmerk Width wordt door beide browsers ondersteund. Schakel de selectie van de optie Allemaal hetzelfde uit om de dikte van de rand van afzonderlijke zijkanten van het element in te stellen.

Hiermee stelt u dezelfde eigenschappen voor de stijl van de rand in voor de zijkanten boven, rechts, onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.

Hiermee bepaalt u de kleur van de rand. U kunt de kleur van elke zijkant afzonderlijk instellen, maar de weergave ervan is afhankelijk van de browser. Schakel de selectie van de optie Allemaal hetzelfde uit om de kleur van de rand van afzonderlijke zijkanten van het element in te stellen.

Hiermee bepaalt u het uiterlijk van de stijl van de rand. De manier waarop de stijl eruitziet, is afhankelijk van de browser. Schakel de selectie van de optie Allemaal hetzelfde om de stijl van de rand van afzonderlijke zijkanten van het element in te stellen.

Eigenschappen voor CSS-stijllijsten definiëren

De categorie Lijst van het dialoogvenster Definitie van CSS-regel bepaalt instellingen van lijsten, zoals type en grootte van opsommingstekens, voor de labels voor lijsten.

Hiermee bepaalt u het uiterlijk van opsommingstekens of getallen. Type wordt ondersteund door beide browsers.

Hiermee bepaalt u of de tekst van een lijstitem omloopt en inspringt (buiten), of dat de tekst omloopt naar de linkermarge (binnen).

Hiermee geeft u een eigen afbeelding voor opsommingstekens op. Klik op Bladeren (Windows) of Kies (Macintosh) om via bladeren een afbeelding te zoeken of typ het pad naar de afbeelding.

Eigenschappen voor CSS-stijlpositionering definiëren

De stijleigenschappen voor Positionering bepalen hoe de aan de geselecteerde CSS-stijl gekoppelde inhoud wordt gepositioneerd op de pagina.

Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:

Hiermee bepaalt u als volgt hoe de browser het geselecteerde element gaat positioneren:

• Absolute plaatst de inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Placement, relatief ten opzichte van het dichtstbijzijnde absoluut of relatief gepositioneerde bovenliggende element, of, als er geen absoluut of relatief gepositioneerd bovenliggende element is, in de linkerbovenhoek van de pagina.

• Relative plaatst het blok inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Placement, relatief ten opzichte van de positie van het blok in de tekststroom van het document. Als u een element bijvoorbeeld een relatieve positie en coördinaten voor boven en links van elke 20 px (pixels) geeft, verschuift het element 20 pixels naar rechts en 20 pixels naar onder vanaf zijn normale positie in de stroom. Elementen kunnen ook relatief worden gepositioneerd, met of zonder coördinaten voor boven, links, rechts of onder, om een context te bepalen voor absoluut gepositioneerde onderliggende elementen.

• Fixed plaatst de inhoud met behulp van de coördinaten die u hebt opgegeven in de vakken Placement, relatief ten opzichte van de linkerbovenhoek van de browser. Terwijl de gebruiker via schuiven door de pagina bladert, blijft de inhoud vast op die positie.

• Static plaatst de inhoud op de plaats ervan in de tekststroom. Dit is de standaardpositie van alle positioneerbare HTML-elementen.

Hiermee bepaalt u de stapelvolgorde van de inhoud. Elementen met een hogere Z-index verschijnen boven elementen met een lagere Z-index (of die met helemaal geen index). Waarden kunnen positief of negatief zijn. (Als uw inhoud absoluut is gepositioneerd, is het eenvoudiger om de stapelvolgorde te wijzigen met behulp van het deelvenster AP-elementen).

Hiermee bepaalt u wat er gebeurt als de inhoud van een container (bijvoorbeeld een element div of p) de grootte ervan overschrijdt. Deze eigenschappen bepalen hoe met de uitbreiding wordt omgegaan:

• Visible maakt de container dusdanig groter dat alle inhoud erin zichtbaar wordt. De container wordt naar beneden en naar rechts uitgebreid.

• Hidden handhaaft de grootte van de container en knipt alle inhoud die er niet in past, af. Er zijn geen schuifbalken beschikbaar.

• Scroll voegt schuifbalken toe aan de container, ongeacht of de inhoud de grootte van de container overtreft. Met name de beschikbaarheid van schuifbalken vermijdt verwarring die het verschijnen en verdwijnen van schuifbalken in een dynamische omgeving zou kunnen veroorzaken. Deze optie wordt niet weergegeven in het documentvenster.

• Auto zorgt ervoor dat schuifbalken alleen verschijnen wanneer de inhoud van de container de grenzen ervan overschrijdt. Deze optie wordt niet weergegeven in het documentvenster.

Hiermee bepaalt u het gedeelte van de inhoud, dat zichtbaar is. Als u een gebied voor uitknippen opgeeft, kunt u toegang ertoe krijgen met een scripttaal zoals JavaScript en de eigenschappen manipuleren om speciale effecten te maken, zoals sluitereffecten. Deze sluitereffecten kunnen worden ingesteld met behulp van het gedrag Eigenschap wijzigen.

Hiermee bepaalt u de locatie en de grootte van het blok inhoud. Hoe de browser de locatie interpreteert, is afhankelijk van de instelling voor Type. Waarden voor grootte worden onderdrukt als de inhoud van het blok inhoud de opgegeven grootte overschrijdt.

De standaardeenheden voor locatie en grootte zijn pixels. U kunt echter ook de volgende eenheden opgeven: pc (pica's), pt (punten), in (inches), mm (millimeters), cm (centimeters), (ems), (exs) of % (percentage van de waarde van het bovenliggende element). De afkortingen moeten zonder spatie op de waarde volgen: bijvoorbeeld 3mm.

Hiermee bepaalt u de aanvankelijke weergavetoestand van de inhoud. Als u geen eigenschap voor zichtbaarheid opgeeft, krijgt de inhoud standaard de waarde van de bovenliggende label. De standaardzichtbaarheid van de label body is zichtbaar. Selecteer een van de volgende zichtbaarheidsopties:

• Inherit neemt de zichtbaarheidseigenschap van het bovenliggende element van de inhoud over.

• Visible geeft de inhoud altijd weer, ongeacht de waarde van het bovenliggende element.

• Hidden verbergt de inhoud, ongeacht de waarde van het bovenliggende element.

Eigenschappen voor CSS-stijlextensies definiëren

Extensies, stijleigenschappen inclusief filters, paginascheiding en opties voor de aanwijzer.

Hiermee wijzigt u de afbeelding van de muisaanwijzer, wanneer de muisaanwijzer over het door de stijl gecontroleerde object wordt bewogen. Selecteer in het pop-upmenu de optie die u wilt instellen. Internet Explorer 4.0 en hoger, alsmede Netscape Navigator 6 ondersteunen dit kenmerk.

Hiermee past u speciale effecten toe op het door de stijl gecontroleerde object, inclusief vervagen en inversie. Selecteer een effect in het pop-upmenu.

Hiermee forceert u een pagina-einde tijdens het afdrukken, hetzij vóór het object, hetzij erna, hetgeen wordt bepaald door de stijl. Selecteer in het pop-upmenu de optie die u wilt instellen. Deze optie wordt door geen enkele browser van versie 4.0 ondersteund, maar ondersteuning ervan is mogelijk in toekomstige browsers beschikbaar.