De visuele stijl en lay-out van een website worden bepaald door CSS of Cascading Style Sheets. Dit zijn documenten die de HTML-opmaak van een webpagina vormen, waardoor webbrowsers instructies krijgen over het weergeven van de pagina's die het resultaat zijn van die opmaak. CSS verwerkt de lay-out van een pagina, evenals kleur, achtergrondafbeeldingen, typografie en nog veel meer.
Als u naar een CSS-bestand kijkt, ziet u dat deze bestanden, net als bij andere opmaak- of codeertaal, een specifieke syntaxis voor hen hebben. Elke stylesheet bestaat uit een aantal CSS-regels. Deze regels vormen, als ze volledig worden overgenomen, de stijl van de site.
De delen van een CSS-regel
Een CSS-regel bestaat uit twee afzonderlijke delen: de selector en de declaratie. De selector bepaalt wat er op een pagina wordt gestileerd en de verklaring is hoe deze moet worden gestileerd. Bijvoorbeeld:
p { kleur: # 000;} Dit is een CSS-regel. Het selectorgedeelte is de "p", een elementselector voor "alinea's". Het zou daarom ALLE alinea's in een site selecteren en deze van deze stijl voorzien (tenzij er paragrafen zijn die worden getarget door meer specifieke stijlen elders in uw CSS-document). Het deel van de regel met de tekst 'kleur: # 000;' is wat bekend staat als de verklaring. Die verklaring bestaat uit twee delen - het eigendom en de waarde. Het eigendom is het "kleur" -onderdeel van deze verklaring. Het dicteert welk aspect van de selector visueel wordt gewijzigd. De waarde is waarnaar de gekozen CSS-eigenschap wordt gewijzigd. In ons voorbeeld gebruiken we de hexadecimale waarde van # 000, wat CSS-afkorting is voor "zwart". Dus met behulp van deze CSS-regel, zou onze pagina paragrafen weergegeven in een lettertypekleur van zwart hebben. Wanneer u CSS-eigenschappen schrijft, kunt u deze niet eenvoudig verzinnen zoals u wilt. In sommige gevallen is "kleur" een echte CSS-eigenschap, dus u kunt deze gebruiken. Deze eigenschap bepaalt de tekstkleur van een element. Als u probeerde "tekstkleur" of "letterkleur" te gebruiken als CSS-eigenschappen, zouden deze mislukken omdat ze geen echte delen van de CSS-taal zijn. Een ander voorbeeld is de eigenschap "achtergrondafbeelding". Deze eigenschap stelt een afbeelding in die als achtergrond kan worden gebruikt: .logo { background-image: url (/images/company-logo.png);} Als u "achtergrondafbeelding" of "achtergrondafbeelding" als een eigenschap probeerde te gebruiken, zouden ze falen omdat, nogmaals, dit geen daadwerkelijke CSS-eigenschappen zijn. Er zijn een aantal CSS-eigenschappen die u kunt gebruiken om een site te stylen. Voorbeelden zijn: Deze CSS-eigenschappen zijn geweldig om als voorbeeld te gebruiken, omdat ze allemaal heel eenvoudig zijn en zelfs als je CSS niet kent, kun je waarschijnlijk raden wat ze doen op basis van hun naam. Er zijn nog andere CSS-eigenschappen die u ook zult tegenkomen en die misschien niet zo duidelijk zijn hoe ze werken op basis van hun naam: Naarmate je dieper ingaat op webdesign, zul je al deze eigenschappen tegenkomen (en gebruiken) en meer! Telkens wanneer u een eigenschap gebruikt, moet u deze een waarde geven - en bepaalde eigenschappen kunnen alleen bepaalde waarden accepteren. In ons eerste exemplaar van de eigenschap 'kleur' moeten we een kleurwaarde gebruiken. Dit kan een hexwaarde, RGBA-waarde of zelfs kleurzoekwoorden zijn. Al deze waarden zouden echter werken als u het woord 'somber' bij deze eigenschap zou gebruiken, het zou niets doen omdat, zo beschrijvend als dat woord zou kunnen zijn, het geen erkende waarde is in CSS. Ons tweede voorbeeld van "achtergrondafbeelding" vereist dat een afbeeldingspad wordt gebruikt om een daadwerkelijke afbeelding op te halen uit de bestanden van uw site. Dit is de waarde / syntaxis die vereist is. Alle CSS-eigenschappen hebben waarden die ze verwachten. Bijvoorbeeld: Als u de lijst met CSS-eigenschappen doorloopt, ontdekt u dat ze allemaal specifieke waarden hebben die ze zullen gebruiken om de stijlen te maken waarvoor ze zijn bedoeld. Bewerkt door Jeremy Girard CSS-grondbeginselen
Sommige CSS-eigenschappen
Eigenschappen nodig waarden
