Главная • Утилиты • Софт • Статьи • Каталог • Гостевая
Главная / Статьи / Необходимый минимум плюс СSS

Необходимый минимум плюс СSS

Введение

Веб-страница, содержащая полезную информацию и прошедшая логическую разметку,— обязательно найдет своего пользователя. Для ускорения этого процесса, для лучшей визуальной запоминаемости и комфортного чтения, страницу необходимо оформить. Строго говоря, веб-браузеры уже оформили страницу с применением стилей по умолчанию. Но нам-то нужен собственный неповторимый стиль...

Для оформления простейшей странички применим инструмент CSS (Cascading Style Sheets или «Стилевые таблицы»). При этом содержимое страницы не претерпит изменения, изменится лишь заголовок.

Внедрение СSS

Существует 3 способа внедрить стилевые таблицы:

  1. Непосредственно в тэге, используя атрибут style (inline)
  2. В заголовке страницы, используя тэг <style>
  3. В отдельном css-файле, используя тэг <link rel="stylesheet" href="style.css" type="text/css">

Так как в нашем распоряжении имеется только одна страница, используем второй вариант. На практике следует пользоваться 3-м способом, при котором css-файл будет кешироваться сервером и время загрузки будет сокращено. Ну, а 1-й вариант является палочкой-выручалочкой в особых случаях, а наш случай обычный.

Итак, внутри заголовка (<head>...</head>) пишем пару тэгов <style>...</style>.

Начинаем оформление по принципу «от крупного — к малому, сверху — вниз».

Тело

Самым крупным блоком, вмещающим в себе все остальные блоки, является тело документа (body).

По умолчанию, используется следующий стиль:
padding: 8px; line-height: 1.33

Добавим описание цвета фона и текста:
body { padding: 8px; line-height: 1.33; background-color: white; color: black }

Определим текстовые ссылки:
a, a:link
{ color: green; text-decoration: underline; }
a:visited
{ color: olive; text-decoration: underline; }
a:active
{ color: fuchsia; text-decoration: underline; }
a:hover { text-decoration: none }

Меню

Меню навигации заключено в div-блоке с идентификатором menu.

Произведем позиционирование блока меню:
text-align:left; vertical-align: middle;
margin: 2x 0; padding: 2px 5px;

Переопределим цвета, доставшиеся нам в наследство , определим шрифт и позиционируем текст внутри блока меню:
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 80%;
background-color: silver; color: white;

В итоге получаем:
#menu {
text-align:left; vertical-align: middle;
margin: 2x 0; padding: 2px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; font-size: 80%;
background-color: silver; color: white;
}

Определим цвет и поведение навигационных ссылок:
#menu a, #menu a:link, #menu a:visited, #menu a:active
{ color: red; font-weight: bold; text-decoration: none; }
#menu a:hover { color: white; font-weight: bold; text-decoration: none }

Основной текст

Основной текст заключен в div-блоке с идентификатором text.

Займемся позиционированием текста:
text-align: justify; vertical-align: top;
margin: 3px 0; padding: 2px 10px;

Определим фонт и выравнивание внутри блока основного текста:
font-family: "Times New Roman", Times, serif;
font-size: 90%;

Кому недостаточно красоты — добавьте границы:
border: 1px red dashed

В итоге получилось:
#text {
text-align: justify; vertical-align: top;
margin: 3px 0; padding: 2px 10px;
font-family: "Times New Roman", Times, serif;
font-weight: normal; font-size: 90%;
border: 1px red dashed
}

Оформим тэги заголовков:
h1, h2 { text-align: center }
h1 { font-size: 2em; margin: .67em 0; color: silver}
h2 { font-size: 1.5em; margin: .83em 0 }

Подвал

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

#footer {
text-align: center; vertical-align: middle;
margin: 2x 0; padding: 2px 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
background-color: silver; color: white
}

Определим поведение ссылок подвала:
#footer a, #footer a:link, #footer a:visited, #footer a:active
{ color: red; text-decoration: underline; }
#footer a:hover { color: white; text-decoration: none }

Все вместе

А теперь все описания соберем в заголовке, в тэге <style>:

HTML-документ, который получился в результате наших стараний, — имеет достаточно законченный, почти профессиональный вид. Подобрана классическая цветовая гамма, которая содержит, естественно, 7 цветов. Отсутствие графики обеспечивает высокую скорость загрузки. Страница пристойно выглядит в последних версиях популярных веб-браузеров (MSIE, Mozilla, Opera). Макет веб-страницы готов, теперь дело за содержимым.
< До | Оглавление | После >
 
Главная • Утилиты • Софт • Статьи • Каталог • Гостевая
Copyright © 2003—2007 webmastertools.narod.ru
Email: webmastertools@narod.ru
Рейтинг@Mail.ru Rambler's Top100
Hosted by uCoz