Введение в 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>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

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

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

</body>

</html>

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

<link rel="stylesheet" type="text/css" href="style.css">

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

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

body

{

background-color: silver;

}

h1

{

color: red;

text-align:center;

}

p

{

color: navy;

}

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

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

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

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

h1

{

color: red;

text-align:center;

}

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

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

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

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

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

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

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

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

Книжные новинки
Как сделать свой сайт и заработать на нем Е. Мухутдинов
Копилка
Рабочие программы
Проекты MS Office
Презентации
Открытые уроки
Экзаменационные билеты
Элективные курсы
Бесплатный soft
 Инструкции по ТБ
Подготовка к олимпиадам по информатике
Методика подготовки
"Золотые" алгоритмы
Простые задачи для начинающих
Олимпиадные задачи с решениями
Книги
Среда программирования
Обучение программированию на С++
Справочник по языку Pascal
Обучение
Подготовка к ЕГЭ
Создание сайтов
Уроки FrontPage
Уроки Word 2003
Создание игр на Delphi
Печатаем вслепую

Информация

Наши интервью
Книга почета
Курсы повышения квалификации
Электронная библиотечка
Книжная полка
Статьи
Полезные ссылки
Обратная связь

Конкурсы

Олимпиада
Фотоконкурс
VIP
Персональный раздел профессора
Макаровой Н.В.
Персональный раздел профессора
Смыковской Т.К.