CSS er et kaskad stilark, som er et språk for å beskrive utseendet til websider. En av de viktigste fordelene med CSS er muligheten til å erstatte tabelloppsett med blokkoppsett.
Det er nødvendig
HTML-kodeditor
Bruksanvisning
Trinn 1
Lag den første blokken. I HTML-form vil det se ut som en div-tag med id 'block01'. Her indikerer block01-identifikatoren at i CSS-beskrivelsen er alle egenskapene til denne blokken spesifisert for # block01-velgeren.
Steg 2
Beskriv blokken i CSS. I CSS-stilene spesifiserer du navnet på identifikatoren (# block01) og i krøllete bukseseler beskriver parametrene - bredde, posisjonering, forskyvning, bakgrunnsfarge, etc. For eksempel kan det se slik ut: # block01 {width: 150px; høyde: 150px; posisjon: absolutt; topp: 0px; venstre: 0px; bakgrunnsfarge: rosa}. Denne beskrivelsen forutsetter at boksen vil være 150 piksler lang og 150 piksler bred, den vil være stivt plassert i øvre venstre hjørne av dokumentet, og bakgrunnen vil være rosa.
Trinn 3
Gi blokken en relativ posisjonering. Hvis du ikke bruker absolutt, men relativ posisjonering i CSS-beskrivelsen, kan du plassere blokker ikke med et stivt snapping til et rutenett med koordinater, men i forhold til andre allerede eksisterende blokker. For å gjøre dette, endre kodeposisjonen: absolutt; topp: 0px; venstre: 0px etter posisjon: relativ; topp: 200px; venstre: 100px.
Trinn 4
Gi blokken en avrunding. I CSS er border-radius-uttalelsen ansvarlig for dette. Legg til følgende kode i stilarket ditt: border-radius: 8px. Blokken vil nå ha avrundede hjørner. Hvis du bare vil avrunde noen hjørner, beskriv radius separat for hver av dem: border-radius: 8px 8px 0px 0px.
Trinn 5
Gi blokken et slag. For å markere omrisset av en blokk med en tynn linje, legg til følgende kode i CSS-beskrivelsen: border-top: 1px dashed black. Denne instruksjonen betyr at kanten av blokken vil være svart og ha en tykkelse på en piksel. I dette tilfellet vil selve konturlinjen vises som en stiplet linje (stiplet - en stiplet linje, stiplet - prikker, helt - en hel linje).
Trinn 6
Still inn de gjenværende blokkegenskapene. Spesifiser i CSS-beskrivelsen hvilket skrift som skal brukes til teksten inne i blokken, hva som skal være skriftstørrelse, justering og innrykk fra kantene av blokken. Disse egenskapene er beskrevet i definisjonene font-family, font-size, text-align, and padding.
Trinn 7
Du kan bruke float-egenskapen til å tilpasse flyt av en blokk over en annen. Hvis du setter den til "venstre", vil resten av elementene flyte rundt blokken til venstre og "høyre" - til høyre. Hvis du setter flottørverdien som "ingen", vil ikke blokkeringen bli satt. Den klare egenskapen i CSS forhindrer blokkeringen fra å strømme til høyre, venstre eller begge sider, og overstyrer flyteutsagnet.
