Heti kun aloitat verkkosivujen rakentamisen HTML: llä, alat käsitellä kokoa. Jotta sivustosi näyttäisi haluamallasi tavalla, joka todennäköisesti vastaa muotoilua, jonka sinä tai toinen suunnittelija on luonut, haluat muuttaa sivuston tekstin kokoa sekä muita sivun elementtejä. Voit tehdä tämän etsimällä HTML-kokoista tunnistetta, mutta sinun on nopeasti löydettävä se puuttuvasta.
HTML-kokoista tunnistetta ei ole HTML: ssä. Sen sijaan fonttien, kuvien tai ulkoasun määrittämiseksi sinun tulisi käyttää Cascading Style Sheets -työkaluja. Itse asiassa CSS: n on käsiteltävä mitä tahansa visuaalista muutosta, joka sinun on tehtävä sivuston tekstille tai muulle elementille. HTML on rakenteeltaan vain.
Lähin tagi HTML-kokoiselle tagille on vanha kirjasinmerkki, joka sisältää todellakin kokomääritteen. Huomaa, että tämä tunniste on vanhentunut nykyisissä HTML-versioissa, ja selaimet eivät ehkä tuota tulevaisuudessa! Et halua käyttää HTML-fonttitunnistetta! Sen sijaan sinun pitäisi oppia CSS: ää koostamaan HTML-elementtejäsi ja muotoilemaan verkkosivusi vastaavasti.
Fonttien koot
Fontit ovat kiistatta helpoin koko CSS: n kanssa. Haluan kuin vain koota tekstiä, CSS: llä voit olla täsmällisempi verkkosivustosi typografiasta . Voit määrittää fonttikoon, värin, kotelon, painon, johtavan ja paljon muuta. Kirjasintunnisteen avulla voit määrittää kokoa ja sitten vain numeroa suhteessa selaimen oletuskokoon, joka vaihtelee jokaiselle asiakkaalle.
Jos haluat asettaa kappaleesi fonttikokoa 12pt, käytä fonttikokoista tyyliominaisuutta:
h3 {font-size = 24px; }Tämä tyyli asettaisi headiing3-elementtien fonttikoko 24 pikseliä. Voit lisätä tämän ulkoiseen tyyliarkiin ja kaikki sivustosi H3: t käyttävät tätä tyyliä.
Jos haluat lisätä tekstiiniin lisää typografisia tyylejä, voit lisätä ne tähän CSS-sääntöön:
h3 {font-size: 24px; väri: # 000; fontti-paino: normaali; }Tämä ei vain asettanut fonttikokoa H3: lle, vaan se myös asetti värin mustaksi (mikä tarkoittaa 000: n hex-koodia) ja se asettaa painon "normaaliksi". Oletusarvon mukaan selaimet tekevät otsikot 1-6 lihavoituna, joten tämä tyyli ohittaa kyseisen oletusarvon ja olennaisesti "un-bold" tekstin.
Kuvan koot
Kuvat voivat olla hankalia määritellä kokoja, koska pystyt käyttämään selaimen kokoa. Tietokoneen selaimen kuvien koon muuttaminen on tietenkin huono ajatus, koska se aiheuttaa sivujen latautuvan hitaammin, ja selaimet tekevät usein huonosti koon, jolloin kuvat näyttävät huonolta. Sen sijaan sinun pitäisi käyttää grafiikkasovellusta kuvien kokoa muuttamiseen ja kirjoittamaan niiden todelliset kokot Web-sivusi HTML-muodossa.
Toisin kuin fontit, kuvat voivat käyttää HTML tai CSS määrittämään koon. Määrität kuvan leveyden ja korkeuden. Kun käytät HTML-koodia, voit määrittää vain kuvan koon pikseleinä. Jos käytät CSS: ää, voit käyttää muita mittauksia, kuten tuumaa, senttimetriä ja prosenttiosuuksia. Tämä viimeinen arvo, prosenttiosuudet, on erittäin hyödyllinen, kun kuvien täytyy olla nestemäisiä, kuten reagoivassa verkkosivustossa.
Voit määrittää kuvakoko HTML-koodilla käyttämällä img-tunnisteen korkeus- ja leveysominaisuuksia. Esimerkiksi tämä kuva olisi 400 x 400 pikseliä neliömetriä:
height = "400" width = "400" alt = "kuva" />Määritä kuvakoko CSS: llä käyttämällä korkeus- ja leveysmallin ominaisuuksia. Tässä on sama kuva, määritä koko CSS: llä:
tyyli = "korkeus: 400px; leveys: 400px;" alt = "kuva" />Asettelu koot
Yleisimmin määrittelemäsi koko on leveys, ja ensimmäinen asia, jonka sinun on päätettävä, on käyttääkö kiinteää leveyttä tai reagoivaa verkkosivustoa. Toisin sanoen aiotko määritellä leveyden tarkan määrän pikseleitä, tuumaa tai pisteitä? Vai aiotko asettaa asettelualtasi joustavaksi käyttämällä ems: ää tai prosenttiosuuksia? Asettelun koon määrittämiseksi käytät Leveys- ja Korkeus-CSS-ominaisuuksia aivan kuten kuvassa.
Kiinteä leveys:
style = "width: 600px;">Nesteen leveys:
style = "width: 80%;">Kun päätät layoutin leveydestä, kannattaa pitää mielessä eri selaimen leveydet, joita lukijat saattavat käyttää, sekä eri laitteita, joita he käyttävätkin. Siksi vastaavanlaiset verkkosivustot , jotka voivat muuttaa asettelujaan ja eri laitteiden ja näytön koon perusteella koon, ovat nykyisin parhaita käytäntöjä.