Отправляет 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

Рассылка №6

Основы HTML. Урок 17. Продолжаем изучать CSS.
Основы HTML. Урок 18. Почему таблицы стилей называются каскадными?
Полные версии уроков (с картинками) можно найти по адресам
Урок 17. Продолжаем изучать CSS.
Урок 18. Почему таблицы стилей называются каскадными?

HTML. Урок 17. Продолжаем изучать CSS

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

Представьте себе, что мы хотим изменить атрибуты для некоторого тега (для определенности <i>) не для всех частей нашей WEB-странички, а только для некоторых. Более конкретно наша задача звучит так: цвет шрифта для тега <i> должен быть красным, но только тогда, когда тег находится внутри тега <h3>. Во всех же других случаях содержимое тега <i> должно показываться обычным цветом.

Для решения такой задачи содержимое файла стилей *.css должно быть примерно таким:

h3 i{
    color:red;
}

Обратите внимание, как мы достигаем требуемого результата. Мы пишем сразу два тега - <h3> и сразу за ним тег <i>. Тем самым мы их как бы объединяем в один составной тег <h3> <i>, которому мы и приписываем некоторый атрибут (красный цвет шрифта в данном случае). Теперь шрифт содержимого тега <i> будет красным только тогда, когда тег <i> находится внутри тега <h3>. Например, следующий фрагмент

...
<h3>Глава <i>1</i></h3>
<p>Введем следующее <i>понятие</i> ...</p>
 ...

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

Наверх

HTML. Урок 18. Почему таблицы стилей называются каскадными?

На этом занятии мы с вами обсудим вопрос, почему, собственно, в названии CSS присутствует слово "каскадные" (Cascade).

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

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

Таким образом, если в нашем файле стилей *.css был описан, скажем, тег <h1>, то все теги на WEB-страничке получали новое оформление (если мы, разумеется, не применяли к тегу <h1> дополнительный параметр - класс (подробности смотрите в уроке 16)).

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

Но если наш стиль применяется только в пределах одной странички или даже вообще в одном месте одной странички, то лучше применять другие способы расположения таблиц стилей. Вот эти два другие места мы сейчас и обсудим.

Первая ситуация - наш стиль применяется несколько раз в пределах только одной страницы. В этом случае самое лучшее место для таблицы стилей - это сама WEB-страничка. Вот пример:

<head>
    ...
    <style>
    p{
        font-weight : 700;
        letter-spacing : 3px;
    }
    </style>
</head>
<body>
<p>Пример текста</p>
 ...

Как вы видите, мы внедрили нашу таблицу стилей прямо на нашу HTML-страницу (внутри тегов <head> и </head>). Внутри таблицы мы переопределили для пары тегов <p> и </p> межбуквенный интервал и полужирность. Обратите внимание, что так как наша таблица стилей расположена внутри HTML-странцы, а не в отдельном файле, то мы заключаем ее в теги <style> и </style>. При просмотре этой страницы в окне браузера, как и следовало ожидать, буквы получили более жирное написание и межбуквенный интервал стал больше.

Кроме применения стилей ко всей странице может возникнуть потребность применить некий стиль однократно - т. е. только к одному элементу одной страницы. Делается это приблизительно так:

<p style=""font-weight:"'100'; color:'Blue';">Пример текста 2</p>

Здесь мы пишем параметри style прямо в нужном нам теге (<p> в нашем случае). Указанный фрагмент в окне браузера будет показывается синими буквами тонким шрифтом.

Теперь, собственно, мы готовы к тому, чтобы ответить на вопрос, почему таблицы стилей называются каскадными. Дело в том, что стиль для одного и того же тега (<p> в нашем случае) может быть определен во всех трех местах - и в отдельном файле стилей (с расширением *.css), и для всей HTML-странички (между тегами <style> и </style>), и для конкретного элемента на HTML-страничке. Так вот, если такая ситуация возникла, то стили применяются каскадно, т. е. сначала применяется стиль, определенный в файле стилей *.css, затем стиль, определенный между тегами <style> и </style>, и самым последним - стиль, определенный для конкретного элемента WEB-страницы.

Вот пример, поясняющий это. Создайте файл style.css и задайте в нем стиль для абзаца:

p{
    font-style : italic;
}

Далее создайте HTML-файл (пусть для определенности он будет называться test.html) со следующим содержимым:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>test</title>
    <style>
    p{
        font-weight : 700;
        color: Red;
    }
    </style>
</head>
<body>
<p>Пример текста</p>
<p style="font-weight : '100'; color: 'Blue';">Пример текста 2</p>
</body>
</html>

Мы применяем в нашем файле три стиля - из файла style.css, определенный для всей HTML-страницы (он написан между тегами <style> и </style>) и заданный для конкретного абзаза. Все эти стили будут применяться каскадно (последовательно). Откройте нашу страницу в браузере.

Обратите внимание, что весь текст у нас наклонный. Это было определено в файле style.css. Далее в самойм файле test.html в строчках

...
    <style>
    p{
        font-weight : 700;
        color: Red;
    }
    </style>
 ...

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

Таким образом стили применяются в таком порядке - сначала глобальный (из файла *.css), затем определенный для страницы (между тегами <style> и </style>), и, наконец, локальный (определенный для конкретного элемента страницы).

Наверх

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

Copyright сайт progs.biz, 2002

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