Ülevaade HTML-i stiili atribuudist
HTML-kood vajab veebilehtede stiiliatribuutide renderdamiseks veebibrauserites nagu Chrome, FireFox, IE, et neid saaks kuvada nii, nagu need on ette nähtud. HTML-sildid võivad sisaldada mitmesugust teavet ja stiiliatribuut kontrollib HTML-i plokkides sisalduva teabe välimust, kasutades tekstisisest stiili.
Selles artiklis õpime lähemalt HTML-i stiili atribuudist, mis pole midagi muud kui reeglistik, mis määratleb, kuidas leht veebibrauseris renderdatakse.
HTML-i stiili atribuudi loend
Siin on loetelu kõigist stiiliomadustest, mida saab kasutada HTML-elementide kujundamise mõjutamiseks ja juhtimiseks, koos praktilise näitega:
1. Taustavärv
Selle CSS-i atribuudiga saame määrata HTML-i taustaelemendi värvid nagu,
jne.
Näide
My background is blue
Väljund:
2. Värv
HTML-elemendis sisalduva teksti fondi värvi saab juhtida, määrates selle värvi atribuudiks õige värvinime või HEX-koodi või RGB-koodi.
Näide
My font color is blue
Väljund:
3. Äärise värv
Saame seada mis tahes HTML-i elemendi äärise värvi, kui soovime sellele äärise lisada.
Näide
Mu äär on punane
Väljund:
Nagu ülaltoodud koodist näete, aktsepteerib ääriseomadus 3 omadust järgmises järjekorras: “Äärise laiusega äärisekujuline äärisvärv”.
4. Taustpilt
Samuti saame pildi taustaks määrata, kasutades taustpildi omadust järgmiselt:
Näide:
Väljund:
5. Taust - korrake
Nagu näete ülaltoodud näites, kui pilt seatakse taustaks, kasutades taustapildi atribuuti; vaikimisi kordab see pilti nii horisontaalselt kui ka vertikaalselt. Mõnda pilti võib siiski olla vaja korrata kas vertikaalselt või horisontaalselt või neid ei pruugi olla vaja korrata. Seda käitumist saab juhtida, seadistades soovitud väärtuse taustkordamise omaduse järgi ja seda saab kasutada ainult taustpildi kasutamisel. Muidu ei lisa see stiiliväärtust, kui seda kasutatakse iseseisva atribuudina.
Väärtust korrata x kasutatakse pildi korramiseks ainult horisontaalselt.
Väärtust korrata-y kasutatakse pildi korramiseks ainult vertikaalselt.
Väärtust “mitte korda” kasutatakse taustpildi igasuguse korduse peatamiseks.
Teeme ülaltoodud näite muutmist taustpildi parandamiseks.
Näide
Väljund:
Saame võrrelda ülaltoodud näiteid ja mõista, et taustpildi abil saame lisada pildi taustana ja taustakordamise abil saame kontrollida taustpildi kordust.
6. Taust-positsioon
Selle omaduse abil saame määratleda taustpildi asukoha.
Näide
Väljund:
7. Veerised
CSS pakub meile atribuute veeriste määramiseks HTML-i elemendi kõigil neljal küljel või saame veerised lisada elemendi kindlale küljele.
Kui veerise ülaosaga saab lisada veerise elemendi ülaosale, veerg paremale lisab veerise elemendi paremale, veerg vasakule lisab veerise elemendist vasakule ja veerise alumine lisab veerise elemendi põhja. Selle 4 omaduse asemel võime kasutada ka tagavara omadust ja seada selle väärtused vastavalt meie nõudele.
Näide
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. polster
Polsterdusomadus määratleb elemendi sisu ja selle piiride vahelise ruumi. Elemendi sisu üla-, ala-, vasak- või parempoolse osa polstri seadmiseks saame kasutada polsterdusomadusi või individuaalseid polsterdusomadusi, näiteks polsterdus ülaosas, polsterdus alt, polsterdus vasakul, polsterdus paremal.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Kõrgus ja laius
Kõrgus ja laius on kõige põhilisemad CSS-i atribuudid, mida kasutatakse mis tahes HTML-i elemendi kõrguse ja laiuse määratlemiseks. Neid saab seada piksli väärtusele (nt 200 pikslit) või protsendimäärale, näiteks 10%, 20% jne.
10. Teksti joondamine
Seda omadust kasutatakse horisontaalse suuna määramiseks, milles me tahaksime elemendi teksti joondada. Väärtuse saab seada keskele, paremale või vasakule.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Teksti kaunistamine
Teksti kaunistamise omadust saab kasutada selliste dekoratsioonide seadmiseks, nagu HTML-is teksti allajoonimine, läbi joon või teksti ülaosa.
Näide:
See on alla joonitud
Väljund:
12. Tähtede vahe
Nagu nimigi ütleb, kasutatakse seda omadust sõna tähtede / tähemärkide vahelise vahe määratlemiseks. Tähtede vahekauguse suurendamiseks või vähendamiseks võib sellele omistada positiivse või negatiivse piksli väärtuse.
Näide:
Minu sõnad on kattunud
Väljund:
13. Joonekõrgus
Joone kõrgus määratleb vertikaaljoonte vahelise kauguse. Nagu tähtede vahe, saab ka rea kõrguse seada positiivseks või negatiivseks piksli väärtuseks. Vaatame paremini allpool toodud näidet, et seda paremini mõista:
Näide:
Sellel lõigul on väike joonekõrgus.
Sellel lõigul on väike joonekõrgus.
Väljund:
14. Teksti suund
Mõnikord peaks veebilehe sisu muutma, kui veebilehe sisu pole inglise keeles, vaid mõnes muus keeles, näiteks araabia keeles, mis järgib parempoolset vasakpoolsust. Sellistel juhtudel võime teksti suuna muuta.
Näide:
Mul on parem vasakult
Väljund:
15. Tekstivari
See omadus lisab teksti varju.
Näide:
Mul on hall vari
Väljund:
16. Fondide perekond
Saame määratleda elemendi teksti font klassi. Saame määratleda mitu komaga eraldatud fondiperekonda varusüsteemina, et käidelda stsenaariume, kus eelistatud font-klassi ei saa laadida.
- Fondi stiil: fondi stiili atribuudiga saame teksti lisada kaldkirja või kaldu.
Näide:
See on kaldus stiil.
Väljund:
- Fondi kaal: see omadus määratleb fondi kaalu.
Näide:
See on julge lõik
Väljund:
Meie UL- ja UX-kujundusega ehitusplokkide kohal esitletud stiiliatribuudid. Need arenevad edasi, kui võetakse kasutusele uued CSS-versioonid.
Soovitatavad artiklid
See on juhend HTML-i atribuudi kohta. Siin käsitleme kõigi stiililiste omaduste loetelu, mida saab kasutada praktiliste näidete abil HTML-i elementide kujunduse mõjutamiseks ja kontrollimiseks. Võite lisateabe saamiseks vaadata ka järgmisi artikleid -
- HTML-fontide stiilid
- HTML-i loendistiilid
- Põhilised HTML-sildid
- HTML-i eelised
- HTML-raamid
- JavaScriptis tagurpidi
- HTML-plokid
- Seadistage HTML-is taustavärv näitega