Таблицы и стили
Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.
Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале обговорим некоторые моменты, которые помогут лучше понять, что же мы делаем.
Цвет фона ячеек
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство 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. Выравнивание текста в ячейках
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 Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку. |
Добавление CSS
Таблицы стилей могут быть добавлены на веб-страницу тремя разными способами, которые различаются по своим возможностям.
Таблицы связанных стилей
Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег в заголовке страницы (пример 1).
Пример 1. Подключение таблицы связанных стилей
Стили Hello, world!
Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.
Достоинства данного способа
- Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
- Можно изменять таблицу стилей без модификации веб-страниц.
- При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
- Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.
Таблицы глобальных стилей
Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом (пример 2).
Пример 2. Использование таблицы глобальных стилей
Стили Hello, world!
В данном примере показано изменение стиля заголовка . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.
Внутренние стили
Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..
Пример 3. Использование внутренних стилей
Стили Hello, world!
Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ.
Пример 4. Сочетание разных методов подключения стилей
Стили H1 Hello, world! Hello, world!
В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.
Словарь терминов
Таблица стилей — это стандарт, определяющий стиль документа, созданного на основе языка разметки.
Различают три вида стилей, в зависимости от их использования в документе. 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>.
Доска почета
Миниатюрные видеокамеры для удаленного наблюдения в реальном времени. Микрокамеры для наблюдения онлайн видео на мобильном устройстве. Широкий выбор Wi-Fi и мобильных роутеров. На сайте представлены различные миникамеры под любые задачи.