Веднаш штом ќе почнат да градат веб-страници со HTML, ќе почнете да работите со големината. За да го направите вашиот сајт да изгледа како сакате да изгледа, најверојатно ќе одговара на дизајнот што сте го создале или кој друг дизајнер го создаде, ќе сакате да ја смените големината на текстот на тоа место, како и други елементи на страната. За да го направите ова, може да почнете да барате ознака "големина" на HTML, но брзо ќе ја пронајдете недостасува.
HTML таг не постои во HTML. Наместо тоа, за да ја поставите големината на вашите фонтови, слики или распоред треба да ги користите каскадни стилови. Всушност, секоја визуелна промена што треба да ја направите до текстот на некој сајт или друг елемент треба да биде управувана од CSS! HTML е само за структурата.
Најблиската ознака за HTML таг е старата ознака за фонт, која навистина вклучува атрибут на големина. Бидете предупредени дека оваа ознака е застарена во тековните верзии на HTML и во иднина може да не бидат поддржани од прелистувачи! Вие не сакате да ја користите ознаката за фонт во вашиот HTML! Наместо тоа, треба да научите CSS за да ги измените вашите HTML елементи и соодветно да ја напишете вашата веб страница.
Големини на фонт
Фонтови се веројатно најлесните за големина со CSS. Moreso отколку само големината на тој текст, со CSS можете да бидете поконкретни за вашата веб-страница типографија . Можете да ја дефинирате големината на фонтот, бојата, куќиштето, тежината, водечките и многу повеќе. Со ознаката за фонт, можете само да ја дефинирате големината, а потоа само како број во однос на големината на фонтот на прелистувачот што се разликува за секој клиент.
За да го поставите вашиот став да има големината на фонтот од 12pt, користете го својството на стилот на големина на фонт:
h3 {font-size = 24px; }Овој стил ќе ја постави големината на фонтот на headiing3 елементи 24 пиксели. Можете да го додадете ова во надворешен стилски лист и сите H3-и на вашиот сајт ќе го искористат овој стил.
Ако сакате да додадете дополнителни типографски стилови во вашиот текст, можете да ги додадете на ова правило за CSS:
h3 {font-size: 24px; боја: # 000; фонт-тежина: нормално; }Ова не само што би ја наместило големината на фонтот за H3, туку исто така ќе ја намести бојата на црно (што е она што шексот кодот од # 000 значи) и ќе ја постави тежината на "нормална". По дифолт, прелистувачите ги ставаат насловите 1-6 како задебелен текст, па овој стил ќе го пребрише тој стандарден и суштински "не-задебелен" текст.
Големини на слики
Сликите може да бидат незгодни за да се дефинираат големини затоа што всушност можете да го користите прелистувачот за да ја смените големината на сликата. Се разбира, промена на големината на сликите со прелистувачот е лоша идеја затоа што страните страници полека се вчитуваат и прелистувачите често прават лоша работа за промена на големината, поради што сликите изгледаат лошо. Наместо тоа, треба да користите графички софтвер за промена на големината на сликите и потоа да ги напишете нивните вистински големини во HTML својата веб-страница.
За разлика од фонтовите, сликите може да користат или HTML или CSS за да ја дефинираат големината. Ја дефинирате ширината на сликата и висината. Кога користите HTML, можете да ја дефинирате само големината на сликата во пиксели. Ако користите CSS, можете да користите други мерења, вклучувајќи инчи, сантиметри и проценти. Оваа последна вредност, проценти, е многу корисна кога вашите слики треба да бидат течности, како на веб-страница што реагира на одзив.
За да ја дефинирате големината на сликата користејќи HTML, користете атрибути на висина и ширина на ознаката img. На пример, оваа слика ќе биде квадратна 400x400 пиксели:
height = "400" width = "400" alt = "image" />За да ја дефинирате вашата големина на сликата користејќи CSS, користете својства на висина и ширина. Еве една иста слика, користејќи CSS за да ја дефинирате големината:
style = "height: 400px; width: 400px;" alt = "слика" />Распоред големини
Најчестата големина што ја дефинирате во изгледот е ширината, и првото нешто што ќе треба да одлучите е дали да користите распоред со фиксна ширина или одговорен веб-сајт. Со други зборови, дали ќе ја дефинирате ширината како точен број пиксели, инчи или точки? Или ќе ја поставите ширината на распоредот да биде флексибилна користејќи ems или проценти? За да ја дефинирате големината на вашиот изглед, користете својства на CSS ширина и висина исто како што би биле во сликата.
Фиксна ширина:
style = "width: 600px;">Ширина на течност:
стил = "ширина: 80%;">Кога одлучувате за ширината на вашиот распоред, треба да ги имате предвид различните ширини на прелистувачот што може да ги користат вашите читатели и различните уреди што ќе ги користат. Ова е причината зошто одговораните веб-страници , кои можат да го сменат нивниот распоред и големина врз основа на различни уреди и големината на екранот, денес се стандард за најдобра практика.