Как только вы начнете создавать веб-страницы с HTML, вы начнете работать с размерами. Чтобы ваш сайт выглядел так, как вы хотите, чтобы он соответствовал дизайну, созданному вами или другим дизайнером, вам нужно изменить размер текста на этом сайте, а также других элементов на странице. Для этого вы можете начать поиск HTML-тега «size», но вы быстро обнаружите, что он отсутствует.
Тег размера HTML не существует в HTML. Вместо этого, чтобы установить размер ваших шрифтов, изображений или макета, вы должны использовать каскадные таблицы стилей . Фактически, любое визуальное изменение, которое необходимо внести в текст сайта или другой элемент, должно обрабатываться CSS! HTML только для структуры.
Наиболее близким тегом к тегу размера HTML является старый тег шрифта, который действительно включал атрибут размера. Имейте в виду, что этот тег устарел в текущих версиях HTML и может не поддерживаться браузерами в будущем! Вы не хотите использовать тег шрифта в своем HTML! Вместо этого вы должны научиться CSS, чтобы определять размеры ваших HTML-элементов и соответственно стилизовать вашу веб-страницу.
Размер шрифта
Шрифты — это, пожалуй, самая простая вещь для определения размера с помощью CSS. Более того, с помощью CSS вы можете более точно определить типографику вашего сайта . Вы можете определить размер шрифта, цвет, корпус, вес, ведущий и многое другое. С помощью тега шрифта вы можете определить только размер, а затем только как число относительно размера шрифта браузера по умолчанию, который отличается для каждого клиента.
Чтобы установить для шрифта размер шрифта 12pt, используйте свойство стиля font-size:
h3 {
font-size = 24px;
}
Этот стиль будет устанавливать размер шрифта элементов heading3 24 пикселя. Вы можете добавить это во внешнюю таблицу стилей, и все H3 вашего сайта будут использовать этот стиль.
Если вы хотите добавить дополнительные типографские стили к своему тексту, вы можете добавить их в это правило CSS:
h3 {
font-size: 24px;
цвет: # 000;
начертание шрифта: нормальный;
}
Это не только установит этот размер шрифта для H3s, но также установит черный цвет (что означает шестнадцатеричный код # 000) и установит вес «нормальный». По умолчанию браузеры отображают заголовки 1-6 как полужирный текст, поэтому этот стиль переопределяет этот текст по умолчанию и, по сути, «не выделяется жирным шрифтом» текста.
Размеры изображения
Изображения могут быть сложными для определения размеров, потому что вы можете использовать браузер для изменения размера изображения. Конечно, изменение размера изображений в браузере — плохая идея, потому что это заставляет страницы загружаться медленнее, а браузеры часто плохо справляются с изменением размера, из-за чего изображения выглядят плохо. Вместо этого вам следует использовать графическое программное обеспечение для изменения размера изображений, а затем записывать их фактические размеры в HTML-код вашей веб-страницы.
В отличие от шрифтов, изображения могут использовать HTML или CSS для определения размера. Вы определяете ширину изображения и высоту . Когда вы используете HTML, вы можете определить только размер изображения в пикселях. Если вы используете CSS, вы можете использовать другие измерения, включая дюймы, сантиметры и проценты. Последнее значение, в процентах, очень полезно, когда ваши изображения должны быть плавными, как на адаптивном веб-сайте.
Чтобы определить размер изображения с помощью HTML, используйте атрибуты высоты и ширины тега img . Например, это изображение будет размером 400×400 пикселей:
высота = "400" ширина = "400" alt = "изображение" />
Чтобы определить размер изображения с помощью CSS, используйте свойства стиля высоты и ширины. Вот то же изображение, использующее CSS для определения размера:
style = "высота: 400px; ширина: 400px;" alt = "image" />
Размеры макета
Самый распространенный размер, который вы определяете в макете, — это ширина, и первое, что вам нужно будет решить, это использовать макет с фиксированной шириной или адаптивный веб-сайт. Другими словами, вы собираетесь определить ширину как точное количество пикселей, дюймов или точек? Или вы собираетесь настроить ширину макета, чтобы она была гибкой, используя ems или проценты? Чтобы определить размер вашего макета, вы используете CSS и ширину и высоту, как и на изображении.
Фиксированная ширина:
стиль = "ширина: 600px;">
Ширина жидкости:
стиль = "ширина: 80%;">
Когда вы выбираете ширину для вашего макета, вы должны иметь в виду различные ширины браузера, которые могут использовать ваши читатели, и различные устройства, которые они также будут использовать. Вот почему адаптивные веб-сайты , которые могут изменять свой макет и размеры в зависимости от различных устройств и размеров экрана, являются сегодня стандартом наилучшей практики.