CSS je kaskadni list stilova, koji je jezik za opisivanje izgleda web stranica. Jedna od glavnih prednosti CSS-a je mogućnost zamjene izgleda tablice rasporedom blokova.
Neophodno je
Uređivač HTML koda
Instrukcije
Korak 1
Kreirajte prvi blok. U HTML obliku izgledat će poput div oznake s id-om 'block01'. Ovdje identifikator block01 ukazuje da su u CSS opisu sva svojstva ovog bloka navedena za selektor # block01.
Korak 2
Opišite blok u CSS-u. U CSS stilovima navedite ime identifikatora (# block01), a u kovrčavim zagradama opišite njegove parametre - širinu, pozicioniranje, pomak, boju pozadine itd. Na primjer, to može izgledati ovako: # block01 {width: 150px; visina: 150px; pozicija: apsolutna; gore: 0px; lijevo: 0px; boja pozadine: ružičasta}. Ovaj opis pretpostavlja da će okvir biti dugačak 150 i širok 150 piksela, bit će čvrsto postavljen u gornji lijevi kut dokumenta, a pozadina će biti obojena ružičastom bojom.
Korak 3
Dajte bloku relativno pozicioniranje. Ako u opisu CSS-a koristite ne apsolutno, već relativno pozicioniranje, tada možete smjestiti blokove ne krutim prislanjanjem na mrežu koordinata, već u odnosu na druge već postojeće blokove. Da biste to učinili, promijenite poziciju koda: absolute; gore: 0px; lijevo: 0px po položaju: relativno; vrh: 200px; lijevo: 100px.
Korak 4
Dajte bloku zaokruživanje. U CSS-u je za to odgovoran izraz border-radius. Dodajte sljedeći kod u svoj tabelu stilova: border-radius: 8px. Blok će sada imati zaobljene uglove. Ako želite zaokružiti samo neke uglove, opišite polumjer posebno za svaki od njih: border-radius: 8px 8px 0px 0px.
Korak 5
Udari blok. Da biste istaknuli obris bloka tankom linijom, dodajte sljedeći kôd u njegov CSS opis: border-top: 1px crtkana crna. Ova uputa znači da će granica bloka biti crna i debljine jednog piksela. U tom će se slučaju sama kontura prikazati kao isprekidana linija (isprekidana - isprekidana linija, isprekidana - tačke, puna - puna linija).
Korak 6
Postavite preostala svojstva bloka. Navedite u opisu CSS-a koji bi se font trebao koristiti za tekst unutar bloka, koja bi trebala biti veličina fonta, poravnanje i uvlačenje s ivica bloka. Ova svojstva su opisana u definicijama font-family, font-size, text-align i padding.
Korak 7
Svojstvo float možete koristiti za prilagođavanje toka jednog bloka preko drugog. Ako ga postavite na "lijevo", tada će se ostali elementi kretati oko bloka s lijeve strane, a "desno" - s desne strane. Ako ploveću vrijednost postavite na „none“, poravnanje bloka neće biti postavljeno. Svojstvo clear u CSS-u sprečava protok bloka udesno, ulijevo ili s obje strane, i poništava float izraz.
