Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Каскадные таблицы стилей

Читайте также:
  1. XI. СОСТАВЛЕНИЕ СВОДНОЙ КОРРЕКТИРОВОЧНОЙ ТАБЛИЦЫ
  2. Автоматическое заполнение таблицы
  3. Анализ Крупноформатной таблицы
  4. Быстрая вставка неформатированной таблицы
  5. ВЕСЁЛЫХ СТИЛЕЙ ДЛЯ ДРУЗЕЙ ЖЕНИХА!
  6. ВЗАИМОСВЯЗЬ КОНЦЕПТУАЛЬНОГО МЫШЛЕНИЯ И СТИЛЕЙ САМОРЕГУЛЯЦИИ У БЕЗРАБОТНЫХ ГРАЖДАН С РАЗНЫМ УРОВНЕМ ПРОФЕССИОНАЛЬНОЙ ВОСТРЕБОВАННОСТИ 1 страница
  7. ВЗАИМОСВЯЗЬ КОНЦЕПТУАЛЬНОГО МЫШЛЕНИЯ И СТИЛЕЙ САМОРЕГУЛЯЦИИ У БЕЗРАБОТНЫХ ГРАЖДАН С РАЗНЫМ УРОВНЕМ ПРОФЕССИОНАЛЬНОЙ ВОСТРЕБОВАННОСТИ 2 страница

Использование каскадных таблиц стилей (CSSCascading Style Sheets) позволяет существенно расширить возможности HTML. С использованием таблиц стилей можно определить практически все – от начертания шрифта до положения рисунка на странице. Основное преимущество использования таблиц стилей является отделения представления (внешнего вида) HTML документа от его содержания (структуры документа). Таблицы стилей позволяют существенно уменьшить количество используемых тегов, отвечающих за представление документа, что улучшает “прозрачность” HTML документа и облегчает его редактирование.

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

<P ALIGN=”CENTER”><I><FONT FACE=”Arial” COLOR=”red”>

Первый абзац </FONT></I></P>

<P ALIGN=”RIGHT”><B><I><FONT FACE=”Tahoma” COLOR=”green”>

Второй абзац </FONT></B></I></P>

<P ALIGN=”CENTER”><I><FONT FACE=”Arial” COLOR=”red”>

Третий абзац </FONT></I></P>

<P ALIGN=”RIGHT”><B><I><FONT FACE=”Tahoma” COLOR=”green”>

Четвертый абзац </FONT></B></I></P>

Можно вынести определения внешнего вида текста в заголовок документа, пометив их, например, как style_1 и style_2.

<STYLE>

P.style_1 {color: ”red”; font-family: ”Arial”;

font-style: italic; text-align: ”center”}

P.style_2 {color: ”green”; font-family: ”Tahoma”;

font-style: italic; font-weight: ”bold”;

text-align: ”right”}

</STYLE>

В результате в теле документа останутся только теги логического форматирования текста.

<P CLASS=”style_1”>Первый абзац</P>

<P CLASS=”style_2”>Второй абзац</P>

<P CLASS=”style_1”>Третий абзац</P>

<P CLASS=”style_2”>Четвертый абзац</P>

Парный тег <STYLE>…</STYLE> определяет таблицу стилей. Он может содержать необязательный атрибут TYPE, который принимает обязательное значение “text/css”.

Определение стиля может содержать несколько атрибутов, которые отделяются друг от друга точкой с запятой (;).

Стиль можно создать, не привязывая его ни к какому тегу:

.style_3 {color:”blue”; font-size: 14pt}

И теперь его можно использовать в любых тегах.

<P CLASS=”style_3”>Это абзац</P>

<I CLASS=”style_3”>Наклонный текст</I>

<CENTER CLASS=”style_3”>Выравнивание по центру</CENTER>

Таблицу стилей можно вынести в отдельный файл (как правило, с расширением css) и использовать сразу в нескольких документах. При этом в заголовке HTML документа необходимо разместить тег LINK с атрибутом REL= “stylesheet”:

<LINK REL=”stylesheet” HREF=”Адрес файла таблицы стилей”>


Дата добавления: 2015-07-10; просмотров: 136 | Нарушение авторских прав


Читайте в этой же книге: Методические указания | Структура и способы доступа к Internet | Доменная система имен | Форматирование шрифта |
<== предыдущая страница | следующая страница ==>
Таблицы| Атрибуты определения некоторых параметров абзаца

mybiblioteka.su - 2015-2024 год. (0.007 сек.)