Введение в CSS

Введение в 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

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-правилах есть разные свойства, то они конфликтуют

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

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

Чем специфичнее правило, тем оно сильнее.

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

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

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

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

  • Абсолютные
    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; /* #f 0 0 */
    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;
}
}

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

Кодгайды

Оформление CSS

Синтаксис CSS

Порядок CSS-свойств

Порядок CSS свойств

Описание шрифтов

Описание шрифтов CSS

Нет сокращённой записи свойств!

Не сокращайте свойства CSS

Оптимальные селекторы

Оптимальные селекторы

Разумный каскад

 

Базовая стилизация

Базовая стилизация*

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

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

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

Нормализация стилей

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

Статья О Normalize.css

Сайт проекта:
http://necolas.github.io/normalize.css

Цели normalize.css:

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

Выводы

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

Подключение нестандартных шрифтов

Алгоритм работы со шрифтом

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

https://www.cssfontstack.com/

https://fonts.google.com/

В заключение

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

Абсолютные или относительные?

px или rem?

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

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

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

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

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

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

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

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

Полезные ссылки

Работа с веб-шрифтами

Normalize.css

HTML Шорты

Спецификация в CSS