Что такое связанные стили


 

Уроки HTML

11 Добавление стилей

Стили можно добавить тремя способами.

Внутренние стили

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

Для создания такого стиля связанные используется параметр style, который есть у всех тегов. Параметру style присваиваются перечисленные через "точку с запятой" атрибуты с заданными значениями. Значения атрибутам присваиваются не знаком "равно", как обычно, а знаком "двоеточие".

Например, Вы хотите, какой-то конкретный заголовок написать оранжевым цветом и размером 22 пиксела. Для этого напишите следующее:

<h1 style="color: #CD6600; font-size: 22px">Урок 1</h1>

Разберем этот пример. Фраза "Урок 1" выделена тегом заголовка <h1>. У тега <h1> создается стиль с помощью параметра style. У стиля задаются 2 атрибута color (цвет) и font-size (размер шрифта), разделенные "точкой с запятой". Атрибуту color присваивается значение #CD6600, атрибуту font-size присваивается значение 22px.

Глобальные стили

Глобальные стили создаются в случае необходимости задать какие-либо свойства для группы объектов. Такие стили создаются в начале документа внутри тега <head> и их действие распространяется на весь документ.

Глобальные стили добавляются в документ следующим образом:

  1. Внутри тега <head> вставляется парный тег <style> с параметром type="text/css";
  2. Внутри тега <style> располагаются все стили для данного документа. Стили разделяются просто переносом строки.
  3. Стиль описывается так: пишется название стиля и ставятся "фигурные скобки" { }.
  4. Между "фигурными скобками" пишутся все атрибуты стиля с присвоенными значениями, разделенные "точкой с запятой". Значения атрибутам присваиваются "двоеточием", а не знаком "равно". После значения последнего атрибута "точку с запятой" ставить необязательно.

<head>
<style type="text/css">
стиль1 {
   атрибут1: значение;
   атрибут2: значение;
   ...
}
стиль2 {
   атрибут1: значение;
   атрибут2: значение;
   ...
}
...
</style>
</head>

Например, сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов:

<head>
<style type="text/css">
h1 {
   color: #CD6600;      <-- стиль для тега <h1>
   font-size: 22px
}

h2 {
   color: #FF0000;      <-- стиль для тега <h2>
   font-size: 20px
}

</style>
</head>

После добавления этих стилей, все заголовки Вашего документа, выделенные тегами <h1> и <h2> без дополнительных тегов будут обладать нужными свойствами. И если Вы захотите изменить или добавить какое-либо свойство, Вы просто измените или добавите его в соответсвующем стиле.

Связанные стили

Таблицы связанных стилей (Linked Style Sheet) создаются в отдельном файле с расширением .css и подключаются к документу (или нескольким документам).

Этот способ добавления стилей наиболее удобный из всех описанных способов и предоставляет большее число возможностей для web-разработчика.

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

Во-вторых, можно изменять стили без изменения html-страниц. И все изменения автоматически применятся ко всем страницам, к которым подключен файл стилей.

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

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

Чтобы подключить к документу файл стилей, нужно в начале документа внутри тега <head> вставить тег <link> с тремя параметрами:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Где параметры rel="stylesheet" и type="text/css" - постоянные, а параметру href присваивается адрес файла стилей. Адрес может быть как абсолютный, так и относительный.

Например, к нашим урокам файл стилей style_school.css можно подключить так:

<head>
   <link rel="stylesheet" type="text/css" href="style_school.css">
</head>

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

стиль1 {
   атрибут1: значение;
   атрибут2: значение;
   ...
}
стиль2 {
   атрибут1: значение;
   атрибут2: значение;
   ...
}
...

Посмотрите, как устроен файл style_school.css.

Для примера создадим документ с заголовками (откройте его, посмотрите, как он выглядит без стилей, и посмотрите его код). Сделаем все заголовки <h1> оранжевого цвета и размером 22 пиксела и все заголовки <h2> красного цвета и размером 20 пикселов. Для этого создадим файл стилей style.css, содержащий следующее:

h1 {
   color: #CD6600;
   font-size: 22px
}
h2 {
   color: #FF0000;
   font-size: 20px
}

И подключим этот файл к нашему документу:

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

Получится такой документ (откройте его, посмотрите, как он выглядит с применением стилей, и посмотрите его код).

Сочетание различный видов стилей

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

Например, сделаем все заголовки <h1> оранжевого цвета, а один конкретный - красного цвета. Для оранжевых заголовков создадим глобальный стиль, а для красного - внутренний:

<head>
h1 {
color: #CD6600
}
</head>
<body>
<h1>Заголовок 1</h1>
<h1 style="color: #FF0000">Заголовок 2</h1>
<h1>Заголовок 3</h1>
</body>

В результате данного примера "Заголовок 1" и "Заголовок 3" будут оранжевого цвета, а "Заголовок 2" - красного.

Упражнение

Создайте html-документ, в котором различные объекты выделите разным цветом с помощью всех трех видов стилей.

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

Пришлите, пожалуйста, линк на Вашу страничку на адрес группы HTML Pilot в качестве отчета о выполнении данного упражнения. Посмотреть, как подписаться...

18/04/2007, Ю. Филимонова

- Главная страничка "Уроки HTML" -

 

Главная страничка :: Машинопись :: Mozilla Firefox :: Mozilla Thunderbird :: Total Commander ::
Local server :: ConTEXT :: Уроки HTML :: Справочный сайт (! только для пилотов) :: Отзыв



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Ещё статьи по теме: Таблицы связанных стилей (Linked Style Sheet) создаются в отдельном
Покрывало вязанные своими руками схемы
Вяжем шапки фото и схема
Окат рукава при вязании крючком
Вышивание по канве фото
Блузки для полных из кружева

Что такое связанные стили Что такое связанные стили Что такое связанные стили Что такое связанные стили Что такое связанные стили Что такое связанные стили Что такое связанные стили Что такое связанные стили