CSS is de allerbelangrijkste verandering die webpagina's in het afgelopen decennium hebben gekend, en het maakte de weg vrij voor de scheiding van stijl en inhoud. Op de moderne manier definieert XHTML de semantische wat semantische markup is en hoe het internet voor altijd zal veranderen [technologie verklaard] Wat semantische markup is en hoe het zal veranderen Het internet voor altijd [technologie verklaard] Lees meer structuur - de betekenis en inhoud van de webpagina, terwijl CSS zich bezighoudt met de presentatie. Hoewel de meesten van ons comfortabel zijn met het schrijven van een beetje HTML, lijken we te denken dat CSS een soort zwarte magie is. Ik hoop dat te veranderen met deze 5 baby-stappen om een ​​CSS tovenaar te worden.

Dit artikel is bedoeld voor gebruikers die nog heel weinig ervaring met CSS hebben, maar hopelijk is er hier voor iedereen iets.

(1) Grammatica

Net als elke andere taal heeft CSS een zekere grammatica en lijkt het een beetje “computerprogramma” in het begin, maar het is eigenlijk gewoon een lijst met dingen. Alle CSS is als volgt geschreven:

SELECTOR PROPERTY: VALUE; EIGENDOMS-WAARDE; EIGENDOMS-WAARDE;

Zoals u wellicht al weet, werkt CSS door een stijl toe te passen op een geselecteerd element in de webpagina. Om bijvoorbeeld te stylen hoe al uw links worden getoond, zou u gebruiken “een” als de selector. De verschillende eigenschappen en waarden die u met ervaring zult leren, maar sommige zijn eenvoudig - zaken als KLEUR, KADER, DOOPVONT, GROOTTE zijn allemaal mogelijke eigenschappen, waarvan de waarden rood kunnen zijn, 14pt, 150%, 1000px - het is echt zo gemakkelijk. Laten we eens kijken hoe we alle links rood gaan stylen:

een kleur: rood;

Je kunt ook hetzelfde CSS-blok gebruiken om meer dan één type element tegelijk met komma's te doen:

a, h2, h3 kleur: rood;

Dit maakt niet alleen alle links, maar ook alle h2- en h3-koppen in dezelfde rode kleur. Merk op dat ze allemaal verschillende formaten kunnen hebben, omdat dit specifieke codeblok ALLEEN de kleur verandert.

(2) Klasse- en ID-selectors

Soms wil je ALLE elementen a niet op dezelfde manier stylen - en in die gevallen zou je het kunnen gebruiken KLASSE of ID kaart. Als algemene regel geldt dat ID wordt gebruikt voor eenmalige elementen en meestal wordt gebruikt voor het definiëren van grote inhoudblokken of speciale knoppen en dergelijke..

U hebt bijvoorbeeld mogelijk een grote DIV voor de HEADER-, CONTENT- en FOOTER-blokken van uw pagina - dus het definiëren van die als ID's zou een slimme zet zijn. Klassen aan de andere kant worden gebruikt wanneer stijlelementen waarschijnlijk over de hele pagina worden herhaald. Misschien wil je dat een heleboel items afgeronde hoeken hebben met een 2px effen rode rand - in plaats van een miljoen keer dezelfde inlinestijl op te schrijven, zou je een klasse definiëren en de klasse in plaats daarvan aan die elementen koppelen. Dus hoe definieer je deze ID's en klassen?

 
SIDEBAR
 

Als u deze items in CSS wilt targeten, gebruikt u:

 .rood afgerond // dit is een klasse border-radius: 5px; rand: 2px effen rood;  #sidebar ... // dit is een ID 

(3) Nakomelingen

U hoeft geen klassen en ID's aan alles in uw document toe te voegen - u kunt ook wat wij descendantes noemen, gebruiken om items te selecteren. Bekijk deze CSS-verklaring en kijk of je kunt achterhalen wat het doet:

#sidebar h1 font-size: 20px;

Dit zal EERST het item vinden met een ID van “zijbalk” DAN zal het de selectie beperken tot alle

daarin vervat, en pas de stijl alleen daarop toe.

Dus, als je al je items op de een of andere manier samen kunt groeperen, is het het beste om afstammelingen te gebruiken, omdat het nog minder code is dan een stapel class =”” definities voor alles.

(4) Waar deze CSS plaatsen?

De beste manier om met CSS om te gaan is om het volledig van uw HTML te scheiden. Maak een bestand met de naam .css en voeg deze regel toe aan je HTML-header:

Je kunt ook CSS-blokken toevoegen aan de sectie tussen de tags, maar ik raad deze methode niet aan omdat dit resulteert in rommelige en moeilijk leesbare HTML-bestanden.

De derde plaats om CSS toe te voegen is inline, maar daar moet je ook op letten. Alles toegevoegd inline zoals zo:

zal automatisch alles overschrijven dat gedefinieerd is in uw afzonderlijke stijl. Dus je kunt daar soms proberen te debuggen waarom je thumbnails niet worden verkleind, en je CSS kan perfect zijn - maar als het IMG-element al inline-stijlen bevat, dan hebben die voorrang. Hoe weet je of dit door iets anders wordt beïnvloed??

(5) Haal FireBug op of gebruik Chrome

FireBug Amateur's Guide Aanpassen Website Ontwerp Met FireBug Amateur's Gids Aanpassen Website Ontwerp Met FireBug Read More is een geweldige ontwikkelingstool die vooral handig is om uit te zoeken hoe CSS werkt. Neem even de tijd om het te downloaden en bekijk het snel. FireBug is beschikbaar voor Firefox als een plug-in, of als u Chrome gebruikt, is een identieke set functies al ingebouwd. Zodra u de plug-in in Firefox hebt geactiveerd of Chrome gebruikt, klikt u eenvoudig met de rechtermuisknop ergens op de pagina en selecteert u “Inspecteer Element“.

Dit opent een nieuw venster onderin je browser. Aan de linkerkant is de XHTML-weergave, mooi opgemaakt en samenvouwbaar. Als je over een willekeurig element zweeft, wordt dat element op de pagina gemarkeerd en wordt het CSS-kadermodel eromheen weergegeven (we zullen in een volgende les meer over het doosmodel praten). Het belangrijkste punt hier is dat je ook elk element kunt selecteren en precies kunt zien welke CSS eraan werkt aan de rechterkant, en het zal die naar beneden afbreken in welke selectors dat hebben veroorzaakt. Alles wat inline is toegevoegd, wordt weergegeven onder de “element.style” rubriek. Probeer het nu op deze pagina. Merk op dat heel vaak een veel van de CSS aan de rechterkant is doorstreept met een centrale lijn - dit betekent dat een andere selector die aan dat element werkt prioriteit heeft en de doorgestreepte prioriteit overschrijft.

Dat is het voor vandaag, maar voel je vrij om opmerkingen achter te laten als je denkt dat ik een paar belangrijke belangrijke beginnerspijlen heb gemist, of als je specifieke vragen of problemen met CSS hebt, vraag het dan af in de technische ondersteuningssectie van onze site. De volgende keer zou ik uw kennis van CSS verder willen ontwikkelen dan alleen de basiskleur- en groottewijzigingen.

Ontdek meer over: HTML, programmeren, webontwerp, webontwikkeling.