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

JavaScript для начинающих. Изучаем с нуля.

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

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

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

←   Январь 2006   →
 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
Автор
ImHoster.net

Статистика

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

JavaScript для начинающих. Изучаем с нуля. выпуск тридцать восьмой


Информационный Канал Subscribe.Ru
Рассылка для всех, кто желает освоить JavaScript

JavaScript для начинающих

Выпуск #38
БИЗНЕС
СОТОВЫЕ ТЕЛЕФОНЫ
 ВСЕ ДЛЯ МОБИЛЬНИКА ЛУЧШИЙ ХОСТИНГ

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

В качестве примера CSS давайте создадим вэб-страницу, использующую различные стили. Пусть наш документ HTML подчиняется следующим правилам.

  • Во всем документе текст синий.

  • Абзацы выровнены по центру и с большими полями с обоих краев.

  • Заголовки первого, второго и третьего уровней отображены красным шрифтом.

  • Маркированные списки отображаются полужирным зеленым шрифтом.

    Листинг 38.1 показывает, как необходимо правильно определить описанные выше правила в синтаксисе HTML.

    Листинг 38.1. Простая таблица стилей 

    
1:   <STYLE TYPE="text/css">
2:   BODY {color: blue}
3:   P {text-align: center;
4:      margint-left: 20%;
5:      margin-right: 20%}
6:   H1,H2,H3 {color: red}
7:   UL {color: green; font-weight: bold}
8:   </STYLE>

    Вот по каким признакам построена эта таблица стилей.

  • Строки 1 и 8 содержат открывающий и закрывающий дескрипторы <STYLE>.

  • Строка 2 определяет цвет по умолчанию для шрифтов как синий.

  • Строки 3, 4 и 5 определяют форматирование абзаца.

  • Строка 6 определяет цвет шрифтов заголовков первых трех уровней.

  • Строки 7 и 8 определяют форматирование маркированных списков.

    Для иллюстрации работы кода таблицы стилей включим его в простой документ HTML. Приведем пример применения стилей элементов поверх общих стилей.

    Листинг 38.2. Пример документа HTML с таблицей стилей 

    
1:   <HTML>
2:   <HEAD><TITLE>Пример таблицы стилей</TITLE>
3:   <STYLE TYPE="text/css">
4:   BODY {color: blue}
5:   P {text-align: center;
6:      margin-left: 20%;
7:      margin-right: 20%}
8:   H1,H2,H3 {color: red}
9:   UL {color: green; font-weight: bold}
10:   </STYLE>
11:  </HEAD>
12:  <BODY>
13:  <H1>Добро пожаловать на страницу</H1>
14:  <P>Заголовок - красный. Текст - синий. Абзац выровнен
15:  по центру и имеет левое и правое поле 20% от его размера.</P>
16:  <P style="color: black">Этот абзац содержит черный текст. 
17:  Основной стиль был заменен стилем элемента. Изменен только цвет текста, 
18:  вырвнивание остается то же.</P>
19:  <UL>
20:  <LI>Это маркированный список
21:  <LI>Текст полужирный, зеленого цвета. Это параметры, определенные
22:  по умолчанию для таких списков.
23:  <LI style="color: red">Этот элемент имеет красный маркер.
24:  Стиль по умолчанию для него изменен.
25:  </UL>
26:  <P>Этот абзац со стилем по умолчанию</P>
27:  </BODY>
28:  </HTML>

    Использование внешних таблиц стилей

    Предыдущий пример демонстрирует применение таблицы стилей для незначительного изменения форматирования документа HTML. Таблица стилей в его коде занимает всего 8 строк. Если вы хотите сделать вашу страницу красочной и собираетесь назначать свои стили для большинства параметров форматирования, то вам стоит набраться терпения.

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

    Чтобы добавить внешний файл таблицы стилей в документ HTML, включите в дескриптор <HEAD> специальную команду его подсоединения. Эта задача выполянется с помощью дескриптора <LINK>, размещенного в заголовке:

    <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

    Этот дескриптор позволяет ссылаться на внешний файл таблицы стилей style.css.

    В следующем выпуске рассылке будем рассматривать управление стилями в JavaScript.

    До встречи.

    Ведущий рассылки: Виталий Прохоренко


    Читайте Роберта Кийосаки

    "Богатый папа, бедный папа" скачать

    "Квадрант денежного потока" скачать

    "Руководство богатого папы по инвестированию" скачать

    "Отойти от дел молодым и богатым" скачать

    "Бизнес-Школа" скачать
    • БИЗНЕС
    СОТОВЫЕ ТЕЛЕФОНЫ
    		 ВСЕ ДЛЯ МОБИЛЬНИКА ЛУЧШИЙ ХОСТИНГ

    © NBUSINESS.RU

    Subscribe.Ru
    Поддержка подписчиков
    Другие рассылки этой тематики
    Другие рассылки этого автора    		 Подписан адрес:
    Код этой рассылки: inet.webbuild.javascripts
    Архив рассылки    		 Отписаться Вебом Почтой
    Вспомнить пароль
    В избранное