Введение и форматирования текста часть 3

Краткий обзор каскадных таблиц стилей В первых версиях HTML не были предусмотрены возможности для указания типа шрифта, отступов, расстояние между строками и других элементов оформления текста. В более поздних версиях появились возможности указания типов шрифта и цвета, но только для специально выделенных промежутков текста. Централизованное управление элементами оформления текста только средствами HTML до сих пор недоступно. Основы CSS Чтобы обеспечить максимальные возможности в области оформления Web-страниц, организацией World Wide Web Consortium были утверждены стандарты в области технологии, прием
ала название каскадных таблиц стилей (Cascading Style Sheets, CSS). Применение CSS состоит из двух этапов:

  1. Определение стиля . Стиль — это набор свойств текста. Например, к таким свойствам относятся: выбранный вами шрифт, цвет, размер, фон и рамка. В CSS стиль называется селектором (selector).
  2. Применение стиля к одному или нескольким промежутков текста . В зависимости от использованного вами подхода стиль может применяться автоматически, или же вы должны будете указать область его применения вручную.
Реально для применения CSS используются строки кода. Насколько это возможно, вместо кода мы будем рассматривать диалоговые окна FrontPage, с помощью которых код CSS генерируется автоматически. Сначала несколько определений.
  • Стиль CSS (CSS style) — это набор свойств текста, например: гарнитура шрифта, его размер, насыщенность линий, цвет, цвет фона, тип рамки и ее толщина и прочее.
  • Правило CSS (CSS rule) — это выражение, которое присваивает свойства одному или нескольким стилям. Вот пример правила, которое указывает название шрифта и цвет для стилей H1 и H2:
H1, H2 {font-family; Anal; color; red} Между правилами и стилями существуют отношения типа большинство к-большинства. Одно правило применимо к любому количеству стилей и одному стилю можно применять любое количество правил.
  • Селектор (selector) — это название стиля CSS. Для наших целей интересны только три типа селекторов:
    • клавиатурные селекторы (type selectors) называются так же, как и теги HTML: Р — для обычных абзацев, H1 — для Heading1 (заголовка первого уровня), LI — для элемента списка, TD — для элемента таблицы и т. д. Применение правила к клавиатурного селектора приводит к тому, что меняется облик всех элементов страницы, управляемых соответствующим тегом HTML. Первое правило в следующем примере применяет курсив во все ячейки заголовка таблицы, второе правило делает все полужирный шрифт на странице красным.
TH {font-style; italic; } B {color; red; }
    • Селекторы классов (Class selectors) не применяются автоматически к каким-либо частей страницы. Вам необходимо указать, к каким участков страницы вы намерены их применить. Первое выражение в примере создает класс goga, а второй — применяет его к абзацу.
.goga {color: white; background-color: black; }

Этот текст будет белым на черном фоне. Обратите внимание, что выражение, с помощью которого вы определяете класс, начинается с точки. При применении стиля абзаца точку в начале ставить не надо!

    • Селекторы идентификаторов (ID selectors) действуют подобно селекторов классов. Единственное отличие заключается в том, что после создания стиля и привязки его к идентификатору можно указать этот идентификатор для элемента страницы. Вот простой пример. Создается стиль для всех элементов с идентификатором bruce, а затем идентификатор bruce присваивается абзаца. В результате текст в абзаце должен стать полужирным.
#bruce {font-weight: bold; }

Этот текст будет выделен полужирным. К сожалению, нельзя использовать один и тот же идентификатор более чем для одного элемента на странице. Поэтому селекторы идентификаторов, в отличие от селекторов классов, используются относительно редко. Обратите внимание на префикс #, который используется при создании селектора идентификаторов. Браузеры, поддерживающие CSS CSS — это относительно новая технология, и не все браузеры его поддерживают. В Internet Explorer поддержка CSS появилась, начиная с версии 3, а в Netscape Navigator — с версии 4. Большинство старых браузеров относятся к CSS так же, как и к другим неизвестных тегов HTML — они их игнорируют. Но среди браузеров, которые поддерживают CSS, есть существенные различия в отношении трактовки некоторых команд CSS. Вывод отсюда простой: чем важнее содержание страницы, в оформлении которой вы используете CSS, тем на большем количестве браузеров она должна быть протестирована. Может показаться, что CSS — очень сложные в применении и поддерживаются малым числом браузеров. Мое мнение такое, что в отношении других возможностей (например, сделать всю страницу графическим изображением или вообще оставить шрифты на полное рассмотрение браузера, отказавшись от CSS). CSS — лучший выбор. Где можно разместить правила CSS Есть несколько возможностей для размещения правил CSS на Web-странице.

  • Присоединить к элементу страницы . В последних версиях HTML для элементов страницы предусмотрен атрибут STYLE, который позволяет применять к элементу форматирования CSS. Код HTML при использовании этого атрибута выглядит следующим образом:

Это будет отражено большими буквами. При использовании кнопки Style в свойствах этого элемента FrontPage применит к нему выбранные вами настройки форматирования CSS именно этим способом.

  • Разместить в разделе Этот заголовок будет выделен зеленым цветом.
      • Чтобы вставлять подобные выражения не в режиме написания кода HTML, а с помощью диалоговых окон FrontPage, выберите в меню Format команду Style. Далее вы сможете создать нужные вам селекторы, используя соглашение о наименовании (название нового клавиатурного селектора должна совпадать с тегом структуры страницы HTML, название селектора классов — начинаться с точки (.), А название селектора идентификаторов — с знака фунта (#).
      • В выделенных частей текста селекторы применяются по-разному. Клавиатурные селекторы после их создания уже применены к соответствующим частям текста. Селекторы классов можно выбрать в числе других стилей из списка Change Style панели инструментов Formatting. Селекторы идентификаторов придется вставлять в режиме редактирования кода HTML (см. «Основы CSS»).

Комментарии и пинги к записи запрещены.

Комментарии закрыты.