Amint elkezdi a weblapokat HTML-vel, akkor elkezdi a méretezést. Annak érdekében, hogy a webhely úgy nézzen ki, ahogyan azt szeretné, hogy megnézze, valószínűleg egy olyan tervnek felel meg, amelyet Ön vagy egy másik tervező készített, meg szeretné változtatni a webhelyen lévő szöveg méretét, valamint az oldalon található egyéb elemeket. Ehhez elkezdheti keresni a HTML "méret" címkét, de gyorsan megtalálja azt.
A HTML-méretcímke nem létezik a HTML-ben. Ehelyett a betűtípusok, képek vagy elrendezés méretének beállításához Cascading Style Sheets-et kell használnia. Valójában minden olyan vizuális változást, amelyet meg kell tenni a webhely szövegéhez vagy más eleméhez, a CSS-nek kell kezelnie! A HTML csak a szerkezetre vonatkozik.
A HTML-méretcímke legközelebbi címkéje a régi betűtípus-címke, amely valójában tartalmaz egy méret attribútumot. Figyelj arra, hogy ez a címke elavult a jelenlegi HTML-verziókban, és a böngészők nem támogatják a jövőben! Nem szeretné használni a betűtípus-tagot a HTML-ben! Ehelyett meg kell tanulnod a CSS-t, hogy méretezze a HTML-elemeket, és ennek megfelelően alakítsa ki a weboldalt.
Betűméret
A betűtípusok vitathatatlanul a legegyszerűbb méretezés a CSS-vel. Többet, mint a szöveg méretezését, a CSS-sel pontosabban meg tudod határozni a webhelyed tipográfiáját . Megadhatja a betűméretet, a színt, a burkolatot, a súlyt, a vezetőséget és egyebeket. A betűcímke segítségével csak a méret meghatározható, majd csak a böngésző alapértelmezett betűméretéhez viszonyított szám, amely minden ügyfél számára eltérő.
Ha a bekezdést a 12pt betűméretnél szeretné beállítani, használja a betűméretstílus tulajdonságát:
h3 {font-size = 24px; }Ez a stílus 24 pixeles headiing3 elemek betűméretét állította be. Ezt hozzáadhatja egy külső stíluslaphoz, és az összes webhely H3-jai ezt a stílust használják.
Ha további tipográfiai stílusokat kíván hozzáadni a szövegéhez, felveheti azokat erre a CSS-szabályra:
h3 {betűméret: 24px; szín: # 000; font-weight: normal; }Ez nemcsak a H3-as betűméretét állíthatja be, hanem a színt is fekete színűvé teszi (ami a 000-es hex kódja), és a súlyt "normális" értékre állítja. Alapértelmezés szerint a böngészők félkövér formátumúvá teszik az 1-6. Sorokat, így ez a stílus felülírja az alapértelmezett és lényegében "félkövér" szöveget.
Képméretek
A képek bonyolultabbak lehetnek a méretek meghatározásához, mert valójában a böngészőt a kép átméretezéséhez használhatja. Természetesen a képek átméretezése a böngészővel rossz ötlet, mert az oldalak lassabban töltődnek be, és a böngészők gyakran rossz helyre teszik a méretezést, így a képek rosszul néznek ki. Ehelyett grafikus szoftvert kell használnia a képek átméretezéséhez , majd a tényleges méreteket a weblap HTML-jén.
A betűkészletektől eltérően a képek a HTML vagy a CSS használatával határozhatják meg a méretet. Meghatározza a kép és a magasság szélességét. A HTML használatakor csak a képpont képpontokban határozható meg. Ha CSS-t használ, akkor más méréseket is használhat, beleértve a hüvelyket, centimétereket és százalékokat. Ez az utolsó érték, százalékok, nagyon hasznos, ha a képeknek folyadéknak kell lenniük, mint egy érzékeny weboldalon.
A képméret HTML-kóddal történő meghatározásához használja az img-címke magasságát és szélességét. Ez a kép például 400x400 képpontos négyzet lehet:
height = "400" width = "400" alt = "kép" />A képméret CSS segítségével történő meghatározásához használja a magasság és a szélesség stílus tulajdonságait. Ugyanaz a kép, a CSS használatával határozza meg a méretet:
style = "magasság: 400px; szélesség: 400px;" alt = "kép" />Elrendezési méretek
Az elrendezésben definiált leggyakoribb méret a szélesség, és az első dolog, amit el kell döntenie, hogy egy fix szélességű elrendezést vagy egy válaszadó webhelyet használjon. Más szavakkal fogalmazza meg a szélességet pontos képpontos, hüvelykes vagy pontértékekként? Vagy az elrendezés szélességét az ems vagy a százalékos értékek alapján rugalmasan kívánja beállítani? Az elrendezés méretének meghatározásához a szélesség és a magasság CSS tulajdonságait használja, ahogyan egy képen.
Rögzített szélesség:
style = "width: 600px;">Folyadékszélesség:
style = "szélesség: 80%;">Amikor eldönti, milyen szélességű az elrendezésed, ne felejtse el a különböző böngészőszélességeket, amelyeket az olvasók használhatnak, és azokat a különböző eszközöket, amelyeket szintén használni fognak. Éppen ezért a választható webhelyek , amelyek megváltoztathatják elrendezésüket és méretüket különböző eszközökön és képernyőméreteken alapulva, ma a legjobb gyakorlat.