|
CSS Basis
In deze les leer ik je de basis van CSS. CSS staat voor Cascading
Style Sheets! Je kunt CSS buiten of binnen een pagina houden. Daarmee
bedoel ik: je kunt een speciaal bestand maken voor alle pagina's en vanaf
elke pagina naar dat bestand linken of je kunt overal op elke bestand
de codes in de head toevoegen. Ik werk het liefst met de externe bestanden.
Een extern bestand in aan te raden als je veel pagina's hebt. Hiermee
kun je in één bestand de hele website veranderen, zeer handig
dus. Je kunt ook beide doen. Een extern bestand maken en op elke pagina
waar je het anders wilt hebben het er in de head van de pagina veranderen.
Dan heb je twee tegenstrijdige aanwijzingen. De browser kiest altijd voor
de interne! Intern gaat altijd voor op extern. Dus: Een extern CSS bestand
is altijd handig, gebruik het dus ook.
Je hebt in HTML al geleerd dat je met CSS de opmaak
van de pagina kunt veranderen. Kleuren, plaatjes, grootte en lettertypes
zijn heel gemakkelijk aan te passen. Dat is zo'n beetje alles wat CSS
kan, en waar CSS voor geschreven is.
Wat is CSS?
- CSS staat voor Cascading Style Sheets
- CSS-stijlen geven aan hoe de HTML-elementen weergegeven moeten worden
- Stijlen zijn toegevoegd in HTML 4.0
- Externe style sheets sparen veel tijd
- Externe style sheets worden in .css bestanden opgeslagen
- Meerdere stijlen worden tot één stijl geschreven waarvan:
De Interne stijl altijd voor gaat op de externe!
De eerst genoemde stijl gaat weer voor op de tweede of derde stijl.
Externe bestanden worden zo opgeroepen:
<head>
<link rel="stylesheet" type="text/css"
href="mijnstijl.css" />
</head>
De browser voegt de stijles uit mijnstijl.css toe aan de pagina en voert
hem zo uit.
Een voorbeeld van een .css bestand is dit:
hr {color: white}
p {margin-left: 20px}
body {background-image: url("achtergrondplaatje.gif")}
Een .css bestand mag geen HTMLcodes bevatten.
Dezelfde codes alleen dan intern op de pagina zelf. In de <head>.
<head>
<style type="text/css">
hr {color: white}
p {margin-left: 20px}
body {background-image: url("achtergrondplaatje.gif")}
</style>
</head>
Oudere browsers. Dus met ondersteuning van HTML lager dan versie 4.0 zullen
meestal onbekende codes negeren maar in sommige gevallen worden ze toch
weergegeven. Dit kan tegen gegaan worden. Dat doe je zo:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Mochten ze dan toch weergegeven worden dan zorgt de <!--
ervoor dat het als commentaar gezien wordt en wordt het alleen maar getoond
in de bron! Wel weer even sluiten met -->!
Er zijn ook nog inline styles (tussen de lijnen door) Die zien er zo uit:
<p style="color: white; margin-left: 20px">
Dit is een paragraaf met dezelfde stijlen als bij de hiervoor genoemde
interne en externe sijlen!
</p>
Bij twee of drie styles maakt de browser er zelf een mix van. Dit zijn
de voorrangregels:
- Browser standaardkleuren (als jij bijvoorbeeld geen kleur hebt benoemd)
- Intern (codes in de header van de pagina)
- Extern (codes in een apart .css bestand)
- Inline (tussen de lijnen door)
|
