Css чередование. Отступы внутри и снаружи ячеек
Live Journal
Facebook
TwitterЗдравствуйте, уважаемые читатели блога сайт. Решил написать небольшой пост по теме использования CSS в целях улучшения восприятия посетителями сайта.
Ни с того, ни с сего в голову пришла мысль, что если пункты в правом меню моего блога оживить с помощью чередования фонового цвета (сделать разные цвета для четных и нечетных строк), то это может повысить юзабилити. Надежды я тут возлагаю на удобство восприятия большого количества информации при ее разбиении на блоки (как это, например, происходит при использовании абзацев в тексте).
Подобную практику очень часто применяют при стилевом оформлении таблиц, когда хотят повысить наглядность выводимой в них информации. По ходу поиска решения оказалось, что задача эта решается довольно просто и средствами одного лишь CSS.
Не требуется помечать классами четные и нечетные элементы списка (правое меню у меня на основе функционирует). Достаточно лишь дописать пару строк кода с использованием псевдокласса nth-child в файл CSS , который отвечает за стилевое оформление сайта. Однако, nth-child имеет и массу других применений, о чем тоже не премину упомянуть в посте.
Возможности псевдокласса nth-child и его применение на сайте
Собственно, после анонсирования псеводкласса nth-child можно было бы пост и завершать, ибо вы и сами можете нагуглить массу информации по нему. Но это не наш путь, поэтому продолжим. Итак, сначала я опишу свои действия по превращению правого меню в «полосатое». Достаточно было выяснить с помощью встроенных в браузеры инструментов для разработчиков (вызывается из контекстного меню нужного элемента на веб-странице выбором пункта подобного «Просмотр код элемента») в каком месте файла стилей задается внешний вид строк этого списка.
Принцип работы с инструментами разработчиков аналогичен тому, что я описывал в статье про . Кликаем правой кнопкой по любому пункту в левом меню моего блога и смотрим на открывшейся панели результирующий отчет:
Слева вы увидите Html код этого элемента (нас интересует элемент с тегами LI — строка списка), а в правой колонке приведены CSS правила, которые браузер использует для его стилевого оформления. Где находится стилевой файл вы сможете незамедлительно узнать, подведя курсор мыши к его названию.
В моем случае это будет файл , который можно открыть подключившись к сайту по ФТП и пройдя по следующему пути (править файлы шаблона из админки WordPress я бы не советовал, ибо нет возможности сделать шаг назад, как это позволяет, например, ).
/wp-content/themes
Собственно, на панели инструментов для разработчиков в области CSS стилей вы даже строку найдете, на которой нужное правило прописано в файле стилей. В моем случае это 281 строка. Поэтому, открыв style.css в Нотепаде (он у меня назначен редактором по умолчанию для всех файлов, которые встречаются в движке сайта), я на эту строку немедленно переместился.
И дописал сразу под ней еще пару правил с (это правило отвечает за изменение цвета фона строки правого меню, когда прямо над ней находится курсор мыши — это делает меню более «живым», что ли) и с упомянутым выше псевдоклассом nth-child. Если про hovver мы уже говорили (см. ссылку чуть выше), то про nth-child поговорим сейчас. Если обратили внимание, что в круглых скобках для этого псевдокласса прописан параметр 2n.
Nth-child(2n)
В общем виде значение этого псевдокласса nth-child задаётся с помощью выражения: an+b , где a и b - целые числа, а n - счетчик, принимающий целые значения от 0 и больше: 0,1,2,3... В нашем случае при при изменение счетчика n мы будем получать цифры 0, 2, 4, 6 и т.д. Это означает, что прописанное для этого псевдокласса свойство (в нашем случае это правило для задания фона строки списка с помощью ) в списке на #E4F2FA.
Этот шестнадцатеричный наиболее часто. Для поиска подходящих цветов я использовал программу Contrast Analyser 2.0, описанную по приведенной ссылке. Она позволяет захватить цвет с экрана и подобрать его более светлые тона, что я, собственно, и сделал.
Для фона строки меню, при наведении на нее курсором мыши (псевдокласс hover), я выбрал еще более светлый оттенок из того же ряда.
Другие примеры использования nth-child
Если захотите изменить фон или каким-то еще образом воздействовать на внешний вид (например, добавить им отступы, увеличить шрифт или сделать еще что-то более неприличное), то используйте выражение. Можете проверить, что подставляя вместо n целые числа начиная с нуля, вы получите в результате только нечетные числа. Можно использовать сразу оба варианта (для четных и нечетных строк списков, таблиц или чего-либо еще).
Еще несколько примеров использования nth-child для выделения различных строк списков, таблиц и тому подобных элементов:
- Для глумления над нечетными элементами можно использовать вместо показанного выше выражения nth-child (odd), а для четных — nth-child (even).
- Если захотите внести изменения только в четвертую строку? то допишите к CSS правилу через двоеточие псевдокласс nth-child (4).
- Хотите изменить вид строк начиная с девятой? Нет проблем — nth-child (n+9).
- Если хотите наоборот, выделить только первые девять элементов, то воспользуйтесь конструкцией nth-child (-n+9).
- Хотите выделить элементы начиная с девятого по восемнадцатый — добавьте составной псевдокласс:nth-child (n+9):nth-child (-n+18). Чистая логика.
- Хотите сделать то же самое, что и в предыдущем пункте, но при этом выделить в этом диапазоне только четные строки? Да нет проблем — :nth-child (n+9):nth-child (-n+18):nth-child (even).
Ну вот, где так. Штука может оказаться весьма полезной. Во всяком случае, мне пригодилась.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Разное оформление для внутренних и внешних ссылок через CSS
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS
Float и clear в CSS - инструменты блочной верстки
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
От автора: в CSS есть селекторы для поиска элементов на основе их положения в дереве документа. Их называют индексными псевдоклассами, потому что они смотрят на положение элемента, а не на его тип, атрибуты или ID. Всего их пять.
:first-child и:last-child
По названию вы могли догадаться, что псевдоклассы:first-child и:last-child выбирают первый и последний дочерний элемент в узле (элементе). Как и с другими псевдоклассами, :first-child и:last-child оказывают минимальное стороннее воздействие при использовании простых селекторов.
Рассмотрим HTML и CSS ниже:
List of fruits
- Apples
- Bananas
- Blueberries
- Oranges
- Strawberries
< ! DOCTYPE html > < html lang = "en-US" > < head > < meta charset = "utf-8" > < title > : first - child and : last - child < / title >
< / head > < body > < h2 > List of fruits < / h2 > < ul > < li > Apples < / li > < li > Bananas < / li > < li > Blueberries < / li > < li > Oranges < / li > < li > Strawberries < / li > < / ul > < / body > < / html > |
На скриншоте ниже показан результат.
Заголовок h2 и первый li окрасились в розовый, так как:first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что:last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.
Если добавить к:first-child и:last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените:first-child на li:first-child и:last-child на li:last-child. На скриншоте ниже показан результат.
:nth-child() и:nth-last-child()
Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы:nth-child() и:nth-last-child().
Как и:not, :nth-child() и:nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:
ключевым словом odd;
ключевым словом even;
целочисленным значением типа 2 или 8;
аргументом в форме Аn+B , где А – шаг, B – смещение, а n – переменная с положительным целочисленным числом.
Последний аргумент немного сложнее остальных. Разберем его чуть позже.
Чем отличаются:nth-child() и:nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а:nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.
С помощью псевдоклассов:nth-child() и:nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:
tr:nth-child(even) { background: rgba(96, 125, 139, 0.1); }
tr : nth - child (even ) { background : rgba (96 , 125 , 139 , 0.1 ) ; |
Если переключиться с:nth-child на:nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.
А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.
С помощью:nth-child() и:nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:
Item:nth-child(6) { background: #e91e63; }
Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.
Здесь уже все немного интереснее. С помощью:nth-child() и:nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:
Item:nth-child(n+8) { background: #e91e63; }
Item : nth - child (n + 8 ) { background : #e91e63; |
Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.
Замечание: отрицательное смещение
Отрицательные значения и диапазоны также валидны. Запись типа:nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.
С помощью смещения и шага можно выбрать каждый третий элемент, начиная с пятого:
Item:nth-child(3n+5) { background: #e91e63; }
Item : nth - child (3n + 5 ) { background : #e91e63; |
Результат.
only-child
Псевдокласс only-child выбирает элемент только в том случае, если он единственный дочерний элемент. Ниже представлено два маркированных списка. В первом один элемент, во втором три:
- Apple
- Orange
- Banana
- Raspberry
< ul > < li > Apple < / li > < / ul > < ul > < li > Orange < / li > < li > Banana < / li > < li > Raspberry < / li > < / ul > |
Селектор li:only-child{color: #9c27b0;} выберет
:empty
С помощью псевдокласса:empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс:empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку:empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть попадает в выборку, а нет.
Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью:empty и:not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).
Выбор элементов определенного типа по их индексу
Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.
В этом разделе мы поговорим о типизированных индексных псевдоклассах. Эти псевдоклассы также выбирают элементы по значению индекса, но выбор ограничен определенным типом. Например, нужно выбрать пятый тег p или четные h2.
Существует пять таких псевдоклассов, имена которых полностью противоположны их нетипизированным коллегам:
nth-last-of-type()
Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.
Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.
Влад Мержевич
При большом количестве строк в таблице бывает трудно сопоставлять данные из разных колонок между собой. Для этого требуется визуально отделить одну строку таблицы от другой — либо с помощью линий, либо за счет добавления фонового цвета.
Вначале разберем вариант использования горизонтальных линий. На рис. 1 приведен один из возможных способов акцентирования внимания на строках таблицы. Каждая строка сверху и снизу обрамляется линией, за счет этого взгляд посетителя скользит вдоль них и не перескакивает на соседнюю строку. При этом данные, находящиеся в колонках, также связываются между собой, но уже за счет одновременного выравнивания по левому краю и пустого пространства между колонками.
Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD . Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).
Пример 1. Разделение строк таблицы линиями
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Рубины | 43 | 51 | 79 |
| Изумруды | 28 | 34 | 48 |
| Сапфиры | 29 | 57 | 36 |
В данном примере вертикальные линии между ячейками заголовка добавляются за счет стилевого свойства border , которое используется для селектора TH . При этом возникает пустое пространство толщиной один пиксел между границей таблицы и фоновой областью заголовка.
Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.
Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even , и станем добавлять его к четным строкам таблицы, а именно к тегу
Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр class="even" ) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.
Пример 2. Выделение строк таблицы цветом
| 2004 | 2005 | 2006 | |
|---|---|---|---|
| Рубины | 43 | 51 | 79 |
| Изумруды | 28 | 34 | 48 |
| Сапфиры | 29 | 57 | 36 |
| Аметисты | 23 | 64 | 97 |
В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE . Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.
При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.
Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.
Пример:
|
HTML-код:
Графический фон таблицы html страницыПри помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта. Пример:
|
