Способы задания стилей

Способы задания стилей

Описания стилей могут храниться в отдельном текстовом файле с расширением css (внешние, или присоединенные стили), а могут – в самом HTML-документе (встроенные или вложенные стили).

Создавая css-файл вы просто вводите строчку за строчкой названия и опи­сания стилей (о том, как их описывать, речь пойдет ниже). Никаких дополни­тельных тегов в таком файле не требуется. А о том, что та или иная веб-страница должна оформляться при помощи стилевого файла, браузер узнает по некоей привязке, которую мы поставим на каждой страничке. Привязка представляет собой тег link (связь), который должен стоять в заголовке сайта (где-то между head и / head):

style.css" type="text/css" /

Атрибут rel="stylesheet" информирует браузер о том, что будет подгружаться файл стилевых описаний.

Атрибут type="text/css" ука­зывает на язык (в данном случае css).

Атрибут href="style.css" задает адрес файла.

CSS-код можно записывать в головной части HTML-файла (внутри эле­мента style).

Чтобы пользоваться вложенными стилями, на данной страничке надо ис­пользовать тег style для их описания. Вот пример такого описания:

img {border: 1px solid #000}

. pic {position: absolute; top: 2px; left: 155px;}

Иногда общее стиле­вое оформление дополняют частным, пригодным именно для данной страницы.

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

В оформляемом теге используется новый атрибут style. Например, вместо привычного:

Это заголовок Н1, он будет отцентрированным, белым, размера +1

мы с вами можем написать такие слова:

Это заголовок h1, он будет отцентрированным, белым, 12-го кегля

Значения атрибута style при этом необходимо брать в кавычки.

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

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

2. Если же какое-то свойство (например, цвет шрифта) не прописано в строчном или вложенном стиле, то действует его значение, заданное в описа­нии более высокой ступени.

За этот способ ступенчатого влияния на оформление и называют стали кас­кадными или иерархическими.

А вот вам и четвертый способ применения стилей к документу, нисколько не нарушающий нарисованную выше стройную картину. Есть в HTML такой интересный тег SPAN, который создает некий отдельный блок внутри абзаца или раздела (хоть одно слово, хоть одна буква!). Благодаря ему мы сможем подклю­чать стиль не ко всему документу, а только к нужной его части (от открывающе­го тега до закрывающего).

Если нужно в этом фрагменте применить встроенный или присоединяемый стиль, в качестве параметров в теге SPAN будет стоять имя класса или идентифи­катора.

Например

span class="opred"Экскаватор (от лат. excavo - долблю, выдалбливаю) - основной тип выемочно-погрузочных машин, применяемых для производства земляных работ и до.

А когда стиль строчной, в нем могут быть прямо описаны параметры оформляемого элемента, например:

B от такая буквица - буква «В» будет полужирная, размером 400 % от базового шрифта.

Точно таким же образом работает с css известный нам тег создания разде­ла DIV. Вся разница в том, что SPAN используется для оформления нескольких слов или предложений внутри абзаца, a DIV оформляет абзацы целиком.

Литература:

1.      А. Левин. Самоучитель полезных программ. Питер. 2008.

2.      Пол Макфедрис. Создание Web-страниц. Москва. 2004

4.      А.А. Дуванов. CSS: кратко о самом главном. Москва. Чистые пруды. 2009