CSS is een trapsgewijze stylesheet, een taal voor het beschrijven van het uiterlijk van webpagina's. Een van de belangrijkste voordelen van CSS is de mogelijkheid om de tabellay-out te vervangen door een bloklay-out.
Het is nodig
HTML-code-editor
instructies:
Stap 1
Maak het eerste blok. In HTML-vorm ziet het eruit als een div-tag met id 'block01'. Hier geeft de block01-identifier aan dat in de CSS-beschrijving alle eigenschappen van dit blok zijn gespecificeerd voor de # block01-selector.
Stap 2
Beschrijf het blok in CSS. Geef in de CSS-stijlen de naam van de identifier op (# block01) en beschrijf in accolades tussen accolades de parameters - breedte, positionering, offset, achtergrondkleur, enz. Het kan er bijvoorbeeld zo uitzien: # block01 {width: 150px; hoogte: 150px; positie: absoluut; boven: 0px; links: 0px; achtergrondkleur: roze}. Deze beschrijving gaat ervan uit dat het vak 150 pixels lang en 150 pixels breed zal zijn, dat het stevig in de linkerbovenhoek van het document wordt geplaatst en dat de achtergrond roze gekleurd is.
Stap 3
Geef het blok een relatieve positionering. Als u geen absolute, maar relatieve positionering in de CSS-beschrijving gebruikt, dan kunt u blokken niet met een rigide snapping naar een raster van coördinaten plaatsen, maar relatief ten opzichte van andere reeds bestaande blokken. Verander hiervoor de codepositie: absoluut; boven: 0px; links: 0px op positie: relatief; boven: 200px; links: 100px.
Stap 4
Geef het blok een afronding. In CSS is hiervoor het border-radius statement verantwoordelijk. Voeg de volgende code toe aan je stylesheet: border-radius: 8px. Het blok heeft nu afgeronde hoeken. Als u alleen enkele hoeken wilt afronden, beschrijf dan de straal afzonderlijk voor elk van hen: border-radius: 8px 8px 0px 0px.
Stap 5
Geef het blok een slag. Om de omtrek van een blok met een dunne lijn te markeren, voegt u de volgende code toe aan de CSS-beschrijving: border-top: 1px gestreept zwart. Deze instructie houdt in dat de rand van het blok zwart zal zijn en één pixel dik zal zijn. In dit geval wordt de contourlijn zelf weergegeven als een stippellijn (stippellijn - stippellijn, stippellijn - stippen, ononderbroken - een ononderbroken lijn).
Stap 6
Stel de overige blokeigenschappen in. Specificeer in de CSS-beschrijving welk lettertype moet worden gebruikt voor de tekst in het blok, wat de lettergrootte, uitlijning en inspringing vanaf de randen van het blok moet zijn. Deze eigenschappen worden beschreven in de definities font-family, font-size, text-align en padding.
Stap 7
U kunt de eigenschap float gebruiken om de stroom van het ene blok over het andere aan te passen. Als u het op "links" instelt, stromen de rest van de elementen rond het blok aan de linkerkant en "rechts" - aan de rechterkant. Als u de float-waarde instelt op "none", wordt de blokuitlijning niet ingesteld. De clear-eigenschap in CSS voorkomt dat het blok naar rechts, links of beide kanten stroomt en heft de float-instructie op.
