Сегодня: 27 апреля 2024 г., суббота Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 12. Несколько слов о CSS

CSS – каскадные таблицы стилей уже упоминались в десятом уроке. Безусловно, их изучение – это отдельный учебник и отдельная практика (для этого обратитесь к соответствующему разделу сайта. Кроме статей и других материалов, там есть "ONLINE УЧЕБНИК по CSS"). Изучать 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 и с его помощью можно применять стили уже ко всем страницам сайта! Это очень удобно, так как позволяет применить единый стиль для сайта даже с тысячами страниц или за несколько секунд изменить, например, размер шрифта сразу на сотнях или тысячах страниц! Обо всем этом читайте в разделе 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. Это займет примерно столько же времени, зато значительно расширит ваши возможности сайтостроителя!

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Нянянянян
Дата: 21.11.2011

Ну вы нубыыы.... Делаете сайт и не знаете на чем он! ППЦ!

Комментарий добавил(а): Данила
Дата: 26.04.2011

А как мне сделать фон сайта?

Комментарий добавил(а): Евгений Андросов
Дата: 17.02.2011

Лично мне нравится Adobe Dreamweaver. У меня, правда, на английском, но есть и русифицированные версии. Хорош тем, что есть и визуальный редактор и редактор кода. Можно и в HTML работать, и в CSS, и в PHP и даже в JavaScript. Настраивается на FTP-сервер и сайт можно править и обновлять прямо из программы.