Введение в CSS

Видео курсы для чайников фотошоп, joomla, wordpress, php, css

Введение в CSS

Евгений Мухутдинов

Каскадные таблицы стилей впервые были реализованы в браузере Internet Explorer 3.0, иначе говоря, браузер мог работать с CSS. По мере развития CSS произошло разделение каскадных таблиц на CSS1 – уровень 1 и CSS2 – уровень 2. Одна веб-страница может быть связанна с несколькими таблицами стилей, т.е. из образуется некий каскад, отсюда и произошло название каскадные. Чтобы при применении нескольких каскадных таблиц стилей к одному документу не возникало конфликтов, приоритет CSS оговорен специальными правилами.

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

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

В примере мы создадим каскадную таблицу стилей уровня 1 (CSS1). Уберем все форматирование из HTML-кода нашей страницы и вынесем его в отдельный файл каскадной таблицы стилей. Файл каскадной таблицы стилей имеет расширение css. Создать каскадную таблицу стилей можно при помощи приложения Блокнот, но в данном случае использоем редактор FrontPage 2003 или SharePoint Designer и создал файл style.css.

После связи страницы с каскадной таблицы стилей средствами FrontPage 2003, в окне браузера мы увидим страницу в том же виде как и на предыдущем скриншоте, а вот как выглядит теперь HTML-код страницы:

<html>

<head>

<title>Добро пожаловать!</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<p>Рад Вас приветствовать на моем сайте!</p>

</body>

</html>

В HTML-коде появилась строка с ссылкой на файл с каскадной таблицей стилей style.css:

Больше никаких намеков на форматирование нет.

Теперь заглянем в файл каскадной таблицы стилей. Для того, чтобы было проще вникнуть в его содержимое, заменим шестнадцатеричные коды цветов на их названия. Естественно, цвета необходимо прописать на английском: red, green и т.д.

body

{

background-color: silver;

}

{

color: red;

text-align:center;

}

{

color: navy;

}

Взглянув на текст, можно уловить аналогию с языком бездумного исполнителя Паркетчика, который используется в учебном курсе информатики, разработанном Гейном и соавторами.

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

В нашем случает фон документа (background-color) должен быть светло-серым (silver).

Взгляните на следующий фрагмент:

{

color: red;

text-align:center;

}

Он форматирует заголовок первого уровня: цвет(color) – красный (red), выравнивание текста (text-align) – по центру (center).

Аналогичным образом указывается, что цвет теста абзаца должен быть темно-синим (navy).

Как видно из примера, нам удалось форматирование веб-страницы вынести в отдельный файл. С использованием каскадных таблиц стилей форматируются страницы в уже знакомом вам Конструкторе школьных сайтов. На данный момент, вряд ли удастся найти профессиональный сайт созданный без CSS. Все современные браузеры поддерживают работу как с CSS1 так и CSS2.

Казалось бы, нет особой необходимости использовать каскадные таблицы стилей при создании школьных веб-проектов, ведь количество страниц в них, как правило, не велико и каждую можно отформатировать индивидуально. Однако, если проект будет развиваться (к этому нужно стремиться), то с течением времени кол-во страниц будет увеличиваться и когда оно достигнет 50-70, то изменение дизайна будет отнимать слишком много времени.

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

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

При использовании визуальных редакторов, например SharePoint Designer, создание каскадной таблицы стилей не отнимет много времени. Можно использовать готовые CSS, а в случае необходимости вносить в них изменения. О том, как это реализовать на практике, вы узнаете в следующем разделе.

[содержание]