Чередование фонового цвета списка css. Выбор элементов определенного типа по их индексу
Здравствуйте уважаемые читатели! При просомтре таблиц с большим количеством строк и столбцов бывает сложно отследить какие данные относятся к конкретной строке. Поэтому чтобы улучшить восприятие информации пользователями сайта и повысить юзабилити, можно использовать чередование фонового цвета в строках таблицы, либо в кнопках навигационного меню.
С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child , который позволяет выбрать все четные или нечетные элементы, используя значения odd — нечетные или even — четные элементы, либо числовое выражение an+b , где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2... и так далее. Перейдем от теории к практике.
Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:
М | Команда | И | В | Н | П | Заб | Проп | О |
1 | Зенит | 30 | 20 | 7 | 3 | 58 | 17 | 67 |
2 | ЦСКА | 30 | 19 | 3 | 8 | 67 | 27 | 60 |
3 | Краснодар | 30 | 17 | 9 | 4 | 52 | 27 | 60 |
4 | Динамо | 30 | 14 | 8 | 8 | 53 | 36 | 50 |
5 | Рубин | 30 | 13 | 9 | 8 | 39 | 33 | 48 |
6 | Спартак | 30 | 12 | 8 | 10 | 42 | 42 | 44 |
7 | Локомотив | 30 | 11 | 10 | 9 | 31 | 25 | 43 |
8 | Мордовия | 30 | 11 | 5 | 14 | 22 | 43 | 38 |
9 | Терек | 30 | 10 | 7 | 13 | 30 | 30 | 37 |
10 | Кубань | 30 | 8 | 12 | 10 | 32 | 36 | 36 |
11 | Амкар | 30 | 8 | 8 | 14 | 25 | 42 | 32 |
12 | Уфа | 30 | 7 | 10 | 13 | 26 | 39 | 31 |
13 | Урал | 30 | 9 | 3 | 18 | 31 | 44 | 30 |
14 | Ростов | 30 | 7 | 8 | 15 | 27 | 51 | 29 |
15 | Торпедо | 30 | 6 | 11 | 13 | 28 | 45 | 29 |
16 | Арсенал Тула | 30 | 7 | 4 | 19 | 20 | 46 | 25 |
HTML-код таблицы с минимальным оформлением:
М | Команда | И | В | Н | П | Заб | Проп | О |
1 | Зенит | 30 | 20 | 7 | 3 | 58 | 17 | 67 |
2 | ЦСКА | 30 | 19 | 3 | 8 | 67 | 27 | 60 |
3 | Краснодар | 30 | 17 | 9 | 4 | 52 | 27 | 60 |
4 | Динамо | 30 | 14 | 8 | 8 | 53 | 36 | 50 |
5 | Рубин | 30 | 13 | 9 | 8 | 39 | 33 | 48 |
6 | Спартак | 30 | 12 | 8 | 10 | 42 | 42 | 44 |
7 | Локомотив | 30 | 11 | 10 | 9 | 31 | 25 | 43 |
8 | Мордовия | 30 | 11 | 5 | 14 | 22 | 43 | 38 |
9 | Терек | 30 | 10 | 7 | 13 | 30 | 30 | 37 |
10 | Кубань | 30 | 8 | 12 | 10 | 32 | 36 | 36 |
11 | Амкар | 30 | 8 | 8 | 14 | 25 | 42 | 32 |
12 | Уфа | 30 | 7 | 10 | 13 | 26 | 39 | 31 |
13 | Урал | 30 | 9 | 3 | 18 | 31 | 44 | 30 |
14 | Ростов | 30 | 7 | 8 | 15 | 27 | 51 | 29 |
15 | Торпедо | 30 | 6 | 11 | 13 | 28 | 45 | 29 |
16 | Арсенал Тула | 30 | 7 | 4 | 19 | 20 | 46 | 25 |
Таблица имеет много строк и столбцов и при однородном фоне ее тяжело просматривать. Для улучшения восприятия здесь как раз поможет чередование фонового цвета у четных и нечетных строк . Для этого добавляем следующий CSS-код:
Результат:
М | Команда | И | В | Н | П | Заб | Проп | О |
1 | Зенит | 30 | 20 | 7 | 3 | 58 | 17 | 67 |
2 | ЦСКА | 30 | 19 | 3 | 8 | 67 | 27 | 60 |
3 | Краснодар | 30 | 17 | 9 | 4 | 52 | 27 | 60 |
4 | Динамо | 30 | 14 | 8 | 8 | 53 | 36 | 50 |
5 | Рубин | 30 | 13 | 9 | 8 | 39 | 33 | 48 |
6 | Спартак | 30 | 12 | 8 | 10 | 42 | 42 | 44 |
7 | Локомотив | 30 | 11 | 10 | 9 | 31 | 25 | 43 |
8 | Мордовия | 30 | 11 | 5 | 14 | 22 | 43 | 38 |
9 | Терек | 30 | 10 | 7 | 13 | 30 | 30 | 37 |
10 | Кубань | 30 | 8 | 12 | 10 | 32 | 36 | 36 |
11 | Амкар | 30 | 8 | 8 | 14 | 25 | 42 | 32 |
12 | Уфа | 30 | 7 | 10 | 13 | 26 | 39 | 31 |
13 | Урал | 30 | 9 | 3 | 18 | 31 | 44 | 30 |
14 | Ростов | 30 | 7 | 8 | 15 | 27 | 51 | 29 |
15 | Торпедо | 30 | 6 | 11 | 13 | 28 | 45 | 29 |
16 | Арсенал Тула | 30 | 7 | 4 | 19 | 20 | 46 | 25 |
Можно сделать акцент на столбцы оформив вертикальную зебру . Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td . А при наведении на строку выделять ее цветом с помощью псевдокласса hover:
Результат:
М | Команда | И | В | Н | П | Заб | Проп | О |
1 | Зенит | 30 | 20 | 7 | 3 | 58 | 17 | 67 |
2 | ЦСКА | 30 | 19 | 3 | 8 | 67 | 27 | 60 |
3 | Краснодар | 30 | 17 | 9 | 4 | 52 | 27 | 60 |
4 | Динамо | 30 | 14 | 8 | 8 | 53 | 36 | 50 |
5 | Рубин | 30 | 13 | 9 | 8 | 39 | 33 | 48 |
6 | Спартак | 30 | 12 | 8 | 10 | 42 | 42 | 44 |
7 | Локомотив | 30 | 11 | 10 | 9 | 31 | 25 | 43 |
8 | Мордовия | 30 | 11 | 5 | 14 | 22 | 43 | 38 |
9 | Терек | 30 | 10 | 7 | 13 | 30 | 30 | 37 |
10 | Кубань | 30 | 8 | 12 | 10 | 32 | 36 | 36 |
11 | Амкар | 30 | 8 | 8 | 14 | 25 | 42 | 32 |
12 | Уфа | 30 | 7 | 10 | 13 | 26 | 39 | 31 |
13 | Урал | 30 | 9 | 3 | 18 | 31 | 44 | 30 |
14 | Ростов | 30 | 7 | 8 | 15 | 27 | 51 | 29 |
15 | Торпедо | 30 | 6 | 11 | 13 | 28 | 45 | 29 |
16 | Арсенал Тула | 30 | 7 | 4 | 19 | 20 | 46 | 25 |
Тоже самое можно сделать и для списков. В статье мы сделали несколько вариантов горизонтального меню. Вот одно из них:
Это меню можно немного оживить с помощью чередования фонового цвета у соседних пунктов. Для этого нужно всего лишь добавить одну строчку кода:
Результат:
Полный код меню:
Псевдокласса nth-child позволяет применять различные свойства не только к четным или нечетным элементам, но и к конкретным элементам. Так, например, если необходимо изменить цвет шрифта только в первом пункте списка, то поможет следующее CSS правило:
li:nth-child (1){
color:orange;
}
Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:
tr:nth-child (n + 3){
background-color: silver;
}
Можно выделить какой-то диапазон, например с четвертого по седьмой:
tr:nth-child (n+4):nth-child (-n+7){
font-size: 20px;
}
Так с помощью простых манипуляций с CSS стилями и псевдокласса nth-child можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.
Пробуйте и предлагайте свои варианты. На этом все, до новых встреч!
- 4.7 out of 5 based on 6 votes
При создании веб страниц очень часто необходимо представить некоторое содержимое страницы в виде таблиц.
Иногда таблицы используют для создания структуры страницы. Этот подход не совсем верный, потому что таблицы изначально не предназначались для позиционирования элементов страницы.
Для этой цели лучше всего пользоваться средствами CSS. Но в некоторых случаях таблицы являются незаменимыми и удобными для предоставления информации.
За создание таблиц в HTML отвечает тег
Для того, чтобы посмотреть как все работает на практике, создадим таблицу, состоящую из двух строк и четырех ячеек. Код нашей таблицы будет следующий:
1 - ячейка | 2 - ячейка |
3 - ячейка | 4 - ячейка |
Для того чтобы, увидеть что из этого получится, создайте html страницу используя код расположенный ниже. Если не знаете как создать HTML страницу, смотрите урок .
1 - ячейка | 2 - ячейка |
3 - ячейка | 4 - ячейка |
У вас должно получиться следующее:
Как вы видите, наша таблица еще совсем не похожа на таблицу. Все это потому, что наши теги
Вначале мы рассмотрим атрибуты, которые присущи тегам
bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки:
Мы задали ширину рамки 2 пикселя, синего цвета, таблица примет следующий вид:
width – задает ширину таблицы в пикселях или процентах:
height – высота таблицы в пикселях или процентах:
Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:
align – выравнивание таблицы;
align=left – таблицы будет выровнена по левому краю;
align=right – таблица будет выровнена по правому краю:
Наша таблица должна выровняться по правому краю.
bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:
Таблица получит следующий вид:
background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.
В качестве примера сохраните маленькое изображение, которое вы видите в скобках () в ту папку, где у вас находится страница с таблицей, а к тегу
, некоторые из них такие же, как и атрибуты тега
Заметьте, достаточно задать одной ячейке высоту или ширину и все ячейки этой строки или столбца примут такой же размер. Поэтому если необходимо задать, например определенную высоту ячеек то достаточно указать этот параметр для одной ячейки и все остальные ячейки строки станут такими же. align – выравнивает содержимое ячеек, имеет следующие значения: align="lef" – содержимое ячейки будет выровнено по левому краю; align="right" – содержимое будет выровнено по правому краю; align="center" – содержимое будет выровнено по центру ячейки. Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 - й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.
bgcolor – при помощи данного атрибута можно задать цвет ячейки. background – устанавливает изображение в виде фона ячейки. С данными атрибутами мы уже встречались, рассматривая атрибуты тега
6. Как убрать промежуток между рамками ячеекРамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется. Синтаксис Table {border-collapse: collapse;}
7. Как увеличить промежуток между рамками ячеекС помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется. Синтаксис Table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек 8. Как скрыть пустые ячейки таблицыСвойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.
9. Компоновка макета таблицы с помощью свойства table-layoutКомпоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется. Синтаксис Table {table-layout: fixed;} 10. Лучшие макеты таблиц1. Горизонтальный минимализмГоризонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td . Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/ Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов. Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;} 2. Вертикальный минимализмНесмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы. Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; } 3. «Коробочный» стильНаиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя. Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;} Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль. Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; } 4. Горизонтальная зебраЗебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы. Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;} 5. Газетный стильДля достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку. Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;} Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;} Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; } 6. Фон таблицыЕсли вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы. Png") 98% 86% no-repeat; } th { font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; } td { color: #669; border-top: 1px solid white; padding: 10px 12px; background: rgba(51, 51, 153, .2); transition: .3s; } tr:hover td { background: rgba(51, 51, 153, .1); } В этой главе:Табличные данные - информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется элемент
|