CSS yra pakopinis stiliaus lapas, kuris yra kalba, apibūdinanti tinklalapių išvaizdą. Vienas iš pagrindinių CSS privalumų yra galimybė lentelių išdėstymą pakeisti blokų išdėstymu.
Tai būtina
HTML kodo redaktorius
Nurodymai
1 žingsnis
Sukurkite pirmąjį bloką. HTML formoje tai atrodys kaip „div“žyma, kurios ID yra „block01“. Čia „block01“identifikatorius nurodo, kad CSS apraše visos šio bloko savybės yra nurodytos # block01 selektoriui.
2 žingsnis
Apibūdinkite CSS bloką. CSS stiliuose nurodykite identifikatoriaus pavadinimą (# block01), o garbanotaisiais petnešomis apibūdinkite jo parametrus - plotį, padėties nustatymą, poslinkį, fono spalvą ir kt. Pvz., Tai gali atrodyti taip: # block01 {width: 150px; aukštis: 150 taškų; pozicija: absoliuti; viršuje: 0 taškų; kairėje: 0 taškų; fono spalva: rožinė}. Šiame apraše daroma prielaida, kad langelis bus 150 taškų ilgio ir 150 taškų pločio, jis bus tvirtai išdėstytas viršutiniame kairiajame dokumento kampe, o jo fonas bus rausvos spalvos.
3 žingsnis
Suteikite blokui santykinę padėtį. Jei CSS apraše naudojate ne absoliučią, o santykinę padėties nustatymo padėtį, blokus galite dėti ne su standžiu užfiksavimu prie koordinačių tinklelio, bet su kitų jau esamų blokų atžvilgiu. Norėdami tai padaryti, pakeiskite kodo padėtį: absoliutus; viršuje: 0 taškų; kairėje: 0 taškų pagal padėtį: santykinis; viršuje: 200 taškų; kairėje: 100 taškų.
4 žingsnis
Suteikite blokui apvalumą. CSS už tai atsakingas pasienio spindulio teiginys. Įtraukite šį kodą į savo stiliaus lapą: border-radius: 8px. Dabar blokui bus suapvalinti kampai. Jei norite suapvalinti tik kai kuriuos kampus, kiekvienam iš jų apibūdinkite spindulį atskirai: kraštas-spindulys: 8 taškų 8 taškų 0 taškų 0 taškų.
5 žingsnis
Duokite blokui smūgį. Norėdami paryškinti bloko kontūrą plona linija, prie jo CSS aprašo pridėkite šį kodą: border-top: 1px juosta. Ši instrukcija reiškia, kad bloko kraštinė bus juoda ir bus vieno pikselio storio. Tokiu atveju pati kontūro linija bus rodoma kaip punktyrinė linija (punktyrinė - punktyrinė, punktyrinė - taškinė, vientisa - vientisa linija).
6 žingsnis
Nustatykite likusias bloko ypatybes. CSS apraše nurodykite, koks šriftas turėtų būti naudojamas tekstui bloko viduje, koks turėtų būti šrifto dydis, lygiavimas ir įtrauka nuo bloko kraštų. Šios savybės aprašytos apibrėžimuose font-family, font-size, text-align ir padding.
7 žingsnis
Galite naudoti „float“ypatybę, kad pritaikytumėte vieno bloko srautą virš kito. Jei nustatysite „kairėn“, likę elementai tekės aplink bloką kairėje, o „dešinė“- dešinėje. Jei nustatysite plūduriuojančią vertę kaip „niekas“, bloko lygiavimas nebus nustatytas. CSS ypatybė neleidžia blokui tekėti į dešinę, kairę ar į abi puses ir nepaiso plūduriuojančio sakinio.
