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