Часть шестая. CSS - Таблицы каскадных стилей в примерах
В этой части продолжим рассматривать как можно использовать CSS. Как организовать управление внешним видом своих страниц, синтаксис и способы применения.
Как описывалось в предыдущем уроке, при помощи CSS нет необходимости описывать стиль отображения элемента каждый раз. Достаточно один раз описать его, назначить ему имя(селектор), потом вставить в нужное место. Теперь будем, на примерах, оформлять нашу страницу. Код, который написан ниже будем использовать только добавляя элементы. Этот код можно скопировать и сохранить, на пример как index.html, а так же сделаем пустой файл, который назовем first.css
Аккуратно скопируйте весь код и сохраните как index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head lang="RU">
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="description" content="Урок по применению CSS">
<meta name="keywords" content="CSS, HTML, PHP">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" href="first.css">
<title>Применение CSS.</title>
</head>
<body bgkolor="#0033CC">
<div class="top_menu"><table align="center">
<tr>
<td><H1>здесь могут быть наш логотип, или баннер</H1></td>
</tr>
</table></div>
<div class="right_menu" align="center"><p><h1> Заголовок</h1><hr size=4px color=#0066CC>
<table align="center">
<tr>
<td width=170 align="center" class="menu"><a href="">Ссылка 1</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 2</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 3</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 4</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 5</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 6</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 7</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 8</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 9</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 10</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 11</a></td>
</tr>
</table>
</div>
<div class="centr_top"><p align="left" style="padding:4px"> <b> Здесь может быть описание сайта, его предназначение, или вопросы которые на нем освещены.</b></p></div>
<div class="central_menu"><p>
<table> <caption> <font class="caption">Ваш текст, картинки и т.д.</font></caption></table>
</p></div>
<div class="left_menu" align="center"><h1> Навигация</h1> <hr size=4px color=#0066CC>
<table align="center">
<tr>
<td width=170 align="center" class="menu"><a href="">Ссылка 1</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 2</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 3</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 4</a></td>
</tr>
<tr>
<td align="center" class="menu"><a href="">Ссылка 5</a></td>
</tr>
</table>
</div>
<div class="footer"><p align="center"><b><br> © "Трениинг" 2009 год</b></p></div>
</body>
</html>
После того, как сохранили файл, приступим к созданию пустого файла first.css. Откроем пустую страницу в блокноте и сохраним ее с этим названием. Теперь открыв файл first.css будем записывать стили элементов нашей страницы. Сделаем разметку такой: в самом верху прямоугольную область на всю ширину нашей страницы, для размещения баннера и (или) логотипа; справа и слева навигационные колонки; посередине приветственную часть и чуть ниже содержимое нашей страницы, а в самом низу, часть с копирайтом. Выглядеть будет это так:
.top_menu{position:absolute;top:0px;left:0px;width:1263px;height:104px;background-color:#0055E5;}
\\Это верхняя часть меню - position:absolute; - говорит о том, что отсчет будет вестись от верхнего левого угла браузера; top:0px; - отступ по вертикали; left:0px; - отступ слева по горизонтали; width:1263px; - ширина блока; height:104px; - высота блока; background-color:#0055E5; - цвет фона блока \\
.centr_top{position:absolute;top:120px;left:240px;width:780px;height:150px;padding:3px;background-color:#FFFFFF;}
\\ Это центральная верхняя часть, все по анологии с верхней, только указаны другие цифры и соответственно и блок находится в другом месте, согласно координат 'X' и 'Y' \\
.central_menu{overflow:auto;position:absolute;top:290px;left:240px;width:785px;height:650px;background-color:#FFFFFF;}
\\ Центральная, самая большая часть \\
.left_menu{position:absolute;top:120px;left:20px;width:200px;height:820px;background-color:#acb9b9;}
\\ левое меню \\
.right_menu{position:absolute;top:120px;left:1043px;width:200px;height:820px;background-color:#acb9b9;}
\\правое меню \\
.footer{position:absolute;top:955px;left:0px;width:1263px;height:70px;background-color:#acb9b9;}
\\ нижняя часть \\
td a:link {COLOR: #000000; font-family: Arial, sans-serif;font-size: 10pt;font-style: italic;font-weight: bold;}
\\ это оформление ссылок в теге <td>\\
td a:visited {COLOR: #000000; font-family: Arial, sans-serif;font-size: 10pt;font-style:italic;font-weight: bold;}
\\ и это то же \\
td a:active {COLOR: #FF0000; font-family: Arial, sans-serif;font-size: 10pt;font-style: italic;font-weight: bold;}
\\ и это то же \\
td a:hover {COLOR: #FF0000; font-family: Arial, sans-serif;font-size: 10pt;font-style: italic;font-weight: bold;TEXT-DECORATION: underline;}
\\ и это то же \\
td.menu {border-left:4px double #000000;border-bottom:4px double #000000;}
\\это стиль оформления меню в теге <td>: border-left:4px double #000000; - это указывает на вид рамки слева (толщина линии - двойная линия(стиль) - цвет линии); - border-bottom:4px double #000000; - эта часть указывает на видимость и оформление рамки снизу, по анологии с предыдущей. Все это можно увидеть при просмотре в браузере блоков с сылками слева и справа.\\
td span{font-family: Arial, sans-serif;font-size:8pt; COLOR: #000000; font-style: serif;}
\\оформление контейнерного тега <span>, когда он находится в теге <td> в ячейке таблицы\\
.ka {border-bottom:3px solid black;}
\\оформление нижней границы элемента\\
h1 {COLOR: #000000;font-family: Arial, sans-serif;font-size:14pt;}
\\стиль шрифта, при использовании заголовка первого уровня(самый большой) - <h1>\\
.caption{color:#000000;font-family: Arial, sans-serif;font-size:14pt;font-weight:bold;}
\\стиль оформление заголовка таблицы\\
Здесь сделаны комментарии к коду между \\ и \\. Надо скопировать код, вставить в пустой файл first.css, удалить комментарии и сохранить. Если, что то не понятно, обращайтесь к учебникам по CSS там описаны свойства, которыми можно оперировать с каждым элементом. Затем созданные файлы поместите в одну директоррию и откройте index.html в браузере и увидите разметку страницы. Можете попробовать поменять циферки в файле стиля и увидите как будут изменяться по размеру ваши блоки. В этом примере показано реальное применение части свойств. Их, свойств, гораздо больше.
Используется это очень просто. Во время написания кода HTML между тегами <head> и </head>, в строке <link type="text/css" rel="stylesheet" href="first.css"> указываем файл описания стилей, он должен лежать в одной директории с файлом, в котором они будут применятся, можно и не в одной, но тогда надо будет написать путь к файлу относительно корневой директории.
Теперь о том как применяются стили непосредственно. Все стили, которые без точки спереди, будут автоматически применены к элементам, для которых они описаны. Стили же, которые имеют впереди точку, могут применятся к любому элементу, который мы захотим изменить согласно стиля. На пример, применим стиль .ka для ячейки таблицы:
<table>
<tr>
<td class="ka"> </td>
</tr>
</table>
Здесь видно, что используется селектор стиля (он может называтся как угодно, но мне захотелось обозвать его так - .ka) в тексте без точки спереди и записывается как class="ka". По анологии применяются и остальные.
На сегодня все.
следующий урок >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<<<предыдущий урок
|
|
