Лекция по HTML, CSS, Devtools

css.md

Введение в CSS

Синтаксис CSS

селектор {
 свойство: значение;
 свойство: значение;
 свойство: значение;
 …
}

/* А я комментарий! */ 

Селекторы

p {…}            /* по тегу */
.title {…}       /* по классу */
p.warning {…}    /* тег с классом */
#promo {…}       /* по id */
h1#chapter1 {…}  /* тег с id */
.title a {…}     /* тег внутри тега с классом */
.title .bage {…} /* класс внутри тега с классом */ 

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

• Усиливают обычные селекторы
• Позволяют выбирать элементы с учётом
• состояния
• расположения относительно других элементов :link, :hover, :active, :focus, :visited, :root, :first-child, :last-child, :nth-child(), :valid, :invalid, :required, :optional, :checked, :disabled, :enabled

/* Ссылки в фокусе */
a:focus {}
/* Каждый второй элемент списка */
li:nth-child(2n) {}
/* Обязательные поля ввода */
input:required {}
/* Отключенные кнопки */
button:disabled {}

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

• Создают виртуальные теги
• Позволяют стилизовать их ::after, ::before, ::first-letter, ::first-line

<li class="login-item">
 <::before>Иконка входа</::before>
 <a href="/login">Вход</a>
</li>

.login-item::before {
 content: "Иконка входа";
} 

<li class="logout-item">
 <a href="/logout">Выход</a>
 <::after>Иконка выхода</::after>
</li>

.logout-item::after {
 content: "Иконка выхода";
}

::before или :before?

По умолчанию используйте ::

Для старых браузеров дублируйте вариант с :

CSS свойсва

position top left z-index
display width height margin padding
font-family font-style line-height color
text-decoration text-transform
float clear
background box-shadow text-shadow
/* И очень много других */ 

Классификация свойств

• Позиционирование
• Блочная модель (размеры и отступы) и поток
• Оформление текста
• Декоративные эффекты (фоны, тени и так далее)
• Анимация и динамические эффекты
• Разное

Каскадность

• К одному и тому же элементу может примениться несколько CSS-правил.
• В этом случае свойства правил комбинируются.
• Свойства элемента можно комбинировать и явно с помощью множественных классов.

Конфликт свойств

• Когда в разных CSS-правилах есть разные свойства, то они конфликтуют.
• Когда в разных CSS-правилах есть разные свойства, то они конфликтуют.

Специфичность и приоритеты

• Чтобы понять, кто кого переопределит используют понятия специфичности и приоритетов.

.title {…}        >    p {…}
p.title {…}       >    .title {…}
.title a {…}      >    a {…}
.title .badge {…} >    .badge {…}
#promo {…}        >    /* всех других */

Специфичность и приоритеты

Специфичность — максимално возможное количество тегов, которые селектор может выбрат. Селектор тем специфичнее, чем менше тегов он выбирает.

• Специфичность определяется по селектору.
• Если она одинаковая, то побеждает то правило, которое расположено ниже в коде.
• Чем проще селекторы, тем меньше проблем с расчётом специфичности

Типы значений

• Абсолютные • Относительные • Ключевые слова • Цвета • Функции • Произвольные строки

Абсолютные

width: 1000px;
font-size: 16px; 

Относительные значения

width: 50%;      /* От ширины родителя */
width: 100vw;    /* От ширины вьюпорта */
height: 100vh;   /* От высоты вьюпорта */
font-size: 2em;  /* От размера шрифта родителя */
font-size: 2rem; /* От размера шрифта body */

Ключевые слова

text-transform: uppercase;
text-align: center;
display: block;
color: red; 

Цвета

color: #f00;    /* #ff 00 00 */
color: #ff0000; /* #ff 00 00 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); 

Функции

/* Получает содержимое атрибута */
content: attr(href);
/* Любые расчёты */
width: calc(100% - 100px); 
/* Линейный градиент */
background-image: linear-gradient(45deg, yellow, green); 

Произвольные строки

font-family: "Times New Roman", serif;
content: "Привет!"; 

CSS-директивы

• Специальные инструкции, которые начинаются с @

@font-face {
 font-family: "Open Sans";
 src:
 url("OpenSans-Regular.woff2") format("woff2"),
 url("OpenSans-Regular.woff") format("woff");
}
@media (max-width: 600px) {
 .sidebar {
 display: none;
 }
}

Стили кодирования

Кодгайды

• Кодгайд от HTML Academy http://html-academy.ru/codeguide
• Кодгайд от MDO http://mdo.github.io/code-guide
• Кодгайд от GOOGLE https://google.github.io/styleguide/htmlcssguide.xml
• Idiomatic CSS http://github.com/necolas/idiomatic-css

Примеры

• После значения свойства обязательно ставится точка с запятой.
• Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
• Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
• Названия тегов и свойств в правилах пишутся строчными буквами.
• Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
• Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
• После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
• После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
• До и после комбинатора между селекторами (например, p > a) ставится один пробел.
• Каждое объявление в правиле пишется на новой строке.
• Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:

.selector {
  color: #f5f5f5;
}

• Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
• Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
• Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.

/* Хорошо */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
}

/* Плохо */
.selector, .selector-secondary, .selector[type=text]{
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0,0,0,.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

Основы стилизации

• Нормализация
• Нестандартные шрифты
• Преобладающие текстовые стили страницы
• Текстовые параметры, фоны, состояния элементов при взаимодействии

Правила стилизации

• Не задавать глобальные стили для тегов*
• Контролировать стили по умолчанию для всех элементов в разметке

Исключения:

• Normalize.css Нужен для исправления стилей по умолчанию
• Уникалные теги документа: html, body
• Дополнителная нормализация a, img
• Общее правило для box-sizing с помощю inherit

Верно:

body { margin: 0 }
img { max-width: 100% }
a { text-decoration: none }

.example { color: black }
.example ul { list-style: none }
.example p { margin-bottom: 0 }

html { box-sizing: border-box }
*, *::before, *::after { box-sizing: inherit }

Неверно:

ul { list-style: none }
p { margin: 0 }
div { font-size: 80% }
* { box-sizing: border-box }

Нормализация (normalize.css)

Normalize.css — это CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Сайт проекта: http://necolas.github.io/normalize.css

Цели normalize.css:

• сохранять полезные настройки браузера, а не стирать их;
• нормализовать стили для широкого круга HTML-элементов;
• корректировать ошибки и основные несоответствия браузера;
• совершенствовать юзабилити незаметными улучшениями;
• объяснять код, используя комментарии и детальную документацию.

Как правилно подключит

Файл normalize.css нужно подключать до ваших стилей.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Beautiful Website!</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>

opinionated правила в normalize.css Существуют потому что когда-то были в числе правил нормализации, но со временем были пересмотрены и отменаны. Однако для поддерживаемости оставлены и помечены. Рекомендуется убират в начале работы над проектом.

Сброс (reset.css)

Сбрасывает все. Радикалный подход влекущий дополнителные затраты на стилизацию в далнейшем.

Выводы

• Одинаковое отображение сайта в разных браузерах не является целью нормализатора
• Контроль и переопределение стилей по умолчанию — задача верстальщика, а не нормализатора
• — Использовать ли нормализатор или его фрагменты? — Да!
• — Использовать ли сброс? — Нет! (в 99% случаев)

Работа с нестандартными шрифтами

Алгоритм

1. Проверяем, стандартный ли шрифт
2. Если нестандартный, ищем на внешних сервисах
3. Если нашли, подключаем из сервиса* (Google Fonts)
4. Если не нашли, конвертируем в веб-формат
5. Подключаем локально

Список стандартных шрифтов http://www.cssfontstack.com/

Конвертация в веб-формат http://fontsquirrel.com/tools/webfont-generator

Локалное подключение

@font-face {
  font-family: 'Montseratt'
  src: url('montseratt-regular.woff2') format('woff2'),
       url('montseratt-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Заключение

• Основной формат — woff2
• Чем меньше нестандартных шрифтов и их вариаций, тем лучше
• Иногда лучше вставить надпись картинкой, чем вставлять шрифт
• Каждая градация жирности — отдельный подключаемый шрифт
• Не полагайтесь на возможности браузера (жирность, наклонное начертание)

Абсолютные и относителные значения

px или rem?

Три типа задач:

• Вёрстка без дизайна
• Вёрстка по дизайну
• Вёрстка по дизайну со специальными возможностями для слабовидящих

Вёрстка без дизайна

• Использовать можно и px, и rem (и em)
• rem позволит сделать содержание более удобным для чтения в разных условиях

Вёрстка по дизайну

• Есть дизайн — есть требование соответствия макету
• Использовать нужно px
• Использовать rem не нужно:
  • усложняется разработка
  • поддержка становится дороже
  • фиксация размера шрифта обесценивает rem

body {
 font-size: 10px;
 …
}

Почему rem дороже?

— Увеличь размер шрифта на 2 пикселя, а отступы справа и слева на 5 пикселей

.button {
 padding: 0.3rem 1.9rem;
 font-size: 1.2rem;
}

Вёрстка по дизайну со спецвозможностями

Использование rem предпочтительнее px

Материалы

• Подключение нестандартных шрифтов. Часть первая.
• Подключение нестандартных шрифтов. Часть вторая.
• Оптимизация шрифтов.
• Зачем использовать normalize.css?
• Нормальный сброс.