- •Лабораторная работа №5 Разработка таблиц стилей css в html-документе
- •Установка стилей для отдельного html-тега
- •Добавление стилей на web-страницу
- •Пример 1: Добавление стилей на web-страницу
- •Добавление стилей на web-сайт
- •Пример 2: Добавление стилей на web-сайт
- •Определение классов для создания тегов
- •Пример 3: Определение классов
- •Определение id для идентификации объекта
- •Пример 4: Идентификация объекта
- •Определение ссылок стилей с псевдоклассами
- •1. A:link {…}
Определение классов для создания тегов
Использование селектора класса позволяет устанавливать независимые стили, которые потом можно применить к любому HTML-тегу (рис. 9).
Рис.9. Общий синтаксис CSS-класса
HTML-селектор отличается от класса тем, что он автоматически определяет конкретный тип тега, а классу дается уникальное имя, которое потом указывается в HTML-теге или тегах, используемых с атрибутом стиля.
Правила класса можно определять внутри тега <style>…</style> в заголовке документа или во внешнем CSS-файле, который затем связывается с HTML-документом.
Определение селектора класса:
1. Введите имя класса с предваряющей его точкой (.), затем откройте определение с помощью фигурной скобки ({). Имя класса может быть любым, но оно должно содержать только буквы и цифры:
.copy {
Поскольку класс copy независимый, его можно использовать с любым HTML-тегом, однако установленные для класса свойства должны поддерживаться типом применяемого тега.
2. Напишите определения этого класса и убедитесь, что они разделены точкой с запятой:
font-size: 12px;
line-height: 150%;
font-family: “Trebuchet MS”, Arial, sans-serif;
3. Завершите правило закрывающей фигурной скобкой:
}
! Класс не определенный внутри HTML-тега документа работать не будет.
Если класс непосредственно связан с HTML-тегом, то такой класс называют зависимым. Это означает, что данный класс можно использовать только вмести с данным HTML-тегом (рис.10).
Рис.10. Общий синтаксис зависимого класса (определения для этой версии copy будут работать только в том случае, если их применить к тегу <blockquote>)
С помощью зависимого класса можно добавлять существующие определения класса, которые будут работать только в том случае, если класс находится в конкретном теге. Например, вы хотите, чтобы класс copy в общем случае придавал шрифту требуемый размер, но если этот класс находится внутри тега <blockquote>, можно сделать так, что кроме увеличения размера он будет придавать тексту полужирное начертание.
Применение класса к HTML-тегу:
Добавьте class=”classname” в тег, которому вы хотите применить класс. Заметьте, что хотя при определении класса внутри <style>…</style> пишется точка, она не используется при ссылке на имя класса в теге.
Пример 3: Определение классов
<html>
<head>
<style type="text/css">
.copy {
font-size: 12px;
line-height: 150%;
font-family: 'Trebuchet MS', serif; color: #456789;
}
blockquote.copy {
font-weight: bold;
font-size: 14px;
line-height: 16px;
text-align: center;
}
</style>
</head>
<body>
<p class="copy"> текст …………</p>
<p class="copy"> текст …………</p>
<blockquote class="copy">
<p> текст …….<br>
текст……………
</blockquote>
</body>
</html>
Рис.11. Пример 3
Определение id для идентификации объекта
ID – основное понятие динамического HTML (DHTML). С помощью ID функция JavaScript определяет уникальный объект на экране. Это означает, что в отличие от класса ID обычно используется на странице один раз и определяет один элемент как объект. Этим объектом можно управлять с помощью JavaScript.
ID допускается определять внутри тега <style>…</style> в заголовке документа или во внешнем CSS-файле, который затем связывается с HTML-документом.
1. ID-правила всегда начинаются со знака решетки (#), затем вводится имя ID. В качестве имени можно использовать любой набор букв и цифр:
#area1 {
2. Через точку с запятой напишите определения этого класса. ID можно использовать с любым типом свойств, но ID-селектор лучше всего применять при описании уникального объекта на экране:
color: red; margin-left: 14px; position: relative;
3. Завершите правило закрывающей фигурной скобкой:
}
! ID, не определенный внутри HTML-тега документа работать не будет.
Применение ID к HTML-тегу:
Добавьте id=”idName” в выбранный HTML-тег: <p id=”area1”>…</p>