CSS är ett kaskad stilark, vilket är ett språk för att beskriva utseendet på webbsidor. En av de största fördelarna med CSS är möjligheten att ersätta tabelllayout med blocklayout.
Det är nödvändigt
HTML-kodredigerare
Instruktioner
Steg 1
Skapa det första blocket. I HTML-form kommer det att se ut som en div-tagg med id 'block01'. Här indikerar block01-identifieraren att i CSS-beskrivningen specificeras alla egenskaperna för detta block för # block01-väljaren.
Steg 2
Beskriv blocket i CSS. I CSS-formatet anger du namnet på identifieraren (# block01) och i lockiga parenteser beskrivs dess parametrar - bredd, positionering, förskjutning, bakgrundsfärg etc. Det kan till exempel se ut så här: # block01 {width: 150px; höjd: 150px; position: absolut; överst: 0px; vänster: 0px; bakgrundsfärg: rosa}. Denna beskrivning förutsätter att rutan kommer att vara 150 pixlar lång och 150 pixlar bred, den kommer att vara styvt placerad i det övre vänstra hörnet av dokumentet och dess bakgrund kommer att färgas rosa.
Steg 3
Ge blocket en relativ positionering. Om du inte använder absolut, men relativ positionering i CSS-beskrivningen, kan du placera block inte med en styv knäppning till ett rutnät med koordinater, men relativt andra redan existerande block. För att göra detta, ändra kodpositionen: absolut; överst: 0px; vänster: 0px efter position: relativ; överst: 200px; vänster: 100px.
Steg 4
Ge blocket en avrundning. I CSS är gränsradieförklaringen ansvarig för detta. Lägg till följande kod i ditt formatmall: border-radius: 8px. Blocket har nu rundade hörn. Om du bara vill avrunda några hörn, beskriv radien separat för var och en av dem: gränsradie: 8px 8px 0px 0px.
Steg 5
Ge blocket ett slag. För att markera konturen av ett block med en tunn linje, lägg till följande kod i dess CSS-beskrivning: border-top: 1px streckad svart. Denna instruktion innebär att blockets kant är svart och har en pixel i tjocklek. I detta fall kommer själva konturlinjen att visas som en streckad linje (streckad - en prickad linje, prickad - prickar, fast - en hel linje).
Steg 6
Ställ in kvarvarande blockegenskaper. Ange i CSS-beskrivningen vilken typsnitt som ska användas för texten inuti blocket, vad som ska vara teckensnittsstorlek, justering och indrag från blockets kanter. Dessa egenskaper beskrivs i definitionerna font-family, font-size, text-align, and padding.
Steg 7
Du kan använda float-egenskapen för att anpassa flödet av ett block över ett annat. Om du ställer in den till "vänster", så kommer resten av elementen att flyta runt kvarteret till vänster och "höger" - till höger. Om du ställer in flottörvärdet som “inget” kommer inte blockjusteringen att ställas in. Den tydliga egenskapen i CSS förhindrar att blocket flyter till höger, vänster eller båda sidor, och åsidosätter float-uttalandet.
