Gebruik dit onderwerp voor meer informatie over de basisbegrippen van CSS, zoals CSS-regels, kiezers, overerving, enzovoort. Lees ook hoe u CSS kunt koppelen aan uw webpagina's in Dreamweaver.
Over CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS) is een verzameling opmaakregels die het uiterlijk van content op een webpagina bepalen. CSS-stijlen gebruiken om een pagina op te maken scheidt content van presentatie. De content van je pagina—de HTML-code—bevindt zich in het HTML-bestand en de CSS-regels die de presentatie van de code definiëren bevinden zich in een ander bestand (een externe stylesheet) of in een ander deel van het HTML-document (meestal de head-sectie).Het scheiden van content en presentatie maakt het veel eenvoudiger om het uiterlijk van je site vanaf een centrale locatie te beheren omdat je niet elke eigenschap op elke pagina hoeft bij te werken wanneer je een wijziging wilt maken. Het scheiden van content en presentatie resulteert ook in eenvoudigere en schonere HTML-code, wat zorgt voor kortere laadtijden in de browser en de navigatie eenvoudiger maakt voor mensen met toegankelijkheidsproblemen (bijvoorbeeld degenen die schermleessoftware gebruiken).
CSS geeft je grote flexibiliteit en controle over het exacte uiterlijk van je pagina. Met CSS kun je veel teksteigenschappen bepalen, waaronder specifieke lettertypen en tekengroottes; vet, cursief, onderstrepen en tekstschaduwen; tekstkleur en achtergrondkleur; linkkleur en onderstreping van links; en veel meer.Door CSS te gebruiken om je lettertypen te bepalen, zorg je ook voor een consistentere paginalayout en -uiterlijk in meerdere browsers.
Naast tekstopmaak kun je CSS gebruiken om de opmaak en positionering van blok-elementen op een webpagina te bepalen. Een element op blokniveau is een op zichzelf staand stuk content, meestal gescheiden door een nieuwe regel in de HTML, en visueel opgemaakt als een blok.Bijvoorbeeld, h1-tags, p-tags en div-tags produceren allemaal blok-elementen op een webpagina. Je kunt marges en randers instellen voor blok-elementen, ze op een specifieke locatie positioneren, achtergrondkleur toevoegen, tekst eromheen laten zweven, enzovoort. Het manipuleren van blok-elementen is in essentie de manier waarop je pagina's opmaakt met CSS.
Over CSS-regels
Een CSS-opmaakregel bestaat uit twee delen—de selector en de declaratie (of in de meeste gevallen een blok van declaraties). De selector is een term (zoals p, h1, een klassenaam of een id) die het opgemaakte element identificeert, en het declaratieblok definieert wat de stijleigenschappen zijn. In het volgende voorbeeld is h1 de selector, en alles wat tussen de accolades valt ({}) is het declaratieblok:
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
Een individuele declaratie bestaat uit twee delen, de eigenschap (zoals font-family) en de waarde (zoals Helvetica). In de vorige CSS-regel is een bepaalde stijl gedefinieerd voor h1-tags: de tekst voor alle h1-tags gekoppeld aan deze stijl zal 16 pixels groot zijn, in het lettertype Helvetica en vet.
De stijl (die afkomstig is van een regel, of een verzameling regels) bevindt zich op een plaats gescheiden van de werkelijke tekst die wordt opgemaakt—meestal in een externe stylesheet, of in het head-gedeelte van een HTML-document. Zo kan één regel voor h1-tags van toepassing zijn op veel tags tegelijk (en bij externe stylesheets kan de regel van toepassing zijn op veel tags tegelijk op veel verschillende pagina's).Op deze manier biedt CSS extreem eenvoudige updatemogelijkheden. Wanneer je een CSS-regel op één plaats bijwerkt, wordt de opmaak van alle elementen die de gedefinieerde stijl gebruiken automatisch bijgewerkt naar de nieuwe stijl.
In Dreamweaver kunt u de volgende typen stijlen definiëren in:
Klassestijlen laten je stijleigenschappen toepassen op elk element of elementen op de pagina.
HTML tag-stijlen herdefiniëren de opmaak voor een bepaalde tag, zoals h1. Wanneer je een CSS-stijl voor de h1-tag maakt of wijzigt, wordt alle tekst die met de h1-tag is opgemaakt onmiddellijk bijgewerkt.
Geavanceerde stijlen herdefiniëren de opmaak voor een bepaalde combinatie van elementen of voor andere selectievormen zoals toegestaan door CSS (bijvoorbeeld de selector td h2 wordt toegepast wanneer een h2-koptekst verschijnt binnen een tabelcel.)Geavanceerde stijlen kunnen ook de opmaak herdefiniëren voor tags die een specifiek id-kenmerk bevatten (bijvoorbeeld de stijlen gedefinieerd door #myStyle worden toegepast op alle tags die het kenmerk-waardepaar id="myStyle" bevatten).
CSS-regels kunnen zijn ondergebracht op de volgende locaties:
Externe CSS-stijlpagina's
Verzamelingen van CSS-regels opgeslagen in een apart, extern CSS (.css)-bestand (niet een HTML-bestand). Dit bestand wordt gekoppeld aan één of meer pagina's in een website met behulp van een link of een @import-regel in het head-gedeelte van een document.
Interne (of ingesloten) CSS-stijlpagina's
Verzamelingen van CSS-regels opgenomen in een style-tag in het head-gedeelte van een HTML-document.
Inline stijlen (stijlen binnen een regel)
Gedefinieerd binnen specifieke exemplaren van tags ergens in een HTML-document. (Het gebruik van inline stijlen wordt afgeraden.)
Dreamweaver herkent stijlen gedefinieerd in bestaande documenten zolang ze voldoen aan CSS-stijlrichtlijnen. Dreamweaver rendert ook de meeste toegepaste stijlen direct in de ontwerpweergave. (Een voorvertoning van het document in een browservenster geeft je echter de meest nauwkeurige 'live' weergave van de pagina.) Sommige CSS-stijlen worden anders weergegeven in Microsoft Internet Explorer, Netscape, Opera, Apple Safari of andere browsers, en sommige worden momenteel niet ondersteund door welke browser dan ook.
Over CSS-stijlen
De term cascading verwijst naar de manier waarop een browser uiteindelijk stijlen weergeeft voor specifieke elementen op een webpagina.Drie verschillende bronnen zijn verantwoordelijk voor de stijlen die je ziet op een webpagina: het stijlblad gemaakt door de auteur van de pagina, de aangepaste stijlselecties van de gebruiker (indien aanwezig), en de standaard stijlen van de browser zelf. De vorige onderwerpen beschrijven hoe je stijlen maakt voor een webpagina als de auteur van zowel de webpagina als het stijlblad dat aan die pagina is gekoppeld.Maar browsers hebben ook hun eigen standaard stijlbladen die de weergave van webpagina's dicteren, en daarnaast kunnen gebruikers hun browsers aanpassen door selecties te maken die de weergave van webpagina's aanpassen. Het uiteindelijke uiterlijk van een webpagina is het resultaat van de regels van deze drie bronnen die samenkomen (of 'cascaderen') om de webpagina op een optimale manier weer te geven.
Een veelvoorkomende tag—de alineacode, of <p>-tag—illustreert het concept. Standaard worden browsers geleverd met stijlbladen die het lettertype en de lettergrootte voor alineatekst definiëren (dat wil zeggen tekst die valt tussen <p>-tags in de HTML-code). In Internet Explorer wordt bijvoorbeeld alle hoofdtekst, inclusief alineatekst, standaard weergegeven in Times New Roman, Medium lettertype.
Als auteur van een webpagina kun je echter een stijlblad maken dat de standaardstijl van de browser voor het lettertype en de tekengrootte van alinea's overschrijft.Je kunt bijvoorbeeld de volgende regel in je stijlblad maken:
p {
font-family: Arial;
font-size: small;
}
Wanneer een gebruiker de pagina laadt, heffen de lettertype- en Tekengrootte-instellingen van de alinea die jij als auteur hebt ingesteld de standaard alineatekstinstellingen van de browser tijdelijk op.
Gebruikers kunnen selecties maken om de browserweergave op een optimale manier aan te passen voor hun eigen gebruik. In Internet Explorer kan de gebruiker bijvoorbeeld Beeld > Tekstgrootte > Grootste kiezen om het paginalettertype uit te breiden naar een beter leesbare grootte als ze denken dat het lettertype te klein is. Uiteindelijk (tenminste in dit geval) heft de selectie van de gebruiker zowel de standaard browserstijlen voor alineaTekengrootte als de alineastijlen die door de auteur van de webpagina zijn gemaakt tijdelijk op.
Overerving is een ander belangrijk deel van de trapsgewijze toepassing van eigenschappen. Eigenschappen voor de meeste elementen op een webpagina worden overgeërfd—alinea-tags erven bijvoorbeeld bepaalde eigenschappen van body-tags, span-tags erven bepaalde eigenschappen van alinea-tags, enzovoort. Dus als je de volgende regel in je stijlblad maakt:
body {
font-family: Arial;
font-style: italic;
}
Alle alineatekst op uw webpagina (en tekst die eigenschappen overerft van de alinetag) zal Arial en cursief zijn, omdat de alineatag deze eigenschappen van de body-tag overerft. U kunt echter specifieker worden met uw regels en stijlen maken die de standaardformule voor overerving vervangen. Bijvoorbeeld wanneer u in uw stijlpagina de volgende regel maakt:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
Alle platte tekst is in Arial en cursief behalve alineatekst (en overgeërfde tekst), die wordt weergegeven als Courier normaal (niet-cursief).Technisch gezien erft de alinea-tag eerst de eigenschappen die zijn ingesteld voor de body-tag, maar negeert vervolgens die eigenschappen omdat er eigen eigenschappen zijn gedefinieerd. Met andere woorden, hoewel pagina-elementen over het algemeen eigenschappen van bovenaf overnemen, zorgt de directe toepassing van een eigenschap op een tag altijd voor het tijdelijk opheffen van de standaardformule voor overerving.
De combinatie van alle hierboven besproken factoren, plus andere factoren zoals CSS-specificiteit (een systeem dat verschillende gewichten geeft aan bepaalde soorten CSS-regels), en de volgorde van CSS-regels, creëren uiteindelijk een complexe cascade waarbij items met hogere prioriteiten eigenschappen tijdelijk opheffen die lagere prioriteiten hebben. Voor meer informatie over de regels die de cascade, overerving en specificiteit beheersen, ga naar www.w3.org/TR/CSS2/cascade.html.
Over tekstopmaak en CSS
Standaard gebruikt Dreamweaver CSS (Cascading Style Sheets) voor de opmaak van tekst. De stijlen die u toepast op de tekst met de eigenschappencontrole of menuopdrachten, maken CSS-regels die worden ingebed in de kop van het huidige document.
U kunt ook het deelvenster CSS ontwerpen gebruiken om CSS-regels en -eigenschappen te maken en te bewerken. Het deelvenster CSS ontwerpen is een veel robuustere editor dan de eigenschappencontrole en in het venster worden alle voor het huidige document gemaakte CSS-regels weergegeven, ongeacht of deze regels zijn ingesloten in de kop van het document of in een externe stijlpagina. Adobe raadt u aan het deelvenster CSS ontwerpen te gebruiken (en niet de eigenschappencontrole) als belangrijkste hulpmiddel voor het maken en bewerken van uw CSS. Hierdoor wordt uw code schoner en onderhoudsvriendelijker.
Voor meer informatie over CSS Designer, zie Pagina's indelen met CSS Designer.
Naast door u gemaakte stijlen en stijlpagina's kunt u ook stijlpagina's gebruiken die zijn meegeleverd bij Dreamweaver om stijlen toe te passen op uw documenten.
Voor een zelfstudie over het opmaken van tekst met CSS, zie www.adobe.com/go/vid0153.
Over steno-CSS-eigenschappen
De CSS-specificatie maakt het mogelijk om stijlen te maken met behulp van een verkorte syntax die bekend staat als shorthand CSS.Shorthand CSS laat je de waarden van verschillende eigenschappen specificeren met behulp van een enkele declaratie. Bijvoorbeeld, met de eigenschap font kun je de eigenschappen font-style, font-variant, font-weight, font-size, line-height en font-family op één regel instellen.
Een belangrijk punt om te onthouden bij het gebruik van verkorte CSS is dat waarden die worden weggelaten uit een verkorte CSS-eigenschap hun standaardwaarde krijgen toegewezen.Dit kan ertoe leiden dat pagina's onjuist worden weergegeven wanneer twee of meer CSS-regels aan dezelfde tag worden toegewezen.
Bijvoorbeeld, de h1-regel hieronder gebruikt de uitgebreide CSS-syntaxis.Merk op dat de eigenschappen font-variant, font-stretch, font-size-adjust en font-style hun standaardwaarden hebben gekregen.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Herschreven als één verkorte eigenschap, zou dezelfde regel er als volgt uit kunnen zien:
h1 { font: bold 16pt/18pt Arial }
Bij het schrijven met verkorte notatie krijgen weggelaten waarden automatisch hun standaardwaarden toegewezen.Zo laat het vorige verkorte voorbeeld de tags font-variant, font-style, font-stretch en font-size-adjust weg.
Als je stijlen op meer dan één locatie hebt gedefinieerd (bijvoorbeeld zowel ingesloten in een HTML-pagina als geïmporteerd vanuit een extern stijlblad) met zowel de korte als de lange vorm van CSS-syntaxis, let er dan op dat weggelaten eigenschappen in een verkorte regel eigenschappen kunnen tijdelijk opheffen (of cascade) die expliciet zijn ingesteld in een andere regel.
Om deze reden gebruikt Dreamweaver standaard de lange vorm van CSS-notatie.Dit voorkomt mogelijke problemen die worden veroorzaakt doordat een verkorte regel een uitgebreide regel overschrijft.Als je een webpagina opent die is gecodeerd met verkorte CSS-notatie in Dreamweaver, let er dan op dat Dreamweaver nieuwe CSS-regels zal maken met de uitgebreide vorm.Je kunt instellen hoe Dreamweaver CSS-regels maakt en bewerkt door de CSS-bewerkingsvoorkeuren te wijzigen in de categorie CSS-stijlen van het dialoogvenster Voorkeuren (Bewerken > Voorkeuren in Windows; Dreamweaver > Voorkeuren op de Macintosh).
Dreamweaver en CSS
In Dreamweaver kun je op meerdere manieren met CSS werken:
- U kunt CSS ontwerpen gebruiken om uw CSS met minimale codering te maken. Zie Pagina's Opmaken met CSS Designer voor meer informatie.
- U kunt uw CSS ook handmatig coderen. Voor meer informatie over coderingsfuncties die door Dreamweaver worden geboden, zie Codeomgeving in Dreamweaver.
- Als u met liever wilt werken met Sass-, Scss- of Less-bestanden, kunt u uw bestanden coderen met de gewenste syntaxis en deze in Dreamweaver gebruiken. Voor meer informatie zie CSS-preprocessors.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
