Samenvatting
Samenvatting CSS Web Technologies (H10-H16)
Dit is een samenvatting van de hoofdstukken 10 tot en met 16 over het CSS gedeelte van het boek HTML & CSS van Jon Duckett. Ik heb hier zelf een 9,4 mee gehaald.
[Meer zien]Voorbeeld 1 van de 6 pagina's
Voorbeeld 1 van de 6 pagina's
In winkelwagengesponsord bericht van onze partner
Gekoppeld boek
Titel boek:
Auteur(s):
- Uitgave:
- ISBN:
- Druk:
5 beoordelingen
Door: jordyletteboer • 3 jaar geleden
Door: timendion3 • 6 jaar geleden
Door: nlibiee • 7 jaar geleden
Door: demivens • 7 jaar geleden
Door: kimberleyrol • 7 jaar geleden
Voorbeeld van de inhoud
Hoofdstuk 10 - Introducing CSSHet CSS file wordt vaak external gebruikt. Om dit te doen gebruik je het <link> element in het
HTML document. Dit is een empty element en bevind zich in het <head> element. Naast deze link
komt ook het href attribuut, die specificeert waar de CSS file zich bevind. Ook is er een type
attribuut, die specificeert naar wat voor type bestand wordt gelinkt, de value is hier text/css. Als
laatste komt er het rel attribuut, dit specificeert de relatie van de HTML pagina met het
bestandsfile waarnaar gelikt wordt, dit moet stylesheet zijn. Dit wordt dan dus <link
href=“css/styles.css” type=“text/css” rel=“stylesheet” />. Ook kan een HTML document meerdere
CSS bestanden hebben. Er zijn dan meerdere link elementen. Deze manier is handig omdat de
site sneller laad omdat de code voor meerdere pagina's geld. Als je de H1 wilt veranderen hoef je
maar 1x de code te veranderen.
Je kan ook CSS in je HTML bestand gebruiken, door ze in een <style> element te zetten die
meestal in de head staat. Ook wordt hier het type attribuut gebruikt om aan te geven dat het op
CSS gaat, de value is ook hier text/css.
Als je site meerdere pagina’s heeft wordt er wel vaak een external CSS gebruikt, dit zorgt dat al je
pagina’s dezelfde regels volgen, houd de inhoud en vormgeving apart en je kan door 1 ding te
veranderen al je pagina’s veranderen.
Universal selector, geldt voor alle elementen in het document = * en { }
Type selector, match met de element namen = h1, h2, h3 { }
Class selector, match met een element wie zijn class attribute een value heeft die match met de
naam achter de punt = .note { } selecteer alles wat als value note heeft.
ID selector, match met een element wie zijn id attributen dezelfde value heeft als achter de
haastig = #introduction { } selecteert alles wat de id attributen introduction heeft.
Child selector, match met een element dat een directe child is = li>a { } targets alle <a>
elementen die kind zijn van een <li> element maar geen gewone <a> elementen.
Descendant selector, match met een element dat afstamt van een ander gespecificeerd element
= p a { } targets alle <a> elementen die in een <p> element zitten lokaal zitten er andere elementen
tussen.
Adjacent sibling selector, match een element dat een sibling is = h1+p { } targets de eerste p
element na alle h1 elementen maar geen andere p elementen.
General sibling selector, match een element die een sibling is ondanks dat het geen direct
element is = h1~p { } als je twee <p> elementen hebt dat siblings van het h1 element zijn, geld het
voor beide.
Als er twee of meer regels over het zelfde element gaan is het belangrijk over welk dan gelden. Als
er twee selectors identiek zijn zal de laatste voorgaan. Bijv bij 1 { color: green; } en daarna 1
{color: red; } wordt hij dus rood. Ook als er 1 selecteer specifieker is dan de andere zal de meest
specifieke voorgaan. H1 is specifieker dan *, en p#intro ook meer dan p. Je kan achter een
value !important zetten om aan te geven dat deze regel belangrijker is. p {color: blue !important;}
Als je de font-family in het body element specificeert zullen de child element dit overnemen, deze
word ge inherited. Background-color wordt bijvoorbeeld weer niet overgenomen door de child
elements. Je kan er ook voor zorgen dat dit geforceerd wordt door de inherit value te gebruiken.
Bijv. body { font-family: Arial; padding: 10px;} .page { border: 1px solid; padding: inherit; }
Hoofdstuk 11 - Kleur
De kleur property zorgt ervoor dat je kleur in tekst kan veranderen (foreground color). Dit kan je
op drie manieren doen. RGB values, bijvoorbeeld (100,100,90). Hex codes, bijv #ee3e80. En
color names bijvoorbeeld DarkCyan. h2 { color: DarkCyan; }
Voordelen van het kopen van samenvattingen bij Stuvia op een rij:
Verzekerd van kwaliteit door reviews
Stuvia-klanten hebben meer dan 700.000 samenvattingen beoordeeld. Zo weet je zeker dat je de beste documenten koopt!
Snel en makkelijk kopen
Je betaalt supersnel en eenmalig met iDeal, creditcard of Stuvia-tegoed voor de samenvatting. Zonder lidmaatschap.
Focus op de essentie
Samenvattingen worden geschreven voor en door anderen. Daarom zijn de samenvattingen altijd betrouwbaar en actueel. Zo kom je snel tot de kern!
Veelgestelde vragen
Wat krijg ik als ik dit document koop?
Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.
Tevredenheidsgarantie: hoe werkt dat?
Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.
Van wie koop ik deze samenvatting?
Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper gingerbaegen. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €5,49. Je zit daarna nergens aan vast.
Is Stuvia te vertrouwen?
4,6 sterren op Google & Trustpilot (+1000 reviews)
Afgelopen 30 dagen zijn er 64438 samenvattingen verkocht
Opgericht in 2010, al 14 jaar dé plek om samenvattingen te kopen