Внедренный стиль CSS

В предыдущем примере используется встраиваемый стиль, который вписывается непосредственно в тег документа. Этот способ связывания CSS с HTML-страницей рекомендуется применять в единичных случаях - если стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль планируется к использованию для нескольких элементов на одной странице или к нескольким страницам сразу, рекомендуются другой способ связывания CSS и HTML. Внедренный стиль CSS вписывается внутри тега контейнера <style></style>, Прописывается такой контейнер между тегами <head></head> в котором мы создадим сразу несколько правил для одной страницы HTML. Вообще правил можно создать сколько угодно и какие угодно, все зависит от вашей изобретательности.

Я к примеру хочу чтоб у меня на страничке все ссылки не были подчеркнуты, были зеленого цвета, а при наведении на них курсора мыши меняли свой цвет и появлялась полоса подчеркивания, заголовок страницы находился по середине страницы и имел темно желтый с коричневым оттенком цвет. В итоге получиться следующая запись:

  <style>
A {
text-decoration: none; color: #1b6f1c;
}
A:hover {
text-decoration: underline; color: #e30000;
}
h2 {
text-align: center; color: #d28900;
}
</style>

Далее вписываем тег контейнер с правилами в страницу HTML и смотрим что получилось.

  <html>
<head>
<title>Моя первая страничка с использованием CSS</title>
<style>
A {
text-decoration: none; color: #1b6f1c;
}
A:hover {
text-decoration: underline; color: #e30000;
}
h2 {
text-align: center; color: #d28900;
}
</style>
</head>
<body>
<h2>Моя первая страничка с использованием CSS</h2>
<table border="0" width="100%" align="center" cellpadding="5">
<tr>
<td colspan="3" align="center">
<table width="100%" border="0" bgcolor="#CCCC99">
<tr>
<td><a href="#">меню 1</a></td>
<td><a href="#">меню 2</a></td>
<td><a href="#">меню 3</a></td>
<td><a href="#">меню 4</a></td>
<td><a href="#">меню 5</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">
<table border="0" width="160">
<tr>
<td><a href="#">подменю 1</a></td>
</tr>
<tr>
<td><a href="#">подменю 2</a></td>
</tr>
<tr>
<td><a href="#">подменю 3</a></td>
</tr>
<tr>
<td><a href="#">подменю 4</a></td>
</tr>
<tr>
<td><a href="#">подменю 5</a></td>
</tr>
</table>
</td>
<td rowspan="2">
<p align="Justify">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
</p>
<p align="Right">Борис АКУНИН</p>
<hr size="1" noshade color="#000000" width="350">
</td>
<td align="center" bgcolor="#CCCCFF">сюда можно поместить какие-нибудь новости
<br>
или рекламу</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCFF"><img src="1.jpg" width="180" height="135"></td>
<td align="center" bgcolor="#CCCCFF"><img src="2.jpg" width="180" height="135"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFCCCC"><font color="#666666"> Здесь можно разместить контактную информацию, баннеры, счетчики и т.д</font></td>
</tr>
</table>
</body>
</html>     посмотреть

В результате использования внедренного стиля мы указали браузеру, что и как отображать на данной странице. Теперь все по порядку: Первая строка в выше изложенной записи выглядит следующим образом: A {text-decoration: none; color: #1b6f1c;} и содержит в себе селектор к которому будет применяться правило в нашем случае это название тега А то есть ссылка и непосредственно правило заключенное в фигурные скобки {text-decoration: none; color: #1b6f1c;} в котором мы указали браузеру: не подчеркивать ссылки text-decoration: none; и что ссылки должны быть зеленого цвета color: #1b6f1c;

Во второй строке A:hover {text-decoration: underline; color: #e30000;} для селектора A:hover (Данный селектор указывает, что делать браузеру при наведении маркера мыши на ссылку) указываем, что при наведении маркера нужно подчеркнуть ссылку text-decoration: underline; и изменить цвет ссылки color: #e30000;

В третьей строке h2 {text-align: center; color: #d28900;} указываем правило для заголовка h2 в котором указываем, что заголовки h2 должны располагаться по центру text-align: center; и должны быть темно желтого с коричневым оттенком цвета color: #d28900;

Кроме двух выше изложенных примеров в которых стиль CSS находится внутри страницы, таблицу стилей можно написать в отдельный файл, прописав на странице, к которой вы хотите применить стиль, ссылку на данный файл. Читать дальше.



Вернуться на предыдущую страницу Перейти к следующей странице
2009 - 2012г. andron09_73@mail.ru