Dreamweaver CS4-informatiebronnen
|
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.
Eigenschappen van CSS-typen definiërenU gebruikt de categorie Type in het dialoogvenster CSS-regeldefinitie om de basisinstellingen voor lettertype en type voor een CSS-stijl te definiëren.
- Open het paneel CSS-stijlen (Shift + F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer Type in het dialoogvenster CSS-regeldefinitie en stel vervolgens de stijleigenschappen in.
Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:
- Font-family
- 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 3.0 eerst een Windows-lettertype. Het kenmerk Font wordt door beide browsers ondersteund.
- Font-size
- 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.
- Font-style
- Hiermee geeft u als lettertypestijl Normal, Italic of Oblique op. De standaardinstelling is Normal. Het kenmerk Style wordt door beide browsers ondersteund.
- Line-height
- 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.
- Text-decoration
- 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.
- Font-weight
- 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.
- Font-variant
- 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.
- Text-transform
- 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.
- Color
- Hiermee stelt u de kleur van de tekst in. Het kenmerk Color wordt door beide browsers ondersteund.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijlachtergronden definiërenGebruik de categorie Achtergrond van het dialoogvenster CSS-regeldefinitie om de achtergrondinstellingen voor een CSS-stijl te 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.
- Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer in het dialoogvenster CSS-regeldefinitie eerst Achtergrond en stel vervolgens de stijleigenschappen in.
Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:
- Background Color
- Hiermee stelt u de achtergrondkleur voor het element in. Het kenmerk Background Color wordt door beide browsers ondersteund.
- Background Image
- Hiermee stelt u de achtergrondafbeelding voor het element in. Het kenmerk Background image wordt door beide browsers ondersteund.
- Background Repeat
- 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 maal 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 label body opnieuw te definiëren en een achtergrondafbeelding in te stellen, die niet wordt herhaald of als een betegeling wordt weergegeven.
- Background Attachment
- 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.
- Background Position (X) en Background Position (Y)
- 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.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijlblokken definiërenU kunt de categorie Blok van het dialoogvenster CSS-regeldefinitie gebruiken om instellingen voor spatiëring en uitlijning voor labels en eigenschappen te definiëren.
- Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer Blok in het dialoogvenster CSS-regeldefinitie en stel vervolgens een van de volgende stijleigenschappen in. (Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)
- Word Spacing
- 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.
- Letter Spacing
- 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.
- Vertical Align
- 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>.
- Text Align
- Hiermee stelt u in hoe de tekst wordt uitgelijnd binnen het element. Het kenmerk Text Align wordt door beide browsers ondersteund.
- Text Indent
- 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.
- Whitespace
- 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.
- Display
- 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.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijlvakken definiërenGebruik de categorie Kader van het dialoogvenster CSS-regeldefinitie 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.
- Open het paneel CSS-stijlen (Shift + F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer in het dialoogvenster CSS-regeldefinitie de optie Kader en stel een van de volgende stijleigenschappen in. (Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)
- Width en Height
- Hiermee stelt u de breedte en hoogte van het element in.
- Float
- Hiermee bepaalt u aan welke zijde andere elementen, zoals tekst, AP Div-elementen, tabellen, enzovoort, binnen een element gaan zweven. Zoals gebruikelijk, lopen andere elementen om het zwevende element heen. Het kenmerk Float wordt door beide browsers ondersteund.
- Clear
- Hiermee bepaalt u aan welke zijkanten AP-elementen niet zijn toegestaan. Als een AP-element voorkomt aan de gewiste zijde, wordt het element met de gewiste instelling eronder geplaatst. Het kenmerk Clear wordt door beide browsers ondersteund.
- Padding
- 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.
- Allemaal hetzelfde
- 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.
- Margin
- 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.
- Allemaal hetzelfde
- Hiermee stelt u dezelfde eigenschappen voor marge in voor de zijkanten boven, rechts, onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijlranden definiërenGebruik de categorie Rand van het dialoogvenster CSS-regeldefinitie om instellingen, zoals breedte, kleur en stijl, te bepalen voor de randen om elementen.
- Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer in het dialoogvenster CSS-regeldefinitie de optie Rand en stel een van de volgende stijleigenschappen in. (Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)
- Type
- 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.
- Allemaal hetzelfde
- 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.
- Width
- 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.
- Allemaal hetzelfde
- Hiermee stelt u dezelfde eigenschappen voor de dikte van de rand in voor de zijkanten boven, rechts, onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.
- Color
- 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.
- Allemaal hetzelfde
- Hiermee stelt u dezelfde eigenschappen voor de kleur van de rand in voor de zijkanten boven, rechts, onder en links van het element, waarop de optie Allemaal hetzelfde wordt toegepast.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijllijsten definiërenDe categorie Lijst van het dialoogvenster CSS-regeldefinitie bepaalt instellingen van lijsten, zoals type en grootte van opsommingstekens, voor de labels voor lijsten.
- Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer in het dialoogvenster CSS-regeldefinitie de optie Lijst en stel een van de volgende stijleigenschappen in. (Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)
- List style type
- Hiermee bepaalt u het uiterlijk van opsommingstekens of getallen. Type wordt ondersteund door beide browsers.
- List style image
- 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.
- List style position
- Hiermee bepaalt u of de tekst van een lijstitem omloopt en inspringt (buiten), of dat de tekst omloopt naar de linkermarge (binnen).
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijlpositionering definiërenDe stijleigenschappen voor Positionering bepalen hoe de aan de geselecteerde CSS-stijl gekoppelde inhoud wordt gepositioneerd op de pagina.
- Open het paneel CSS-stijlen (Shift+F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer in het dialoogvenster CSS-regeldefinitie de optie Positionering en stel vervolgens de gewenste stijleigenschappen in.
Laat een van de volgende eigenschappen leeg als deze niet belangrijk zijn voor de stijl:
- Position
- 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.
- Visibility
- 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.
- Z‑Index
- 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 paneel AP-elementen).
- Overflow
- 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.
- Placement
- 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.
- Clip
- 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.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
Eigenschappen voor CSS-stijlextensies definiërenExtensies, stijleigenschappen inclusief filters, paginascheiding en opties voor de aanwijzer.
Opmerking: Er is een aantal andere extensie-eigenschappen beschikbaar in Dreamweaver, maar voor toegang hiertoe dient u het paneel CSS-stijlen te gebruiken. Een lijst van extensie-eigenschappen is eenvoudig beschikbaar door het paneel CSS-stijlen te openen (Venster > CSS-stijlen), op de knop Categorieweergave tonen onder aan het paneel te klikken en de categorie Extensies uit te vouwen.
- Open het paneel CSS-stijlen (Shift + F11), als dat nog niet geopend is.
- Dubbelklik op een bestaande regel of eigenschap in het bovenste deelvenster van het paneel CSS-stijlen.
- Selecteer in het dialoogvenster CSS-regeldefinitie de optie Extensies en stel een van de volgende stijleigenschappen in. (Laat de eigenschap leeg als deze niet belangrijk is voor de stijl.)
- Page break before
- 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.
- Cursor
- 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.
- Filter
- Hiermee past u speciale effecten toe op het door de stijl gecontroleerde object, inclusief vervagen en inversie. Selecteer een effect in het pop-upmenu.
- Als u deze opties hebt ingesteld, selecteert u een andere CSS-categorie aan de linkerzijde van het paneel om extra stijleigenschappen in te stellen of klikt u op OK.
|