Отправляет email-рассылки с помощью сервиса Sendsay

Сайтостроение (уроки по HTML, PHP, MySQL, веб-дизайну)

Рассылка закрыта

При закрытии подписчики были переданы в рассылку ""Свой сайт - это просто! Создание, продвижение, SEO"" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
tmorozova.ru

Статистика

17.902 подписчиков
-41 за неделю
←   Все выпуски   →

Сайтостроение (уроки по HTML, PHP, mySQL , WEB-дизайн)


Информационный Канал Subscribe.Ru Новый модный поиск - www.lycos.ru

Сайтостроение. Основы HTML. Уроки с сайта http://progs.biz

Рассылка №5

Основы HTML. Урок 15. Что такое CSS?
Основы HTML. Урок 16. CSS подробнее.
Полные версии уроков (с картинками) можно найти по адресам
Урок 15. Что такое CSS?
Урок 16. CSS подробнее.

HTML. Урок 15. Что такое CSS?

CSS расшифровывается как Cascade Style Sheets - каскадные таблицы стилей. Вот несколько пояснений по поводу того, что это такое и для чего это нужно.

Представьте себе, что у вас есть довольно-таки большой сайт. Разумеется, на его WEB-страницах есть множество элементов, оформленных одинаково. Это, например, могут быть заголовки страницы (например, на каждой странице заголовок показывается белым шрифтом на синем поле), или оформление абзацев (скажем вы предпочитаете, чтобы каждый абзац показывался шрифтом определенного размера и цвета). Параметров для каждого элемента может быть довольно-таки много. Сделать все это можно разными способами. Один способ (плохой) состоит в том, чтобы приписать все эти атрибуты (цвет, размер и т. д.) каждоме элементу каждой WEB-странице вашего сайта. Это долго и утомительно. Способ второй состоит в использовании CSS. В этом случае вы просто где-нибудь в одном месте пишете, что, скажем, ваши абзацы будут выглядеть так-то и так-то, и все абзацы на всех старничках именно так и будут выглядеть (если вы, разумеется, этого захотите).

Есть еще одна причина, почему предпочтительнее использовать CSS. Представьте себе, что вы решили поменять дизайн вашего сайта (что, такого не было?). Если вы не используете CSS, то вам придется внести изменения на каждуюю страницу (да еще и в несколько мест). Если же вы используете CSS, то изменения достаточно внести только в несколько файлов.

Теперь от слов переходим к практите.

Итак, у нас есть несколько HTML-страниц, и мы хотим оформить их в едином стиле. Под единым стилем понимаем цвет фона (скажем синий) шрифт (скажем, белый). Для этого создаем сначала файл styles.css следующего содержания (название файлу можете дать любое):

body{
    background: Blue;
}
p{
    color: White;
}

Что мы в этом файле сделали? Просто добавили параметры для фона страницы (для тега body) и для цвета фона (для тега p).

Далее во всех наших WEB-страницах просто добавляем ссылку на только что созданный файл styles.css примерно следующим образом:

<html>
<head>
    <title>Страница 1</title>
    <rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст страницы</p>
 ...

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

Обратите внимание, что цвет шрифта поменялся только у абзаца (т. е. того, что мы разместили между тегами <p> и </p>).

В строчке

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

мы должны, разумеется, правильно указать путь к нашей таблице стилей. Он может быть и относительный (href="css/styles.css"), и абсолютный (href="/css/styles.css"). В нашем примере предпологается, что файл стилей расположен в той же папке, что и HTML-файл.

Теперь менять дизайн сайта очень просто - для этого достаточно внести изменения только в один файл styles.css. Например, изменив этот файл следующим образом:

body{
 background:Olive;
}
h1{
 font-size: small;
 color:Yellow;
}
p{
 color: White;
}

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

Что за изменения мы внесли? Во-первых, мы поменяли цвет фона, во-вторых, мы поменяли цвет шрифта и в-третьих, мы добавили стиль для заголовков (точнее для тега <h1>).

Наверх

HTML. Урок 16. CSS подробнее

Продолжаем изучение CSS.

Из предыдущего урока должно быть более-менее понятно, как использовать CSS (создаем файл *.css, в который пишем новое оформление для тегов и затем подсоединяем этот файл к нашим HTML-страничкам). И тогда к прописанным в нашем файле тегам будет применятся новое, заданное нами оформление). Все это было бы замечательно, но иногда мы сталкиваемся с такой ситуацией - у нас есть элементы, которые надо оформлять почти одинаково. Например, один из элементов нашей страницы имеет некоторое весьма сложное оформление (зеленый шрифт курсивного полужирного начертания на сером фоне), и другой элемент имеет оформление, почти совпадающим с оформлением первого элемента (например, все тоже самое, только не на сером фоне, а на черном). Причем (и это важно) эти два элемента имеют одну природу (задаются одним тегом, говоря другими словами). Типичный пример - какой-нибудь FAQ, в котором, скажем, слово "Вопрос" должно быть почти также, как и слово"Ответ". Оба эти элемента будут отностится к заголовку третьго уговня (тег <h3> и </h3>) и разница между этими элементами будет только в одном - например, в цвете фона для букв. Именно этот пример мы сейчас и рассмотрим.

Сразу напишем готовый текст, который потом прокомментируем. Вот так мы зададим наши стили (в файле styles.css):

h3.question{
    font-style: italic;
    background-color: Aqua;
}
h3.answer{
    background-color: Silver;
}

Обратите внимание на то, что мы не просто написали имя тега h3, а приписали к нему через точку еще некоторый дополнительный параметр (в нашем случае это .question и .answer). Имя для этих параметров определяете вы сами (т. е. вместо .question и .answer) вы можете написать то, что вым больше подходит по смыслу. Вы можете рассматривать эти дополнения (которые офицально называются классами) как определение для тега h1 некоторых дополнительных подвидов. Параметры же для этих подвидов и задаются в фигурных скобках (в нашем случае мы определяем для них разные цвета для фона).

А вот как мы это можем использовать на HTML-страничке:

<head>
    ...
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 ...
<h3 class="question">Вопрос:</h3>
 ...
<h3 class="answer">Ответ:</h3>
 ...

Обратите внимание, что у наших тегов h3 появился новый параметр - class="question" в одном случае и class="answer" в другом. Это как раз имена классов из файла стилей.

Вот так будут выглядеть наша страничка в браузере: два заголовка (оба одного уровня), но с различными цветами фона - цветом морской волны и серым.

В данном примере мы задали новые классы (.question и .answer) для конкретного тега <h3>. Но можно задать наш класс и так, что его можно будет применить к любому тегу. Для этого мы должны определить в файле *.css новый класс без конкретного тега (но с точкой перед ним!):

.red{
    color: red;
}

Этот класс задает красный цвет шрифта. Внутри HTML-странички мы можем приписать наш класс .red к любому тегу:

...
<h5 class="red">Красный заголовок</h5>
<p class="red">Красный абзац</p>
<h5>Обычный заголовок</h5>
<p>Обычный абзац<p>
 ...

Результат на WEB-странице будет таким - содержимое первых двух тегов (заголовка и абзаца (<h5> и <p>)) будет красного цвета, и двух последующих тегов (тех же <h5> и <p>) - обычного черного цвета.

Наверх

Copyright Алексеев Игорь, 2002

Copyright сайт progs.biz, 2002

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное