Css style в html: Способы добавления стилей на страницу

В Dreamweaver можно определить следующие типы стилей:

• Стили классов позволяют применять свойства стиля к любому элементу или элементам на странице.

• Стили тегов HTML переопределить форматирование для определенный тег, например h2. Когда вы создаете или изменить стиль CSS для тега h2, весь текст отформатирован с тегом h2 сразу обновляется.

• Расширенные стили переопределить форматирование для конкретная комбинация элементов или для других форм селектора как разрешено CSS (например, селектор td h3 применяется всякий раз, когда заголовок h3 появляется внутри ячейки таблицы. ) Дополнительно стили также могут переопределять форматирование для тегов, содержащих определенный атрибут идентификатора. (например, стили, определенные параметром #myStyle, применяются ко всем тегам, содержащим пару атрибут-значение).

Правила CSS могут находиться в следующих местах:

Внешние таблицы стилей CSS

Наборы правил CSS, хранящиеся в отдельном внешнем CSS (.css) файл (не файл HTML). Этот файл связан с одним или несколькими страницы на веб-сайте с использованием ссылки или правила @import в разделе заголовка документа.

Внутренние (или встроенные) таблицы стилей CSS

Наборы правил CSS, включенные в тег стиля в заголовке HTML-документа.

Встроенные стили

Определяются в определенных экземплярах тегов в HTML-документе. (Использование встроенных стилей не рекомендуется.)

Dreamweaver распознает стили, определенные в существующие документы, если они соответствуют рекомендациям по стилю CSS. Dreamweaver также отображает большинство применяемых стилей. непосредственно в представлении «Дизайн». (Предварительный просмотр документа в окне браузера, тем не менее, обеспечивает наиболее точную «живую» визуализацию страницы.) Некоторые Стили CSS по-разному отображаются в Microsoft Internet Explorer, Netscape, Opera, Apple Safari или другие браузеры, а некоторые не в настоящее время поддерживается любым браузером.

Срок каскадирование относится к тому, как браузер в конечном итоге отображает стили для определенных элементов в Интернете страница. Три разных источника отвечают за стили, которые вы см. на веб-странице: таблица стилей, созданная автором страницу, пользовательские настройки стиля (если есть) и стандартное стили самого браузера. В предыдущих разделах описано создание стилей для веб-страницы в качестве автора как веб-страницы, так и таблица стилей, прикрепленная к этой странице. Но у браузеров тоже есть свои собственные таблицы стилей по умолчанию, определяющие отображение веб-страниц, кроме того, пользователи могут настраивать свои браузеры, выбирая которые настраивают отображение веб-страниц. Окончательный вид веб-страница является результатом правил всех трех этих источников объединение (или «каскадирование») для отображения веб-страницы в оптимальном способ.

Общий тег — тег абзаца или тег

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

в HTML-коде). В интернете Проводник, например, весь основной текст, включая текст абзаца, по умолчанию отображается шрифтом Times New Roman, Medium.

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

 р {
семейство шрифтов: Arial;
размер шрифта: маленький;
} 

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

Пользователи могут сделать выбор, чтобы настроить отображение браузера в оптимальный способ для собственного использования. В Internet Explorer, например, пользователь может выбрать «Вид» > «Размер текста» > «Максимальный». расширить шрифт страницы до более удобочитаемого размера, если они думают, что шрифт очень маленький. В конечном счете (по крайней мере, в этом случае) выбор пользователя переопределяет оба стиля браузера по умолчанию для размера шрифта абзаца и стили абзаца, созданные автором веб-страницы.

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

 body {
семейство шрифтов: Arial;
стиль шрифта: курсив;
} 

Весь текст абзаца на вашей веб-странице (а также текст, наследующий свойства тега абзаца) будет набран шрифтом Arial и курсивом, поскольку тег абзаца наследует эти свойства от тега body. Однако вы можете уточнить свои правила и создать стили, которые переопределяют стандартную формулу наследования. Например, если вы создадите следующие правила в своей таблице стилей:

 тело {
семейство шрифтов: Arial;
стиль шрифта: курсив;
}
п {
семейство шрифтов: Courier;
стиль шрифта: обычный;
} 

Весь основной текст будет написан шрифтом Arial и курсивом , кроме абзаца . (и его унаследованный) текст, который будет отображаться как Courier normal (не курсивом). Технически тег абзаца сначала наследует свойства, которые установлены для тега body, но затем игнорируют эти свойства, потому что он имеет свои собственные определенные свойства. Другими словами, пока страница элементы обычно наследуют свойства сверху, прямое применение свойства в тег всегда приводит к переопределению стандартного формула наследования.

Сочетание всех рассмотренных выше факторов плюс другие такие факторы, как специфичность CSS (система, придающая разный вес к определенным типам правил CSS) и порядок правил CSS, в конечном счете создать сложный каскад, в котором элементы с более высоким приоритетом перевешивают свойства с более низким приоритетом. Для получения дополнительной информации о правила, регулирующие каскад, наследование и специфичность, см. на сайте www.w3.org/TR/CSS2/cascade.html.

По умолчанию Dreamweaver использует каскадные таблицы стилей (CSS) для форматирования текста. Стили, применяемые к тексту с помощью инспектора свойств или команд меню, создают правила CSS, встроенные в заголовок текущего документа.

Вы также можете использовать конструктор CSS для создания и редактирования правил и свойств CSS. Конструктор CSS — гораздо более надежный редактор, чем инспектор свойств, и отображает все правила CSS, определенные для текущего документа, вне зависимости от того, встроены ли эти правила в заголовок документа или во внешнюю таблицу стилей. Adobe рекомендует использовать конструктор CSS (а не инспектор свойств) в качестве основного инструмента для создания и редактирования CSS. В результате ваш код будет чище и проще в обслуживании.

Дополнительные сведения о конструкторе CSS см. в разделе Разметка страниц с помощью конструктора CSS.

Помимо создаваемых стилей и таблиц стилей, для применения стилей к документам можно использовать таблицы стилей, входящие в состав Dreamweaver.

Руководство по форматированию текста с помощью CSS см. на странице www.adobe.com/go/vid0153.

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

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

Например, правило h2, показанное ниже, использует Синтаксис CSS. Обратите внимание, что параметры font-variant, font-stretch, font-size-adjust, и свойствам стиля шрифта были назначены их значения по умолчанию.

 h2 {
вес шрифта: полужирный;
размер шрифта: 16pt;
высота строки: 18pt;
семейство шрифтов: Arial;
вариант шрифта: нормальный;
стиль шрифта: обычный;
растяжка шрифта: нормальная;
настройка размера шрифта: нет
} 

Переписано как одно сокращенное свойство, одно и то же правило может выглядят следующим образом:

 h2 { шрифт: полужирный 16pt/18pt Arial } 

При использовании сокращенной записи пропущенные значения назначаются автоматически их значения по умолчанию. Таким образом, предыдущий сокращенный пример опускает вариант шрифта, стиль шрифта, растяжка шрифта, и теги font-size-adjust.

Если стили определены более чем в одном месте (например, как встроенные в HTML-страницу, так и импортированные из внешнего стиля лист), используя как короткую, так и длинную форму синтаксиса CSS, имейте в виду что пропущенные свойства в сокращенном правиле могут переопределить (или каскад ) свойства, которые явно заданы в другом правиле.

По этой причине Dreamweaver использует длинная форма нотации CSS по умолчанию. Это предотвращает возможные проблемы вызвано стенографическим правилом, переопределяющим стандартное правило. Если вы откроете веб-страница, закодированная с помощью сокращенной нотации CSS в Dreamweaver, имейте в виду, что Dreamweaver создаст любые новые правила CSS используя длинную форму. Вы можете указать, как Dreamweaver создает и редактирует правила CSS, изменение настроек редактирования CSS в категории «Стили CSS» диалогового окна «Настройки» («Правка» > «Настройки» в окна; Dreamweaver > Настройки на Macintosh).

В Dreamweaver вы можете работать с CSS несколькими способами:

• Вы можете использовать CSS Designer для создания CSS с минимальным кодированием. Дополнительные сведения см. в разделе Разметка страниц с помощью конструктора CSS.
• Вы также можете кодировать свой CSS вручную. Дополнительные сведения о функциях кодирования, предлагаемых Dreamweaver, см. в разделе Среда кодирования в Dreamweaver.