Презентация на тему Введение в CSS. Селекторы. (Лекция 2)

чтобы код HTML был свободен от элементов оформления вроде

установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задаётся через стили. При подобном разделении работа над дизайном и версткой сайта может вестись параллельно.

2) Разное оформление для разных устройств
С помощью стилей можно определить вид веб-страницы для разных устройств вывода: монитора, принтера, смартфона, планшета и др. Например, на экране монитора отображать страницу в одном оформлении, а при её печати — в другом. Эта возможность также позволяет скрывать или показывать некоторые элементы документа при отображении на разных устройствах.

3) Расширенные по сравнению с HTML способы оформления элементов
В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

отдельном файле, он кэшируется и при повторном обращении к

нему извлекается из кэша браузера. За счёт кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов.

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

6) Централизованное хранение
Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.

— это селектор. Он представляет собой имя тега .

color — это атрибут стиля. Он задает цвет текста.
#0000FF — это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB

Пример

значениями, поскольку они привязаны к физическим единицам, таким как

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

есть также относительные размеры. Они немного сложнее, так как

не являются фиксированными единицами измерения, а основаны на размере другого измерения

Относительные единицы

}
.Имя класса { свойство1: значение; свойство2: значение; ... }

свойство2: значение; ... }

стиля }
Дочерние селекторы

sit amet.
Lorem ipsum dolor sit amet, consectetuer adipiscing

elit.

Селектор 1 + Селектор 2 { Описание правил стиля }

}
Селектор[атрибут] { Описание правил стиля }

}
Селектор[атрибут="значение"] { Описание правил стиля }

Описание правил стиля }
Селектор[атрибут^="значение"] { Описание правил

стиля }

правил стиля }
Селектор[атрибут$="значение"] { Описание правил стиля

}

правил стиля }
Селектор[атрибут*="значение"] { Описание правил стиля

}

правил стиля }
Селектор[атрибут~="значение"] { Описание правил стиля

}

стиля }
Селектор[атрибут|="значение"] { Описание правил стиля }
[атрибут1="значение1"][атрибут2="значение2"]

{ Описание правил стиля }
Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }

селекторов:

1) Самый высокий приоритет имеет атрибут style. Это правило перекрывает

все селекторы описанные в стилях.

2) Второе место занимает присутствие ID в селекторе(#some-id).

3) Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.

4) Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Все 4 правила сводятся в одну систему a-b-c-d(где а - наивысший приоритет) и образуют специфичность.