Август 2017
Автор: Рубрика: Верстка Комментариев нет

Синтаксис, псевдоклассы, иерархия и свойства css

Синтаксис, псевдоклассы, иерархия и свойства css

Рассмотрим стилизацию документа, придания определенного цвета, размера, последовательности и текста на странице.

Состоит из простых конструкций, которые легко можно выучить.

Сложнее будет запомнить большое количество css свойств, которые выполняют различные задания.

Все правила англоязычные, со смысловой нагрузкой, это упростит запоминания.

Чтобы использовать css в документах html его нужно подключить, указав путь к файлу.

  1. В базовом документе html можно использовать тег style. Мгновенного подключения стиля в браузере до загрузки основных css
  2. Второе когда стили должны быть опционально изменены в процессе работы на сайтом
  3. Инлаиновое использование css определенных тегов, значит встроенный css. Инлаиновый стиль имеет больший преоритет

Подключаем css файл

Синтаксис css

Первым делом пишем селектор, который указан в html документе, затем фигурные скобки.

Внутри все свойства со значениями. Разделяются свойства точкой с запятой.

Например, есть селектор у дива с названием cl в html документе, то через точку в css пропишем этот же селектор и зададим свойства, это селектор класса.

Есть селекторы элементов, например section.

Третьим рассмотрим селектор id.

Синтаксис css

Псевдоэлемент after и before

Они пишутся через две точки, добавляются в div если его стилизуем.

Элементы after и before имеет свойство content, добавим в свойство фигурную скобку и посмотрим как получилось в браузере.

Видим, что эти элементы появляются до и после контента.

Открываем инспектор в браузере, проверяем внутри данного дива эти элементы.

Псевдоэлемент after и before

Элемент checked

У input с типом checkbox и radio есть параметр checked, это значит, что чекбокс по умолчанию выбран.

Его можно стилизовать, указав в атрибутах checked.

Затемним свойством opacity.

Элемент checked

Следующий селектор empty

Делаем структуру из двух параграфов заполненных и одним пустым.

В свойствах пишем фон зеленый и min-height 20 пикселей.

Получится полоса, где пустой элемент.

Если в него написать, то он автоматически отменяет свойство и появится текст.

Следующий селектор empty

Псевдокласс hover и target

  1. hover применяет к элементу свои свойства при наведении. Создадим две ссылки и применим стиль цвета. Наводим на link 1 он становится синим.
  2. Target можно сделать меню для навигации по странице. Например есть два линка и два блока div таргет 1 и 2, в котором есть текст. Первая ссылка ведет на таргет 1, вторая на 2. Добавим стили. Сейчас при нажатии на link 1 обводится текст из первого блока зеленым.

Псевдокласс hover и target

Иерархия приоритетов стилей

  1. Самый высокий приоритет у свойства обладает, у которого указан в конце конструкция восклицательный знак !important. Не выжно какая вложенность у селектора и каким способом подключаются стили у этого свойства будет высший приоритет.
  2. Следующий по значимости обладает инлаиновый стиль, через атрибут style.
  3. Стили подключенные внешним файлом.
  4. Самый низкий приоритет у родительских перед дочерними селекторами.

Стили в одном документе, например в main.sass

  1. Стили идущие ниже по документу имеют наибольший приоритет, если два стиля записаны одинаково, то применится нижний.
  2. Если верхний стиль был бы длиннее, то значения его свойства были в приоритете.

Css свойства

Рассмотрим самые ходовые свойства. Остальные свойства можно найти в справочнике css свойств.

  • первое свойство это цвет элемента color
  • background-color цвет фона элемента
  • font-size размер шрифта элемента
  • Уровень прозрачности элемента opacity
  • padding размер полей внутри элемента
  • widht ширина блочного элемента не включая границ и полей
  • внешние отступы элемента margin
  • height высота блочного элемента не включая размер полей и границ
  • насыщенность шрифта font-weight
  • text-align горизонтальное выравнивание элемента

Css свойства

Медиа запросы

Это база для создания адаптивной верстки.

Стилизуются элементы относительно устройства, на котором отображается сайт.

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

Такие запросы пишутся в самом файле main.sass.

Запрос начинается с объявления правила @media.

Условие будет либо устройство либо разрешение экрана, на котором отображается документ.

Медиа запрос размещается в конце документа потому, что у него нет приоритета.

Заключение

  1. Используем внешние подключения css файлов.
  2. Стилизуем только классы.
  3. Сокращаем цепочку каскада до одного блока, чтобы было меньше зависимостей.
  4. Классы тегов называем, в зависимости какую функцию выполняет тег.
  5. используем css препроцессор sass.
  6. Используем сброс стандартных стилей браузера. Используем normalize.css, который входит в состав фреймворка bootstrap
  7. Используем только сетку bootstrap, это достаточно для эффективной работы.
Комментариев нет

Комментарии:

Комментарии запрещены