Стили переопределения тегов CSS в редакторе Adobe Dreamweaver +

Закроем страницу default.htm. Если Dreamweaver выведет окно-предупреждение, спрашивающее нас, сохранять ли страницу перед закрытием, щелкнем по кнопке Нет (No). И откроем эту же страницу снова. Так мы разом избавимся от всех сделанных нами в ней изменений.

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

Проще всего это сделать с помощью стиля переопределения тега CSS. Этот стиль применяется ко всем фрагментам текста, являющимся содержимым тега, который этот стиль переопределяет. Так, мы собираемся создать стиль переопределения тега <hi>; значит, он будет применим Web-обозревателем ко всем заголовкам первого уровня.

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

Давайте создадим стиль переопределения тега <hi> и поместим его во внешнюю таблицу стилей. Впоследствии мы используем эту таблицу стилей для форматирования второй страницы нашего сайта — stat.htm.

Снова поставим текстовый курсор на заголовок сайта Снова найдем в редакторе свойств раскрывающийся список Целевое правило и на этот раз выбираем в нем пункт <Создать правило CSS>. После этого щелкнем в уже знакомой нам группе кнопок-переключателей Е В 3 В по второй слева кнопке.

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

В раскрывающемся списке Тип селектора этого окна указывается разновидность создаваемого стиля. В нашем случае нужно выбрать в нем пункт Тег (переопределяет элемент HTML).

Теперь нам будет нужно задать имя создаваемого стиля. В случае стиля переопределения тега имя должно совпадать с именем тега, который этот стиль переопределяет, без символов < и >. Поскольку мы переопределяем тег <hi>, имя нашего стиля будет hi (или hi — регистр букв здесь не имеет значения). Выберем соответствующий пункт в комбинированном списке Имя селектора.

И напоследок укажем, в какой таблице стилей следует сохранить созданный нами стиль. Это выполняется с помощью раскрывающегося списка Определение правила. В нем могут присутствовать следующие пункты:

(Только в этом документе) — сохраняет стиль во внутренней таблице стилей;
(Создать CSSфайл) — сохраняет стиль во вновь созданной внешней таблице стилей
<имя файла уже созданной таблицы стилей> — сохраняет стиль в созданной ранее таблице стилей, которая хранится в соответствующем файле.
Поскольку мы хотим сохранить стиль во внешней таблице стилей, которая пока еще не создана, выберем пункт (Создать CSS файл).

И можно со спокойной душой нажимать кнопку ОК.

Поскольку мы указали Dreamweaver создать для нас внешнюю таблицу стилей, он выведет диалоговое окно Сохранить файл таблицы стилей как. Это окно похоже на стандартное диалоговое окно сохранения файла и служит для задания имени файла внешней таблицы стилей. Зададим для нее имя main.css. Кстати, css — стандартное расширение для файлов таблиц стилей.

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

Вот и все. Заголовок сайта выровнен по центру. А «за кулисами» Dreamweaver создал для нас соответствующий стиль и поместил его во внешнюю таблицу стилей.

Сохраним наш труд. Но если мы сделаем это выбором пункта Сохранить меню Файл или нажатием комбинации клавиш <Ctrl>+<S>, то сохраним только саму страницу, но не таблицу стилей, которая, как мы помним, хранится в отдельном файле. Чтобы сохранить и страницу, и внешнюю таблицу стилей, проще всего выбрать пункт Сохранить все меню Файл. К сожалению, комбинации клавиш для этой операции не предусмотрено.

Интересно, что натворил Dreamweaver, пока мы самозабвенно щелкали по кнопкам и выбирали пункты в списках? Вот бы посмотреть, хоть бы одним глазком!..

Элементарно! Обратим внимание на верхний край окна документа, в котором открыта наша страница. Там находится особая панель, называемая панелью связанных файчов.

Панель связанных файлов появляется только в том случае, если к странице привязана внешняя таблица стилей (и в некоторых других случаях). Она содержит набор «плоских» кнопок-переключателей; в нашем случае — это кнопки Исходный код и main.css. Эти кнопки представляют, соответственно, HTML-код самой страницы и CSS-код внешней таблицы стилей.

Чтобы увидеть нашу внешнюю таблицу стилей, щелкнем по кнопке main.css панели связанных файлов. Окно документа переключится в режим отображения Web-страницы и HTML-кода, но его верхняя часть будет содержать не HTML-код станицы, а CSS-код таблицы стилей main.css.

И увидим мы там вот что: hi {

text-align: center;

}

Во-первых, здесь присутствует имя стиля — hi, которое мы задали в окне Создать правило CSS. Во-вторых, мы видим, что определение стиля следует за ним через пробел и заключается в фигурные скобки.

Как было замечено ранее, если в определении стиля присутствует несколько пар <атрибут>:<значение>, они отделяются друг от друга знаком точки с запятой. Как мы видим, Dreamweaver поставил этот знак после единственной пары text-align: center на тот случай, если к ней добавятся другие пары.

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

Мы можем форматировать CSS-код так же, как код HTML: разбивать его на строки, использовать отступы для оформления, вставлять вместо одного пробела несколько и пр. Web-обозреватель те обращает на это внимания.

Чтобы переключиться обратно в режим отображения Web-страницы, проще всего щелкнуть по кнопке-переключателю Дизайн панели Документ. Сделаем это.

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

<LINK HREF=»main.css» REL=»stylesheet» TYPE=»text/css»>

Одинарный тег <link> служит именно для привязки внешней таблицы стилей к странице. Единственный его обязательный атрибут href как раз и задает интернет-адрес файла, где хранится внешняя таблица стилей. Остальные атрибуты этого тега задают служебные параметры и не являются обязательными. Тег <link> может присутствовать только в секции заголовка страницы (внутри тега <head>).

А что же внутренняя таблица стилей? Она ничем не отличается от внешней, за двумя исключениями:

она помещается прямо в секции заголовка Web-страницы (внутри тега <head>);
она заключается в особый парный тег <style>.
Вот пример внутренней таблицы стилей:

<HEAD>

<STYLE>

h1 {

text-align: center;

}

</STYLE>

</HEAD>

Внутренние таблицы стилей обычно содержат только те стили, что используются в одной-едииствеиной странице. Во внешние же таблицы стилей выносят стили, которые должны использоваться сразу на нескольких страницах или даже на всех страницах сайта (глобальные таблицы стилей). Так, таблица стилей main.css станет глобальной таблицей стилей для нашего сайта.

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

1 комментарий

  • 03.07.2016 09:39, a сказал:

    a

    Стили переопределения тегов CSS в редакторе Adobe Dreamweaver | Записки старого сисадмина

    (Обязательно)
    (Обязательно, не публикуется)

    Юзер за дедку, дедка за тоссер, тоссер за мэйлер - и отослали мессаж!
    Яндекс.Метрика beget