Установка темы Material Design

Далее я сменю стандартную тему оформления и подсветки кода на Material Design. Она тоже относится к темным темам, но имеет более яркую подсветку кода, и с ней более комфртно и приятно работать при длительном написании кода.

Идем на сайт темы Material Design и жмем кнопкe install. Происходит переход на сайт PC для ST3, понимаем что тема доступна как плагин. В ST3 запускаем Ctrl+Shift+P, выбираем install package, после ищем нужную нам тему, я набираю Material Theme и нахожу ее. Жму Enter и устанавливаю.

Sublime Text 3 — Package Control — установкатемы Material Design

 

После этого иду в меню Preferences, и выбираю установленную тему.

Sublime Text 3 — Package Control — установкатемы Material Design

 

Также после этого, рекомендуется зайти в настройки ST3, и дописать следующие конфиги:

"theme": "Material-Theme.sublime-theme","color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme","overlay_scroll_bars": "enabled","line_padding_top": 3,"line_padding_bottom": 3,// On retina Mac"font_options": [ "gray_antialias" ],"always_show_minimap_viewport": true,"bold_folder_labels": true,// Highlight active indent"indent_guide_options": [ "draw_normal", "draw_active" ]

Это позволит отображать тему так как это было задумано ее создателями.
В итоге у меня получился вот такой внешний вид ST3.

Sublime Text 3 — тема Material Design

 

Установкаплагинов

Я установил следующие основные плагины:

· Emmet (ускорение написания html и css)

· Hayaku (ускорение написания css)

· LESS (syntax highlighting — подсветкакода less)

· Prefixr (префиксы для CSS)

· Placeholders (Lorem Ipsum наполнители для html файлов)

Дополнительные:

· SFTP — плагин для работы с FTP

· SideBarEnhancement расширяет возможность сайт бара

· SyncedSideBar синхронизирует SideBar с открытыми файлами по клику на них

· AdvancedNewFile создаём новые файлы и папки при помощи горячих клавиш

· BracketHighlighter подсвечивает открытие/закрытие любого фрагмента в коде

· jQuery набор сниппетов для jquery

· AutoFileName автозаполнение путей к подключаемым файлам

· CSSсomb делает код красивым

· Gist сохранение отдельных участков кода на github прямо во время редактировани

Лементы

 

Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6>) и абзацев (определены как <p>); в список можно включить элементы <a>, <div>, <span>, <strong> и <em> и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

<a>

Теги

Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div>.

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div>.

Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a>. Что находится между этими двумя тегами будет содержимым ссылки.

Так, теги ссылок будут выглядеть примерно так:

<a>...</a>

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:

<ahref="http://shayhowe.com">Shay Howe</a>

 

 

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

Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color) и значение свойства (grey). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Язык HTML

 

 

HTML (от англ. HyperTextMarkupLanguage — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

 

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

<!DOCTYPEhtml><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Пример веб-страницы</title></head><body><h1>Заголовок</h1><!-- Комментарий --><p>Первый абзац.</p><p>Второй абзац.</p></body></html>

 

Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.

Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера.

Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.

Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

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

Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами, отображаться на веб-странице не будет.

Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис.

Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

Последним элементом в коде всегда идет закрывающий тег </html>.

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.

Валидация — это проверка значений, указанных пользователем, и отображение найденных ошибок.

Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.

<formaction="#"class="form">

    <inputtype="text"name="name"placeholder="Имя"required />

    <inputtype="email"name="email"placeholder="E-Mail" />

    <inputtype="tel"name="phone"placeholder="Телефон" />

    <inputtype="url"name="url"placeholder="Вашсайт" />

    <inputtype="number"name="growth"placeholder="Вашрост" />

    <buttontype="submit">Отправить</button>

</form>

Применение этих двух атрибутов позволит гораздо эффективнее валидировать вводимую информацию нативными методами. Ну и конечно же поддержка этих свойств браузерами наиболее широка.

Отдельно хотелось бы сказать про тип поля tel. Ожидается что браузер будет валидировать телефонные номера, но нет, поле с типом tel используется сейчас только для автозаполнения. Дело в том, что валидация телефонных номеров очень неоднозначная задача из-за слишком большого количества различных форматов телефонных номеров в разных странах, которые просто никак не получится унифицировать и записать в одно правило.

Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:

<inputtype="tel"name="phone"placeholder="Телефон"pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}"minlength="18"maxlength="18" />

 

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

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

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Пример 12.1. Создание таблицы

<!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title> Тег TABLE </title>

</head>

<body>

<table border="1" width="100%" cellpadding="5" >

<tr>

<th> Ячейка 1 </th>

<th> Ячейка 2 </th>

</tr>

<tr>

<td> Ячейка 3 </td>

<td> Ячейка 4 </td>

</tr>

</table>

</body>

</html>

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальныеатрибуты.

Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

o Мета содержимое

o Потоковое содержимое

o Секционное содержимое

o Заголовочное содержимое

o Текстовое содержимое

o Встроенное содержимое

o Интерактивное содержимое

 

Сверстанная страница не должна содержать ошибок в HTML (проверяется онлайн-валидатором - validator.w3.org)

Расположение блоков в сверстанной странице должно быть "один к одному" по сравнению с исходным макетом, за исключением случаев описанных ниже.

Поддержка веб-браузов:

§ Google Chrome – последняя версия;

§ Opera – последняя версия;

§ Mozilla Firefox – последняя версия;

§ Safari – последняя версия;

§ Internet Explorer – последняя версия;

§ Microsoft Edge – последняя версия.

Поддержка мобильных платформ:

§ Apple iPhone 4 и выше, в последних версиях бразуеров Safari, Google Chrome;

§ Apple iPad 2 и выше, в последних версиях бразуеров Safari, Google Chrome;

§ мобильные устройства на базе ОС Android версии 4.2 и выше, в последних версиях бразуеров Android, Google Chrome;

§ мобильные устройства на базе ОС Windows Phone версии 8 и выше, в последних версиях бразуеров Internet Explorer, Google Chrome.

Поддержка браузеров и мобильных платформ более ранних версий, а также поддержка иных браузеров и мобильных платформ производится в отдельном порядке.

Сверстанная страница должна быть оптимизирована для максимальной скорости загрузки

Общие требования к HTML разметке

§ Форматирование HTML кода должно быть иерархическим, отступ должен составлять 4 пробела.

§ Верстка HTML страниц должна быть реализована без использования JavaScript (там где это возможно).

§ Необходимо следовать семантики HTML5. Использовать существующие тэги HTML5 (header, footer, aside, nav, section, article и т.д). 2. Каждый тег должен использоваться по назначению (div для блоков, ul для списков и т.д.).

§ Необходимо правильно организовать структуру заголовков H1-H6. На странице не должно быть двух заголовков H1.

§ Кодировка для HTML страниц должна быть определена как "UTF-8".

§ Значения всех атрибутов HTML тегов должны быть заклюены в двойные кавычки (там где это возможно).

§ Классы которые используются в JavaScript должны начинаться с префикса "js-" и не должны использоваться для оформления стилей.

§ Для адаптивности необходимо использовать подход от меньшего к большему (порядок расположения стилей). Запрещено в одном проекте использовать сразу два подхода (от меньшего к большему и от большего к меньшему).

§ Все внешние ресурсы необходимо хранить в папках с названием блока или компонента (например, /images/news/bg.jpg).

§ Для всех картинок необходимо определять аттрибут "alt".

§ Необходимо определять цвет фона для тега "body". Если цвет не указан в макете, необходимо использовать белый.

§ Запрещается использовать размеры больше 100% (за исключением случаев, когда на этом построена логика работы, например галереи и т.д.).

§ Верстка контента, редактируемого в WYSIWYG-редакторе, не должна содержать классов (там где это возможно).

§ На HTML странице должны присутствовать "favicon" (с вариациями 32x32, 48x48 и 64x64) и "apple-touch-icon". "favicon" и "apple-touch-icon" должны быть предоставлены дизайнером. "favicon" и "apple-touch-icon" должны быть в формате ".png".

§ Для ссылок на e-mail необходимо задавать атрибут "mailto", для ссылок на телефон - атрибут "tel".

§ Запрещается использовать атрибут "id" с целью оформления стилей.

Основы CSS

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>

<!DOCTYPEHTML> < html > < head > < meta charset="utf-8" > < title > Стили </ title > < link rel="stylesheet" href="http://htmlbook.ru/mysite.css" > < link rel="stylesheet" href="http://www.htmlbook.ru/main.css" > </ head > < body > < h1 > Заголовок </ h1 > < p > Текст </ p > </ body > </ html >

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link>.

H1 {color:#000080;font-size:200%;font-family: Arial, Verdana, sans-serif;text-align: center;} P {padding-left:20px;}

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style>

<!DOCTYPE HTML> < html > < head > < meta charset="utf-8" > < title > Глобальныестили </ title > < style > H1 { font-size:120%;font-family: Verdana, Arial, Helvetica, sans-serif;color:#333366; } </ style > </ head > < body > < h1 > Hello, world! </ h1 > </ body > </ html >

В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

<!DOCTYPE HTML> < html > < head > < meta charset="utf-8" > < title > Внутренниестили </ title > </ head > < body > < p style="font-size: 120%; font-family: monospace; color: #cd66cc" > Примертекста </ p > </ body > </ html >

В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

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

<!DOCTYPEHTML> < html > < head > < meta charset="utf-8" > < title > Подключениестиля </ title > < style > H1 { font-size:120%;font-family: Arial, Helvetica, sans-serif;color: green; } </ style > </ head > < body > < h1 style="font-size: 36px; font-family: Times, serif; color: red" > Заголовок 1 </ h1 > < h1 > Заголовок 2 </ h1 > </ body > </ html >

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

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него.

<!DOCTYPE HTML> < html > < head > < meta charset="utf-8" > < title > Импорт </ title > < style > @import url(" style / header. css"); H1 { font-size:120%;font-family: Arial, Helvetica, sans-serif;color: green; } </ style > </ head > < body > < h1 > Заголовок 1 </ h1 > < h2 > Заголовок 2 </ h2 > </ body > </ html >

В данном примере показано подключение файла header.css, который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу.

@import "/ style /print.css";@import "/ style /palm.css"; BODY {font-family: Arial, Verdana, Helvetica, sans-serif;font-size:90%;background: white;color: black;

}

Свойство padding задает внутренние отступы элемента — отступы от внешней границы элемента до его содержания. Эти отступы еще иногда называют полями.

Существует несколько способов записи свойства padding.

padding: 10px;padding: 5px 10px;padding: 5px 10px 15px;padding: 5px 10px 15px 20px;

1. Одинаковые отступы со всех сторон.

2. Отступы сверху и снизу 5px, справа и слева 10px.

3. Отступ сверху 5px, слева и справа 10px, снизу 15px.

4. Разные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

Также можно задавать отступы для разных сторон с помощью свойств padding-left, padding-right, padding-top, padding-bottom.

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

margin

— oпределяет ширину поля за пределами границы элемента:

margin: margin-top | margin-right | margin-bottom | margin-left

margin: 25px 30px 40px 80px → указаны ширины внешних полей (по часовой стрелке:

верхнее, правое, нижнее, левое);

margin: 0 auto → позволяет расположить блок по центру.

margin-top

— верхнее внешнее поле элемента:

margin-top: 20px → величина может быть указана в пикселях или в процентах.

margin-right

— определяет ширину правого внешнего поля:

margin-right: 40px

margin-bottom | margin-left

— определяют соответственно нижнее и левое внешнее поле.

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = "5px solid blue".

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

 

Единица измерения	Описание	Пример
%	Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента.	div {width: 50%;}
cm	Определяет измерение в сантиметрах.	p {padding-top: 1cm;}
em	Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt.	h1 {letter-spacing: 3em;}
ex	Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта.	p {letter-spacing: 7ex;}
in	Определяет измерение в дюймах.	h2 {word-spacing:.10in;}
mm	Устанавливает измерение в миллиметрах.	div {margin:.15mm;}
pc	Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt).	h3 {font-size: 10pc;}
pt	Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм.	table {font-size: 20pt;}
px	Устанавливает измерение в пикселях экрана.	p {margin: 30px;}
vh	Равен 1% высоты окна просмотра.	h1 {font-size: 2.0vh;}
vw	Равен 1% ширины окна просмотра.	h2 {font-size: 2.0vw;}
vmin	Равен 1vw или 1vh, в зависимости от того, что меньше.	div {font-size: 5vmin;}

 

Все значения свойства "display"

Свойство display имеет много разных значений. Обычно, используются только три из них: none, inline и block, потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

<div style="border:1px solid black">Невидимый div (<divstyle="display:none">Я - невидим!</div>) Стоит внутри скобок</div>

Значение block

· Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).

· Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.

<div style="border:1px solid black"><div style="border:1px solid blue;width:50%">Первый</div><div style="border:1px solid red">Второй</div></div>

Блоки прилегают друг к другу вплотную, если у них нет margin.

Значение inline

· Элементы располагаются на той же строке, последовательно.

· Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: <span>, <a>.

<span style="border:1px solid black"><span style="border:1px solid blue;width:50%">Ширина</span><a style="border:1px solid red">Игнорируется</a></span>

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними <span> и <a> есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

<span style="border:1px solid black"><span style="border:1px solid blue;width:50%">Без</span><a style="border:1px solid red">Пробела</a></span>

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

<divstyle="width:400px">...<spanstyle="background:lightgreen">ЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛяЛя</span>...</div>

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

<div style="border:1px solid black"><span style="border:1px solid red">Инлайн</span><div style="border:1px solid blue;width:50%">Блок</div><span style="border:1px solid red">Инлайн</span></div>

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

· Располагается в строке.

· Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

· Элемент всегда прямоугольный.

· Работают свойства width/height.

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Например:

<style>li{display: inline-block;list-style: none;border:1px solid red;}</style> <ul style="border:1px solid black;padding:0"><li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li><li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li><li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li><li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li><li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li></ul>

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

<style>li{display: inline-block;list-style: none;border:1px solid red;vertical-align: middle;}</style> <ul style="border:1px solid black;padding:0"><li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li><li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li><li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li><li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li><li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li></ul>

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display.

Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.

Примериспользования:

<form style="display: table"><div style="display: table-row"><label style="display: table-cell">Имя:</label><input style="display: table-cell"></div><div style="display: table-row"><label style="display: table-cell">Фамилия:</label><input style="display: table-cell"></div></form>

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.