Imediat ce începeți să construiți pagini web cu HTML, veți începe să lucrați cu dimensiunea. Pentru a face ca site-ul dvs. să arate așa cum doriți, probabil că se potrivește cu un design pe care tu sau un alt designer l-ați creat, veți dori să modificați mărimea textului de pe acel site, precum și alte elemente de pe pagină. Pentru a face acest lucru, puteți începe să căutați o etichetă "dimensiune" HTML, dar veți găsi rapid că lipsește.
Eticheta de mărime HTML nu există în HTML. În schimb, pentru a seta dimensiunea fonturilor, a imaginilor sau a aspectului, ar trebui să utilizați foi de stil cascadă. De fapt, orice schimbare vizuală pe care trebuie să o faceți pentru textul unui site sau alt element ar trebui să fie tratată de CSS! HTML este doar pentru structură.
Cel mai apropiat etichetă pentru o etichetă de dimensiune HTML este vechea etichetă de font, care într-adevăr include un atribut de dimensiune. Fiți avertizat că această etichetă a fost depreciată în versiunile curente de HTML și este posibil să nu fie acceptată de browsere în viitor! Nu doriți să utilizați eticheta de font în HTML! În schimb, ar trebui să înveți CSS pentru a mări elementele HTML și pentru a-ți personaliza pagina web în consecință.
Dimensiuni font
Fonturile sunt, fără îndoială, cel mai simplu lucru de mărime cu CSS. Moreso decât dimensiunea acestui text, cu CSS, puteți fi mai specific în ceea ce privește tipografia site - ului dvs. web . Puteți defini dimensiunea fontului, culoarea, carcasa, greutatea, culoarea și multe altele. Cu eticheta fontului, puteți defini numai dimensiunea și apoi numai ca număr în raport cu dimensiunea implicită a fontului browserului, care diferă pentru fiecare client.
Pentru a seta paragraful dvs. să aibă dimensiunea fontului de 12pt, utilizați proprietatea stilului mărimea fontului:
h3 {font-size = 24px; }Acest stil va seta dimensiunea fontului elementelor headiing3 24 pixeli. Puteți adăuga acest lucru la o foaie de stil externă și toate paginile H3 ale site-ului dvs. ar folosi acest stil.
Dacă doriți să adăugați și alte stiluri tipografice la textul dvs., le puteți adăuga în această regulă CSS:
h3 {font-size: 24px; culoare: # 000; font-weight: normal; }Acest lucru nu ar determina numai dimensiunea fontului pentru H3, ci și setarea culorii la negru (ceea ce înseamnă codul hex din # 000) și ar stabili greutatea la "normal". În mod prestabilit, browserele fac ca titlurile 1-6 să fie sub formă de caractere îngroșate, astfel încât acest stil să suprascrie textul implicit și, în esență, "fără bold".
Dimensiuni imagine
Imaginile pot fi dificil de definit dimensiunile deoarece puteți utiliza browserul pentru a redimensiona imaginea. Desigur, redimensionarea imaginilor cu browserul este o idee proastă deoarece provoacă încărcarea mai lentă a paginilor, iar browserele fac deseori o redimensionare a imaginilor, făcând imaginile să pară rău. În schimb, ar trebui să utilizați software-ul grafic pentru a redimensiona imaginile și apoi să le scrieți dimensiunile reale în HTML-ul paginii Web.
Spre deosebire de fonturi, imaginile pot utiliza fie HTML, fie CSS pentru a defini dimensiunea. Definiți lățimea imaginii și înălțimea acesteia. Când utilizați HTML, puteți defini doar dimensiunea imaginii în pixeli. Dacă utilizați CSS, puteți utiliza alte măsurători, inclusiv centimetri, centimetri și procente. Această ultimă valoare, procente, este foarte utilă atunci când imaginile dvs. trebuie să fie fluide, ca într-un site web receptiv.
Pentru a defini dimensiunea imaginii utilizând HTML, utilizați atributele de înălțime și lățime ale etichetei img. De exemplu, această imagine ar fi de 400x400 pixeli pătrați:
înălțime = "400" width = "400" alt = "imagine" />Pentru a defini dimensiunea imaginii utilizând CSS, utilizați proprietățile stilului înălțime și lățime. Iată aceeași imagine, folosind CSS pentru a defini dimensiunea:
style = "height: 400px; width: 400px;" alt = "imagine" />Dimensiunile layoutului
Dimensiunea cea mai obișnuită pe care o definiți într-un aspect este lățimea și primul lucru pe care va trebui să-l decideți este dacă să utilizați un aspect cu lățime fixă sau un site web receptiv. Cu alte cuvinte, veți defini lățimea ca număr exact de pixeli, inci sau puncte? Sau aveți de gând să setați lățimea de aspect pentru a fi flexibile folosind ems sau procente? Pentru a defini dimensiunea aspectului dvs., utilizați proprietăți CSS de lățime și înălțime la fel ca în imagine.
Lățime fixă:
style = "width: 600px;">Lățimea lichidului:
style = "width: 80%;">Când decideți cu privire la lățimea aspectului dvs., trebuie să țineți cont de lățimile browserului diferite pe care le pot utiliza cititorii dvs. și de dispozitivele diferite pe care le vor utiliza. Acesta este motivul pentru care site-urile web responsabile , care își pot schimba aspectul și dimensiunea bazate pe diferite dispozitive și dimensiuni ale ecranului, reprezintă astăzi cel mai bun standard de practică.