Типы селекторов и их назначение.




Ход работы

 

Задание 1. Выделите в окне браузера произвольный текст без форматирования. Задайте цвет шрифта, используя встроенный стиль в соответствии с вариантом.

 

 

Задание 2. Используя идентификатор, задайте курсивное начертание для следующего абзаца текста.

 

 

 

Задание 3. Выведите в окне браузера заголовок H1 без форматирования. Используя селекторы, задайте для заголовка следующие параметры форматирования.

 

 

Задание 4. Используя классы селекторов, задайте цвет текста для следующего абзаца в соответствии с вариантом.

 

 

Задание 5. В виде отдельного файла mystyle.css создайте таблицу стилей, в которой задайте контекстный селектор. Примените его к произвольному фрагменту документа, который помечен сразу всеми участвующими в декларировании тэгами с соблюдением указанной последовательности вложения тэгов.

 

 

Контрольные вопросы

Основные методы применения таблиц стилей для оформления Web-страниц.

Каскадные таблицы стилей применяются для оформления Web-страниц. Назначить определенный стиль для какой-либо части Web-документа можно тремя способами.

Встроенный стиль

Синтаксис:

<тэг style="свойство: значение"> текст </тэг>

Данный стиль будет применяться для определенного места в документе. Для изменения стиля нескольких слов или даже символов можно использовать атрибут style совместно с тэгом <span>, например:

Часть текста <SPAN STYLE="color: blue">голубого</SPAN> цвета

Результат отображения: Часть текста голубого цвета

Вложенный стиль

Синтаксис:

<head>

<style type="text/css">

селектор1 {свойство: значение}

селектор2 {свойство: значение}

...

</style>

</head>

Данный стиль будет применяться для фрагментов документа, выделенных с помощью отмеченных селекторов.

Присоединенный стиль

Синтаксис:

<head>

<link rel="stylesheet" type="text/css"

href="file.css">

</head>

Данный стиль описан в отдельном файле (file.css). Файл может располагаться на другом компьютере в сети. В этом случае атрибут href содержит ссылку на URL нужного компьютера.

 

Типы селекторов и их назначение.

Селектором называется имя стилей, в котором указаны параметры форматирования. Селекторы делятся на несколько типов: селекторы тегов, классы и идентификаторы.

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

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

Синтаксис:

селектор.класс {свойство: значение}

Можно также описать класс без явного указания селектора.

Синтаксис:

.класс {свойство: значение}

Связывание какого-либо тэга с объявленным классом осуществляется следующим образом.

Синтаксис:

<тэг class="класс"> текст </тэг>

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

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

<html>

<head>

<style type="text/css">

#cursive { font-style: italic} /* Курсивный текст */

#oblique { font-style: oblique} /* Наклонный текст */

}

</style>

</head>

<body>

<p id=cursive><span style="font-style: normal"> Курсивный текст </span>

хорошо использовать для цитат и прямой речи </p>

<p id=oblique>Наклонный шрифт пригодится для создания ненавязчивого

выделения в тексте </p>

</body>

</html>

Идентификаторы и классы обычно выполняют одну роль, поэтому они одинаково часто встречаются в текстах примеров.

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-11-19 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: