Урок 7. Размещение и размер элементов
Единицы размеров
Все размеры и позиционные расположения в CSS задаются в размерных единицах. Internet Explorer и другие браузеры поддерживают как абсолютные, так и относительные единицы. Абсолютные единицы задают точный размер, например, в сантиметрах или дюймах, относительные единицы вычисляются относительно каких-либо других свойств (например, размера монитора или листа бумаги) или размеров других элементов.
Допустимые абсолютные единицы:
- in – дюймы (2,54 см)
- cm – сантиметры
- mm – миллиметры
- pt – пункты (points, 1pt = 1/72in)
- pc – пики (picas, 1pc = 12pt)
Относительные единицы:
- em – размер на основе размера шрифта (атрибута font-size ). В типографии em — это единица измерения, которая представляет высоту заглавной буквы М шрифта. В веб-дизайне 1 em — это высота базового шрифта в браузере, которая обычно составляет 16 пикселов (но пользователь может изменять ее). Если эта единица применяется для определения размера шрифта, то она имеет смысл относительной величины по отношению к размеру шрифта в родительском элементе. Пример: left: 2.5em
- rеm - стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.
Основное отличие от em заключается в том, что размер текста задается от базового размера корневого элемента, а не текущего размера шрифта родительского элемента.
- ex – единица измерения ex зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из высоты прописной буквы «x».
- px – вычисляется на основе разрешения монитора или принтера
- % – размер относительно другого, как правило, родительского элемента. Например, ширина ячейки таблицы может быть выражена в процентах от ширины таблицы
расчёт происходит исходя из размера шрифта родительскогоэлемента. Например
|
|
|
размер шрифта родительского элемента * 200% = 48px
- сh - зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа '0' (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить
Абсолютные единицы хороши для определения размеров элементов в версии для печати. Для отображения на экране, как правило, применяются пикселы, проценты и em. Выбирая, какую единицу измерения использовать, следует исходить из согласованности размеров элементов веб-страницы (текста, блоков, изображений и т.п.). Фактический размер элементов предсказать невозможно (это зависит от разрешения монитора, который пользователь может менять), поэтому речь идет именно о согласованности, т.е. о совместном изменении размеров элементов страницы при ее масштабировании. Если пользователь считает текст слишком мелким, то он должен иметь возможность увеличить его (и наоборот). Современные браузеры позволяют масштабировать страницу как единое целое - все элементы увеличиваются и уменьшаются пропорционально. Существенное изменение размера шрифта текста без изменения размера контейнера этого текста, как правило, нежелательно. Здесь на помощь приходит такая единица длины как em: когда меняется размер шрифта, меняется и величина em, и размеры блоков удается согласовать таким образом со шрифтом. Измерение размера в процентах (от соответствующего размера контейнера) позволяет поддерживать согласованность другого рода - между размерами блоков и размером окна браузера. В большинстве же случаев измерение длины в пикселах - достаточно хорошее решение.
|
|
|
Упражнение. Откройте пример в новом окне браузера и измените
а) масштаб страницы;
б) размер шрифта;
в) ширину окна.
Проследите за шириной блоков
| 
….
|
Перейдите по данной ссылке и самостоятельно ознакомьтесь с различными типами шрифтов.
https://basicweb.ru/css/css_edinici_izmereniya.php
Выполните примеры, приведённые на данной странице.
Фон
Дата добавления: 2020-04-25; просмотров: 192; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!