Мастер стиля границ таблиц HTML и CSS

1. Примечания по совместимости
2. Мастер стиля границ таблицы
3. HTML Toggle Buttons
4. Получить Firefox сейчас!
5. связи

Примечания по совместимости

Если вы используете Internet Explorer 6, вы сможете использовать этот мастер с небольшими ограничениями. Эта страница не работает с Opera 8 или IE 5 на Mac. Internet Explorer 6 не поддерживает свойство таблицы CSS2 с разделением границ. Он также не поддерживает какие-либо специфичные для Netscape свойства CSS с префиксом -moz и имеет ограниченную поддержку свойства курсора. Это означает, что вы не увидите все эффекты в этом мастере, если не используете браузер, такой как Firefox.

Мастер стиля границ таблицы

Добро пожаловать в полностью обновленный мастер стиля границ HTML и CSS! Используйте этот мастер для экспериментов со стилями границ таблицы и создания исходного кода стиля. Этот мастер использует динамический HTML для изменения стиля таблицы на месте, без загрузки другой страницы. Это кросс-браузер совместим с Firefox, Netscape, Internet Explorer и другими современными браузерами.

Код таблицы стилей, сгенерированный этим мастером, показывает простой способ применения стиля к таблице. В HTML вы должны установить атрибут «class» только для тега «table». Вы не должны устанавливать атрибут «class» для каждой отдельной ячейки, потому что это раздувает код HTML и тратит впустую пропускную способность. Вместо этого вы можете использовать наследование, которое говорит, что каждый «td» или «th», который является потомком «table.sample», должен иметь определенный стиль. Небольшой объем кода дает вам мощный контроль над внешним видом таблицы.

В приведенном выше примере это не показано, но вы также можете эффективно чередовать цвета строк в таблице HTML с помощью наследования. В своем коде чередуйте тег класса каждого тега "tr" между двумя классами, определяющими цвета строк, такими как "r0" и "r1". Затем определите стили для "table.sample tr.r0 td" и "table.sample tr.r1 td". Обратите внимание, что вы не можете установить цвет фона «tr.r0» напрямую, потому что это только элемент структурирования таблицы. Вы должны установить цвет фона ячейки "td", которая является дочерней для строк "tr.r0" и "tr.r1".

-moz-граница радиуса тег style будет отображаться в браузерах на основе Gecko Runtime Engine. К ним относятся Mozilla, Netscape и лучший Firefox. Для тех, кто использует старомодный Internet Explorer, вы не увидите эффекта, который заключается в создании закругленных углов. Существует большое количество расширений Netscape, таких как это, которые позволяют создавать гладкие эффекты, и они полностью обратно совместимы со старыми браузерами, такими как IE.

HTML Toggle Buttons

Вы могли также заметить интересные переключатели, управляющие стилем таблицы. Эти кнопки действуют как переключатели, но реализованы в Javascript и CSS. Кнопки стандартного радио ввода плохо подходят для пользовательских интерфейсов, потому что круг слишком мал, чтобы на него нажимать. Теги меток могут увеличить область кликабельности (см. Функция Javascript, чтобы установить или снять все флажки ), но это тоже не очень хороший вариант. Если метки неокрашены, то большинство пользователей не знают, что текст кликабелен. Если надписи окрашены, то наличие двух областей, по которым можно кликать, увеличивает визуальный беспорядок, а надписи по-прежнему явно не активируются.

Кнопки переключения выше ведут себя как настоящие радиокнопки, как на старомодных автомагнитолах. Если вы подавляете одного, другие в этой группе становятся возвышенными. Каждая кнопка реализована в виде тега «span». Для кнопок определены два стиля: «нажатие» и «поднятие». Обработчик «onclick» каждой кнопки вызывает функцию с именем «toggleButton (elementObj, idRegex)». Для этого требуется ссылка на объект span и регулярное выражение, соответствующее группе кнопок. Функция проходит по всем элементам span в документе, и для каждого из тех, чей ID совпадает с регулярным выражением, класс стиля установлен в «поднято». Наконец, класс стиля «span», по которому щелкнули, установлен в «depressed».

Это большая работа, чтобы сделать что-то довольно простое. Надеюсь, однажды W3C определит свойство стиля, например радио-style-type, где мы сможем указать альтернативный внешний вид переключателей. В то же время, вы можете просмотреть источник этой страницы и скопировать функции Javascript. Обратите внимание, что теги "span" генерируются из функции PHP с именем printButtons, которая принимает массив кнопок, которые я хочу напечатать. Это экономит много печатать.

Получить Firefox сейчас!

Если вы еще этого не сделали, вам нужно обратиться в Mozilla Foundation и загрузить бесплатный веб-браузер Firefox. Это лучший браузер на планете. Это быстрее, меньше глючит и более безопасно, чем Internet Explorer. Вы также сможете увидеть необычные эффекты (закругленные края, эффекты наведения) на этой веб-странице, на которой вам не хватает.

Если вам доведется посетить сайт, который работает не с Firefox, а только с IE, то пожалуйтесь оператору сайта, что его сайт не соответствует стандартам. Большинство компаний будут слушать! Например, авангардный недавно обновил свой сайт, чтобы удалить большинство всплывающих окон и повысить совместимость с браузерами, отличными от IE. Помните, Microsoft не делает браузер IE бесплатным для вашей выгоды. Они хотят запереть вас, чтобы вы были вынуждены покупать их сопутствующие товары. Поддержка стандартов, поддержка сообщества и поддержка Firefox загрузка и использую это сегодня. Еще один отличный браузер, который вы можете использовать бесплатно, опера ,

связи

Больше мастеров CSS

Рекомендуемые книги

Создано 2005-03-20, Последнее изменение 2016-12-01, © Shailesh N. Humbad
Отказ от ответственности: Этот контент предоставляется как есть. Информация может быть неверной.