CSS je kaskadni stil, koji je jezik za opisivanje izgleda web stranica. Jedna od glavnih prednosti CSS-a je mogućnost zamjene izgleda tablice rasporedom bloka.
Nužno je
Uređivač HTML koda
Upute
Korak 1
Stvorite prvi blok. U HTML obliku izgledat će poput div oznake s id-om 'block01'. Ovdje identifikator block01 označava da su u opisu CSS-a 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, moglo bi izgledati ovako: # block01 {width: 150px; visina: 150px; položaj: apsolutni; vrh: 0 piksela; 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.
3. korak
Dajte bloku relativno pozicioniranje. Ako u opisu CSS-a ne upotrebljavate apsolutno, već relativno pozicioniranje, tada blokove možete smjestiti ne krutim prislanjanjem na mrežu koordinata, već u odnosu na druge već postojeće blokove. Da biste to učinili, promijenite položaj koda: absolute; vrh: 0 piksela; lijevo: 0px po položaju: relativno; vrh: 200px; lijevo: 100 piksela.
4. korak
Dajte bloku zaokruživanje. U CSS-u je za to odgovoran izraz border-radius. Dodajte sljedeći kôd u svoju tablicu stilova: border-radius: 8px. Blok će sada imati zaobljene kutove. 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 crtom, 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, točkasta - točkice, puna - puna crta).
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 rubova bloka. Ta su svojstva opisana u definicijama obitelj fontova, veličina fonta, poravnanje teksta i dodavanje.
Korak 7
Svojstvo float možete koristiti za prilagodbu protoka 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 se postaviti. Svojstvo clear u CSS-u sprječava protok bloka udesno, ulijevo ili s obje strane i poništava float izraz.
