HTMLPad

Хотя стандарты HTML содержат тэги форматирования, включая < font >,< b >, < i >и другие, рекомендуется разделять структуру и элементы веб-страницы от форматирования.

Структура и элементы страницы — абзацы, заголовки, списки, таблицы, изображения и пр.

Форматирование — цвет и размер шрифта, цвет фона, цвета ссылок и так далее.

Оформление страницы (форматирование) при этом содержится в отдельной таблице стилей. Это соответствует стандарту XHTML. Таблица, которая описывает правила оформления страницы, называется Каскадной таблицей стилей.

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

Очень простая таблица стилей может выглядеть так:

/* Моя таблица стилей. Создана Ивановым С.П. */
/* Сделаем все заголовки первого уровня красными*/
h1 < color: red >
/* Сделаем все заголовки второго уровня зелеными*/
h2 < color: green >
/* Расположим все заголовки по центру*/
h1, h2, h3, h4, h5, h6

Текст, заключенный в скобки /* */ — ваш комментарий (он может быть любой). Комментарии обычно применяют при больших таблицах стиля.

Данную таблицу стилей можно сохранить (с расширением .css), чтобы в дальнейшем можно было сделать на неё ссылку.

Или же можно вставить данную таблицу стилей непосредственно в HTML-страницу. Для этого откройте в редакторе новую страницу HTML, в меню Вставка выберите Блок стиля.
В область заголовка страницы будет вставлен такой код:

Добавьте в этот код код вышеприведенной таблицы стилей

Переключитесь в режим просмотра, чтобы убедиться в работе таблицы стилей.

Создание таблицы стилей

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

Код таблицы стилей можно ввести непосредственно на HTML-страницу в область заголовка (между . Редактор при этом будет помогать аналогично тому, как он это делал при создании HTML-кода (см. Ручное создание кода)

Но в редакторе есть некоторые функции, которые помогут вам создать таблицу стилей более простым способом.

Мастер создания CSS

Мастер позволяет создать таблицу стилей без знания CSS .
В меню Файл выберите Мастер создания CSS.
Откроется окно, в котором определяются основные параметры страницы: выбирается вид и размер шрифтов, цвета фона и шрифта страницы, цвета гиперссылок.

Установив все параметры, сохраните созданную таблицу стилей в папке вашего проекта сайта.
Созданную таблицу можно непосредственно вставить в код страницы в области .

Использование шаблонов

Большинство шаблонов веб-страниц созданы с использованием таблиц стилей CSS, т.е. при создании страницы из шаблона вы вообще можете не думать о таблицах стилей.

В редакторе имеется несколько заготовок таблиц стилей, которые можно использовать при создании страниц.
В меню Файл выберите Новый — Новый из шаблона — CSS — выберите шаблон — ОК.
Код будет вставлен в окно редактирования. При необходимости можно изменить шаблон и сохранить его (с расширением .css) в папке вашего проекта.

Предварительный просмотр листов стиля

Вы можете просмотреть Листы Стиля непосредственно в редакторе или открыть их в указанном Web-браузере.

Для просмотра листа стиля во внешнем браузере щелкните по кнопке Просмотр в на стандартной панели инструментов

Редактирование таблиц стилей

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

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

Ссылка на таблицу стилей

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

Для этого в меню Вставка выберите Ссылка на таблицу стилей. В появившемся окне щелкните по кнопке обзора, выберите нужную вам таблицу стилей. Нажмите ОК.

Проверка таблицы стилей

В меню CSS выберите Проверка CSS.

Далее Работа с документом (Открытие документа, расположение файлов в окне, сохранение документа).

О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.

Таблицы и стили

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

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH , то он и будет установлен в качестве фона (пример 1).

Пример 1. Цвет фона

        
Заголовок 1
Заголовок 2
 
Ячейка 3
Ячейка 4
 
  

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Поля внутри ячеек

Пример 2. Поля в таблицах

        
Заголовок 1
Заголовок 2
 
Ячейка 3
Ячейка 4
 
  

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH .

Результат данного примера показан на рис. 2.

Рис. 2. Поля в ячейках

Границы и рамки

Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.

Использование атрибута cellspacing

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

Применение свойства border

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left , border-right , border-top и border-bottom , они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки

        
Заголовок 1
Заголовок 2
 
Ячейка 3
Ячейка 4
 
  

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

Результат примера показан на рис. 3.

Рис. 3. Граница вокруг таблицы и ячеек

Пример 4. Создание одинарной рамки

        
Заголовок 1
Заголовок 2
 
Ячейка 3
Ячейка 4
 
  

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

Результат примера показан на рис. 4.

Рис. 4. Граница вокруг таблицы

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).

Пример 5. Выравнивание содержимого ячеек по горизонтали

        
Заголовок 1
Ячейка 1
Ячейка 2
 
Заголовок 2
Ячейка 3
Ячейка 4
 
  

Рис. 5. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 6.

Пример 6. Выравнивание содержимого ячеек по вертикали

        
Заголовок 1
Заголовок 2
 
Ячейка 1
Ячейка 2
 
  

В данном примере устанавливается высота заголовка как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.

Рис. 6. Выравнивание текста в ячейках

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

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

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Заголовок
 
Текст
  

Значение атрибута тега — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега приведено в примере 3.2.

Пример 3.2. Файл со стилем

H1 < color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; >P

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

Глобальные стили

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

Пример 3.3. Использование глобального стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

     H1 
Hello, world!
  

В данном примере задан стиль тега , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).

Рис. 3.1. Вид заголовка, оформленного с помощью стилей

Внутренние стили

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

Пример 3.4. Использование внутреннего стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

      
Пример текста
  

В данном примере стиль тега

задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Рис. 3.2. Использование внутренних стилей для изменения вида текста

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

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

Пример 3.5. Сочетание разных методов

HTML5 CSS 2.1 IE Cr Op Sa Fx

     H1 
Заголовок 1
 
Заголовок 2
  

В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).

Рис. 3.3. Результат применения стилей

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import . Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей; @import "имя файла" типы носителей;

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

Пример 3.6. Импорт CSS

HTML5 CSS 2.1 IE Cr Op Sa Fx

     @import url("style/header.css"); H1 
Заголовок 1
 
Заголовок 2
  

В данном примере показано подключение файла header.css , который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).

Пример 3.7. Импорт в таблице связанных стилей

@import "/style/print.css"; @import "/style/palm.css"; BODY

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

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

1. Связанные стили.
2. Глобальные стили.
3. Блочные стили.
4. Внутренние стили.
5. Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

     HTML < color: black; >BODY < color: red; >P 
Текст
  

1. Чёрный
2. Красный
3. Зелёный
4. Синий
5. Оливковый

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

4. Какой атрибут используется для определения внутреннего стиля?

Словарь терминов

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

Различают три вида стилей, в зависимости от их использования в документе. 1. Внутренний — практически не отличается от стандартного HTML 2. Глобальный — используется тег style> и его атрибут TYPE 3. Связанный — страницы одного сервера выглядят одинаково, используется связующий тег LINK> и его атрибут REL

CSS — каскадные таблицы стилей (от англ. Cascading Style Sheets) — один из первых общепринятых стандартов стилей, официально признанный консорциумом W3C. Слово каскадные обозначает возможность объединения различных видов стилей, внутренние теги могут наследовать стили внешних тегов.

Стандарт CSS используется для создания внешнего вида веб-страниц, написанных в HTML, XHTML, также может использоваться для написания XML-документов, таких как XUL и SVG.

С помощью CSS создатели веб-сайтов задают цвета, шрифты, расположение информационных блоков.

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

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

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

Внедрить таблицу в веб-документ можно несколькими способами:

• отдельный файл с таблицей связать с документом при помощи тегаLINK>, вложенного между тегамиhead> и /head>;
• подключить отдельный файл к веб-странице через директиву @import;
• расположить вложенную в веб-документ таблицу в теле любого тега;
• таблица в документе прописать между тегамиstyle> и /style>.

Доска почета

Интернет-магазин материалов для наращивания ногтей, оборудование (УФ лампы, аппараты для маникюра и педикюра), гель, гель-лак (Shellac), дизайн, а также многое другое для мастеров nail art.