Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки CSS arrow Приоритеты правил CSS
18.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Приоритеты правил CSS Печать E-mail
Автор megabax   
25.10.2009 г.

New Page 1

Тема сегодняшнего урока: «Приоритеты правил CSS».

 

Вы можете задать для каждого элемента сразу несколько правил оформления. Вот например так:

<HTML>
<HEAD>
<TITLE>Урок 12. Приоритеты стилей CSS</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
P {
color:red;
}
.myclass {
color:green;
}
-->
</STYLE>
<BODY>

<div>
<P>Первый абзац</P>
<P class="myclass">Второй абзац</P>
<P>Третий абзац</P>
</div>

</BODY>
</HTML>

 

Как видим, для тэга

 

<P class="myclass">Второй абзац</P>

 

действуют сразу два правила, по одному он должен быть красным. как тэг <P> по второму зеленым. как класс "myclass". Какого же цвета будет надпись "Второй абзац"?. правильный ответ: зеленого. Потому что селектор по классу главнее чем селектор по тэгу. Еще большим приоритетом обладает селектор по идентификатору. Убедимся в этом на примере:

 

<HTML>
<HEAD>
<TITLE>Урок 12. Приоритеты стилей CSS</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
P {
color:red;
}
.myclass {
color:green;
}
#myid {
color:blue;
}
-->
</STYLE>
<BODY>

<div>
<P>Первый абзац</P>
<P class="myclass">Второй абзац</P>
<P class="myclass" id="myid">Третий абзац</P>
</div>

</BODY>
</HTML>

 

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

<HTML>
<HEAD>
<TITLE>Урок 12. Приоритеты стилей CSS</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
P {
color:red;
}
.myclass {
color:green;
}
P.myclass {
color:gray;
}
#myid {
color:blue;
}
-->
</STYLE>
<BODY>

<div class="myclass">
Этот тест должен быть зеленым
<P>Первый абзац</P>
<P class="myclass">Второй абзац</P>
<P class="myclass" id="myid">Третий абзац</P>
</div>

</BODY>
</HTML>

 

Проще говоря, чем больше детализация правила, тем оно главнее. Если возникает ситуация, когда не понятно, какое правило имеет главнее, то приоритет определяется порядком следования правил в таблице стилей.

Последнее обновление ( 18.08.2010 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги