CSS Zelfstudie
Aan de slag met CSS
Zoeken…
Opmerkingen
Stijlen kunnen op verschillende manieren worden geschreven, waardoor hergebruik en bereik in verschillende mate mogelijk zijn wanneer ze worden gespecificeerd in een HTML-brondocument. Externe stylesheets kunnen worden hergebruikt in HTML-documenten. Ingesloten stijlbladen zijn van toepassing op het gehele document waarin ze zijn gespecificeerd. Inline- stijlen zijn alleen van toepassing op het individuele HTML-element waarop ze zijn opgegeven.
versies
Externe stylesheet
Een externe CSS-stylesheet kan op elk aantal HTML-documenten worden toegepast door een <link> -element in elk HTML-document te plaatsen.
Het kenmerk rel van de tag <link> moet worden ingesteld op "stylesheet" en het href kenmerk naar het relatieve of absolute pad naar het stylesheet. Hoewel het gebruik van relatieve URL-paden over het algemeen als een goede praktijk wordt beschouwd, kunnen ook absolute paden worden gebruikt. In HTML5 kan het type attribuut worden weggelaten .
Het wordt aanbevolen om de tag <link> tag <head> het HTML-bestand te plaatsen, zodat de stijlen worden geladen vóór de elementen waarin ze worden gestileerd. Anders zien gebruikers een flits van stijlloze inhoud .
Voorbeeld
hello-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
Zorg ervoor dat u het juiste pad naar uw CSS-bestand opneemt in de href. Als het CSS-bestand zich in dezelfde map bevindt als uw HTML-bestand, is er geen pad vereist (zoals in het bovenstaande voorbeeld), maar als het in een map is opgeslagen, geeft u het op deze manier op href="foldername/style.css" .
<link rel="stylesheet" type="text/css" href="foldername/style.css">
Externe stylesheets worden beschouwd als de beste manier om met uw CSS om te gaan. Er is een heel eenvoudige reden hiervoor: wanneer u een site beheert van bijvoorbeeld 100 pagina's, allemaal aangestuurd door een enkele stylesheet, en u wilt de kleuren van uw koppelingen wijzigen van blauw naar groen, is het een stuk eenvoudiger om de wijziging aan te brengen in uw CSS-bestand en laat de wijzigingen over alle 100 pagina's "stromen" dan naar 100 afzonderlijke pagina's gaan en 100 keer dezelfde wijziging aanbrengen. Nogmaals, als u het uiterlijk van uw website volledig wilt wijzigen, hoeft u alleen dit ene bestand bij te werken.
U kunt zoveel CSS-bestanden in uw HTML-pagina laden als nodig is.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
CSS-regels worden toegepast met enkele basisregels, en volgorde is belangrijk. Als u bijvoorbeeld een main.css-bestand hebt met een code erin:
p.green { color: #00FF00; }
Al uw alinea's met de klasse 'groen' worden in lichtgroen geschreven, maar u kunt dit overschrijven met een ander .css-bestand door het gewoon achter main.css op te nemen. U kunt bijvoorbeeld override.css met de volgende code main.css volgen:
p.green { color: #006600; }
Nu worden al uw alinea's met de klasse 'groen' in donkerder groen geschreven in plaats van lichtgroen.
Andere principes zijn van toepassing, zoals de '! Belangrijke' regel, specificiteit en erfenis.
Wanneer iemand uw website voor het eerst bezoekt, downloadt zijn browser de HTML van de huidige pagina plus het gekoppelde CSS-bestand. Wanneer ze vervolgens naar een andere pagina navigeren, hoeft hun browser alleen de HTML van die pagina te downloaden; het CSS-bestand is in de cache opgeslagen en hoeft dus niet opnieuw te worden gedownload. Omdat browsers het externe stylesheet in de cache opslaan, worden uw pagina's sneller geladen.
Interne stijlen
CSS ingesloten in <style></style> -tags binnen een HTML-document functioneert als een externe stylesheet, behalve dat het in het HTML-document leeft dat het stijlen in plaats van in een afzonderlijk bestand, en daarom alleen kan worden toegepast op het document waarin het woont. Merk op dat dit element zich binnen het <head> -element moet bevinden voor HTML-validatie (hoewel het in alle huidige browsers werkt als het in de body geplaatst).
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
Inline stijlen
Gebruik inline stijlen om styling toe te passen op een specifiek element. Merk op dat dit niet optimaal is. Het plaatsen van stijlregels in een <style> -tag of extern CSS-bestand wordt aangemoedigd om het onderscheid tussen inhoud en presentatie te behouden.
Inline stijlen overschrijven elke CSS in een <style> tag of externe stylesheet. Hoewel dit in sommige omstandigheden nuttig kan zijn, vermindert dit feit vaker wel dan niet de onderhoudbaarheid van een project.
De stijlen in het volgende voorbeeld zijn rechtstreeks van toepassing op de elementen waaraan ze zijn gekoppeld.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Inline-stijlen zijn over het algemeen de veiligste manier om rendering-compatibiliteit te garanderen voor verschillende e-mailclients, programma's en apparaten, maar kunnen tijdrovend zijn om te schrijven en een beetje uitdagend om te beheren.
CSS @import rule (een van CSS at-rule)
De atim-regel @import CSS wordt gebruikt om stijlregels uit andere stylesheets te importeren. Deze regels moeten voorafgaan aan alle andere soorten regels, behalve @charset-regels; omdat het geen geneste instructie is, kan @import niet worden gebruikt in voorwaardelijke groepsat-regels. @import .
Hoe @import te gebruiken
U kunt de @import-regel op de volgende manieren gebruiken:
A. Met interne stijltag
<style>
@import url('/css/styles.css');
</style>
B. Met externe stylesheet
De volgende regel importeert een CSS-bestand met de naam additional-styles.css in de hoofdmap naar het CSS-bestand waarin het verschijnt:
@import '/additional-styles.css';
Het importeren van externe CSS is ook mogelijk. Een veelgebruikt geval zijn lettertypebestanden.
@import 'https://fonts.googleapis.com/css?family=Lato';
Een optioneel tweede argument voor @import rule is een lijst met mediaquery's:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
CSS wijzigen met JavaScript
Pure JavaScript
Het is mogelijk om toe te voegen, te verwijderen of te wijzigen CSS waarde van onroerend goed met JavaScript door middel van een element style eigendom.
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
Merk op dat stijleigenschappen worden genoemd in de stijl van een onderste kameelgeval. In het voorbeeld ziet u dat de css-eigenschap font-family fontFamily in javascript.
Als alternatief voor het direct werken aan elementen, kunt u een <style> of <link> -element in JavaScript maken en dit toevoegen aan de <body> of <head> van het HTML-document.
jQuery
CSS-eigenschappen wijzigen met jQuery is nog eenvoudiger.
$('#element').css('margin', '5px');
Als u meer dan één stijlregel moet wijzigen:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery bevat twee manieren om css-regels met koppeltekens te wijzigen (dwz font-size ). Je kunt ze tussen aanhalingstekens zetten of de naam van de stijlregel in een kameel plaatsen.
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
Zie ook
Stylinglijsten met CSS
Er zijn drie verschillende eigenschappen voor het opmaken van lijstitems: list-style-type , list-style-image en list-style-position , die in die volgorde moeten worden aangegeven. De standaardwaarden zijn respectievelijk schijf, buiten en geen. Elke eigenschap kan afzonderlijk worden verklaard, of met behulp van de list-style steno eigendom.
list-style-type definieert de vorm of het type opsommingsteken dat voor elk lijstitem wordt gebruikt.
Enkele van de acceptabele waarden voor list-style-type :
- schijf
- cirkel
- plein
- decimale
- lagere-roman
- bovenste roman
- geen
(Zie voor een uitgebreide lijst de W3C-specificatiewiki )
Als u bijvoorbeeld vierkante opsommingstekens voor elk lijstitem wilt gebruiken, gebruikt u het volgende eigenschap-waardepaar:
li {
list-style-type: square;
}
De eigenschap list-style-image bepaalt of het pictogram van het item van de lijst is ingesteld met een afbeelding en accepteert een waarde van none of een URL die naar een afbeelding verwijst.
li {
list-style-image: url(images/bullet.png);
}
De eigenschap list-style-position definieert waar de lijst-itemmarkering moet worden geplaatst en accepteert een van twee waarden: "inside" of "outside".
li {
list-style-position: inside;
}