Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Определение классов для создания тегов




 

Использование селектора класса позволяет устанавливать независимые стили, которые потом можно применить к любому 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

 

Поделиться:





Читайте также:

А) внутриклассовых различий определенных слоев
Актуальность создания и управления системой непрерывного образования в России
Возможность создания столько разных отпечатков пальцев, рук, сколько было людей на Земле, говорит о возможности воскрешения, а также и восстановления клеток тела.
Возрождение своей державы следует начинать не с создания новых политических партий, а с изменения себя и своего ближайшего окружения.
ВОЙНЫ ХЛЕБНЫЕ И КЛАССОВЫЕ
Вопрос 9.Порядок создания и государственной регистрации банков
Вот только господа интернет-проповедники озабоченные триггерами довели светлую идею создания эффективного сайта до полного абсурда.
Второй способ создания базы
Глава 17. Анализ создания и использования материальных ресурсов организации
Глава о разъяснении основы основ, и цели создания человека, ниспослания книг, призыва посланников, религии Ибрагима, и крепкой связи, только за счет которого спасение.






Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...