10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt leren

10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt leren

Als u eenmaal bent begonnen met ploeteren in HTML, zult u waarschijnlijk geïnteresseerd zijn in het toevoegen van meer visuele kracht aan uw webpagina's. CSS is de beste manier om dat te doen. Met CSS kun je wijzigingen toepassen op je hele pagina zonder afhankelijk te zijn van inline styling.





Hier zijn enkele eenvoudige CSS-voorbeelden om u te laten zien hoe u enkele basisstijlwijzigingen op uw webpagina kunt aanbrengen.



1. Basis CSS-code voor eenvoudige opmaak van alinea's

Stijlen met CSS betekent dat u niet elke keer dat u een element maakt een stijl hoeft op te geven. Je kunt gewoon zeggen 'alle alinea's zouden deze specifieke stijl moeten hebben' en je bent klaar om te gaan.





Laten we zeggen dat je elke alinea (

, een van de HTML-tags die iedereen zou moeten kennen) iets groter zijn dan normaal. En met donkergrijze tekst, in plaats van zwart.

Verwant: Het HTML-spiekbriefje



De CSS-code hiervoor is:

p { font-size: 120%; color: dimgray; }

Eenvoudig! Wanneer de browser nu een alinea weergeeft, erft de tekst de grootte (120 procent van normaal) en de kleur ('dimgray').



Als je benieuwd bent welke platte tekstkleuren je kunt gebruiken, kijk dan eens hier CSS-kleurenlijst van Mozilla.

2. CSS-voorbeeld om hoofdlettergebruik te wijzigen

Wilt u een aanduiding maken voor alinea's die in kleine hoofdletters moeten zijn? Een CSS-voorbeeld daarvoor zou zijn:



p.smallcaps { font-variant: small-caps; }

Gebruik een iets andere HTML-tag om een ​​alinea te maken die volledig in kleine hoofdletters is. Hier is hoe het eruit ziet:

Your paragraph here.

Het toevoegen van een punt en een klassenaam aan een element specificeert een subtype van dat element gedefinieerd door een klasse. U kunt dit doen met tekst, afbeeldingen, links en zo ongeveer alles.

Als u een set tekst in een specifiek geval wilt wijzigen, gebruikt u deze CSS-codevoorbeelden:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

De laatste geeft de eerste letter van elke zin een hoofdletter.

Stijlwijzigingen zijn niet beperkt tot alinea's. Er zijn vier verschillende kleuren waaraan een link kan worden toegewezen: de standaardkleur, de bezochte kleur, de zweefkleur en de actieve kleur (die wordt weergegeven terwijl u erop klikt). Gebruik deze voorbeeld-CSS-code:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Bij links wordt elke 'a' gevolgd door een dubbele punt, geen punt.

Elk van die verklaringen verandert de kleur van een link in een specifieke context. Het is niet nodig om de klasse van een link te wijzigen om deze van kleur te laten veranderen.

Terwijl onderstreepte tekst duidelijk een link aangeeft, ziet het er soms leuker uit om die onderstreping te schrappen. Dit wordt bereikt met het attribuut 'text-decoration'. Dit CSS-voorbeeld laat zien hoe u onderstreepte links op links kunt verwijderen:

a { text-decoration: none; }

Alles met de link ('a') tag blijft niet onderstreept. Wilt u het onderstrepen wanneer de gebruiker erover zweeft? Voeg eenvoudig toe:

a:hover { text-decoration: underline; }

U kunt deze tekstversiering ook toevoegen aan actieve links om ervoor te zorgen dat de onderstreping niet verdwijnt wanneer op de link wordt geklikt.

Wilt u meer aandacht voor uw link? Een link-knop is een geweldige manier om dit te doen. Deze vereist nog een paar regels:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Laten we deze CSS-voorbeeldcode uitleggen.

Het opnemen van alle vier de linkstatussen zorgt ervoor dat de knop niet verdwijnt wanneer een gebruiker erop zweeft of erop klikt. U kunt ook verschillende parameters instellen voor hover en actieve links, bijvoorbeeld het wijzigen van de knop- of tekstkleur.

De achtergrondkleur wordt ingesteld met achtergrondkleur en tekstkleur met kleur. Opvulling definieert de grootte van het vak --- de tekst wordt opgevuld met 10 px verticaal en 25 px horizontaal.

Text-align zorgt ervoor dat de tekst in het midden van de knop wordt weergegeven, in plaats van opzij. Tekstdecoratie, zoals in het laatste voorbeeld, verwijdert de onderstreping.

hoe in te zoomen op mac

De CSS-code 'display: inline-block' is iets ingewikkelder. Kortom, hiermee kunt u de hoogte en breedte van het object instellen. Het zorgt er ook voor dat het een nieuwe regel begint wanneer het wordt ingevoegd.

6. CSS-voorbeeldcode voor het maken van een tekstvak

Een simpele alinea is niet erg spannend. Als u een element op uw pagina wilt markeren, wilt u misschien een rand toevoegen. Hier leest u hoe u dat doet met een reeks eenvoudige CSS-code:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Deze is rechttoe rechtaan. Het creëert een effen paarse rand, vijf pixels breed, rond elke belangrijke alinea. Om een ​​alinea deze eigenschappen te laten erven, declareert u deze gewoon als volgt:

Your important paragraph here.

Dit werkt ongeacht hoe groot de alinea is.

Er zijn veel verschillende randstijlen die u kunt toepassen; in plaats van 'vast', probeer 'gestippeld' of 'dubbel'. Ondertussen kan de breedte 'dun', 'gemiddeld' of 'dik' zijn. CSS-code kan zelfs de dikte van elke rand afzonderlijk definiëren, zoals dit:

border-width: 5px 8px 3px 9px;

Dat resulteert in een bovenrand van vijf pixels, een rechterrand van acht, een onderkant van drie en een linkerrand van negen pixels.

7. Elementen centreren met basis CSS-code

Voor een veelvoorkomende taak is het centreren van elementen met CSS-code verrassend niet-intuïtief. Als je het echter een paar keer hebt gedaan, wordt het veel gemakkelijker. Je hebt een aantal verschillende manieren om dingen te centreren.

Gebruik voor een blokelement (meestal een afbeelding) het marge-attribuut:

.center { display: block; margin: auto; }

Dit zorgt ervoor dat het element als een blok wordt weergegeven en dat de marge aan elke kant automatisch wordt ingesteld. Als je alle afbeeldingen op een bepaalde pagina wilt centreren, kun je zelfs 'marge: auto' toevoegen aan de img-tag:

img { margin: auto; }

Om te leren waarom het op deze manier werkt, bekijk de CSS box model uitleg bij W3C .

Maar wat als u tekst wilt centreren met CSS? Gebruik deze voorbeeld-CSS:

.centertext { text-align: center; }

Wilt u de klasse 'centertext' gebruiken om de tekst in een alinea te centreren? Voeg die klasse gewoon toe aan de

label:

This text will be centered.

8. CSS-voorbeelden voor het aanpassen van opvulling

De opvulling van een element geeft aan hoeveel ruimte er aan elke kant moet zijn. Als u bijvoorbeeld 25 pixels opvulling aan de onderkant van een afbeelding toevoegt, wordt de volgende tekst 25 pixels naar beneden gedrukt. Veel elementen kunnen opvulling hebben, niet alleen afbeeldingen.

Stel dat u wilt dat elke afbeelding 20 pixels opvulling heeft aan de linker- en rechterkant en 40 pixels aan de boven- en onderkant. De meest elementaire uitvoering van CSS-code hiervoor is:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Er is echter een kortere CSS-instructie die al deze informatie in één regel presenteert:

img { padding: 40px 25px 40px 25px; }

Hiermee worden de opvullingen boven, rechts, onder en links op het juiste nummer ingesteld. Dankzij slechts twee waarden die worden gebruikt (40 en 25) kun je het nog korter maken:

img { padding: 40px 25px }

Wanneer u slechts twee waarden gebruikt, wordt de eerste waarde ingesteld voor de boven- en onderkant, terwijl de tweede voor links en rechts is.

9. Markeer tabelrijen met CSS-codering

CSS-code zorgt ervoor dat tabellen er veel mooier uitzien dan de standaardrasters. Het is allemaal eenvoudig om kleuren toe te voegen, randen aan te passen en uw tafel te laten reageren op mobiele schermen. Dit eenvoudige CSS-voorbeeld laat zien hoe u tabelrijen markeert wanneer u er met de muis overheen gaat.

tr:hover { background-color: #ddd; }

Wanneer u nu met de muis over een tabelcel gaat, verandert die rij van kleur. Om enkele van de andere coole dingen te zien die je kunt doen, bekijk de W3C-pagina op mooie CSS-tabellen .

10. Voorbeeld-CSS voor het verschuiven van afbeeldingen tussen transparant en ondoorzichtig

CSS-code kan je ook helpen om coole dingen met afbeeldingen te doen. Hier is een CSS-voorbeeld om afbeeldingen weer te geven met minder dan volledige dekking, zodat ze enigszins 'gewit' lijken. Wanneer u met de muis over de afbeeldingen gaat, worden ze volledig ondoorzichtig:

img { opacity: 0.5; filter: alpha(opacity=50); }

Het kenmerk 'filter' doet hetzelfde als 'dekking', maar Internet Explorer 8 en eerder herkennen de meting van de dekking niet. Voor oudere browsers is het een goed idee om het op te nemen.

Nu de afbeeldingen enigszins transparant zijn, kunt u ze met een muisklik volledig ondoorzichtig maken:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 CSS-voorbeelden met broncode

Met deze CSS-codevoorbeelden zou u een veel beter idee moeten hebben van hoe CSS werkt. CSS-sjablonen kan helpen, maar het begrijpen van de ruwe elementen is van vitaal belang.

Die 10 eenvoudige CSS-codevoorbeelden samengevat:

  1. Eenvoudige alinea-opmaak
  2. Lettertype wijzigen
  3. Linkkleuren wijzigen
  4. Link onderstrepingen verwijderen
  5. Maak een link-knop
  6. Een tekstvak maken
  7. Elementen uitlijnen in het midden
  8. Pas opvulling aan
  9. Markeer tabelrijen
  10. Afbeeldingen ondoorzichtig maken

Als je ze opnieuw bekijkt, zul je verschillende patronen opmerken die je op toekomstige code kunt toepassen. En dan weet je dat je echt begonnen bent een CSS-master te worden. Maar het onthouden kan moeilijk zijn. Misschien wilt u een bladwijzer voor deze pagina maken voor toekomstig gebruik.

Deel Deel Tweeten E-mail De essentiële CSS3-eigenschappen Cheatsheet

Beheers essentiële CSS-syntaxis met onze cheatsheet voor CSS3-eigenschappen.

Lees volgende Gerelateerde onderwerpen
  • Programmeren
  • Webdesign
  • CSS
  • Scripting
Over de auteur Christian Cawley(1510 artikelen gepubliceerd)

Plaatsvervangend redacteur voor beveiliging, Linux, doe-het-zelf, programmeren en techniek uitgelegd, en echt nuttige podcast-producent, met uitgebreide ervaring in desktop- en softwareondersteuning. Christian levert een bijdrage aan het tijdschrift Linux Format en is een Raspberry Pi-knutselaar, Lego-liefhebber en retro-gamingfan.

Meer van Christian Cawley

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren