Web технологии

Как задать оформление страницы ?

HTML, в отличие от XML, обладает семантикой, т.е. браузер знает как отображать тот или иной HTML тэг. В HTML есть тэги для управления внешним видом (color, font, big, ...), но их возможности явно недостаточны.

Решение - описывать внешний вид отдельно от структуры документа c помощью языка Cascading Style Sheets.

Синтаксис CSS

Где могут быть заданы стили?

• Встроенные в браузер стили
• Во внешнем файле
  <link rel="stylesheet" href="style.css">
• В коде HTML документа
  <style>...</style>
• Стили могут быть привязаны к конкретному тэгу
  <img style="margin: 3px" src="...">

Какие бывают стили ?

• width, height ― размеры элемента
• margin, padding ― границы и отступы
• display, visibility ― режим отображения
• top, left, right, bottom ― расположение
• background ― фон элемента
• font ― управление шрифтом
• text-align ― выравнивание текста

Классы и идентификаторы

• id - идентификатор элемента, должен быть уникален на странице
• class - список классов элемента, классы могут повторяться

Базовые селекторы

• Универсальный селектор
  * { margin: 0px; padding: 0px; border: 0px; }
• Имена тэгов
  p { margin-top: 10px; }
• Имена классов (с точки)
  .btn { border: solid 1px gray; }
• id тэгов (с решетки)
  #userpic { padding: 10px }

Сложные селекторы

• контекстные (вложенные)
  div.article a { text-decoration: underline }
• дочерние (вложенность = 1 уровень)
  a > img { border: 2px }
• соседние
  h2.sic + p { margin-left: 30px }
• группировка
  h1, h2 { color: red }

Псевдоклассы

• a:visited ― посещенная ссылка
• a:link ― непосещенная ссылка
• div:hover ― элемент при наведении мыши
• input:focus ― элемент при получении фокуса
• li:first-child ― выбирает первого потомка среди множества элементов

Псевдоэлементы

• #el:after ― виртуальный элемент сразу после #el
• #el:before ― виртуальный элемент непосредственно перед #el

Наследование стилей

Не все стили наследуются.

Приоритеты стилей

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

Указание в значение стиля флага !important позволяет перекрыть проверку специфичности.

Правила расчета специфичности

• id – 100
• классы и псевдоклассы – 10
• тэги и псевдоэлементы – 1

Так, например, селектор ul.info ol + li обладает специфичностью 13, а селектор li.red.level специфичностью 21 балл

Режимы отображения элементов

• display: none ― элемент невидим, не занимает места
• display: block ― элемент занимает максимальную ширину, начинается с новой строки, учитывает width, height
• display: inline ― элемент занимает минимальную ширину, и не прерывает строку, игнорирует width, height
• display: inline-block ― блочный элемент, но не разрывает строку, примерно как img

DIV vs. SPAN

float & clear

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor iaculis massa. Fusce sollicitudin purus viverra erat sollicitudin placerat sit amet ut diam. Vivamus malesuada tristique elit. Proin nec eros tempor.

float: left - всплывание влево, float: right - всплывание вправо, clear: both - отменяет всплывание, «проводит черту»

float & clear

Позиционирование

• position: static ― обычное расположение
• position: relative ― смещение относительно начального местоположения на странице
• position: absolute ― если родитель relative, absolute или fixed – относительно родителя, иначе - относительно начала документа
• position: fixed ― относительно окна браузера
• top/right/bottom/left - отступы, могут быть отрицательными

Отступы

Способы задания отступов: Варианты box-sizing:

• content-box (default)
• border-box

Что такое Bootstrap?

Bootstrap - это готовая библиотека стилей (CSS-фреймворк) от Twitter. Bootstrap позволяет быстро разработать приемлемый дизайн даже при базовых знаниях CSS.

Что включает в себя Bootstrap?

• Шаблон страниц
• Сетка
• Современные «стили по умолчанию»
• Верстка: таблицы, формы, списки, кнопки, …
• Компоненты: навигация, меню, пагинатор, …
• JavaScript плагины

Сетка Bootstrap