Стандартное оформление в css Как подключать css мы научились в первом уроке, продолжим.
1) Указываем для всего документа стандартный фон, параметры текста (размер, цвет, шрифт, отступ между строк):
Для этого в css пишем:
Code
body {background:#fff; color:#000; font:normal 12px 'Tahoma'; line-height:25px;}
Для фона можно так же указать изображение (а так же и фон в цвете, если к примеру пользователь откроет ваш сайт без поддержки изображений):
Code
body {background:#fff url ('/images/bg.gif');}
2) Оформление ссылок
Code
3a:link, a:visited {color:#000; text-decoration:underline;} /*когда указываем так через запятую, для a:link параметра и a:visited используются одинаковые правила*/
a:hover {text-decoration:none;}
a:link, a:visited {color:#000; text-decoration:underline;} /*когда указываем так через запятую, для a:link параметра и a:visited используются одинаковые правила*/a:hover {text-decoration:none;}
3) Основные моменты оформления таблиц
Сразу скажу первое – при создание таблицы, вставляем только cellspacing=»0″ чтобы избавиться от отступов (через css метод не работет для ie, поэтому пока существует осел мы даже не будем его рассматривать), значит пишем:
Code
view plaincopy to clipboardprint?
<table cellspacing="0" id="s-body">
<tr>
<td></td>
<tr>
</table>
dable#s-body {width:100%;} /*ширина 100%, бордер сразу у нас будет 0, указывать не нужно.*/
table#s-body td {padding:0 4px;} /*создаем отступ в ячейках*/
table#s-body img {margin:4px; padding:2px; border:1px solid #ccc;} /*если есть картинка, она будет иметь отступ от ячейки в 4px, а так же бордер серого цвета + отступ от бордера в 2px, тоесть padding добавляет отступ от самого себя, а margin от внешних объектов.*/
3) Использование классов (class) и id
Различия между ними в том, что id применяется в документе один раз (уникальный id), то есть к примеру
<p id="slogan">Мы изучаем css</p> сработает, а вот <p id="slogan"></p> <p id="slogan">А вот тут внетренний тэг p ничего не получит.</p>
и для него используется class.
Я предпочитаю id использовать для элементов каркаса, таких как шапка, основной документ, меню, дно, а классы для их внутренних документов, рассмотрим один пример:
Code
view plaincopy to clipboardprint?
<!-- обязательно указывайте DOCTYPE, это для примера я допускаю погрешность -->
<html>
<head>
<!-- здесь обязательно мета, только потом title, так как в ином случае будет брешь в безопасности -->
<title></title>
<style>
div#s-body {...} /*дописывать в начале слово div не обязательно, это я выработал для себя правило, так проще искать и понимать документ.*/
div#s-body div#s-sidebar {...} /*в начале я указываю родительский див, удобно, когда сайт большой и очень много строк в стиле. Приставка s- означает site-, это мое так же правило, этим я помечаю, что удалять запрещено, так как это относится к макету, а просто класс .oppa не обязателен в принципе и возможно использовался для единичного случая.*/
span.oppa {...} /*в данном случае это просто класс*/
h1 {font:normal 26px 'Georgia';}
</style>
</head>
<body>
<div id="s-body">
<h1>Заголовок</h1>
<p>Уникальный текст, с уникальным <span class="oppa">словом</p>.</p>
<div id="s-sidebar">
А тут у нас меню, которые является очень важным для сайта
</div>
</div>
</body>
</html>
