-Цитатник

Красота природы - (6)

__августовский закат___ Что может быть прекрасней закатов в августе свето-представление&nb...

Дожди - (0)

Лето началось с дождей На улице отвратительная погода... А я забыл зонтик в другом городе, а п...

Правда про Христианство из уст батюшки. - (0)

Откровение священника. ЖЕСТЬ!!!          А ведь в чём-то он пр...

Про сутулость - (0)

Сутулость - как исправить. Упражнения для исправления сутулости

Еще пара анекдотов. - (3)

Анекдоты   В 2012 году, Медведев не столько перестанет быть президентом, сколько продо...

 -Поиск по дневнику

Поиск сообщений в avia-free

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 30.08.2011
Записей: 682
Комментариев: 984
Написано: 5813

Поговорим про единицы измерения в CSS

Дневник

Понедельник, 18 Января 2016 г. 17:52 + в цитатник

В этом посте обзор учебного материала "единицы измерения в CSS".

В технологии CSS есть много способов задать величину чего либо, но при этом есть общий подход к применению различных единиц измерения. Так что разобраться в этом вопросе не составит особого труда.

В качестве единиц измерения могут служить числа и проценты. Давайте остановимся на этом моменте и приведём несколько примеров.

Возьмём свойство font-size, о котором уже упоминали в обзоре про работу с текстом в CSS. Это свойство отвечает за размер шрифта и оно может быть задано как в точных цифрах, так и в процентах.

Например, возьмём пиксели, которые задаются в числах.

Это слово будет иметь размер 20 пикселей. Это точная величина, то есть абсолютная. Слово всегда на всех устройствах будет отображаться с этой заданной величиной.

Как будет работать свойство font-size, если указать значения в процентах? В этом случае за 100% берётся это свойство у родительского элемента.

Пример облегчит понимание.

Это слово имеет размер 150%.

Это слово имеет размер 50%.

Вот видите разницу. Хотя я не ожидал такого маленького шрифта во втором случае.

Также давайте начнём эксперименты с блоком <DIV>. Создадим блок длиной 300 пикселей и с фоновым цветом navy. Вот он:

 

Для его создания использовался html-код:

<DIV style="background:navy; width=300px"></DIV>

Теперь ширину блока зададим в процентах:

 

Код:  <div style="background:navy; width: 70%"></div>

Проценты в этом случае также вычисляются от ширины родительского элемента.

относительные единицы измерения очень выгодно использовать, если вы хотите, чтобы ваш код хорошо смотрелся на разных размерах экранов.

Говоря про единицы измерения в CSS, нужно упомянуть правила установки цветов. Но это весьма обширная тема. Для этого я наверно напишу отдельных пост, так как сейчас нет времени всё расписывать.

Некоторые итоги краткого поста:

  • Единицы измерения в CSS могут быть абсолютные (пиксели или точки) и относительные (проценты).
  • Единицы измерения цветов в CSS требуют рассмотрения в отдельной статье.
Рубрики:  Программирование/CSS

Метки:  

 Страницы: [1]