CSS er et kaskadestilark, som er et sprog til beskrivelse af websides udseende. En af de største fordele ved CSS er evnen til at erstatte bordlayout med bloklayout.
Er det nødvendigt
HTML-kode editor
Instruktioner
Trin 1
Opret den første blok. I HTML-form vil det se ud som et div-tag med id 'block01'. Her angiver block01-identifikatoren, at i CSS-beskrivelsen er alle egenskaberne for denne blok specificeret for # block01-vælgeren.
Trin 2
Beskriv blokken i CSS. I CSS-typografier skal du angive navnet på identifikatoren (# block01) og i krøllede parenteser beskrive dens parametre - bredde, placering, forskydning, baggrundsfarve osv. For eksempel kan det se sådan ud: # block01 {width: 150px; højde: 150px; position: absolut; top: 0px; venstre: 0px; baggrundsfarve: lyserød}. Denne beskrivelse forudsætter, at feltet er 150 pixels langt og 150 pixels bredt, det vil være stift placeret i det øverste venstre hjørne af dokumentet, og dets baggrund vil være lyserødt.
Trin 3
Giv blokken en relativ positionering. Hvis du ikke bruger absolut, men relativ positionering i CSS-beskrivelsen, kan du placere blokke ikke med et stift snapping til et gitter af koordinater, men i forhold til andre allerede eksisterende blokke. For at gøre dette skal du ændre kodepositionen: absolut; top: 0px; venstre: 0px efter position: relativ; top: 200 px; venstre: 100 px.
Trin 4
Giv blokken en afrunding. I CSS er grænseradiuserklæringen ansvarlig for dette. Føj følgende kode til dit typografiark: border-radius: 8px. Blokken vil nu have afrundede hjørner. Hvis du kun vil afrunde nogle hjørner, skal du beskrive radius separat for hver af dem: border-radius: 8px 8px 0px 0px.
Trin 5
Giv blokken et slagtilfælde. For at fremhæve omridset af en blok med en tynd linje skal du tilføje følgende kode til dens CSS-beskrivelse: border-top: 1px stiplet sort. Denne instruktion betyder, at kantens kant er sort og har en pixel i tykkelse. I dette tilfælde vil selve konturlinjen blive vist som en stiplet linje (stiplet - en stiplet linje, stiplet - prikker, fast - en solid linje).
Trin 6
Indstil de resterende blokkeegenskaber. Angiv i CSS-beskrivelsen, hvilket skrifttype der skal bruges til teksten inde i blokken, hvad der skal være skrifttypestørrelse, justering og fordybning fra kanten af blokken. Disse egenskaber er beskrevet i definitionerne font-family, font-size, text-align og padding.
Trin 7
Du kan bruge float-ejendommen til at tilpasse strømmen af en blok over en anden. Hvis du indstiller den til "venstre", flyder resten af elementerne rundt om blokken til venstre og "højre" - til højre. Hvis du indstiller flydeværdien som “ingen”, indstilles blokjusteringen ikke. Den klare egenskab i CSS forhindrer blokken i at flyde til højre, venstre eller begge sider og tilsidesætter float-sætningen.
