Katsaus HTML-tyyliominaisuuteen
HTML-koodi vaatii verkkosivun tyyliominaisuuden, joka esitetään selaimissa, kuten Chrome, FireFox, IE, jotta ne voidaan näyttää sellaisena kuin ne on tarkoitettu. HTML-tunnisteet voivat sisältää erilaisia tietoja ja tyyliominaisuus hallitsee HTML-lohkojen sisältämien tietojen ulkonäköä inline-tyylillä.
Tässä artikkelissa opimme lisää HTML-tyylimääritteestä, joka ei ole muuta kuin sääntöjen joukko, joka määrittelee, miten sivu näytetään selaimessa.
Luettelo HTML-tyylimääritteestä
Tässä on luettelo kaikista tyyliominaisuuksista, joita voidaan käyttää HTML-elementtien suunnitteluun vaikuttamiseen ja hallintaan, sekä käytännöllinen esimerkki:
1. Taustaväri
Tällä CSS-ominaisuudella voimme asettaa taustavärin mille tahansa HTML-elementille, kuten,
jne.
esimerkki
My background is blue
lähtö:
2. Väri
HTML-elementin tekstin kirjasinväriä voidaan hallita asettamalla sen värimääritys oikealle värinimelle tai HEX-koodille tai RGB-koodille.
esimerkki
My font color is blue
lähtö:
3. Reunuksen väri
Voimme asettaa minkä tahansa HTML-elementin reunan värin, jos haluamme lisätä reunan siihen.
esimerkki
Rajani on punainen
lähtö:
Kuten yllä olevasta koodista näet, reunusominaisuus hyväksyy 3 ominaisuutta seuraavassa järjestyksessä: ”Reunuksen leveys reunatyyppinen reunusväri”.
4. Taustakuva
Voimme myös asettaa kuvan taustaksi käyttämällä taustakuvaominaisuutta seuraavasti:
Esimerkki:
lähtö:
5. Tausta-toista
Kuten näet yllä olevasta esimerkistä, kun kuva asetetaan taustaksi taustakuvaominaisuuden avulla; se toistaa kuvan oletusarvoisesti sekä vaaka- että pystysuunnassa. Jotkin kuvat voidaan kuitenkin joutua toistamaan joko pystysuoraan tai vaakasuoraan tai niitä ei välttämättä tarvitse toistaa. Tätä käyttäytymistä voidaan hallita asettamalla haluttu arvo taustatoiston ominaisuuteen nähden, ja sitä voidaan käyttää vain, kun taustakuvaa käytetään. Muutoin se ei lisää muotoiluarvoa käytettäessä itsenäisenä ominaisuutena.
Arvon ”uusinta-x” avulla kuva voidaan toistaa vain vaakasuunnassa.
Arvolla ”uusinta-y” käytetään kuvaa toistamaan vain pystysuunnassa.
Arvoa "ei toista" käytetään lopettamaan kaikenlainen taustakuvan toisto.
Muutetaan yllä olevaa esimerkkiä taustakuvan parantamiseksi.
esimerkki
lähtö:
Voimme verrata yllä olevia esimerkkejä ja ymmärtää, että taustakuvan avulla voimme lisätä kuvan taustaksi ja taustatoistamalla hallita taustakuvan toistoa.
6. Tausta-asema
Tämän ominaisuuden avulla voimme määritellä taustakuvan sijainnin.
esimerkki
lähtö:
7. Marginaalit
CSS tarjoaa meille ominaisuuksia asettaa marginaalit HTML-elementin kaikille neljälle puolelle tai voisimme lisätä marginaalit elementin tiettyyn puoleen.
Kun marginaali voi lisätä marginaalin elementin yläosaan, marginaali-oikea lisää marginaalin elementin oikealle, marginaali-vasen lisää marginaalin elementin vasemmalle ja marginaali-alaosa lisää marginaalin elementin pohjaan. Näiden 4 ominaisuuden sijasta voimme käyttää myös marginaaliominaisuutta ja asettaa sen arvot vaatimuksemme mukaisesti.
esimerkki
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Täyte
Pehmustusominaisuus määrittelee elementin sisällön ja sen rajojen välisen tilan. Voimme käyttää ”pehmuste” -ominaisuutta tai yksittäisiä pehmusteominaisuuksia, kuten padding-top, padding-bottom, padding-left, padding-right asettaaksesi pehmusteen elementin sisällön ylä-, ala-, vasemmalle tai oikealle.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Korkeus ja leveys
Korkeus ja leveys ovat CSS: n perusominaisuuksia, joita käytetään minkä tahansa HTML-elementin korkeuden ja leveyden määrittelemiseen. Ne voidaan asettaa joko pikseliarvoksi, kuten 200 kuvapistettä, tai prosenttiosuudeksi, kuten 10%, 20% jne.
10. Tekstin kohdistaminen
Tätä ominaisuutta käytetään asettamaan vaakasuunta, johon haluaisimme kohdistaa elementin tekstin. Arvo voidaan asettaa keskustaan, oikealle tai vasemmalle.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Tekstikoriste
Tekstikoriste-ominaisuutta voidaan käyttää HTML-muotoisten koristeiden asettamiseen, kuten alleviivaus, rivinvaihto tai yliviivaus tekstin yli.
Esimerkki:
Tämä on alleviivattu
lähtö:
12. Kirjeväli
Kuten nimestä voi päätellä, tätä ominaisuutta käytetään määrittämään sanan kirjainten / merkkien välinen etäisyys. Sille voidaan osoittaa positiivinen tai negatiivinen pikseliarvo kirjainten välisen etäisyyden lisäämiseksi tai vähentämiseksi.
Esimerkki:
Sanani ovat päällekkäin
lähtö:
13. Line-korkeus
Linjan korkeus määrittelee pystysuoran viivan välisen etäisyyden. Kuten kirjainväli, myös rivikorkeus voidaan asettaa positiiviseksi tai negatiiviseksi pikseliarvoksi. Tarkastellaan alla olevaa esimerkkiä ymmärtääksesi paremmin:
Esimerkki:
Tässä kappaleessa on pieni viivankorkeus.
Tässä kappaleessa on pieni viivankorkeus.
lähtö:
14. Tekstin suunta
Joskus jos verkkosivun sisältö ei ole englantia, mutta jollain muulla kielellä, kuten arabia, joka seuraa oikeutta vasemmalle -käytäntöön, meidän on muutettava tekstin suunta. Tällaisissa tapauksissa voimme kääntää tekstin suunnan.
Esimerkki:
Olen oikealta vasemmalle
lähtö:
15. Tekstin varjo
Tämä ominaisuus lisää varjon tekstiin.
Esimerkki:
Minulla on harmaa varjo
lähtö:
16. Fonttiperhe
Voimme määrittää elementin fonttiluokan. Voimme määritellä useita pilkuilla erotettuja fonttiperheitä varajärjestelmänä sellaisten skenaarioiden käsittelemiseksi, joissa suositeltua fonttiluokkaa ei voi ladata.
- Fonttityyli: Fonttityylisillä ominaisuuksilla voimme lisätä tekstiin kursivoidun tai vinovaikutuksen.
Esimerkki:
Tämä on vino tyyli.
lähtö:
- Fontin paino: Tämä ominaisuus määrittää fontin painon.
Esimerkki:
Tämä on lihavoitu kohta
Tulos:
Tyyli-ominaisuudet esitellään rakennuspalikoidemme yläpuolella UI- ja UX-suunnittelulla. Niiden kehitys jatkuu, kun CSS: n uudet versiot otetaan käyttöön.
Suositellut artikkelit
Tämä on opas HTML-tyylimääritteeseen. Tässä keskustellaan luettelosta kaikista tyyliominaisuuksista, joita voidaan käyttää HTML-elementtien suunnitteluun vaikuttamiseen ja hallintaan käytännön esimerkkien avulla. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -
- HTML-fonttityylit
- HTML-luettelotyylit
- Perus HTML-tunnisteet
- HTML: n edut
- HTML-kehykset
- Käännä JavaScript
- HTML-esteet
- Aseta taustaväri HTML-muodossa esimerkillä