Введение в каскадные таблицы стилей

Введение в каскадные таблицы стилей
Как использовать CSS на Вашем сайте. Введение вCSS (Cascading Style Sheets)

Без сомнения, вы слышали о каскадных таблицах стилей, и как все говорят о том, насколько они хорошие. Эта статья служит введением в каскадные таблицы стилей,  сокращенно CSS (Cascading Style Sheets). Она призвана дать вам представление о том, что это такое, что это хорошо, и продемонстрировать подводные камни использования.

1. Что такое каскадные таблицы стилей?

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

Рассмотрим следующий код, например, включенный в раздел HEAD веб-страницы.

<style type="text/css">

body {

    background-color: white ;

    color: black ;

    font-family: Arial, Helvetica, sans-serif ;

}

</style>

В браузере, который поддерживает таблицы стилей, приведенный выше код заставит страницу иметь белый фон и черный текст. Текст в теле будет отображаться с помощью шрифта Arial, либо Helvetica, или, если ни доступны, с помощью других шрифтов без засечек. Он имеет такую же силу, как HTML тег, который имеет "background" и "text" после чего тег.

2. Зачем использовать каскадные таблицы стилей?

Что в них особенного, спросите вы, если результат реализованный, с использованием каскадных таблиц стилей, можно реализовать с использования стандартного HTML?

А. Форматирование vs Функции

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

Например, <h1></h1> тэги, предназначены для использования в заголовках. Когда вы заключите текст в этих тегах, текст будет отображен, как заголовок. Тем не менее, многие веб-дизайнеры обнаружили, что шрифт по умолчанию и размер им не по душе, и в результате приходится использовать в заголовках <font></font> теги вместо того чтобы использовать теги заголовков. В результате, ваш документ стал заваленный кодом форматирования страницы, и любые изменения, внесенные в один заголовок должны быть сделаны во всех, чтобы все заголовки в документе были одинаковыми.

С каскадными таблицами стилей, если вы хотите чтобы все теги <h1> были шрифтом “Courier New” шрифтом, 24 размера, просто пропишите строчки:

h1 {

    font-face: Courier New;

    font-size: 24pt ;

}

между тегами CSS (<style></style>), и теперь когда вы будете использовать тег <h1>, текст будет отображаться шрифтом “Courier New”, 24 размера. Если вы передумаете тогда, вам нужно будет изменить его в одном фрагменте стилей, а не весь документ.

Ваш документ может быть чище и вы будете использовать соответствующие теги HTML для соответствующего вида (например, <h1> для заголовков и т.д.), вместо заполнения документа всеми видами форматирования кода.

Красота стилей также блистающая в таблицах. Сколько раз вы писали столбиками, что-то вроде следующего?

 <table>

   <tr>

     <td>

       <font face="Arial,Helvetica" size="2">

       </font>

     </td>

   </tr>

   <tr>

     <td>

       <font face="Arial,Helvetica" size="2">

       </font>

     </td>

   </tr>

 </table>

С помощью CSS, все что вам нужно сделать, это написать вот это:

td {

  font-face: Arial, Helvetica ;

  font-size: 10pt ;

}

и записи таблицы без шрифта вот так:

<td>

</td>

и вы получите тот же эффект.

B. Внешние файлы

Так же, как таблицы стилей позволяют определить форматирования кода в одном месте документа, также можно сохранять таблицу стилей в отдельный файл. Затем загружать таблицу стилей в ваш документ с помощью тега тег <link> в заголовке вашего документа.

Так, например, если вы сохраните таблицу стилей в файле под названием "formatting.css", тогда для его загрузки вам необходимо написать следующее:

<link rel="formatting.css" type="text/css">

Какая с этого польза? Это полезно, если вы хотите применить стандартный стиль во всех документах на вашем сайте. Таким образом, если вы хотите внести изменения, скажем, цвет фона таблицы, все что вам нужно сделать, это изменить свой стиль, и все ваши документы будут автоматически иметь новый облик.

3. Проблемы с использованием CSS

Если каскадные таблицы стилей такие хорошие, почему не все, их используют?

Проблема заключается не в CSS как таковом, а в том, что не у всех есть браузеры, которые поддерживают CSS правильно. В целом, по мнению большинства вебмастеров, браузеры, в которых меньше ошибок реализаций CSS это Opera, Safari, Firefox и Internet Explorer 7 и выше.

Тем не менее, все большее число сайтов прибегают к использованию CSS на своих страницах, так как процент людей, использующих старые браузеры, стремительно падает.

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