Отправляет email-рассылки с помощью сервиса Sendsay

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2009   →
 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
31
Автор
VelRoss

Статистика

462 подписчиков
-3 за неделю
←   Все выпуски   →

Tutos-web: Выпуск #31 : Урок 3. Как внедрить CSS


Вместе с Вами данную рассылку читают 863 (+4) подписчика*

Добро пожаловать в рассылку

Tutos-web !

 HTML {CSS} 20 марта 2009 
Выпуск No

31

email: velross@list.ru
website : Tutos-web.Net.Ru
Ведёт рассылку : Velross

 

 

Тема выпуска : Урок 3. Как внедрить CSS

Сегодня в выпуске:

  1. Предисловие к уроку  >>>
  2. Внешняя таблица стилей  >>>
  3. Внутренняя таблица стилей  >>>
  4. Встроенный стиль  >>>
  5. Несколько таблиц стилей  >>>

 
 

1. Предисловие к уроку

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

1 | 2 | 3 | 4 | 5 | Наверх

2. Внешняя таблица стилей

Внешний стиль идеально подходит, когда стиль применяется на большом количестве страниц. С внешней таблицей стилей, вы можете изменить внешний вид всего веб-сайта путём изменения одного файла-css. Каждая html-страница должна связываться с таблицей стилей с помощью тэга <link>. Тэг <link> пишется внутри секции <head>:

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

Браузер будет читать стиль, определённый в файле mystyle.css и отформатирует html-код документа в соответствии с ним.

Внешние таблицы стилей могут быть написаны в любом текстовом редакторе. Этот файл не должен содержать каких-либо HTML-тэгов. Ваш стиль должен быть сохранен в файле с расширением .CSS. Пример файла таблицы стилей приведен ниже:

 hr {color: sienna}
 p {margin-left: 20px}
 body {background-image: url("images/back40.gif")}

Не оставляйте пробелы между значением свойства и единицой измерения!
Если вы используете "margin-left: 20 px" вместо "margin-left: 20px", то это будет правильно работать только в IE6, но это не будет работать в Mozilla / Firefox или Netscape.

1 | 2 | 3 | 4 | 5 | Наверх

3. Внутренняя таблица стилей

Внутренние таблицы стилей следует использовать, когда один документ имеет уникальный стиль. Для определения внутренних стилей - стиль добавляют в секцию <head>, при помощи тэга <style>, например:

 <head>
 <style type="text/css">
 hr {color: sienna}
 p {margin-left: 20px}
 body {background-image: url("images/back40.gif")}
 </style>
 </head>

Теперь браузер прочитает этот стиль и отформатирует документ согласно нему.

Примечание: обычно, браузер игнорирует неизвестные ему тэги и выводит их содержимое на страницу обычным текстом. Это означает, что те люди, которые используют старые браузеры, неподдерживающие тэг <style>, - увидят его содержимое на странице. Чтобы этого не произошло, необходимо скрывать стиль внутри элемента комментария:

 <head>
 <style type="text/css">
 <!--
 hr {color: sienna}
 p {margin-left: 20px}
 body {background-image: url("images/back40.gif")}
 -->
 </style>
 </head>


1 | 2 | 3 | 4 | 5 | Наверх

4. Встроенный стиль

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

Для использования встроенных стилей необходимо внутри нужного вам элемента использовать атрибут style. Атрибут стиля может содержать любые свойства стилей. Пример показывает, как изменить цвет и отсуп от левого края для элемента <p>:

 <p style=""color:" sienna; margin-left: 20px">
 Это параграф
 </p>


1 | 2 | 3 | 4 | 5 | Наверх

5. Несколько таблиц стилей

Если некоторые свойства были установленны на один и тот же селектор в разных стилях, то значения будут унаследованы от последнего по приоритету стиля (помним, что номер 4 имеет самый высокий приоритет, см. урок 1).

Например, внешняя таблица стиля имеет следующие свойства для селектора h3:

 h3
 {
 color: red;
 text-align: left;
 font-size: 8pt
 }

А внутренний стиль имеет следующие свойства, для того же селектора h3:

 h3
 {
 text-align: right;
 font-size: 20pt
 }

Если страница с внутренней таблицей стиля будет иметь связь и с внешней таблицей стиля, то свойства для селектора h3 получатся такими:

 color: red;
 text-align: right;
 font-size: 20pt

Цвет наследуется от внешнего стиля, а выравнивание текста и размер шрифта берутся от внутреннего.


1 | 2 | 3 | 4 | 5 | Наверх

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

Ог Мондино , "Ключ к лучшей жизни ".

*Общее количество на 2-х рассылочных сервисах (Content.Mail.Ru и Subscribe.ru). 		 
  

tutos-web © 2008-2009

В избранное