- Таблицы и стили
- Цвет фона ячеек
- Поля внутри ячеек
- Границы и рамки
- Использование атрибута cellspacing
- Применение свойства border
- Выравнивание содержимого ячеек
- Урок 1. Как подключить таблицу стилей CSS?
- Как создать таблицу стилей, css?
- Внешние таблица стилей
- Внутренние таблицы стилей
- Встроенные таблицы стилей
- Способ создания таблицы стилей
- 14.2 Как добавить стиль в HTML
- 14.2.1 Установка языка таблицы стилей по умолчанию
- 14.2.2 Встроенная информация о стиле
- 14.2.3 Информация о стиле в заголовке: элемент STYLE
- 14.2.4 Типы устройств
- 14.3 Внешние таблицы стилей
- 14.3.1 Предпочитаемые и альтернативные таблицы стилей
- 14.4 Каскады таблиц стилей
- 14.4.1 Каскады, зависящие от устройств
- 14.4.2 Наследование и каскады
- 14.5 Как скрыть информацию о стиле от агентов пользователей
- 14.6 Привязка таблиц стилей с помощью заголовков HTTP
Таблицы и стили
Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.
Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале обговорим некоторые моменты, которые помогут лучше понять, что же мы делаем.
Цвет фона ячеек
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH , то он и будет установлен в качестве фона (пример 1).
Пример 1. Цвет фона
В данном примере получим синий цвет фона у ячеек (тег
То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Поля внутри ячеек
Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега
, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5). Пример 5. Выравнивание содержимого ячеек по горизонтали В данном примере содержимое тега | выравнивается по левому краю, а содержимое тега | — по центру. Результат примера показан ниже. Рис. 5. Выравнивание текста в ячейках Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 6. Пример 6. Выравнивание содержимого ячеек по вертикали В данном примере устанавливается высота заголовка | как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6. Источник Урок 1. Как подключить таблицу стилей CSS?Как создать таблицу стилей, css?Создать css-файл так же легко, как и html. Достаточно зайти в любой текстовой редактор, например Блокнот, и там создать файл с расширением css. Дадим ему стандартное название — style.css. Поздравляю! Ваш файл готов. Он пока пустой, но позже его можно будет наполнить соответствующим содержимым. Ниже мы рассмотрим азы — способы подключения css. Внешние таблица стилейПожалуй, внешний CSS — это самое правильно и оптимальное решение для сайта. Достаточно указать на странице всего лишь тег link (создан для подключения других файлов) с ссылкой на таблицу стилей и стили подключены! В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и наш файл (например, index.html). Если расположение css-файла изменилось, то в атрибуте href надо внести соответствующие изменения. Например, часто бывает, что под CSS создают отдельную папку (что удобно и логично). Но тогда атрибут href будет выглядеть по-другому: Внутренние таблицы стилейИногда можно увидеть и другую конструкцию css, которая вставлена непосредственно в html-тег Плюс в том, что можно сразу в этом же файле задать стили. Существенный минус — задаваемые свойства будут присвоены только конкретному элементу, в данном случае параграфу. Таким образом, все преимущества удалённого подключения свойств утрачиваются. Встроенные таблицы стилейСуществует более простой способ вставки CSS. Если Вы не хотите создавать отдельный файл CSS, а использовать нужно только пару свойств, то подойдёт этот вариант. Начнём сразу с примера Из примера видно, что стили мы прописали прямо перед закрывающим тегом head внутри открывающего и закрывающего тегов style. На самом деле тег style можно прописывать и в body, но если Вы хотите, чтобы Ваши записи выглядели структурировано, и чтобы человек, который после Вас увидит этот код не схватился за голову, то лучше писать стили в одном месте. Недостаток встроенной таблицы стилей тоже очевиден — такие записи надо будет делать для каждой страницы отдельно. Источник Способ создания таблицы стилейТаблицы стилей представляют наибольшее достижение для дизайнеров Web-страниц, расширяя возможности улучшения внешнего вида страниц. В научных средах, в которых и зародилась Web, люди более сосредоточены на содержании документов, нежели на их представлении. По мере открытия Web прочими людьми ограничения HTML стали источником разочарований, и авторам пришлось уклоняться от стилистических ограничений HTML. Хотя намерения и были добрыми — улучшение представления Web-страниц, — технологии имели нежелательные побочные эффекты. Эти технологии работали только для некоторых, только иногда, но не для всех и не всегда. Сюда включаются:
Эти технологии существенно усложняют Web-страницы, ограничивают гибкость, создают проблемы взаимодействия и создают сложности для людей с физическими недостатками. Таблицы стилей решают эти проблемы, одновременно превосходя ограниченные механизмы представления в HTML. Таблицы стилей упрощают определение интервалов между строками текста, отступов, цветов, используемых для текста и фона, размера и стиля шрифтов и другой информации . Например, следующая таблица стилей CSS (хранящаяся в файле «special.css») зеленый устанавливает цвет текста абзаца и окружает его сплошной красной рамкой: Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента LINK : HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей: Гибкое размещение информации о стиле Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа. Для упрощения управления стилем сайта в данной спецификации описывается использование заголовков HTTP для установки таблиц стилей, применяемых к документу. Независимость от языков таблиц стилей Данная спецификация не привязывает HTML к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS (Каскадные таблицы стилей) [CSS1], но можно использовать и другие языки. Каскады Эта возможность обеспечивается некоторыми языками таблиц стилей, такими как CSS, для объединения информации о стиле из нескольких источников. Это может быть, например, корпоративные положения о стиле, стили, общие для группы документов, а также стили, специфичные для одного документа. С использованием раздельного хранения эти таблицы стилей могут использоваться повторно, что упрощает работу авторов и повышает эффективность сетевого кэширования. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Не все языки таблиц стилей поддерживают каскады. Зависимость от устройств HTML позволяет авторам разрабатывать документы независимо от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств, например, графических дисплеев для компьютеров под управлением Windows, Macintosh OS и X11, телевизионных устройств, специальным образом адаптированных телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля. Таблицы стилей, напротив, применяются к конкретным устройствам или группам устройств. Таблица стилей, предназначенная для экрана, может применяться при печати, но бесполезна для речевых браузеров. Данная спецификация позволяет Вам определить широкие категории устройств, к которым применяется конкретная таблица стилей. Это позволяет агентам пользователей избежать загрузки ненужных таблиц стилей. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице. Альтернативные стили Авторы могут предлагать читателям несколько способов просмотра документа. Например, таблица стилей для представления компактных документов с мелким шрифтом, или таблица, задающая крупные шрифты для удобства чтения. Данная спецификация позволяет авторам указать предпочитаемую таблицу стилей, а также альтернативные таблицы для определенных пользователей или устройств. Агенты пользователей должны предоставлять пользователям возможность выбора одной из альтернативных таблиц или отключать все таблицы стилей. Вопросы производительности Некоторые пользователи высказывали сомнения относительно скорости работы таблиц стилей. Например, загрузка внешней таблицы стилей может привести к задержке общего представления материала для пользователя. Подобные ситуации возникают и в том случае, если в заголовок документа включен длинный набор правил относительно стиля. Эти проблемы решаются путем предоставления авторам возможности включать инструкции по представлению в каждый элемента HTML. Благодаря этому информация о представлении всегда доступна ко времени представления элемента агентом пользователя. Во многих случаях авторы воспользуются преимуществами использования общей таблицы стилей для группы документов. В этом случае распределение правил стиля в документе приведет к снижению производительности по сравнению с использованием связанной таблице стилей, поскольку для большинства документов таблицы стилей уже будет находиться в локальном кэше. К этому эффекту приведет общедоступность хороших таблиц стилей. 14.2 Как добавить стиль в HTMLПримечание. В примере таблицы стилей по умолчанию для HTML 4.0, включенном в [CSS2], выражена общепринятая информация о стиле для каждого элемента. Авторы могут воспользоваться этим ресурсом. Документы в формате HTML могут содержать правила таблиц стилей непосредственно или могут импортировать таблицы стилей. В HTML можно использовать все языки таблиц стилей. Простого языка таблиц стилей может быть достаточно для большинства пользователей, в то время как другие языки могут подходить для более специализированных задач. В примерах в данной спецификации используется язык «Каскадные таблицы стилей» ([CSS1]), сокращенно CSS. Синтаксис данных стиля зависит от языка таблицы стилей. 14.2.1 Установка языка таблицы стилей по умолчаниюАвторы должны указывать язык таблицы стилей для информации о стиле, связанной с документом HTML. Для установки языка таблицы стилей для документа по умолчанию следует использовать элемент META . Например, чтобы установить по умолчанию язык CSS, следует поместить в раздел HEAD следующее объявление: зык таблиц стилей по умолчанию можно также установить с помощью заголовков HTTP. Показанное выше объявление с использованием тэга META эквивалентно заголовку HTTP: Агенты пользователей должны определять язык таблиц стилей по умолчанию для документа в соответствии со следующими шагами (от высшего приоритета к низшему):
Документы, включающие элементы, в которых устанавливается атрибут style , но не определяется язык таблиц стилей по умолчанию, являются некорректными. Средства разработки должна генерировать информацию о языке таблиц стилей по умолчанию (обычно с помощью объявлений META ), чтобы агенты пользователей не полагались на язык по умолчанию «text/css». 14.2.2 Встроенная информация о стилеОпределения атрибутов style = style [CN] Этот атрибут определяет информацию о стиле текущего элемента. style Атрибут style определяет информацию о стиле одного элемента. Язык таблиц стилей встроенных правил стиля определяется языком таблиц стилей по умолчанию. Синтаксис данных стиля зависит от языка таблиц стилей. В данном примере устанавливается информация о цвете и размере шрифта текста определенного абзаца. В CSS объявления свойств имеют форму «имя : значение» и разделяются точкой с запятой. Атрибут style может использоваться для применения определенного стиля к отдельному элементу HTML. Если стиль повторно используется для нескольких элементов, авторы должны использовать элемент STYLE для перегруппировки этой информации. Для оптимальной гибкости авторам следует определять стили во внешних таблицах стилей. 14.2.3 Информация о стиле в заголовке: элемент STYLEНачальный тэг: обязателен, Конечный тэг: обязателен Определения атрибутов type = content-type [CI] Этот атрибут определяет язык таблиц стилей для содержимого элемента и имеет приоритет над языком таблиц стилей, ипользуемы. Язык таблиц стилей указывается как тип содержимого (например, «text/css»). Авторы должны указать значение для этого атрибута; для него нет значения по умолчанию. media = дескрипторы устройств [CI] Этот атрибут задает целевое устройство для информации о стиле. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение «screen». атрибуты, определяемые в другом месте Элемент STYLE позволяет авторам помещать правила таблиц стилей в раздел head документа. В HTML допустимо любое число элементов STYLE в разделе HEAD . Агенты пользователей, не поддерживающие таблицы стилей или не поддерживающие определенный язык таблиц стилей, используемый в элементе STYLE , не должны показывать элемент STYLE . Ошибкой будет генерировать его содержимое как часть текста документа. Некоторые языки таблиц стилей поддерживают синтаксис для того, чтобы не показывать содержимое несоответствующим спецификации агентам пользователей. Синтаксис данных стиля зависит от языка таблицы стилей. Некоторые реализации таблиц стилей могут поддерживать большее разнообразие правил для элемента STYLE , чем в атрибуте style . Например, в CSS правила могу объявляться в элементе STYLE для:
Правила приоритета и наследования правил таблиц стилей зависят от языка таблиц. Следующее объявление CSS STYLE приводит к появлению границы вокруг всех элементов H1 в документе и центрированию их на странице. Чтобы указать, что эта информация о стиле должна применяться только к элементам H1 определенного класса, можно изменить определение следующим образом: И, наконец, для ограничения области действия информации о стиле единственным экземпляром элемента H1 , установите атрибут id : Хотя информация о стиле может устанавливаться почти для всех элементов HTML, два элемента, DIV и SPAN , особенно полезны тем, что они не накладывают никакой семантики представления (кроме block-level vs. inline). Вместе с таблицами стилей эти элементы позволяют пользователям неограниченно расширять язык HTML, особенно при использовании атрибутов class и id . В следующем примере элемент SPAN используется для установки малых прописных букв для стиля шрифта первых нескольких слов абзаца. В следующем примере мы используем элемент DIV и атрибут class для установки выравнивания текста для ряда абзацев, составляющих введение в научную статью. Информация о стиле может повторно использоваться для других разделов введения путем установки атрибута class в любом месте документа. 14.2.4 Типы устройствHTML позволяет авторам создавать документы, использующие характеристики устройства, на котором будет представляться документ (например, графические дисплеи, телевизионные экраны, переносные устройства, речевые браузеры, тактильные устройства на базе азбуки Бройля и т.д.). С помощью атрибута media авторы могут позволить агентам пользователей загружать и применять таблицы стилей выборочно. См. список распознаваемых дескрипторов устройств. Объявления в следующем примере применяются к элементам H1 . При показе на проекторе во время встречи все экземпляры будут отображаться синим цветом. При печати они будут отцентрированы. Этот пример добавляет звуковые эффекты для устройства речевого вывода: Управление устройствами особенно интересно при использовании с внешними таблицами стилей, поскольку агенты пользователей могут сэкономить время, загружая из сети только таблицы стилей, применяющиеся к текущему устройству. Например, речевые браузеры могут не загружать таблицы стилей, разработанные для визуального представления. Подробнее см. в разделе о зависящих от устройств каскадах. 14.3 Внешние таблицы стилейАвторы могут отделять таблицы стилей от документов HTML. Это дает следующие преимущества:
14.3.1 Предпочитаемые и альтернативные таблицы стилейHTML позволяет авторам связывать с документом любое число внешних таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких внешних таблиц стилей (например, правила «каскадов» CSS). Авторы могут указать ряд взаимоисключающих таблиц стилей, называемых . Пользователи могут выбирать таблицы, которые им больше нравятся. Например, автор может указать один стиль для небольших экранов, другой — для слабовидящих пользователей (например, с использованием крупного шрифта). Агенты пользователей должны предоставлять пользователям возможности выбора одной из альтернативных таблиц. Автор может указать, что одна из альтернатив является . Агенты пользователей должны применять предпочитаемые автором таблицы стилей, если пользователь не выбрал другую альтернативу. Авторы могут сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые автором) под одним . Если пользователь выбирает именованный стиль, агент пользователя должен применять все таблицы стилей с этим именем. Агенты пользователей не должны применять альтернативные таблицы стилей с другим именем стиля. Как присвоить имя группе стилей, описано в разделе об определении внешних таблиц стилей. При применении таблицы стилей агенты пользователей должны учитывать дескрипторы устройств. Агенты пользователей также должны позволять пользователям полностью отключать таблицы стилей автора; в этом случае агент пользователя не должен применять ни одну из таблиц стилей. Авторы указывают внешние таблицы стилей с помощью атрибутов элемента LINK :
Агенты пользователей должны обеспечивать пользователям средства просмотра и выбора таблицы стилей из списка альтернатив. Для атрибута title рекомендуется устанавливать значение, которое будет представлять эту таблицу в списке. В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css: Установка атрибута title назначает ее предпочитаемой автором таблицей: Добавление ключевого слова «alternate» а атрибут rel сделает ее альтернативной таблицей стилей: Подробнее о внешних таблицах стилей Вы можете узнать в разделе о ссылках и внешних таблицах стилей. Авторы также могут использовать для установки предпочитаемой таблицы стилей элемент META . Например, чтобы установить предпочитаемую таблицу стилей «compact» (см. предыдущий пример), авторы могут включить в элемент HEAD следующую строку: Предпочитаемую таблицу стилей можно также указать с помощью заголовков HTTP. Объявление META выше эквивалентно заголовку HTTP: Если предпочитаемая таблица стилей указывается двумя или более элементами META или заголовками HTTP, преимущество имеет последнее объявление. Считается, что заголовки HTTP обрабатываются раньше, чем объявления HEAD . Если предпочитаемая таблица стилей задается двумя или более элементами LINK , преимущество имеет первая. Предпочитаемые таблицы стилей, задаваемые с помощью META или заголовков HTTP имеют преимущество над таблицами, задаваемыми элементом LINK . 14.4 Каскады таблиц стилейязыки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов LINK и/или STYLE . Каскад информации таблиц стилей производится в порядке указания элементов в разделе HEAD . Примечание. В данной спецификации не описано каскадирование таблиц стилей разных языков. Авторам следует избегать смешивания языков. В следующем примере мы определяем две альтернативные таблицы стилей с именем «compact». Если пользователь выбирает стиль «compact», агент пользователя должен применять обе внешние таблицы, а также постоянную таблицу «common.css». Если пользователь выбирает стиль «big print», применяться будут только альтернативная таблица «bigprint.css» и постоянная таблица «common.css». Вот пример каскада, в котором задействованы оба элемента — LINK и STYLE . 14.4.1 Каскады, зависящие от устройствКаскад может включать таблицы стилей, применяемые к различным устройствам. Элементы LINK и STYLE могут использоваться с атрибутом media . Агент пользователя несет ответственность за отфильтровывание таблиц стилей, не применяющихся к текущему устройству. В следующем примере мы определяем каскад, в котором таблица стилей «corporate» представляется в нескольких версиях: одна для печати, другая для экранного представления, третья для речевых браузеров (полезная, например, при чтении электронной почты в машине). Таблица «techreport» применяется ко всем устройствам. Цветная rule, определяемая элементом STYLE , используется для печати и для экрана, но не для звукового представления. 14.4.2 Наследование и каскадыЕсли агент пользователя собирается представлять документ, ему необходимо найти значения для свойств стиля, например, семейство шрифтов, начертание, размер шрифта, длину строки, цвет текста и т.д. Точный механизм зависит от языка таблиц стилей, но в общем применяется следующее: Механизм каскадирования используется, если к элементу применяется ряд правил стиля. Этот механизм позволяет агенту пользователя сортировать правила по специфичности и определять, какое правило нужно применить. Если правило невозможно найти, следующий шаг зависит от наследования свойства. Не все свойства могут наследоваться. Для этих свойств язык таблиц стилей обеспечивает значения по умолчанию для использования в случае отсутствия явных правил для конкретного элемента. Если свойство может наследоваться, агент пользователя проверяет непосредственно элемент, в который вложен текущий элемент, и ищет правило, применяющееся к нему. Этот процесс продолжается до тех пора, пока применимое правило не будет обнаружено. Этот механизм обеспечивает компактное задание таблиц стилей. Например, авторы могут указать семейство шрифтов для всех элементов в разделе BODY с помощью одного правила для элемента BODY . 14.5 Как скрыть информацию о стиле от агентов пользователейНекоторые языки таблиц стилей поддерживают синтаксис, позволяющий авторам скрывать содержимое элементов STYLE от несоответствующих агентов пользователей. В данном примере для CSS показано, как можно скрыть содержимое элементов STYLE , чтобы гарантировать, что более старые несоответствующие спецификации агенты пользователей не будут представлять их в виде текста. 14.6 Привязка таблиц стилей с помощью заголовков HTTPМенеджеры Web-серверов могут сконфигурировать сервер таким образом, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link, описанный в [RFC2068], раздел 19.6.1.2, действует так же, как элемент LINK , с теми же атрибутами и значениями. Несколько заголовков Link соответствуют нескольким элементам LINK в том же порядке. Например, Можно задать несколько альтернативных стилей с помощью нескольких заголовков Link, а затем использовать атрибут rel для определения стиля по умолчанию. В следующем примере стиль «compact» применяется по умолчанию, поскольку в нем отсутствует ключевое слово «alternate» для атрибута rel . Это работает и при отправке документов HTML по электронной почте. Некоторые агенты электронной почты могут изменять порядок заголовков [RFC822]. Чтобы защитить стиль от изменения порядка каскадов для таблиц, задаваемых заголовками Link, авторы могут использовать объединение заголовков для объединения нескольких экземпляров одного и того же поля заголовка. Кавычки необходимы только в случае, если значения атрибутов включают пробелы. Используйте SGML entities для ссылок на символы, недопустимые в заголовках HTTP или электронной почты или символов, которые могут быть изменены при передаче через шлюзы. Элементы LINK и META , implied заголовками HTTP, определяются как встреченные раньше явного элемента LINK and META а разделе HEAD документа. Источник |
---|