Тема: Типы селекторов CSS .

Дата: 2025-06-14; Просмотры: 6

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

Скачать

ПЛАН ЗАНЯТИЯ

Дисциплина: ОП.16 Основы web - технологий

Преподаватель: Машарова Р.В.

Курс: 2

Группа: 1ИСП-21

Специальность: Информационные системы и программирование

Дата: 03.04.2023

Время проведения: 13.30-15.00, 4 пара

Тема: Типы селекторов CSS.

Цель занятия:

Дидактическая: познакомиться с типами селекторов CSS.

Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания

Вид занятия лекция

Литература:

1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.

2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.

3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.

4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.

Тема: Типы селекторов CSS .

1. Общие положения.

2. Типы селекторов.

3. Назначение стиля тегам или страницам.

1. Общие положения.

CSS (Cascading Style Sheets – каскадные таблицы стилей, произносится «си-эс-эс») – технология управления внешним видом элементов (тегов) веб-страницы. CSS предоставляет гораздо больше возможностей по оформлению страницы, чем HTML. Например, с помощью стилей CSS можно убрать у ссылок подчеркивание, сделать у таблицы пунктирные границы или даже поменять курсор «мыши». Сейчас CSS используется практически на всех сайтах Всемирной паутины.

На то, что при описании элементов Web-страницы используются CSS, указывают теги

Конкретно на использование каскадных таблиц стилей указывает атрибут TYPE. В нашем случае значение этого атрибута будет

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

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

«Н1» – селектор, а «{color: red}» – декларация. Несложно заметить, что сама декларация также состоит из двух частей. Это в данном случае «color» – свойство и «red» – значение. Т.О. в общем виде синтаксис назначения стилей будет иметь вид:

2. Типы селекторов.

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

Таким образом, синтаксис задания стиля можно описать, как

Если одна и та же декларация применяется по отношению к нескольким селекторам, как в

то селекторы можно сгруппировать, применив к ним одну декларацию:

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

будет эквивалентна

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

Контекстные селекторы

Селектор может состоять и из нескольких тегов, декларации для которых будут задаваться раздельно. Такие селекторы называются контекстными и имеют вид:

В этом случае значение указанного в декларации свойства будет применено только к элементу, описанному сразу двумя тегами, указанными в селекторе, точнее к значению тега2 в пределах действия тега1, например,

стиль, описанный как:

будет применен только к слову, описанному обоими тегами, т. е. к слову "стили" (рис. 2.1).

Рисунок 2.1 - Пример использования стилей

Классы селекторов. Назначение класса для одинаковых тегов

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

запишем

В данном случае классам присвоены имена согласно цвету, которым будут отображаться соответствующие заголовки. Теперь в нужном случае указывается, в соответствии с каким классом надо отобразить тот или иной заголовок. Код такого указания будет выглядеть следующим образом:

В общем виде код будет выглядеть:

Рисунок 2.2 - Пример использования классов назначенных для одинаковых тегов