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

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

Система CSS формально независима от HTML, имеет совершенно иной синтаксис (более того, HTML можно стыковать с разными реализациями CSS, обладающими разным синтаксисом и возможностями), не наследует никаких идеологических ограничений и позволяет, уже в совершенно иных терминах, задавать параметры визуального представления для любого тега HTML. С помощью CSS автор может указать, каким шрифтом необходимо набирать заголовки такого-то уровня. И, что самое важное, этого удалось достичь не введением новых тегов, а разработкой механизма, позволяющего влиять на интерпретацию уже существующих тегов логической разметки, причем с учетом контекста его употребления. [9]

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

Можно предположить, что CSS – это почти идеальное средство, созданное для того, чтобы избавить HTML от недостатков и перевести его развитие на принципиально новый уровень. [10]

Приведем пример: нам нужно создать жирный черный подчеркнутый текст определенного размера и шрифта.

Пример на HTML:

<font color=«black» size=”1” face=”Times New Roman”><b><u> Текст </u></b></font>

Для того, чтобы данный стиль использовать при создании документа несколько раз и не повторять указанные команды, необходимо воспользоваться языком СSS. В HTML команды назывались тегами, в CSS – селекторами. Свойства селектора определяют стиль элемента, для которого он определен.

Рассматривая предыдущий пример, мы можем задать класс «. text », в котором укажем все необходимые свойства текста.

Пример с использованием CSS :

.text {

color: #000000;

font-size: 8pt;

font-family: Times New Roman;

font-weight: bold;

text-decoration: underline;

}

Теперь при каждом присвоении отрезку текста, таблице или любому элементу класса «.text» он будет иметь аналогичные визуальные свойства. CLASS – атрибут элемента в HTML, определяющий его класс, то есть задающий различные свойства элементу. В CSS можно описать собственные стили для различных классов одних и тех же элементов. Благодаря CSS для того, чтобы на всем Web-документе изменить цвет текста достаточно будет поменять в строчке «color: #000000;» кодировку цвета на необходимую.

Псевдоклассы и псевдоэлементы – это особые классы и элементы, присущие CSS и автоматически определяемые поддерживающими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль. [9]

Anchor Pseudo Classes – эти псевдоклассы элемента <a href=« «>, обозначающего ссылку. Псевдоклассы этого элемента: active (активная ссылка), visited (посещенная ранее ссылка), hover (псевдокласс, возникающий при поднесении курсора к ссылке).

Рассмотрим пример:

a:link{

 text-decoration: none;

 color: #005FA9;

}

a:visited{

 text-decoration: underline;

 color: #21536a;

}

a:active{

 text-decoration: underline;

 color: #21536a;

}

a:hover{

 text-decoration: underline;

 color: #21536a; }

В данном примере все элементы <a> (ссылки) будут синими, но разных оттенков, заданных в описании в шестнадцатеричной системе счисления. При нажатии на ссылку, поменяется цвет на более темный. А при подведении курсора мыши, появится подчеркивание. Описания нескольких свойств отделяются друг от друга точкой с запятой «;».

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

HTML -редакторы

Существует два основных варианта создания HTML-страниц.

Первый вариант – это работа с техническими редакторами, такими как Home Site, Ultra Pad и другие. При необходимости можно использовать любой текстовый редактор, даже примитивный Notepad (Блокнот). Текстовый редактор – это программа для ввода и изменения текстовых данных: документов, книг, программ и т.д. Редактор обеспечивает модификацию строк текста, контекстный поиск и замену частей текста, автоматическую нумерацию страниц, обработку и нумерацию сносок, выравнивание абзаца, проверку правописания слов, построение оглавлений, распечатку текста на принтере и др. В таких редакторах разработчик самостоятельно пишет код, видя перед собой именно текстовую страничку с тегами. Редактор помогает в написании тегов, проверяет строгость кода, дает возможность просмотреть созданный документ в окне браузера, однако основная работа будет состоять именно из скрупулезного написания, проверки и подгонки тегов. Данные редакторы актуально использовать в тех случаях, когда необходимо исправить код, но для создания сложных электронных документов они не пригодны.

Второй вариант – это WYSIWYG (What You See Is What You Get – Что ты видишь, есть то, что ты получаешь) редакторы, с помощью которых разработчик создает визуальную картинку страницы, то есть, имеет дело непосредственно с блоками информации, которые произвольно располагает на странице. Наиболее известными в этой области редакторами являются Front Page производства Microsoft и Macromedia Dreamweaver. [11]

Для создания электронного учебного пособия мной был выбран Macromedia Dreamweaver МХ версии 7.0, который кроме наиболее адекватного из всех WYSIWYG-интерфейсов имеет еще и профессиональный редактор кода с подсветкой синтаксиса наиболее известных web-ориентированных языков программирования.

Система Dreamweaver — это визуальный редактор гипертекстовых документов. Мощная профессиональная программа Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба. Она обеспечивает режим визуального проектирования (WYSIWYG), отличается очень чистой работой с исходным текстом Web-документов, обладает встроенными средствами поддержки больших сетевых проектов.

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

Также прямая работа с кодами не исключена полностью, но сведена к разумному минимуму. Программа не только обладает мощным арсеналом средств визуального проектирования, но и способна отображать Web-страницы как специализированные браузеры: Microsoft Internet Explorer или Opera. [12]

В состав инструментов гипертекстового редактора включены команды вставки анимированного текста и анимированных кнопок.

Известно, что многие визуальные редакторы HTML весьма нерационально обращаются с кодами гипертекстовой разметки. Это значит, что часто они порождают избыточный, громоздкий исходный текст, перегруженный сложными языковыми конструкциями. Среди прочих программ данного класса система Dreamweaver выделяется своим корректным обращением с кодами HTML. Она создает чистый исходный текст, в котором почти нет вспомогательных дескрипторов и громоздких служебных комментариев. Встроенный в программу механизм препроцессорной обработки (он называется Roundtrip HTML Technology) позволяет импортировать файлы HTML без изменений, потерь и искажений, созданные сторонними приложениями — гипертекстовыми и текстовыми редакторами.

Таким образом, Dreamweaver обеспечивает:

Подсветку HTML синтаксиса.

Вставку стандартных HTML фрагментов (таблицы, списки).

Имеет внутренний браузер.

Пример использования Dreamweaver для создания электронного учебного пособия приведен на рисунке 5 и на рисунке 6.