Описания
стилей могут храниться в отдельном текстовом файле с расширением css (внешние,
или присоединенные стили), а могут –
в самом HTML-документе
(встроенные или вложенные стили).
Создавая
css-файл вы просто вводите строчку за строчкой названия и описания стилей (о
том, как их описывать, речь пойдет ниже). Никаких дополнительных тегов в таком
файле не требуется. А о том, что та или иная веб-страница должна оформляться
при помощи стилевого файла, браузер узнает по некоей привязке, которую мы
поставим на каждой страничке. Привязка представляет собой тег link (связь), который должен стоять в
заголовке сайта (где-то между head
и / head):
Атрибут rel="stylesheet" информирует браузер о том, что будет подгружаться файл
стилевых описаний.
Атрибут type="text/css" указывает на язык (в данном случае css).
CSS-код
можно записывать в головной части HTML-файла (внутри элемента style).
Чтобы
пользоваться вложенными стилями, на данной страничке надо использовать тег style для их описания. Вот пример такого
описания:
<style>
img {border: 1px solid #000}
. pic {position: absolute; top: 2px; left: 155px;}
</style>
Иногда общее стилевое оформление
дополняют частным, пригодным именно для данной страницы.
Двумя этими способами дело, однако же,
не исчерчивается. Существует третий способ задания стилей - строчной, (или, как
его иногда называют, инлайновый), при котором заранее ничего и нигде не
определяется. Задается стилевое оформление для одного конкретного тега в одном
конкретном месте, что означает для нас с вами просто-напросто дополнительные
возможности по оформлению наших страничек как бы еще, один набор параметров.
В оформляемом теге используется
новый атрибут style. Например, вместо
привычного:
<h1><center><font color=white size -+1> Это заголовок Н1, он будет отцентрированным, белым, размера +1</center></h1>
мы с вами можем написать такие слова:
<h1 style="text-align: center; font-size: 12pt; color:
white"> Это заголовок h1, он будет отцентрированным, белым, 12-го кегля<h1>
Значения
атрибута style
при этом необходимо брать в кавычки.
Вы можете применять все три способа стилевого
оформления одновременно, но надо разобраться с тем, как они все друг на друга
влияют.
1.
При наличии строчного стиля все остальные стили
на фрагмент уже не действуют. А при наличии вложенного стиля не действует
присоединяемый. Вот такой между ними установлен приоритет - снизу вверх.
2.
Если же какое-то свойство (например, цвет
шрифта) не прописано в строчном или вложенном стиле, то действует его значение,
заданное в описании более высокой ступени.
За этот способ ступенчатого влияния на оформление и
называют стали каскадными или иерархическими.
А вот вам и четвертый
способ применения стилей к документу, нисколько не нарушающий нарисованную выше
стройную картину. Есть в HTML такой интересный тег SPAN, который создает
некий отдельный блок внутри абзаца или раздела (хоть одно слово, хоть одна
буква!). Благодаря ему мы сможем подключать стиль не ко всему документу, а
только к нужной его части (от открывающего тега до закрывающего).
Если нужно в этом фрагменте применить встроенный или
присоединяемый стиль, в качестве параметров в теге SPAN будет
стоять имя класса или идентификатора.
Например
span class="opred">Экскаватор</span> (от лат. excavo - <em>долблю,
выдалбливаю</em>) - основной тип выемочно-погрузочных машин,
применяемых для производства земляных работ и до.
А когда стиль строчной, в нем могут быть прямо описаны
параметры оформляемого элемента, например:
<span style ="font-size: 400%; font-weight: bold>B</ span> от такая буквица -
буква «В» будет полужирная, размером 400 % от базового шрифта.
Точно таким же образом работает с css известный нам тег
создания раздела DIV. Вся разница в том, что SPAN используется
для оформления нескольких слов или предложений внутри абзаца, a DIV оформляет абзацы целиком.
Литература:
1. А. Левин. Самоучитель полезных программ. Питер. 2008.
2. Пол Макфедрис.
Создание Web-страниц. Москва.
2004
4. А.А. Дуванов. CSS: кратко о самом главном. Москва.
Чистые пруды. 2009
Комментариев нет :
Отправить комментарий