Akonáhle začnete budovať webové stránky s HTML, začnete pracovať s veľkosťou. Ak chcete, aby vaše stránky vyzerali tak, ako by ste chceli vyzerajúci, pravdepodobne zodpovedajúci dizajnu, ktorý vy alebo iný dizajnér vytvorili, budete chcieť zmeniť veľkosť textu na danom webe, ako aj ďalšie prvky na stránke. Za týmto účelom môžete začať hľadať značku HTML "veľkosť", ale rýchlo ju zistíte, že chýba.
Značka veľkosti HTML v HTML neexistuje. Namiesto toho, ak chcete nastaviť veľkosť písma, obrázkov alebo rozloženie, mali by ste používať kaskádové štýly. V skutočnosti každá vizuálna zmena, ktorú potrebujete urobiť pre text stránky alebo iný prvok, by mala spravovať CSS! HTML je iba pre štruktúru.
Najbližšia značka na značku veľkosti HTML je stará značka písma, ktorá naozaj obsahuje atribút veľkosti. Upozorňujeme, že táto značka bola zastaraná v aktuálnych verziách HTML a v budúcnosti ju nemusia podporovať prehliadače. Nechcete používať značku písma vo vašom HTML! Namiesto toho by ste sa mali naučiť CSS, aby ste rozmerovali vaše prvky HTML a prispôsobili vašu webovú stránku.
Veľkosti písma
Fonty sú pravdepodobne najjednoduchšie vec na veľkosti pomocou CSS. Moreso, ako len veľkosť tohto textu, pomocou CSS môžete byť konkrétnejšie o svojej webovej typografii . Môžete definovať veľkosť písma, farbu, obal, hmotnosť, vodítko a ďalšie. Pomocou značky písma môžete definovať iba veľkosť a potom iba ako číslo vzhľadom na predvolenú veľkosť písma prehliadača, ktorá sa pre každého zákazníka líši.
Ak chcete nastaviť odsek tak, aby mal veľkosť písma 12pt, použite vlastnosť štýlu veľkosti písma:
h3 {font-size = 24px; }Tento štýl by nastavil veľkosť písma elementov headiing3 24 pixelov. Môžete to pridať do externého štýlu a všetky štýly H3 používajú tento štýl.
Ak chcete do textu pridať ďalšie typy štýlov, môžete ich pridať do tohto pravidla CSS:
h3 {veľkosť písma: 24px; farba: # 000; font-weight: normálne; }Tým by sa nielen nastavila veľkosť písma pre H3, ale nastavila by sa aj farba na čiernu (čo znamená hexadecimálny kód # 000) a nastavila by sa váha na "normálnu". V predvolenom nastavení prehliadače vykresľujú nadpisy 1-6 ako odvážny text, takže tento štýl by prepisoval tento predvolený a v podstate "nepodložený" text.
Veľkosti obrázkov
Obrázky môžu byť zložité na definovanie veľkostí, pretože v skutočnosti môžete použiť prehliadač na zmenu veľkosti obrázka. Samozrejme, zmena veľkosti obrázkov v prehliadači je zlý nápad, pretože spôsobuje, že stránky sa načítavajú pomalšie a prehliadače často robia zlé zmeny veľkosti, čo spôsobuje, že obrázky vyzerajú zle. Namiesto toho by ste mali používať grafický softvér na zmenu veľkosti obrázkov a potom zapísať ich skutočné veľkosti do HTML webovej stránky.
Na rozdiel od písma, obrázky môžu na určenie veľkosti použiť buď HTML alebo CSS. Definujete šírku obrazu a výšku. Keď používate kód HTML, môžete definovať veľkosť obrázka len v pixeloch. Ak používate CSS, môžete použiť iné merania vrátane centimetrov a percent. Táto posledná hodnota, v percentách, je veľmi užitočná, keď vaše obrázky musia byť plynulé, ako na odpovedajúcom webe.
Ak chcete definovať veľkosť obrázka pomocou kódu HTML, použite atribúty výšky a šírky značky img. Tento obrázok by napríklad mal 400x400 pixlov štvorca:
výška = "400" šírka = "400" alt = "obrázok" />Ak chcete definovať veľkosť obrázka pomocou funkcie CSS, použite vlastnosti štýlu výšky a šírky. Tu je ten istý obrázok, pomocou CSS definujete veľkosť:
style = "výška: 400px; šírka: 400px;" alt = "obrázok" />Veľkosti rozloženia
Najčastejšou veľkosťou, ktorú definujete v rozložení, je šírka a prvá vec, ktorú budete musieť rozhodnúť, je, či chcete použiť rozloženie s pevnou šírkou alebo citlivá webová stránka. Inými slovami, definujete šírku ako presný počet pixelov, palcov alebo bodov? Alebo nastavíte rozloženie šírky tak, aby bolo flexibilné pomocou ems alebo percentuálnych hodnôt? Ak chcete definovať veľkosť rozloženia, používate vlastnosti šírky a výšky CSS, rovnako ako v prípade obrázka.
Pevná šírka:
style = "width: 600px;">Šírka kvapaliny:
style = "šírka: 80%;">Keď rozhodujete o šírkach rozloženia, mali by ste mať na pamäti rôzne šírky prehliadača, ktoré používajú čitatelia a rôzne zariadenia, ktoré budú používať. To je dôvodom, prečo sú dnes reagujúce webové stránky , ktoré môžu zmeniť rozloženie a dimenzovanie založené na rôznych zariadeniach a veľkostiach obrazovky.