Свет в Internet. Стильные таблицы

Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

Основатель:
К.Николаенко

Главный Редактор:
С.Коротков

Web Design:
Neutron

POPULAR.RU

= WEB-design =

la_serg

Стильные таблицы

Сегодня мы начнем знакомство еще с одним средством разработки Web-сайтов.

Допустим, Вы делаете некий сайт, рассчитали пропорции шрифтов, цветовую гамму и все такое. Вы переходите к реализации Ваших замыслов и тут натыкаетесь на ряд проблем. Первая - это громоздкость полученного кода: представьте, Вам нужно выделить все заголовки <h2> красным жирным шрифтом, размером 20 точек, тогда каждый заголовок обрастет вот такой конструкцией:
<h2><font color="red" size="20pt"><b>Заголовок</b></font></h2>

А что если заголовков несколько? Вот здесь и приходят к нам на помощь CSS - Cascading Style Sheets (приблизительно: таблицы стилей). CSS - это язык для описания свойств различных элементов HTML страницы. CSS дает дизайнеру возможность контролировать стиль и расположение различных элементов (объектов) странички. Использование CSS - гораздо функциональнее и удобнее использования обычных средств HTML. Заметьте, CSS - лишь дополняет возможности HTML, т.е. CSS не может заменить HTML.

Давайте поближе к практике. Как реализовать нашу задачу средствами CSS? Очень просто!
H2 {color:red;font-size:20pt;font-weight:bold}

Вот и все! Теперь любой заголовок <h2> будет иметь следующие свойства: шрифт размера 20 точек, красного цвета и полужирный. Осознайте всю мощность этого инструмента! Теперь если Вы захотите изменить стиль сайта (скажем поменять цвет заголовков с красного на синий), Вам не придется отыскивать каждый заголовок во всех html файлах сайта: достаточно поменять свойство color с blue на red.

Как взаимодействует CSS c HTML?

Таблицы стилей делятся на 3 вида: Inline Style Sheets (встроенные таблицы), Global Style Sheets (глобальные таблицы) и Linked Style Sheets (связанные таблицы).

Встроенные таблицы позволяют определить стиль для одного элемента. Для использования встроенных таблиц используется параметр html тега - style. Выглядит это примерно так:

<h2 style= "color:red; font-size: 20pt; font-weight: bold"> текст </font>

Как видите, такие таблицы не многим отличаются от использования обычных тегов. Лично мне не понятна практическая ценность встроенных таблиц стилей.

Глобальные таблицы позволяют определить стиль для целой странички. Для использования глобальных таблиц стилей применяется тег <style>:

По правилам html тег <style> должен находиться внутри тега <head>. Внутри тега <style> мы располагаем нашу таблицу стилей. Теперь все элементы <h2> будут иметь определенный Вами стиль. Связанная таблица стилей представляет собой текстовый файл (text/plain) с расширением css. Подключаются данные таблицы вот так:

Заметьте, файл обязательно должен иметь расширение css-таблицы. Нельзя ссылаться на html файлы как на глобальные таблицы стилей! Параметр типа href="stile.htm" является грубой ошибкой и свидетельствует о Вашем непрофессионализме! Содержимое файла стилей полностью аналогично содержимому тега <style> - внутри файла, как и внутри тега не может быть ни каких посторонних элементов (например, других тегов). Связанные таблицы стилей наиболее распространены. Вы можете вставить ссылку на одну таблицу во всех страничках Вашего сайта- выгода на лицо.

Синтаксис CSS.

Все описание стилей сводится к использованию следующей строчки:
Селектор {свойство1;свойство2;...;свойствоN}
В нашем случае селектором является имя тега, а свойствами - пары параметр: значение. Свойства разделяются точкой с запятой (;), после последнего свойства точка с запятой (;) не ставится. Свойства сгруппированы в фигурные скобки ({}).

В следующей статье мы более подробно рассмотрим особенности синтаксиса CSS.

#11(52)/17.04.2001


	Copyright © Свет в Internet Designed by Свет в Internet