Спонсоры

Если маленькая зарплата лучше сразу смотреть вакансии в PJA MMC лучше всего подбирать в Интернет.

Таблицы стилей CSS

CSS (англ. Cascading Style Sheets - каскадные таблицы стилей) - технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Википедия

Для изучения CSS, просто необходимо знать хотя бы основы НTML, с которыми в полном объеме Вы можете ознакомиться на страничке HTML начинающим данного ресурса.

В ниже изложенном материале Вы сможете ознакомиться и посмотреть на примерах, как можно изменить вид страницы, начертание текста, вид курсора и многое другое при помощи CSS. Посмотреть пример как при помощи CSS можно изменить вид страницы смотрим здесь.

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

Самое простое внедрение CSS в страницу сайта, при помощи атрибута STYLE - называется он встроенным стилем. То есть данный атрибут прописывается к какому-нибудь элементу, имеет самый высокий приоритет и может быть применим только к одному элементу. В качестве примера берем обычную HTML страницу.

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
<h2><font color="#666666">Моя первая страничка</font></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>     посмотреть

И так наша задача внедрить CSS при помощи атрибута STYLE в код выше изложенной страницы. Но для начала стоит определиться, что мы хотим изменить на своей странице при помощи стиля. Мне например не нравиться что ссылки меню 1 - 5 подчеркнуты и хотелось бы изменить цвет ссылок меню к примеру на зеленые. Для этого нужно прописать атрибут STYLE для тега <а> Запись будет выглядеть следующим образом:
<a href="#" style="TEXT-DECORATION: none; COLOR: #1E7212">меню 1</a>
Вписываем данный атрибут непосредственно в код нашей страницы и смотрим, что у нас получилось.

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
<h2><font color="#666666">Моя первая страничка</font></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="#" style="TEXT-DECORATION: none; COLOR: #1E7212">меню 1</a></td>
<td><a href="#" style="TEXT-DECORATION: none; COLOR: #1E7212">меню 2</a></td>
<td><a href="#" style="TEXT-DECORATION: none; COLOR: #1E7212">меню 3</a></td>
<td><a href="#" style="TEXT-DECORATION: none; COLOR: #1E7212">меню 4</a></td>
<td><a href="#" style="TEXT-DECORATION: none; COLOR: #1E7212">меню 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>     посмотреть

Как видно из примера мы получили что хотели: ссылки меню1 - меню5 стали зеленого цвета и не подчеркнуты, но атрибут style пришлось прописать для каждого тега <а>



  Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru