В этой статье объясняется, как использовать каскадные таблицы стилей (CSS) для форматирования текста на странице в Dreamweaver. Вы можете использовать CSS для форматирования и позиционирования текста способами, недоступными HTML, что дает вам большую гибкость и контроль над внешним видом вашей страницы.
Понимание CSS
Каскадные таблицы стилей (CSS) — это набор правил форматирования, которые управляют внешним видом содержимого на веб-странице. Когда вы используете CSS для форматирования страницы, контент и представление сохраняются отдельно. Содержимое страницы (HTML-код) находится в отдельном HTML-файле, а правила CSS, определяющие представление кода, находятся в другом файле (внешней таблице стилей) или другой части HTML-документа (обычно в разделе). Использование CSS дает вам большую гибкость и больший контроль над внешним видом вашей страницы: от точного позиционирования макета до определенных шрифтов и стилей.
CSS позволяет вам управлять многими свойствами, которыми вы не можете управлять с помощью одного лишь HTML. Например, вы можете указать разные размеры шрифта и единицы измерения (пиксели, точки и т. д.) для выделенного текста. Используя CSS для установки размера шрифта в пикселях, вы также можете обеспечить более единообразный подход к макету и внешнему виду страницы в нескольких браузерах.
Правила форматирования CSS состоят из двух частей: селекторов и объявлений. Селекторы — это термины, которые идентифицируют форматированные элементы (например, P, H1, имя класса или идентификатор), а объявления используются для определения элементов стиля. В следующем примере H1 — это селектор, а все, что находится между фигурными скобками ({}), — это объявление:
Вот содержимое в кавычках:
H1 {
font-size:16 пикселей;
font-family:Helvetica;
font -weight:bold
};
Объявление состоит из двух частей: свойств (например, font-family) и значений (например, Helvetica). В приведенном выше примере создается стиль для тега H1: текст всех тегов H1, связанных с этим стилем, будет иметь размер 16 пикселей и использовать шрифт Helvetica, выделенный жирным шрифтом.
Термин «каскадирование» относится к возможности применять несколько стилей к одному и тому же элементу или веб-странице. Например, вы можете создать одно правило CSS для применения цвета, другое правило для применения полей, а затем применить оба правила к одному и тому же тексту на странице. Определенные стили «каскадируются» на элементы вашей веб-страницы, в конечном итоге создавая желаемый дизайн.
Основное преимущество CSS заключается в том, что его легко обновлять; при обновлении одного правила CSS форматирование всех документов, использующих определенный стиль, автоматически обновляется до нового стиля.
В Dreamweaver можно определить следующие типы правил:
Пользовательские правила CSS (также называемые «стилями классов») позволяют применять свойства стиля к любому текстовому диапазону или блоку текста. Все стили классов начинаются с точки (.). Например, вы можете создать стиль класса с именем .red, установить для свойства цвета правила значение красный, а затем применить этот стиль к части стилизованного текста абзаца.
Правила тегов HTML переопределяют формат определенных тегов (например, p или h1). Когда вы создаете или изменяете правило CSS для тега h1, весь текст, отформатированный с помощью тега h1, обновляется немедленно.
Правила селектора CSS (расширенные стили) переопределяют форматирование определенных комбинаций элементов или других форм селектора, разрешенных CSS (например, применяйте селектор td h2 всякий раз, когда заголовок h2 появляется в ячейке таблицы). Расширенные стили также могут переопределять формат тегов, содержащих определенный атрибут id (например, стиль, определенный #myStyle, можно применять ко всем тегам, содержащим пару атрибут/значение id="myStyle").
Создайте новую таблицу стилей
Сначала вы создадите внешнюю таблицу стилей, содержащую правила CSS, определяющие стили текста абзацев. При создании стилей во внешней таблице стилей вы можете централизованно управлять внешним видом нескольких веб-страниц одновременно без необходимости устанавливать стили для каждой веб-страницы индивидуально.
Правила CSS могут находиться в следующих местах:
Внешняя таблица стилей CSS — это серия правил CSS, хранящихся в отдельном внешнем файле .css (не в файле HTML). Файл .css связан с одной или несколькими страницами веб-сайта с помощью ссылок в заголовке документа.
Внутренняя (или встроенная) таблица стилей CSS — это серия правил CSS, содержащихся в теге стиля в заголовке HTML-документа. Например, в следующем примере определяется размер шрифта для всего текста в документе, для которого установлены теги абзаца:
:<head>
<стиль>
р {
размер шрифта: 80 пикселей
}
</стиль>
</голова>:
Встроенные стили определяются в конкретных экземплярах тегов в HTML-документе. Например,
"p style="размер шрифта: 9 пикселей""
Определяет размер шрифта только для абзацев, отформатированных с помощью тегов, содержащих встроенные стили.
Dreamweaver визуализирует большинство свойств стиля, которые вы применяете, и отображает их в окне документа. Вы также можете просмотреть документ в окне браузера, чтобы увидеть, как применяются стили. Некоторые свойства стиля CSS по-разному отображаются в Microsoft Internet Explorer, Netscape Navigator, Opera и Apple Safari.
Выберите «Файл» > «Новый».
В диалоговом окне «Новый документ» выберите «Базовая страница» в столбце «Категория», выберите «CSS» в столбце «Базовая страница», а затем нажмите «Создать».
В окне документа появится пустая таблица стилей. Кнопки представления «Дизайн» и «Просмотр кода» отключены. Таблицы стилей CSS представляют собой обычные текстовые файлы, и их содержимое не будет использоваться для просмотра в браузере.
Сохраните («Файл» > «Сохранить») эту страницу как cafe_townsend.css.
При сохранении таблицы стилей обязательно сохраните ее в папке cafe_townsend (корневая папка вашего веб-сайта).
Введите следующий код в таблицу стилей:
p{
семейство шрифтов: Verdana, без засечек;
размер шрифта: 11 пикселей;
цвет: #000000;
высота строки: 18 пикселей;
отступ: 3 пикселя;
}
Когда вы вводите код, Dreamweaver использует подсказки по коду, предлагая варианты, которые помогут вам завершить ввод. Когда вы увидите код, который Dreamweaver должен выполнить за вас, нажмите Enter (Windows) или Return (Macintosh).
Не забудьте добавить точку с запятой после значения атрибута в конце каждой строки.
Завершенный код будет выглядеть следующим образом:
Чтобы отобразить руководство, выберите «Справка» > «Ссылки», а затем выберите «Справочник по CSS O'Reilly» во всплывающем меню на панели «Ссылки». Сохраните таблицу стилей.
Прикрепленная таблица стилей
Когда вы прикрепляете таблицу стилей к веб-странице, правила, определенные в таблице стилей, применяются к соответствующим элементам на странице. Например, когда вы прикрепляете таблицу стилей cafe_townsend.css к странице index.html, весь текст абзаца (текст, отформатированный с помощью тегов в HTML-коде) форматируется в соответствии с определенными вами правилами CSS.
В окне «Документы» откройте файл index.html Cafe Townsend. (Если файл уже открыт, щелкните его вкладку.)
Выделите первый текст, который вы вставили на страницу в уроке «Добавление содержимого на страницу».
Посмотрите в инспекторе свойств и убедитесь, что абзац отформатирован с использованием тегов абзаца.
Если во всплывающем меню «Формат» Инспектора свойств указано «Абзац», это означает, что абзац был отформатирован с использованием тега абзаца. Если во всплывающем меню «Формат» Инспектора свойств указано «Нет» или что-то еще, выберите «Абзац», чтобы отформатировать абзац.
Повторите шаг 3 для второго абзаца.
На панели «Стили CSS» («Окно» > «Стили CSS») нажмите кнопку «Прикрепить таблицу стилей» в правом нижнем углу панели.
В диалоговом окне «Присоединить внешнюю таблицу стилей» нажмите «Обзор» и перейдите к файлу cafe_townsend.css, созданному в предыдущем разделе.
Нажмите ОК.
Текст в окне «Документ» будет отформатирован в соответствии с правилами CSS во внешней таблице стилей.
Изучите панель «Стили CSS»
Панель «Стили CSS» позволяет отслеживать правила и свойства CSS, которые влияют на выбранный в данный момент элемент страницы или на весь документ, а также изменять свойства CSS, не открывая внешнюю таблицу стилей.
Убедитесь, что страница index.html открыта в окне документа.
На панели «Стили CSS» («Окно» > «Стили CSS») нажмите «Все» в верхней части панели, а затем проверьте правила CSS.
В режиме «Все» на панели CSS отображаются все правила CSS, применимые к текущему документу, независимо от того, находятся ли они во внешней таблице стилей или в собственном документе. На панели «Все правила» вы должны увидеть две основные категории: категорию тегов и категорию cafe_townsend.css.
Если категория меток не развернута, щелкните знак плюса (+), чтобы развернуть категорию.
Нажмите на правило тела.
Свойство цвета фона со значением #000000 отображается в нижней панели свойств.
Обратите внимание, что вам может потребоваться свернуть другие панели, такие как панель «Файл», чтобы увидеть всю панель «Стили CSS». Вы также можете изменить длину панели «Стили CSS», перетащив границу между панелями.
Цвет фона страницы можно установить в разделе «Учебное пособие: создание макета страницы на основе таблицы» с помощью диалогового окна «Изменить свойства страницы». Когда вы устанавливаете свойства страницы таким образом, Dreamweaver записывает стиль CSS, встроенный в документ.
Нажмите знак плюса (+), чтобы развернуть категорию cafe_townsend.css.
Нажмите pRule.
Все свойства и значения, определенные во внешней таблице стилей для правила p, появятся на панели «Свойства» ниже.
В окне «Документ» щелкните один раз в любом месте двух абзацев, которые вы только что отформатировали.
На панели «Стили CSS» нажмите «Текущий» в верхней части панели, а затем проверьте стили CSS. В текущем режиме панель CSS отображает сводку свойств текущего выделения. Показанные свойства соответствуют свойствам правила p во внешней таблице стилей.
В следующем разделе вы будете использовать панель «Стили CSS» для создания нового правила. Создавать новые правила с помощью панели «Стили CSS» намного проще, чем вводить правила вручную, как при первоначальном создании внешней таблицы стилей.
Создайте новые правила CSS
В этом разделе вы используете панель «Стили CSS» для создания собственного правила CSS или стиля класса. Стили классов позволяют вам устанавливать свойства стиля любого диапазона или блока текста и могут применяться к любому тегу HTML. Дополнительные сведения о различных типах правил CSS см. в разделе «Понимание CSS».
На панели «Стили CSS» нажмите «Новое правило CSS» в правом нижнем углу панели.
В диалоговом окне «Новое правило CSS» выберите «Класс» в разделе «Тип селектора». Эта опция должна быть выбрана по умолчанию.
Введите .bold в текстовом поле «Имя».
Обязательно введите точку (.) перед словом «жирный». Все стили классов должны начинаться с точки.
Во всплывающем меню «Определить в» выберите cafe_townsend.css. Этот файл должен быть выбран по умолчанию.
Нажмите ОК.
Появится диалоговое окно «Определение правила CSS», указывающее, что вы создаете стиль класса с именем .bold в файле cafe_townsend.css.
В диалоговом окне «Определение правила CSS» выполните следующие действия:
В текстовом поле «Шрифт» введите Verdana, без засечек.
В текстовом поле «Размер» введите 11 и выберите «Пиксели» во всплывающем меню справа.
В текстовом поле «Высота строки» введите 18 и выберите «Пиксели» во всплывающем меню справа.
Выберите «Жирный» во всплывающем меню «Вес».
В текстовом поле «Цвет» введите #990000.
Совет. Дополнительную информацию о свойствах CSS см. в справочном руководстве O'Reilly, включенном в комплект Dreamweaver. Чтобы отобразить руководство, выберите «Справка» > «Ссылки», а затем выберите «Справочник по CSS O'Reilly» во всплывающем меню на панели «Ссылки».
Нажмите ОК.
Нажмите кнопку «Все» в верхней части панели «Стили CSS».
Если категория cafe_townsend.css не развернута, нажмите кнопку «плюс» (+) рядом с категорией.
Вы можете видеть, что Dreamweaver добавил стиль класса .bold в список правил, определенных во внешней таблице стилей. Если щелкнуть правило, выделенное жирным шрифтом, на панели «Все правила», свойства правила появятся на панели «Свойства». Новые правила также появляются во всплывающем меню «Стиль» инспектора свойств.
Применить стиль класса к тексту
Теперь вы создали правило класса и применили его к тексту абзаца.
В окне «Документ» выделите первые четыре слова текста в первом абзаце: «Дальновидный шеф-повар кафе Таунсенд».
В Инспекторе свойств («Окно» > «Свойства») выберите жирный шрифт во всплывающем меню «Стиль».
К тексту будет применен «жирный» стиль.
Повторите шаг 2, чтобы применить стиль «жирный» к первым четырем словам второго абзаца.
Сохраните страницу.
Форматирование текста панели навигации
Далее вы будете использовать CSS для применения стилей к тексту ссылки на панели навигации. Многие веб-страницы используют цветные прямоугольные изображения со встроенным текстом для создания панелей навигации. Однако, если вы используете CSS, все, что вам нужно установить, — это текст ссылки и некоторое форматирование. Используя свойство display:block и задав ширину блока, вы можете эффективно создать прямоугольник без использования дополнительного изображения.
Создайте новое правило для навигации.
Откройте файл cafe_townsend.css, если он еще не открыт, или щелкните его вкладку, чтобы отобразить файл.
Определите новое правило, введя следующий код после стиля класса .bold в файле:
.navigation {
}
Это пустое правило.
Код в файле должен выглядеть следующим образом:
Сохраните файл cafe_townsend.css.
Далее вы воспользуетесь панелью «Стили CSS», чтобы добавить свойства к правилу.
Если файл index.html не открыт, откройте его.
На панели «Стили CSS» убедитесь, что выбран режим «Все», выберите новое правило .navigation и нажмите «Редактировать стили» в правом нижнем углу панели.
В диалоговом окне «Определение правила CSS» выполните следующие действия:
В текстовом поле «Шрифт» введите Verdana, без засечек.
Выберите 16 во всплывающем меню «Размер», затем выберите «Пиксели» во всплывающем меню справа от него.
Выберите «Обычный» во всплывающем меню «Стиль».
Выберите «Нет» в списке «Модификация».
Выберите «Жирный» во всплывающем меню «Вес».
В текстовом поле «Цвет» введите #FFFFFF.
Чтобы отобразить руководство, выберите «Справка» > «Ссылки», а затем выберите «Справочник по CSS O'Reilly» во всплывающем меню на панели «Ссылки».
Нажмите ОК.
Теперь вы будете использовать панель «Стили CSS», чтобы добавить дополнительные свойства к правилу .navigation.
На панели «Стили CSS» убедитесь, что выбрано правило .navigation, а затем нажмите «Показать представление списка».
В представлении списка на панели «Свойства» отображаются все доступные свойства в алфавитном порядке (в отличие от представления «Задать свойства», в котором отображаются только те свойства, которые были установлены).
Щелкните столбец справа от свойства фона-цвета.
Чтобы просмотреть полное содержимое свойства, наведите указатель мыши на свойство.
Введите шестнадцатеричное значение #993300 и нажмите Enter (Windows) или Return (Macintosh).
Совет. Чтобы увидеть влияние своей работы на внешнюю таблицу стилей, во время работы оставляйте файл cafe_townsend.css открытым в окне документа. Когда вы делаете выбор на панели «Стили CSS», вы также увидите, как Dreamweaver записывает код CSS в таблицу стилей.
Найдите свойство отображения (возможно, вам придется прокрутить вниз), щелкните один раз в правом столбце и выберите блок из всплывающего меню.
Найдите свойство отступа, щелкните один раз в правом столбце, введите значение 8 пикселей и нажмите Enter (Windows) или Return (Macintosh).
Найдите свойство ширины, щелкните один раз в правом столбце, введите 140 в первом текстовом поле, выберите «Пиксели» во всплывающем меню и нажмите Enter (Windows) или Return (Macintosh).
Нажмите «Показать свойства настроек», чтобы отобразить только те свойства, которые вы установили на панели «Свойства».
Щелкните файл cafe_townsend.css, чтобы отобразить его. Вы увидите, что Dreamweaver добавил в файл все указанные вами свойства.
Сохраните и закройте файл cafe_townsend.css.
Теперь вы создали правило, которое форматирует текст панели навигации. Далее вы примените правило к выбранным ссылкам.
Применить правила
Открыв страницу index.html в окне документа, щелкните слово «Кухня», чтобы поместить точку вставки где-нибудь в слове.
В селекторе меток щелкните самую правую метку.
Эта операция выделит весь текст для указанной метки или ссылки.
В Инспекторе свойств («Окно» > «Свойства») выберите «Навигация» во всплывающем меню «Стиль».
В окне «Документ» полностью изменился внешний вид текста «Кухня». Текст теперь отформатирован как кнопка панели навигации на основе свойств, которые вы определили для правила .navigation в предыдущем разделе.
Повторите шаги с 1 по 3 для каждой ссылки на панели навигации.
Каждой метке или ссылке необходимо назначить стиль класса навигации, поэтому важно выбирать каждую ссылку индивидуально с помощью селектора меток, а затем поочередно назначать стиль класса каждой ссылке.
Если у вас возникли проблемы с форматированием текста ссылки, убедитесь, что между каждым (или группой) связанных слов есть пробелы (не возвраты каретки). Также убедитесь, что пространство между двумя ссылками само по себе не связано. Если пространства связаны, тщательно выделите связанные пространства, очистите текстовое поле «Ссылка» в Инспекторе свойств и нажмите Enter (Windows) или Return (Macintosh).
Завершив форматирование всех слов на панели навигации, сохраните страницу и просмотрите свою работу в браузере («Файл» > «Просмотр в браузере»).
Вы можете нажать на ссылку, чтобы убедиться, что она работает.
Добавить эффект наведения курсора мыши
Теперь вы добавите эффект ролловера, который будет вызывать изменение цвета фона панели навигации каждый раз, когда указатель мыши проходит по ссылке. Чтобы добавить эффект наведения курсора мыши, добавьте новое правило, содержащее псевдокласс :hover.
О... О:hover Псевдоклассы Псевдоклассы — это способ воздействия на определенные элементы HTML-документа, не основываясь на HTML-коде самого документа, а на основе других внешних условий, применяемых веб-браузером. Псевдоклассы могут быть динамическими. Это означает, что по мере взаимодействия пользователя с документом элементы на странице могут приобретать или терять псевдоклассы.
Псевдокласс :hover влияет на изменения в отформатированном элементе страницы, когда пользователь наводит указатель мыши на элемент. Например, когда вы добавляете псевдокласс :hover к стилю класса .navigation (.navigation:hover) для создания нового правила, все текстовые элементы, отформатированные с помощью правила .navigation, изменятся в зависимости от свойств .navigation: правило наведения.
Откройте файл cafe_townsend.css.
Выберите все правило .navigation.
Скопировать текст («Правка» > «Копировать»).
Щелкните один раз в конце правила, а затем еще несколько раз нажмите Enter (Windows) или Return (Macintosh), чтобы освободить место.
Вставьте («Правка» > «Вставить») скопированный текст в только что созданное пространство.
Добавьте псевдокласс :hover к вставленному селектору .navigation следующим образом:
В новом правиле .navigation:hover замените текущий цвет фона (#993300) на #D03D03.
Сохраните и закройте файл.
Откройте файл index.html в окне «Документ» и просмотрите страницу в браузере («Файл» > «Просмотр в браузере»).
Когда вы наведете указатель мыши на любую ссылку, вы увидите новый эффект наведения курсора мыши.