Стилевое определение, размещаемое в головной части HTML-кода или в отдельном
файле CSS, имеет вид:
Селектор
{
Набор правил
}
См. Способы создания стилей
Селектор предназначен для связи стилевого определения с элементами HTML. В качестве селектора часто (но не всегда) используется название элемента:
Селектор предназначен для связи стилевого определения с элементами HTML. В качестве селектора часто (но не всегда) используется название элемента:
p
{
font-size: 12px;
color:
Black;
line-height:
1.5;
text-align:
justify;
text-indent:
25px;
}
В таком случае говорят, что задано определение с селектором
элемента.
Стилевые определения можно строить без явной связи с
конкретными элементами. В этом случае с определением связывается имя класса,
которое можно использовать для сопоставления заданного стиля с конкретными
элементами (входящими в этот класс). Такие стилевые определения называют
определениями с селектором класса.
Определение с селектором класса записывается следующим
образом:
. имя_
класса
{
Набор правил
}
Заметим, что перед именем класса ставится точка.
Сопоставить такое определение с элементом можно при помощи атрибута class,
задав в качестве значения имя_класса.
Так, если в стилевом файле записано определение с именем mark: (задан красный цвет и
рубленный шрифт):
. mark
{
color: red;
font-family: sans-serif;
}
- то для применения его конкретным элементам нужно в
открывающих тегах этих элементов указать атрибут class со значением mark:
<H1 class=mark> Заголовок </H1>
<P>
Текст
первого абзаца
<P class=mark >
Текст
второго абзаца
Стилевое определение mark будет применяться к заголовку и второму абзацу.
Селектор класса можно
записывать с привязкой с привязкой к элементу:
p. mark
{
color: red;
font-size: larqe;
}
Такое определение будет
работать для тех элементов p,
открывающий тег которых содержит атрибут class=mark, и
не будет работать для других элементов, даже с
атрибутом class=mark в открывающем теге.
Связать стилевое определение с
элементом можно и при помощи селектора идентификатора.
Селектор идентификатора
аналогичен класса, но перед именем ставится не точка, а знак «решетки» (#):
# идентификатор
{
Набор правил
}
Сопоставить такое определение
с элементом можно при помощи атрибута id, задав в качестве значения
идентификатор.
Так, если в стилевом файле
записано определение:
# mark
{
color: red;
font-size: larqe;
}
- то для
применения его к конкретному элементу нужно записать в HTML-коде:
<P id=mark>
Текст абзаца
Важно
помнить, что элементов с одним и тем классом на странице может быть много, а
каждый идентификатор – уникален, то есть на странице не должно быть двух
элементов с одним и тем же идентификатором.
Идентификаторы
удобны, когда с элементом планируется связать не только CSS но и JavaScript
(идентификатор используется для доступа к элементу в скриптах).
Примеры идентификатора
в стилевом файле в работе «Мелиоративные машины»
#header
{
width: 960px;
height:180px;
background-image: url(img/банер.gif);
}
/*меню*/
#nav{
margin-left: 4px;
color: #f00;
font-size: 90%;
font-weight: bold;
line-height:: 1.2px;
text-align: center;
margin-bottom: 5px;
}
#nav ul{
width: 100%;
text-align: center;
list-style-type: none;
}
#nav ul
li{
float:left;
height: 20px;
width:136px;
text-align:center;
background: #B6B66D;
position:relative;
padding-top: 2px;
padding-bottom: 4px;
}
#nav li
ul{
list-style:none;
width:150px;
display:none;
position:absolute;
left:0;
top:20px;
}
#nav li ul li{
float:none;
height: auto;
width:150px;
font-weight: lighter;
text-align: center;
background: #B6B66D;
z-index:2;
}
#nav li
a{
width: 120px;
color: Maroon;
text-decoration: none;
}
#nav li
a{
width:136px;
color: Maroon;
text-decoration: none;
}
#nav
li:hover ul, #nav li.jshover ul{
display:block;
}
#nav
li:hover, #nav li.jshover{
background: #F5F5DC;
В HTML-коде - это выглядит
так:
<div
id="header"> <!--шапка-->
</div> <!-- конец шапки-->
<div
id="nav"><!--меню-->
<ul>
<li><a
href="index.html">Главная</a></li>
<li><a
href="#">История</a>
<ul>
<li><a
href="melioracija.html">мелиорация земель</a></li>
<li><a
href="istorija1.html">экскаваторы</a></li>
<li><a
href="istorija2.html">бульдозер</a></li>
<li><a
href="istorija3.html">грейдер</a></li>
</ul>
</li>
<li><a
href="#">Фотогалерея</a>
<ul>
<li><a
href="слайдер_skrep.html">скреперы</a></li>
<li><a
href="слайдер_rush.html">рыхлители</a></li>
<li><a
href="слайдер_plan.html">планировщиики</a></li>
<li><a
href="слайдер_buld.html">бульдозеры</a></li>
<li><a
href="слайдер_gred.html">грейдеры</a></li>
</ul>
</li>
<li><a
href="#">Документация</a>
<ul>
<li><a
href="zak.html">закон
о мелиорации</a></li>
<li><a
href="degrad.html">деградация земель</a></li>
<li><a
href="ochr.html">охрана
труда</a></li>
<li><a
href="inst.html">инструкции</a></li>
<li><a
href="metod1.html">методика обучения</a></li>
<li><a
href="metod2.html">педтехнологии</a></li>
<li><a
href="metod3.html">практические занятия</a></li>
</ul>
</li>
<li><a
href="#">Видео</a>
<ul>
<li><a
href="Видео/мелиорация.html">Мелиорация</a></li>
<li><a
href="Видео/бульдозер.html">Бульдозер</a></li>
<li><a
href="Видео/косилки.html">Косилки на
экскаватор</a></a></li>
<li><a
href="Видео/рыхлитель.html">Рыхлитель</a></li>
<li><a
href="Видео/автогрейдер.html">Автогрейдер</a></li>
<li><a
href="Видео/скрепер.html">Скрепер</a></li>
<li><a
href="Видео/земляные работы.html">Земляные
работы</a></li>
</ul>
</li>
<li><a
href="#">Блок контроля</a>
<ul>
<li><a href="kontw.html">Вопросы для самопроверки</a></li>
<li><a
href="kontw1.html">Контрольные вопросы</a></li>
<li><a
href="#"><a href="Программа MY TEST/MyTestStudent.exe">Тест</a></a></li>
</ul>
</li>
<li><a
href="karta.html">Карта
ЭОР</a></li>
</ul>
</div><!--
конец меню-->
Комментариев нет :
Отправить комментарий