Изучать CSS следует после того, как вы освоили HTML.
Здесь же, для общего понимания, мы затронем лишь некоторые аспекты CSS.
CSS - это важная, но отдельная часть HTML. Она не может быть применена без HTML, в то время, как HTML может работать без CSS. Но вся прелесть заключается именно в их связке: HTML создает каркас сайта, CSS – его форму, неповторимый стиль.
В плане кодирования, их статус различается: HTML заботится об общем выводе информации (её структуре), в то время как CSS производит тонкую настройку внешнего вида.
Для того, чтобы было понятно, перейдем сразу к примеру:
<p style="font-size:20px;">Это напечатано размером 20</p>
<p style="font-family:arial;">Это напечатано шрифтом Courier</p>
<p style="font-size:20px; font-family:arial">Это напечатано шрифтом Arial размером 20</p>
И вот как это будет отражено в браузере:
Это напечатано размером 20
Это напечатано шрифтом Arial
Это напечатано шрифтом Arial размером 20
В этом примере мы использовали атрибут "style" для определения типа шрифта (командой font-family) и размер шрифта (командой font-size). Обратите внимание, как в последнем параграфе мы одновременно установили тип и размер, разделяя параметры точкой с запятой.
Одной из уникальных особенностей CSS является возможность централизованно управлять внешним видом всей страницы или даже всего сайта, задавать единый, общий стиль. Вместо использования атрибута "style" в каждом теге вы можете указать браузеру только один раз, как должен выглядеть текст на странице.
Вспоминаем наш пробный сайт. Добавляем в него еще немного информации:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая CSS страница</title>
<style type="text/css">
p {font-size: 14px; font-family: arial}
a {font-size: 20px; font-family: verdana}
</style>
</head>
<body bgcolor="#FFF2E6" link="#CC3300">
<p align="cenetr"><strong>Поздравляю! Это ваш первый сайт, который вы сделали своими руками!</strong><br>Хотите пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше. <br>
<a href="http://www.freeadvice.ru/view_article.php?id=9"><b>Вернуться назад</b></a></p>
</body>
</html>
Вставляем в «Блокнот», сохраняем, смотрим в браузере. Впечатляет?
В этом примере правила CSS вставлены между тегами < head> и применяются ко всей странице. Для этого используется тег <style type="text/css">, который даёт соответствующее указание браузеру.
Можно также указывать правила CSS в отдельном файле. Такой файл имеет расширение .css и с его помощью можно применять стили уже ко всем страницам сайта! Это очень удобно, так как позволяет применить единый стиль для сайта даже с тысячами страниц или за несколько секунд изменить, например, размер шрифта сразу на сотнях или тысячах страниц! Каскадные таблицы стилей могут намного больше, чем просто изменение типа и размера шрифта. Например, вы можете устанавливать цвет и фон. Вот несколько примеров для экспериментирования:
<p style="color:red;">Красный текст</p>
<h1 style="background-color: blue;">Заголовок на синем фоне<h1>
<body style="background-image: snow05.jpg;">
Попробуйте вставить эти примеры на ваши страницы - как показано выше, а также как CSS-стиль между тегами <head> (не забудьте при этом поменять имя файла в третьей строке на имя файла, реально существующего на ВАШЕМ компьютере и подготовленного для использования на сайте (как это сделать, читайте в Уроке № 10)).
Помимо изменения вида: цвета, типа шрифта и т. п., CSS можно использовать также для управления настройками страницы и представлением (поля, всплывание, выравнивание, ширина, высота и т. д.). Регулируя различные элементы с помощью CSS, вы можете отображать ваши страницы элегантно и точно.
Пример:
<p style="padding:20px;border:1px solid #CC3300;">Ура! Мы изучаем основы CSS</p>
где "padding" - это расстояния внутри ячейки, "border" – как уже говорилось ранее - граница, "solid" – сплошная, #cc3300 – красный цвет.
В браузере это будет выглядеть вот так:
Ура! Мы изучаем основы CSS
С помощью свойства "float" элемент может "всплывать" вправо или влево. Это иллюстрирует следующий пример:
Пример:
<img src="brad_pitt.jpg" width="83" height="100" alt="Бред Пит" style= "float:left;">
<p align="justify">БРEД ПИТТ (Brad Pitt).Полное имя — Уильям Бредли. Бред Питт родился 18 декабря 1964 года в городке Шавни (штат Оклахома) в баптистской семье. И хотя уже более десяти лет его судьба крепко связана с голливудской кинометрополией, неистребимый дух американской глубинки продолжает окружать этого актера. Глядя на заросшее редкой бородкой лицо Бреда Питта небрежно рассыпанные по плечам волосы, живо представляешь первых эмигрантов, прибывших в Америку в поисках счастья.</p>
Вот как это будет выглядеть в браузере:
БРEД ПИТТ (Brad Pitt).Полное имя — Уильям Бредли. Бред Питт родился 18 декабря 1964 года в городке Шавни (штат Оклахома) в баптистской семье. И хотя уже более десяти лет его судьба крепко связана с голливудской кинометрополией, неистребимый дух американской глубинки продолжает окружать этого актера. Глядя на заросшее редкой бородкой лицо Бреда Питта небрежно рассыпанные по плечам волосы, живо представляешь первых эмигрантов, прибывших в Америку в поисках счастьяВ этом примере один элемент (изображение) всплывает слева, а другой элемент (текст) заполняет остальное.
Ну как вам? Легко и просто, не правда ли?
Как я уже говорил, этот урок - лишь краткое введение. Когда вы закончите изучение HTML, смело можете переходить к изучению CSS. Это займет примерно столько же времени, зато значительно расширит ваши возможности сайтостроителя!
