ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:

Создание каскадных таблиц стилей

⇐ Предыдущая 1 234 5 Следующая ⇒

В общем виде CSS задается следующим образом:

<селектор> { <атрибут стиля №1>: <значение атрибута>; <атрибут стиля №2>: <значение атрибута>;... <атрибут стиля №N>: <значение атрибута>; }

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

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

CSS стили отделяются друг от друга пробелами, либо символами переноса строк. Не должно быть символов ';' между различными стилями!

В описании селекторов и имен стилей не должно быть пробелов или переводов строк.

Рассмотрим возможные виды селекторов, способы их описания и представление в html - документе.

Таблица 6.2.
Селектор	Оформление в CSS	Оформление элемента, к которому применяется стиль в HTML	Пояснения
Селектор элементов (переопределениетега)	P { color: red }	<p>...</p>	Стиль будет применен ко всем абзацам документа. Т.е. весь текст, находящийся в рамках парного тега <p> будет выделен красным цветом.
Селектор классов (стилевой класс)	.classname { color: red }	<p class="classname">...</p>	Стиль может быть применен к любому тегу, содержащему атрибутclass, значение которого совпадает с наименованием селектора класса.
Селектор идентификаторов (именованный стиль)	#clrRed { color: red }	<p id="clrRed">...</p>	Стиль будет применен к любому тегу, содержащему атрибут id, значение которого совпадает с наименованием селектора стиля. В рамках одной веб страницы значение атрибута id должно быть уникальным. Т.е., фактически, данный стиль может быть применен единовременно только к одному элементу веб - страницы.
Селектор дочерних элементов	#clrRed>strong { color: red }	<p id="clrRed"> <strong>...</strong> </p>	Стиль будет применен ко всем элементам <strong>, находящимся в дочерних отношениях с <p id="clrRed"> и только к ним.
Контекстный селектор (комбинированный стиль)	p strong { color: red }	<p><strong>...</strong></p>	Стиль будет применен к тексту, в рамках тега <strong> следующего за тегом <p>. Фактически стиль привязывается к тегу <strong>.
p.classname { color: red }	<p class="classname">...</p>	Стиль будет применен ко всем тегам <p>, содержащим атрибутclass, значение которого равно classname.
p.classname <strong> { color: red }	<p class = "classname"> <strong>...</strong></p>	Стиль будет применен к содержимому тега <strong>, находящемуся внутри тега <p>. Атрибут class тега <p>, при этом, должен принимать значение classname.

Допускается создание одинаковых стилей, путем последовательного перечисления их селекторов. К примеру:

p,.classname, td strong { color: red }

В приведенном примере создается три одинаковых стиля: переопределение тега <p>, стилевой класс classname и комбинованный стиль для тега <strong>, находящегося в рамках тега <td>.

Связь CSS и HTML

Как уже упоминалось, CSS файл является внешним, по отношению к html - документу. Существует несколько способов "привязки" определенного файла стилей к конкретному документу.

Посредством тега < link >, находящимся в рамках парного тега < head >:

Атрибут rel указывает на тип подключаемого файла, type – указывает MIME тип файла, href – указывает путь до файла стилей.

Посредством директивы @import, находящейся в рамках парного тега < style >:

<head>.............<style type = "text/css">@import url(style.css)</style></head>

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

Таблица стилей располагается в рамках парного тега < style >:

<head>.............<style type = "text/css">p { color: red}..............</style></head>

Таблица стилей располагается в теле отдельного тега:

В этих случаях таблица стилей называется внутренней.

Внутренние таблицы полезнее тем, что являются неотъемлемой частью самого html - документа, т.е. веб - страница будет выглядеть, как должна, вне зависимости от доступности внешней таблицы стилей. У данного подхода есть и недостатки:

· внутренний стиль распространяется только на один веб - документ;

· применение внутренних стилей противоречит положению о необходимости отделения структуры документа от его представления.

Ход работы

1. Откройте файл index.html (из Практической работы 1) и измените его следующим образом:

<HTML>

<HEAD>

<TITLE> Главная страница </TITLE>

</HEAD>

<BODY>

<H1> Приветствую вас на своей страничке! </H1>

<H2> Это - главная страница! </H2>

А вот мое <A HREF="hello.html"> приветствие </A>.

<P> Больше пока ничего нет.

</BODY>

</HTML>

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

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

Для создания более значительного отступа применяют несколько элементов BR.

2. Для создания списков используются следующие элементы:

<UL>...</UL> задает ненумерованный маркированный список

<OL>...</OL> задает нумерованный список

<LI> задает элементы списков (ставится перед каждым элементом списка)

Список определений можно задать так:

<DL> <DT> <DD> </DL> где <DT> - термин, <DD> - определение.

Изменим index.html следующим образом:

<HTML>

<HEAD>

<TITLE> Главная страница </TITLE>

</HEAD>

<BODY>

<H1> Приветствую вас на своей страничке! </H1>

<H2> Это - главная страница! </H2>

А вот мое <A HREF="hello.html"> приветствие</A>.

<P> Мне нравится:

<UL> <LI> играть на гитаре

<LI> есть мороженое

<LI> лопать воздушные шарики</UL>

<P> Мне не нравится:

<OL> <LI> когда играют на моих нервах

<LI> есть овсянку

<LI> надувать шарики

</OL>

</BODY>

</HTML>

3. Теперь займемся оформлением нашей странички.

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

Для первого случая добавим в начало документа (в часть HEAD) следующий текст:

H1, H2 {text-align: center;}

</STYLE>

Просмотрите документ – заголовки теперь выровнены по центру.

4. Чтобы применить выравнивание сразу на несколько блоков, определим выравнивание при помощи элемента DIV. Для этого вместо определения стилей для H1 и H2, определим стиль для DIV:

DIV {text-align: center;}

Затем вложим оба заголовка в контейнер DIV. В результате получится такой фрагмент документа:

<HTML>

<HEAD>

<TITLE> Главная страница </TITLE>

DIV {text-align: center;}

</STYLE>

</HEAD>

<BODY>

<DIV>

<H1> Приветствую вас на своей страничке! </H1>

<H2> Это - главная страница! </H2>

</DIV>

…

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

Здесь мы уже использовали таблицы стилей, которые представляют собой набор установок свойств различных объектов. Чем-то они напоминают классы. Однако, если класс создается внутри документа и может быть применен, а может быть, и нет, то CSS, если подключен, своими установками влияет непосредственно на все объекты в документе. Таблицы стилей позволяют очень гибко оформлять документ – выравнивать заголовки и абзацы, задавать цветовой и шрифтовое оформление, создавать рамки вокруг объектов и многое другое.

5. Чем ближе к элементу находится описание стиля, тем больший приоритет он имеет. Например, добавим к открывающему тегу <H2> атрибут STYLE, в котором укажем, что выравнивание элемента надо проводить по правому краю:

<H2 STYLE="text-align: right">Это - главная страница!</H2>

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

Можно подключить CSS заданием ее в элементе STYLE в начале документа, как класс. Это делается так:

<HTML>
<HEAD>
<STYLE>
H1 {color: red}
H2 {color: red; font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1> Этот документ</H1>
<H2>использует стилевые таблицы</H2>
</BODY>
</HTML>

В данном примере, на экране вы увидите две строки, состоящие из двух объектов: H1 и H2. Посмотрите, во что превратился стиль по умолчанию. А ведь мы не делали никаких указаний в самом объекте насчет его стиля. Таким образом, сколько бы вы ни наделали объектов H1 и H2, их стиль всегда будет таким, каким вы его указали в стилевой таблице.

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

Создадим, например, файл mystyle1.css такого содержания:

H1,H2 {color: red;}

Затем добавим в часть HEAD файла index.html строку:

Теперь заголовки стали красного цвета. И любой документ, имеющий ссылку на mystyle1.css будет иметь заголовки H1 и Н2 красного цвета, если только в самом документе значение цвета для этих тегов не будет переопределено. Т.е. если в файле index.html мы в определении STYLE добавим

H1 {color: blue;}

то приветствие будет написано синим цветом.

7. Помимо применения общего для всех одноименных тегов определения стиля, можно создавать классы элементов. Например, если мы хотим, чтобы в одном и том же документе одни абзацы выравнивались по центру, а другие – по обоим краям, то можно создать соответствующие классы для элемента Р. Делается это так:

P.Center {text-align: center;}

P.Both {text-align: justify;}

</STYLE>

…

<P CLASS="Center"> … некоторый текст, который надо разместить по центру …</P>

<P CLASS="Both"> … некоторый текст, который должен быть выровнен по обоим краям …</P>

Здесь в определении стиля мы создали два класса для тега Р. Чтобы указать, к какому именно классу принадлежит конкретный тег, используется атрибут CLASS.

Проделайте это со своей страничкой.

⇐ Предыдущая 1 234 5 Следующая ⇒

Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных