Kai tik pradėsite kurti tinklalapius naudodami HTML, pradėsite dirbti su dydžiu. Jei norite, kad jūsų svetainė atrodytų taip, kaip norite, kad atrodytumėte, greičiausiai sutinkate su dizainu, kurį sukūrėte jūs ar kitas dizaineris, norėsite pakeisti toje svetainėje esančio teksto dydį ir kitus puslapio elementus. Norėdami tai padaryti, galite pradėti ieškoti "dydžio" HTML žymos, tačiau greitai ją rasite trūkstama.
HTML dydžio žyma neegzistuoja HTML. Vietoj to, norėdami nustatyti savo šriftų, vaizdų ar išdėstymo dydį, turėtumėte naudoti kaskadinių stilių lakštus. Tiesą sakant, bet kokį vaizdinį pakeitimą, kurį turite padaryti svetainės tekstui ar kitam elementui, turėtų elgtis CSS! HTML yra tik struktūrai.
Artimiausia žyma HTML dydžio žyme yra senoji šrifto žyma, iš tikrųjų įtraukta dydžio atributas. Būkite įspėti, kad ši žyma nebetinkama dabartinėse HTML versijose ir ateityje jos negalės palaikyti naršyklių! Jūs nenorite naudoti šrifto žymelės savo HTML! Vietoj to, jūs turėtumėte išmokti CSS, kad būtų išmatuojami jūsų HTML elementai, ir atitinkamai supaprastintumėte tinklalapį.
Šrifto dydžiai
Šriftai, be abejo, yra lengviausias CSS dydžio elementas. Moreso, o ne tik šio teksto dydžio nustatymas, naudojant CSS, galite tiksliau nurodyti savo svetainės tipografiją . Galite nustatyti šrifto dydį, spalvą, korpusą, svorį, pagrindinį ir dar daugiau. Naudodami šrifto žymą galite nustatyti tik dydį, o tada tik skaičių, palyginti su numatytu šrifto dydžiu naršyklėje, kuris skiriasi kiekvienam klientui.
Norėdami nustatyti, kad jūsų pastraipa turi 12pt dydžio šriftą, naudokite šriftų dydžio stiliaus savybę:
h3 (font-size = 24px; }Šis stilius nustatys "headiing3" elementų šrifto dydį 24 pikselius. Galite pridėti tai prie išorinio stiliaus lapo, o visi jūsų svetainės H3s galės naudoti šį stilių.
Jei norite į savo tekstą įtraukti papildomų tipografinių stilių, galite įtraukti juos į šį CSS taisyklę:
h3 {font-size: 24px; spalva: # 000; šrifto svoris: normalus; }Tai ne tik nustatytų šrifto dydį H3s, bet ir juodą spalvą (tai yra šešiasdešimtį kodą iš # 000 reikšmių) ir nustatys svorį "normalus". Pagal numatytuosius nustatymus naršyklės pateikia 1-6 antraštes kaip paryškintuosius tekstus, todėl šis stilius pakeistų numatytuosius ir iš esmės "nesuspaustų" tekstą.
Vaizdo dydžiai
Vaizdai gali būti sudėtingi nustatyti dydžius, nes jūs iš tikrųjų galite naudoti naršyklę, kad pakeistumėte vaizdą. Žinoma, vaizdų dydžio keitimas su naršykle yra bloga idėja, nes dėl to puslapiai įkeliami lėčiau ir naršyklės dažnai blogai atlieka dydžio keitimą, todėl vaizdai atrodo blogai. Vietoj to, turėtumėte naudoti grafikos programinę įrangą, kad galėtumėte keisti atvaizdus, o tada savo tinklalapyje HTML rašykite jų faktinius dydžius.
Skirtingai nuo šriftų, vaizdai gali būti naudojami HTML arba CSS, norėdami nustatyti dydį. Jūs nustatote vaizdo pločio ir aukščio. Kai naudojate HTML, galite nustatyti tik vaizdo dydį taškais. Jei naudojate CSS, galite naudoti kitus matavimus, įskaitant colius, centimetrus ir procentus. Ši paskutinė reikšmė, procentais, yra labai naudinga, kai jūsų vaizdai turi būti sklandūs, kaip ir jautrioje svetainėje.
Norėdami nustatyti savo vaizdo dydį naudodami HTML, naudokite img žymos aukščio ir pločio atributus. Pvz., Šis vaizdas būtų 400x400 pikselių kvadratas:
height = "400" width = "400" alt = "image" />Norėdami nustatyti savo vaizdo dydį naudodami CSS, naudokite aukščio ir pločio stiliaus savybes. Štai tas pats vaizdas, naudojant dydį nustatant CSS:
style = "height: 400px; width: 400px;" alt = "image" />Maketo dydžiai
Dažniausiai išdėstytame dydyje yra plotis, o pirmas dalykas, kurį reikės nuspręsti, yra tai, ar naudoti fiksuotą pločio išdėstymą ar reaguojančią svetainę. Kitaip tariant, ar ketinate apibrėžti plotį kaip tikslų pikselių, colių ar taškų skaičių? Ar jūs ketinate nustatyti išdėstymo plotį, kad būtų lankstus naudojant ems ar procentus? Norėdami nustatyti išdėstymo dydį, naudokite pločio ir aukščio CSS ypatybes, kaip ir paveikslėlyje.
Fiksuotas plotis:
style = "width: 600px;">Skysčio plotis:
style = "width: 80%;">Kai nuspręsite savo išdėstymo pločius, turėtumėte nepamiršti skirtingų naršyklės pločių, kurias gali naudoti jūsų skaitytojai, ir skirtingus įrenginius, kuriuos jie taip pat naudos. Dėl šios priežasties šiandien yra geriausios praktikos standartas, pagal kurias galima pritaikyti jautrias svetaines , kurios gali pakeisti jų išdėstymą ir dydį pagal skirtingus įrenginius ir ekrano dydžius.