Запись шаблона CSS - Создание сайта на языке HTML
Любое правило таблицы стилей CSS состоит из селектора и определения шаблона.
Селектор выступает в роли указателя стилевого правила для определенного HTML-элемента или внутреннего класса (идентификатора). Определение шаблона -- это описание стилевых правил для обозначенных элементов HTML. Правила чередуются через точку с запятой и заключаются в фигурные скобки.
НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }
В данном примере селектором является элемент заголовка нз, для шаблона которого следует такое определение: цвет -- синий, шрифт - Tahoma, либо Verdana, либо Arial.
Как видно из примера, для одного селектора приведено описание, содержащее два правила -- по цвету заголовка и наименованию гарнитуры. Это говорит о том, что CSS позволяет группировать несколько стилевых правил для одного селектора в рамках единого описания шаблона.
Сравнив запись вида:
НЗ { color: blue; }
НЗ { font-family: Tahoma, Verdana, Arial; }
И
НЗ { color: blue; font-family: Tahoma, Verdana, Arial; }
Можно сделать вывод о том, что группировка правил по селектору позволяет, во-первых, экономить размер CSS-файла, во-вторых -- систематизировать структуру описания шаблона.
Другой особенностью таблиц стилей CSS является свойство наследования стилевых правил для нескольких селекторов одновременно, например:
TD, ТН, Р, DIV { text-align: justify; color: gray: font-size: Юрх; }
Такая запись назначает единый стиль отображения текстовой информации для элементов ячейки таблицы (<то>, <тн>), а также параграфов (<р>) и блоков (<div>), а именно: выравнивания -- по ширине, цвет -- серый, размер шрифта -- 10 пикселов.
Селекторы
В качестве селектора CSS могут выступать:
О Элементы HTML. Переопределение стиля для конкретного элемента страницы:
BODY { color: orange; }
В этом случае весь текст в пределах раздела body будет оранжевым. При добавлении, например, таблицы назначение стилевого шаблона пропадет для текста внутри ячеек;
Классы. Использование классов позволяет переопределять стиль как для конкретного элемента, так и для любого элемента, которому присвоен данный класс. Наименование класса начинается с точки и обычно пишется строчными буквами (допускается использование латинских букв и цифр, но наличие специальных символов, нижних подчеркиваний и прочих нестандартных элементов не рекомендуется).
.red { color: red; }
В этом случае любой элемент HTML, позволяющий менять цвет, будет отображаться красным, если ему присвоить класс. red:
<FONT CLASS="red">TeKCT красным цветом</ГОЫТ>
ИЛИ
<HR CLASS="red">
Если мы дополним селектор класса наименованием конкретного HTML-элемента, то действие стилевого правила будет распространяться только на данный элемент:
HR. red { color: red; }
При указании классов стилевого шаблона следует внимательно следить за тем, поддерживает ли HTML-элемент присваемый типереопределения стиля. Например, запись вида:
HR { text-align: justify; }
Будет бессмысленной, т. к. горизонтальный разделитель относится к области структурного форматирования и не может содержать текст, который, согласно стилевому правилу, следует растянуть по ширине;
Идентификаторы. Запись идентификатора начинается с символа # (диез) и заканчивается наименованием:
Fblack { background-color: black; }
Например, присвоив данный идентификатор тегу то, мы получим ячейку таблицы, залитую черным цветом:
<TD 1П="Ыас1<">Ячейка черного цвета</ТО>
Сравнив функции селектора класса и идентификатора, можно задаться вполне закономерным вопросом -- чем же отличаются эти селекторы? Действительно, формат определения селектора обоих типов аналогичен по структуре и присвоению HTML-элементам. Однако селектор идентификатора часто применяется для задания уникального имени элементу, который задействован в программном сценарии (скрипте). В отличие от него, селектор класса ограничивается, в основном, применением в стилевых шаблонах.
В заключение необходимо обратить особое внимание на невозможность сочетания селекторов различных типов. Нельзя одновременно переопределить стиль для стандартного элемента HTML и для него же, но по конкретному классу/идентификатору.
Псевдоклассы
Псевдоклассами называют определенные условия форматирования HTML-элемента, в соответствии с которыми браузер подставляет необходимые стилевые правила отображения данных. При этом в исходной структуре электронного документа такие классы не присутствуют, они создаются в процессе интерпретации HTML-кода браузером.
В основном, псевдоклассы предназначены для задания различных типов форматирования по нескольким разновидностям элементов. Рассмотрим функциональность псевдоклассов на примере гиперссылок.
Согласно спецификации HTML и стандарту CSS, гиперссылка может принимать четыре состояния: непосещенная ссылка (link), посещенная ссылка (visited), активная ссылка (active) и ссылка при наведении курсора мыши (hover). Первые три СОСТОЯНИЯ (link, visited, active) обычно прописываются в теге <body> HTML-документа (уровень CSS 1). Четвертое состояние (hover) относится к уровню CSS 2 и подразумевает изменение цвета ссылки при наведении на нее курсора мыши пользователя (событие работает в браузерах Internet Explorer 4 и выше, Opera 5 и выше, Netscape 6 и выше, Mozilla 1.0; браузеры более ранних версий, а также некоторые не особенно распространенные браузеры не поддерживают состояние hover).
Эти состояния и будут являться псевдоклассами при записи правил отображения гиперссылок в стилевом шаблоне:
A:link { color: blue; }
A:active { text-decoration: underline; }
A:visited { color: gray; }
A:hover { color: orange; }
В данном случае все присутствующие в электронном документе гиперссылки будут отображаться в соответствии с заданным стилевым правилом. Однако часто возникает необходимость визуально выделить одни ссылки относительно других. Для этого наряду с псевдоклассами используются обычные селекторы классов:
A:active. red { color: red; } A:hover. red { color: blue; } A:active. white { color: white; } A:hover. white { color: black; }
Применение таблиц стилей CSS
Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<strong>), а в CSS -- конструкция font-weight: bold; (для элемента или селектора). Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида text-decoration: underline; И Т. Д.
В рамках данной книги, посвященной применению языка разметки HTML, сложно рассказать обо всех свойствах переопределения стиля с помощью CSS. Поэтому мы остановимся лишь на некоторых аспектах использования каскадных таблиц стилей, а именно: на форматировании текста, структурном форматировании и организации пользовательских форм.
CSS в форматировании текста
CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (подчеркивание, курсив, жирное начертание, выбор гарнитуры и размер шрифта), с помощью средств CSS возможно изменять такие параметры, как межбуквенный и межстрочный интервал, тип регистра (строчные и прописные буквы) и многое другое.
Похожие статьи
-
Таблицы стилей - Создание сайта на языке HTML
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии,...
-
Структура WEB-страницы - Создание сайта на языке HTML
Заготовка типичной WEB-страницы: <HTML> <HEAD> <TITLE> Структура WEB-страницы </title> <STYLE> H2 {font-family: Arbat;}CODE { font-family:...
-
Проектирование и разработка сайта Средства разработки Язык гипертекстовой разметки HTML В Интернете сосредотачивается и передается достаточно большое...
-
За структуру HTML-документа отвечают следующие теги: <HTML> - в данном контейнере находится все содержимое HTML-документа. <HEAD> - содержит...
-
Center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Left...
-
Принцип работы языка. Синтаксис Как и было сказано ранее основой для HTML-были приняты текстовые документы, содержащие в себе HTML5. Рассмотрим следующий...
-
Шаблоны сайта Bootstrap3 Веб-дизайн является одним из основных элементов в процессе создания сайта. Именно от него зависит, насколько удобно и комфортно...
-
История создания и развития языка HTML - Язык HTML как средство создания информационных ресурсов
В 1989 году Тим Бернерс-Ли, сотрудник центра высоких технологий (CERN), предложил проект распределенной гипертекстовой системы под названием WWW (World...
-
Гипертекст - Создание сайта на языке HTML
Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты. Но это просто Тексты . Используя...
-
Теоритическая часть, История и версии HTML - Создание сайта на языке HTML
История и версии HTML Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для...
-
Создание Web-страниц в прикладной программе FrontPage - Создание сайта
Создание новой пустой Web-страницы Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно...
-
Редакторы HTML - Компьютерные сети
- Adobe Dream Weaver; - Microsoft Expression Web; - SharePoint Designer (бесплатный); - Web Development Studio (бесплатная); - Word; - Microsoft Front...
-
Оформление сайта, Язык HTML - Создание сайта
Оформление или дизайн - это внешний вид сайта. Эта та оболочка, которую вам придется надевать на ваш сайт, как этикетку на коробку с товаром. От этой...
-
"WWWSQLDesigner" позиционируется как абсолютно бесплатный, доступный для пользователей, универсальный веб-редактор, значительно упрощающий процесс...
-
Заключение, Список литературы - Язык HTML как средство создания информационных ресурсов
На сегодняшний момент перспективы развития языка представляются четче, чем раньше, но все еще не совсем просто. Над языком трудятся две организации,...
-
На сегодняшний момент HTML5 все еще разрабатывается. Все еще ведутся обсуждения по поводу следующих нерешенных проблем: - Доработка некоторых элементов...
-
Введение - Создание сайта на языке HTML
В век цифровых технологий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а web-программирование и дизайн престижной и...
-
Создание заголовков - Создание сайта
Заголовки - отличный инструмент структурной организации содержимого Веб-страницы. Стандарт HTML предусматривает возможность использования заголовков...
-
Структура web-документа - Создание сайта
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE...>, которая обычно...
-
Для того, чтобы строить диаграммы в соответствии с рисунком 2.7, необходимо реализовать алгоритм соединения двух объектов линией. Для отображения линии...
-
Для того, чтобы интерпретировать XML представление в язык JAPE, был использован язык преобразования XSLT [18]. Данный язык и будет служить транслятором,...
-
HTML - Разработка сайта рекламного агентства "ART"
HTML (HyperText Markup Language) - язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не...
-
JAPE позволяет анализировать текст на основе регулярных выражений. Грамматика этого языка состоит из фаз, которые сдержат в себе набор шаблонов и/или...
-
Применение полученных знаний на практике. Создание приложения - Программирование на языке C++
Я применил полученные знания при разработке простого приложения TodoList. Я соблюдал все принципы SOLID. Придерживаясь принципа инверсии зависимости я...
-
Что такое HTML. Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB....
-
Лингвистический процессор GATE GATE представляет собой инфраструктуру для разработки и развертывания компонентов программного обеспечения, которые...
-
Проектирование визуальных конструкций Вторая глава описывает процесс трансформации текстового языка JAPE в визуальный язык, который позволит описывать...
-
Сервисы сайта - Создание сайта
Сервисы сайта направлены на облегчение использования сервисов компании. Так, например, онлайн-консультация позволяет пользователю быстро получить ответ...
-
Для того, чтобы создать страницу сайта достаточно в текстовом редакторе, в блокноте сделать следующую надпись: Первая страница сайта создана. После...
-
Введение - Разработка веб-редактора для описания лексико-семантических шаблонов на визуальном языке
Объем неупорядоченной и неструктурированной текстовой информации неуклонно растет, поэтому задача ее быстрой и качественной обработки актуальна сегодня...
-
Реализация клиентской части приложения На языке JavaScript, в соответствии с диаграммой классов, представленной в приложении Б, были разработаны объекты...
-
Классификация команд языка. - Технология создания и управления баз данных
Команды SQL Команда Назначение Описание данных CREATE TABLE Создает структуру таблицы Манипулирование данными INSERT Добавляет новые записи в таблицу...
-
Цель Работы - изучить приемы создания и использования шаблонов классов. - Теоретические сведения Достаточно часто встречаются классы, объекты которых...
-
Разработка сайта, Среда разработки web-сайта - Разработка сайта для компании
Среда разработки web-сайта При разработке web-сайта используются: - HTML - язык разметки web-страниц; - CSS - формальный язык описания внешнего...
-
CSS - Разработка сайта рекламного агентства "ART"
CSS (Cascading Style Sheets) - это еще один язык программирования, называемый еще формальным языком, который применяется для описания внешнего вида...
-
Правила записи программы на языке Си - Основы программирования
Как указывалось выше, программа перед обработкой компьютером должна быть помещена в файл на диске. Обычно этот файл имеет расширение <.c>. Рассмотрим...
-
HTML таблицы. - Создание электронного учебника (по HTML) в редакторе Microsoft Front Page
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры,...
-
Проектный программный динамический Для проектирования создания сайта компании "АПТЕКА" используется система управления проектами Microsoft Office Project...
-
Некоторые WWW browser позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем...
-
Назначение системы Сайт "вопрос-ответ" предназначен для поиска ответов на интересующие пользователей вопросы, с рейтингом пользователей, возможностью...
Запись шаблона CSS - Создание сайта на языке HTML