СSS. Каскадные таблицы стилей: основные свойства

Содержание

Слайд 2

Темы модуля

Основные цели и задачи CSS.
Способы добавления стилей на web-страницу.
Модульная структура

Темы модуля Основные цели и задачи CSS. Способы добавления стилей на web-страницу.
CSS3
Наследование
Селекторы
Принципы каскадирования и принципы группировки
Псевдоклассы (псевдоселекторы)
Псевдоэлементы
Работа с цветом и фоном, со шрифтами
Работа с текстом
Инструменты разработчика

Слайд 3

CSS – это…

CSS — это язык стилей, который определяет отображение HTML-документов. Актуальная

CSS – это… CSS — это язык стилей, который определяет отображение HTML-документов.
версия – CSS 3, релиз которой был в 2012 году. Периодически появляются новые функции, которые поддерживаются не во всех браузерах.
Правила декларирования стилей:

Слайд 4

Способы
размещения CSS

Вложение (inline)
–


Встраивание (embedding)
–
Связывание (linking)
–

Слайд 5

Селекторы

Селекторы – правила выбора элементов на странице для
изменения их CSS-свойств.
Выделяют селекторы:

Селекторы Селекторы – правила выбора элементов на странице для изменения их CSS-свойств.
– Селекторы по элементу
– По идентификатору (атрибуту id)
– По классу (атрибуту class)
– Селекторы по атрибутам
– Селекторы псевдо-классов
– Селекторы псевдо-элементов

Слайд 6

Декларация класса
и id

Текст



Текст



Помните, что стили

Декларация класса и id Текст .text { color: red; } Текст #text
через id труднее перезаписать, а также то, что один id может использоваться только один раз на всю страницу. Не рекомендуется прибегать к стилизации по id без крайней необходимости.

Слайд 7

Каскадирование

Под каскадированием понимается одновременное применение разных стилевых правил к элементам документа —

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

Слайд 8

* /*все элементы*/
div /*тег*/
div:first-of-type /*тег с псевдоселектором*/
div p /*родитель — вложенный элемент*/

* /*все элементы*/ div /*тег*/ div:first-of-type /*тег с псевдоселектором*/ div p /*родитель

div span+p /*родитель + соседний элемент*/
.red /*класс*/
div p.red /*родитель и тег с классом*/
p.red.level /*тег с 2+ классами*/
#id1 /*id (идентификатор)*/
#id1 #id2 /*вложенные id*/

Приоритеты по возрастанию

Слайд 9

В CSS есть своего рода “козырной туз”, который перекрывает все остальные правила,

В CSS есть своего рода “козырной туз”, который перекрывает все остальные правила,
заданные ранее – это запись
!important, заданная сразу после значения свойства.

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

Слайд 10

Эту запись не рекомендуется применять по следующим причинам:
1) огромная сложность в перезаписи

Эту запись не рекомендуется применять по следующим причинам: 1) огромная сложность в
(вплоть до того, что перезаписать стили не представляется возможным в принципе);
2) захламление кода ненужными декларациями.
Для любых манипуляций гораздо лучше использовать принципы каскадирования и специфичности.

Чем плох
!important

Слайд 11

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий

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