Архив за ‘Стили CSS’ Category

Таблица с рамкой

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , , ,

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

Для создания рамки применяется стилевое свойство border, которое добавляется к селектору TABLE. Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег <th>), как показано на рис. 1.

Рис. 1. Таблица с рамкой

Рис. 1. Таблица с рамкой

В примере 1 показано, как создать такую простую таблицу. (далее…)

Объемная таблица

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , , ,

Эффект объемности таблицы достигается за счет одновременного использования светлых и темных цветов в рамке или ячейках, при этом возникает иллюзия, что таблица выступает над фоном веб-страницы. Например, рамка вокруг таблицы по умолчанию отображается как объемная. Хотя такой вид рамки не пользуется достаточной популярностью у веб-дизайнеров, это не означает, что такие рамки вообще не следует применять. Используя стили, таблице можно придать самый разнообразный вид, в том числе и объемный, который может удачно выделяться на фоне своих «плоских» собратьев.

Толщина трехмерной рамки регулируется атрибутом border тега <table>, при этом меняется только внешняя граница вокруг таблицы. Толщина линий внутри таблицы остается неизменной (рис. 1).

Рис. 1. Таблица с трехмерной рамкой

Рис. 1. Таблица с трехмерной рамкой (далее…)

Сетка таблицы

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , ,

Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью атрибута border тега <table>. Однако такие линии отображаются по-разному в различных браузерах, поэтому применение стилей не только позволит удобно управлять видом таблиц, но и сделает их однотипными.

Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse.

Рис. 1. Вид таблицы с сеткой

Рис. 1. Вид таблицы с сеткой (далее…)

Колонки таблицы

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , ,

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

Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных. На рис. 1 показана таблица, которая формируется именно таким способом.

Рис. 1. Таблица с выделенными колонками

Рис. 1. Таблица с выделенными колонками (далее…)

Строки таблицы

Суббота, Апрель 7th, 2012 Нет комментариев

Under : , , , , ,

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

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

Рис. 1. Таблица со строками, выделенными с помощью линий

Рис. 1. Таблица со строками, выделенными с помощью линий (далее…)

Хаки для IE6

Суббота, Апрель 7th, 2012 Нет комментариев

Under : , , , , ,

Браузер Internet Explorer 6 (IE6) содержит большое количество ошибок при работе с CSS и, несмотря на это, окончательно еще не сошел в утиль. Ошибки порой совершенно нелогичны и для их преодоления браузеру требуется «подкладывать» персональный стиль. Поэтому для разработчиков, которые по тем или иным причинам верстают под IE6 нужно знать, как это сделать. Способов несколько и они различаются подходом, а также насколько соответствуют спецификации CSS.

Использование !important

При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже. (далее…)

Хаки для IE7

Суббота, Апрель 7th, 2012 Нет комментариев

Under : , , , , , ,

В Internet Explorer 7 (IE7) по сравнению с предыдущей версией было исправлено большое количество ошибок. Однако появились новые ошибки, которые также требуют написание отдельного кода под эту версию браузера. Далее представлены хаки для седьмой версии браузера Internet Explorer.

Использование !ie

В седьмой версии была исправлена ошибка с !important, но появилась новая. Если после свойства через пробел добавить восклицательный знак и любой набор символов, то стилевое свойство будет корректно воспринято вместо игнорирования. Обычно применяют запись !ie и все браузеры кроме IE6 и IE7 пропускают такой стиль. Учтите, что хак приводит к невалидному коду CSS. (далее…)

Условные комментарии

Суббота, Апрель 7th, 2012 Нет комментариев

Under : , , , , , , ,

Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами <!— и —>. Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.

<!—[if IE]>
Код для браузера Internet Explorer
<![endif]—>

Внутри квадратных скобок допустимо использовать следующие ключевые слова:

  • IE — любая версия браузера Internet Explorer;
  • IE 6 — Internet Explorer 6;
  • IE 7 — Internet Explorer 7;
  • IE 8 — Internet Explorer 8;
  • IE 9 — Internet Explorer 9;
  • lt — номер версии браузера меньше указанной;
  • gt — номер версии больше указанной;
  • lte — номер версии меньше или равен указанной;
  • gte — номер версии браузера больше или равен указанной. (далее…)

Слои

CSS дает возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Синтаксис для работы со слоями разработан и одобрен в конце 1996 года в рабочем проекте консорциума «CSS Positioning (CSS-P)» Данный проект для позиционирования элементов практически одинаково поддерживается браузерами Internet Explorer 4.0 и Netscape 4.0 за исключением ряда мелких отличий. Однако объектные модели браузеров для динамического управления слоями с помощью JavaScript отличаются. В этом и кроется основная проблема для веб-разработчиков, которые используют слои в своих программах.

Основы

Слой 1 наверху

Слой 1
Слой 2

Слой 2 наверху

Слой 1
Слой 2
Пример 1. Создание слоев

Слой 1 наверху

Слой 1
Слой 2

Слой 2 наверху

Слой 1
Слой 2

 

(далее…)

Меню с помощью CSS

Haвepнoe, вы нe paз видeли нa web-cтpaницaх мeню, нaпoдoбиe тeх, кoтopыe aктивнo иcпoльзуютcя в пpoгpaммных пpилoжeния, кoгдa пpи нaвeдeнии куpcopa мыши нa пункт мeню, фoн этoгo пунктa и цвeт нaдпиcи мeняютcя. Чacтo пoдoбнoгo эффeктa дoбивaютcя c пoмoщью JavaScript. Пo мoeму мнeнию, этoт мeтoд являeтcя cлишкoм тяжeлoвecным, к тoму жe, ecли бpoузep клиeнтa нe пoддepживaeт JavaScript (или пoддepживaeт) или JavaScript у клиeнтa oтключeн, тo этo мoжeт oбepнутьcя нeпpиятными пocлeдcтвиями. Пoэтoму для coздaния мeню я peкoмeндую иcпoльзoвaть CSS. Этo удoбнo и нaмнoгo пpoщe чeм JavaScript.

Итaк, кaк жe вce этo будeт уcтpoeнo? Кaждый пункт мeню будeт пpeдcтaвлять coбoй oбычную гиппepccылку, для кoтopoй будeт oпpeдeлeн ocoбый cтиль. Пpи нaвeдeнии нa ccылку куpcopa мыши oнa будeт мeнять цвeт фoнa и цвeт шpифтa. Этoт эффeкт будeт дocтигнут c пoмoщью пceвдoклaccoв. Ho oбo вceм пo пopядку.

Haчнeм c oпpeдeлeния cтиля:
a.menuitem:link {
border-style: solid;
border-width: 1;
border-bottom-width: 0;
border-color: black;
background-color: silver
color: black;
text-decoration: none;
padding-left: 1em;
width: 20%
}

a.menuitem:visited {
color: black;
text-decoration: none;
}

a.menuitem:active {
color: black;
text-decoration: none;
}
(далее…)