Главная > css, html > Создаем собственные CSS Селекторы для удобного оформления.

Создаем собственные CSS Селекторы для удобного оформления.

21 июня 2009

CSS Селекторы

Иногда при верстке страниц возникает потребность выделить строчку или словосочетание другим цветом,
или изменить стиль.

Можно конечно сделать id-селектор:

<style type="text/css">
#red 
{
	color: #FF0000; /* Красный цвет текста */
}
<!-- ..... -->
Раскрасим <span id='red'>слово</span> красным цветом.
</style>

Или же создать класс:

<style type="text/css">
.red {
	color: #FF0000; /* Красный цвет текста */
}
<!-- ..... -->
Раскрасим <span class='red'>слово</span> красным цветом.
</style>

Но на мой взгляд, удобнее создать именной селектор. В стилях прописываем:

<имя селектора>{
	#стиль
}

Имя селектора должно состоять из латинских букв, и желательно, чтобы оно не совпадало с именами html тегов разметки.


Приведу Вам один пример для наглядности:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
red {
	color: #FF0000;
}
blue{
	color:#0000FF;
}
green{
	color:#00CC00
}
</style>
 
<title>Селекторы</title>
 
</head>
<body>
<p>Красный цвет: <red>Проверка</red></p>
<p>Синий цвет: <blue>Проверка</blue></p>
<p>Зеленый цвет: <green>Проверка</green></p>
 
</body>
</html>

Демонстрация примера:
Пример.

Кроме цвета в стилях вы можете настраивать что угодно: тип шрифта, отступы, стили форматирования, итд.

Categories: css, html Tags: ,
Комментирование отключено.