Форма отчетности: Защита лабораторной работы. Тема: Способы применения стилей в документе HTML
Лабораторная работа №7
Тема: Способы применения стилей в документе HTML. Селекторы. Маски.
Цель: Знакомство с возможностями языка CSS при создании HTML-документа.
Задача: Создание страницы HTML-документаc применением CSS при помощи редактора «Блокнот» и визуализация при помощи интернет-браузера.
Вопросы для подготовки к лабораторной работе:
- Что такое CSS?
- Какие способы применения стилей в документе HTML существуют?
- Что такое селекторы?
- Что такое псевдоклассы?
- Что такое маски?
Задание:
1. Создайте HTML-страницу со встроенным стилем CSS для фона страницы.
2. Создайте файл CSS для задания цвета шрифта.
3. Создайте HTML-страницу с применением внешнего стиля.
Материал для подготовки к лабораторной работе:
СSS (Cascading Style Sheets) Таблицы Каскадных Стилей - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
Способы применения стилей в документе HTML.
1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы.
<p style="color: red"> текст красного цвета </p>
2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля.
<html>
<head>
<style>
<! --
p{color: red}
-->
</style>
</head>
<body>
<p>текст красного цвета</p>
</body>
</html>
3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<p>текст красного цвета</p>
</body>
</html>
style.css должен содержать:
p{color: red}
Селекторы.
Это элементы дескрипторов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки.
ПРИМЕР
H1 {color: red; size:20pt;}Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).
Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:
ПРИМЕР
h1, p, h2{font-size: 12px}
Вместо селекторов можно использовать маску
Маски
| * | Стиль применяется ко всем находящемся на странице дескрипторам: * { font-size: 14pt} |
| > | Дается указание искать дочерние селекторы в пределах определенного родительского. ol > li {list-style-type: decimal} - стиль применяется только к элементам LI спискам OL: |
Классовые селекторы (Class Selectors):
Синтаксис:
селектор. класс {свойства}
CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
ПРИМЕР
h2.myblue {background-color: blue}
<h2 class="myblue">у этого заголовка синий фон</h2>
Классы могут так же быть описаны без явного привязывания их к определенным элементам.
Синтаксис:
.класс {свойства}
ПРИМЕР:
.green {color: green;} = все элементы с атрибутом CLASS="green" станут зелеными.
ID селекторы (ID Selectors):
Синтаксис:
#id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.
#ducie {border-color: yellow}
Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств.
ПРИМЕР:
<html><head><title> Пример CSS </title></head><style>.blue {color: blue; font-style: italic}#boldunderline {text-decoration: underline; font-weight: bold}</style><body><p class="blue"> Здравствуйте, это моя домашняя страница. </p><p class="blue" id="boldunderline"> Пока еще в стадии разработки ... </p><p id="boldunderline">... Но скоро откроется </p></body></html>Селектор A[att] соответствует любому элементу А, у которого задан определенный атрибут, не зависимо от его значения (не работает в IE).
table[border]{ border:1px solid red;}
Селектор A[att=”val”] соответствует любому элементу А, определенный атрибут которого имеет заданное значение (не работает в IE).
input[type=”submit”] {background-color :red;}
Селектор А[lang|=”val”] соответствует любому элементу А, который имеет заданное значение в качестве одного из значений атрибута lang (не работает в IE).
P[lang|=”en”]{text-align: left;}
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элементам в заданной последовательности в зависимости от каскадного порядка.
ПРИМЕР:
P EM {color: silver;}В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.
Псевдоклассы.
Псевдоклассы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс :first-letter, в котором устанавливаете различные стили:
p:first-letter { float: right; font-size: 2em; color: red;}
В CSS2 определяются следующие псевдоклассы:
:first-child -первый дочерний элемент другого элемента;
:link - еще не посещенные ссылки;
:visited - посещенные ссылки;
:hover - элемент, над которым в настоящее время находится курсор;
:active - активный в данный момент элемент ;
:focus - элемент, имеющий фокус ввода;
:lang - этот псевдокласс определяет текущий язык;
:first-line - первая формированная строка абзаца. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.).;
:first-letter - первая буква абзаца;
:before - определяет содержимое перед элементом;
:after - определяет содержимое после элемента.
ПРИМЕР :
a: link, a: visited {color: blue}a: active {color: red}a: hover {text-decoration: none}В данном примере все элементы ссылки будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
Описания нескольких свойств для одного селектора, контекстуального селектора, класса, индивидуально именованного стиля или группы объединенных селекторов отделяются друг от друга точкой с запятой ";".
Форма отчетности: Защита лабораторной работы