CSS on kaskaadne stiilileht, mis on keel veebilehtede välimuse kirjeldamiseks. CSS-i üks peamisi eeliseid on võime asendada tabeli paigutus plokkide paigutusega.
See on vajalik
HTML-koodiredaktor
Juhised
Samm 1
Looge esimene plokk. HTML-vormingus näeb see välja nagu div-silt, mille ID on 'block01'. Siin näitab block01 identifikaator, et CSS-i kirjelduses on selle ploki kõik omadused määratud # block01 valija jaoks.
2. samm
Kirjeldage CSS-i plokki. CSS-stiilides määrake identifikaatori nimi (# block01) ja lokkis sulgudes kirjeldage selle parameetreid - laius, positsioneerimine, nihe, taustavärv jne. Näiteks võib see välja näha järgmine: # block01 {width: 150px; kõrgus: 150px; positsioon: absoluutne; ülemine: 0px; vasakul: 0px; taustavärv: roosa}. Selles kirjelduses eeldatakse, et kasti pikkus on 150 pikslit ja laius, piksel paigutatakse dokumendi vasakusse ülanurka jäigalt ja selle taust on roosa.
3. samm
Andke plokile suhteline positsioneerimine. Kui kasutate CSS-i kirjelduses mitte absoluutset, vaid suhtelist positsioneerimist, saate plokid paigutada mitte jäiga, klõpsates koordinaatide võrku, vaid teiste juba olemasolevate plokkide suhtes. Selleks muutke koodi asukohta: absoluutne; ülemine: 0px; vasakul: 0px positsiooni järgi: suhteline; ülaosa: 200 pikslit; vasakul: 100 pikslit.
4. samm
Andke plokile ümardus. CSS-is on selle eest vastutav piiri raadiuse avaldus. Lisage oma stiililehele järgmine kood: border-radius: 8px. Plokil on nüüd ümardatud nurgad. Kui soovite ümardada ainult mõnda nurka, kirjeldage raadiust igaühe jaoks eraldi: piiri-raadius: 8px8px 0px 0px.
5. samm
Andke plokile löök. Peene joonega ploki kontuuri esiletõstmiseks lisage selle CSS-i kirjeldusse järgmine kood: border-top: 1px kriipsutatud must. See juhis tähendab, et ploki piir on must ja selle paksus on üks piksel. Sellisel juhul kuvatakse kontuurjoon ise katkendjoonena (katkendlik - punktiirjoon, punktiirjoon - punktid, ühtlane - ühtlane joon).
6. samm
Määrake ülejäänud ploki atribuudid. Täpsustage CSS-i kirjelduses, millist kirjatüüpi tuleks plokis oleva teksti jaoks kasutada, milline peaks olema fondi suurus, joondus ja taane ploki servadest. Neid omadusi kirjeldatakse määratlustes font-family, font-size, text-align ja padding.
7. samm
Atribuudi float abil saate kohandada ühe ploki voogu teise kohal. Kui määrate selle vasakule, siis ülejäänud elemendid voolavad vasakul asuva ploki ümber ja paremal paremal. Kui määrate ujukväärtuseks „puudub“, siis ploki joondamist ei määrata. CSS-i selge omadus takistab ploki liikumist paremale, vasakule või mõlemale küljele ja alistab ujuki lause.
