Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> CSS -> Основы web-дизайна. CSS


Основы web-дизайна. CSS

Когда нам нужно задать свойства какого-нибудь фрагмента текста, мы пишем:

<font color=#444444 face=Arial size=2>фрагмент текста</font>

Если же мы решим покуролесить от души, т. е. чуть ли не каждому элементу страницы предстоит выглядеть неким уникальным и незабываемым образом, трудно даже представить, какое количество этих <font>...</font> придётся тянуть на свой компьютер бедному посетителю, который, между прочим, пришёл почитать новости, а не покачать теги.

Исконной мечтой веб-дизайнеров со времен Золотой Орды было отделение мух от котлет, т. е. содержания от оформления. С появлением технологии CSS (Cascading Stylesheets, или каскадные таблицы стилей) эта мечта наконец исполнилась.

Что это такое

Как мы с вами уже знаем, HTML -- не что иное, как набор объектов-контейнеров, таких как <p>...</p>, <H1>...</H1>, <table>...</table> или <form>...</form>. Для каждого такого объекта определы правила его отображения на веб-странице, иначе говоря -- стиль. Стандартным тегам HTML соответствует набор встроенных стилей, используемых по умолчанию.

Каждый стиль задаёт множество свойств объекта. Какие-то свойства присущи всем объектам без исключения, какие-то -- уникальны. Технология CSS позволяет переопределить некоторые из этих свойств, при этом соблюдается принцип: актуальным является то описание, которое стоит последним в потоке документа. Если свойство не описано, сохраняется его значение по умолчанию.

О каких свойствах речь, спросите вы. О самых обычных: отбивках от границ внешнего контейнера, типах шрифтов, поведении в ответ на различные события и т. д.

Единственная неприятность состоит в том, что для описания свойств в CSS используется специфический синтаксис, практически не пересекающийся с чем-то уже изученным нами. Так что снова придётся кое-что прочитать и выучить. ;-)

Как это делается

Стиль в CSS описывается при помощи ключевого слова STYLE. Существуют три основных способа его использования.

1. Использование в качестве параметра (Inline Styles)

<P STYLE="font-family:Verdana;font-size:10pt">Текст</P>

В данном случае мы задаём все необходимые свойства объекта как значение параметра STYLE, вставляемого прямо в нужный тег. Этот способ нехорош тем, что отделить содержание от оформления опять не удаётся.

2. Создание блока дескрипторов (описаний)

Где-нибудь в блоке HEAD создаём новый контейнер:

<STYLE>
 p {margin-top:0px;
   margin-bottom:10px;
   margin-left:2px;
   margin-right:0px;
   color:black;
   font-family:Verdana,Arial,Georgia;
   font-size:xx-small;
 }
 a {color:gray;
   text-decoration:none;
 }
 a:hover {
   color:black;
   text-decoration:underline;
 }
 .lgg {
   font-size:larger;
   margin-top:20pt;
 }
</STYLE>

Обратите внимание на структуру блока. Стили различных элементов заключены в фигурные скобки, а описания конкретных свойств отделены друг от друга точкой с запятой. Имя и значение каждого свойства разделяются двоеточием.

Если вы укажете в качестве названия стиля имя одного из стандартных объектов HTML, этот объект в результате примет описанные в блоке стилей свойства без каких-либо дополнительных действий с вашей стороны. Например, все параграфы в документе, сформированные с помощью тега <P>, теперь будут отформатированы именно так, как это описано в первом дескрипторе блока.

Теперь внимательно посмотрите на последний стиль: «.lgg». Именно таким образом -- при помощи имени, начинающегося с точки -- создаётся класс, т. е. сложное комплексное свойство, которое можно придавать любому объекту документа. Достаточно указать имя класса (уже без точки) в качестве параметра объекта, и он унаследует все применимые к нему свойства класса:

<form class="lgg">
 ...
</form>

или

<p class="lgg">Ещё немного текста...</p>

Этот способ определения стилей лучше первого, но всё ещё недостаточно хорош, т. к. сам блок стилей загромождает html-документ.

3. Создание внешнего файла дескрипторов.

В блоке HEAD (популярное, чёрт побери, местечко) пишем следующее:

<link rel="stylesheet" href="имя_файла.css">

В файл, имя которого вы задали в предыдущей строке, вставляем все нужные описания стилей по образцу блока STYLE из описания предыдущего способа, причём сами границы контейнера <STYLE>...</STYLE> можно опустить. Всё остальное -- точно так же.

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

...

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

Автор: Андрей Пискунов
Источник: www.artefact.cns.ru

Ссылки по теме
CSS Design: Укрощение списков
Основы CSS
Таблица свойств CSS
Введение в CSS
CSS - Справочник
 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.