Псевдокласс :nth-child | CSS | WebReference
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
Селектор:nth-child(odd | even | <число> | <выражение>) {...}Синтаксис| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- odd
- Все нечётные номера элементов.
- even
- Все чётные номера элементов.
- <число>
- Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
- <выражение>
- Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2.
..
..Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Значение | Номера элементов | Описание |
|---|---|---|
| 1 | 1 | |
| 5 | 5 | Пятый элемент. |
| 2n | 2, 4, 6, 8, 10,… | Все чётные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9,… | Все нечётные элементы, аналог значения odd. |
| 3n | 3, 6, 9, 12, 15,… | Каждый третий элемент. |
| 3n+2 | 2, 5, 8, 11, 14,… | Каждый третий элемент, начиная со второго. |
| n+4 | 4, 5, 6, 7, 8,… | Все элементы, кроме первых трёх. |
| -n+3 | 3, 2, 1 | Первые три элемента. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| even | 2, 4, 6, 8, 10,… | Все чётные элементы. |
| odd | 1, 3, 5, 7, 9,… | Все нечётные элементы. |
Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.
:nth-child(n+2):nth-child(-n+5) { … }Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>nth-child</title> <style> table { width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячейками */ } tr:nth-child(2n) { background: #f0f0f0; /* Цвет фона */ } tr:nth-child(1) { background: #666; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <table border=»1″> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>
1).Рис. 1. Применение псевдокласса :nth-child к строкам таблицы
Спецификация
| Спецификация | Статус |
|---|---|
| Selectors Level 4 | Рабочий проект |
| Selectors Level 3 | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 1 | 9.5 | 3.1 | 3.5 |
| 2.1 | 1 | 9.5 | 3.1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Псевдоклассы
См.
также- :nth-child()
- :nth-of-type()
- Нумерованные списки
- Псевдокласс :nth-last-child
- Псевдокласс :nth-last-of-type
- Псевдокласс :nth-of-type
- Псевдоклассы в CSS
Рецепты
- Как сделать нумерацию русскими буквами?
Практика
- Зебра в таблице
Справочник — Учебник CSS — schoolsw3.com
❮ Главная Далее ❯
CSS Список свойств
A
| accent-color | Указывает цвет акцента для элементов управления пользовательского интерфейса. |
| align-content | Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство |
| align-items | Задает выравнивание для элементов внутри гибкого контейнера |
| align-self | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
| all | Сбрасывает все свойства (кроме unicode-bidi и direction) |
| animation | Сокращенное свойство для всех свойств animation-* |
| animation-delay | Задает задержку запуска анимации |
| animation-direction | Указывает, должна ли анимация воспроизводиться вперед, назад или в других циклах |
| animation-duration | Определяет, сколько времени анимация должна занять для завершения одного цикла |
| animation-fill-mode | Задает стиль элемента, если анимация не воспроизводится (до он начнется, после его окончания, или как) |
| animation-iteration-count | Указывает, сколько раз анимация должна воспроизводиться |
| animation-name | Задает имя анимации @keyframes |
| animation-play-state | Указывает, запущена или приостановлена анимация |
| animation-timing-function | Задает кривую скорости анимации |
B
| backface-visibility | Определяет, должна ли задняя грань элемента быть видимой при обращении к пользователю |
| background | Сокращенное свойство для всех свойств background-* |
| background-attachment | Задает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксироваться |
| background-blend-mode | Задает режим наложения каждого фонового слоя (цвет/изображение) |
| background-clip | Определяет, как далеко фон (цвет или картинка) должна распространяться в элемент |
| background-color | Задает цвет фона элемента |
| background-image | Задает одно или несколько фоновых изображений для элемента |
| background-origin | Указывает исходное положение фонового изображения |
| background-position | Определяет положение фонового изображения |
| background-repeat | Устанавливается, если/как, фоновое изображение будет повторяться |
| background-size | Определяет размер фоновых изображений |
| border | Сокращенное свойство для свойств border-width, border-style и border-color |
| border-bottom | Сокращенное свойство для свойств border-bottom-width, border-bottom-style и border-bottom-color |
| border-bottom-color | Задает цвет нижней границы |
| border-bottom-left-radius | Определяет радиус границы нижнего левого угла |
| border-bottom-right-radius | Определяет радиус границы нижнего правого угла |
| border-bottom-style | Задает стиль нижней границы |
| border-bottom-width | Задает ширину нижней границы |
| border-collapse | Задает, должны ли границы таблицы сворачиваться в одну границу или разделяться |
| border-color | Задает цвет четырех границ |
| border-image | Сокращенное свойство для всех свойств border-image-* |
| border-image-outset | Задает величину, на которую область изображения границы выходит за пределы границы бокса |
| border-image-repeat | Указывает, следует ли повторять, округлять или растягивать изображение границы |
| border-image-slice | Определяет, как разрезать изображение границы |
| border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границы |
| border-image-width | Определяет ширину изображения границы |
| border-left | Сокращенное свойство для всех свойств border-left-* |
| border-left-color | Задает цвет левой границы |
| border-left-style | Задает стиль левой границы |
| border-left-width | Задает ширину левой границы |
| border-radius | Сокращенное свойство для всех свойств border-*-radius |
| border-right | Сокращенное свойство для всех свойств border-right-* |
| border-right-color | Задает цвет правой границы |
| border-right-style | Задает стиль правой границы |
| border-right-width | Задает ширину правой границы |
| border-spacing | Задает расстояние между границами соседних ячеек |
| border-style | Задает стиль четырех границ |
| border-top | Сокращенное свойство для свойств border-top-width, border-top-style and border-top-color |
| border-top-color | Задает цвет верхней границы |
| border-top-left-radius | Определяет радиус границы верхнего левого угла |
| border-top-right-radius | Определяет радиус границы верхнего правого угла |
| border-top-style | Задает стиль верхней границы |
| border-top-width | Устанавливает ширину верхней границы |
| border-width | Задает ширину четырех границ |
| bottom | Задает положение элементов в нижней части родительского элемента |
| box-decoration-break | Задает поведение фон и границы к элементу page-break, или для элеметов in-line, в line-break. |
| box-shadow | Присоединяет одну или несколько теней к элементу |
| box-sizing | Определяет, как вычисляются ширина и высота элемента: они включают в себя отступы и границы, или нет |
| break-after | Задает поведение разрыва страницы, столбца или области после созданного бокса |
| break-before | Указывает поведение разрыва страницы, столбца или области перед созданным бокса |
| break-inside | Указывает поведение разрыва страницы, столбца или области внутри созданного бокса |
C
| caption-side | Задает размещение заголовка таблицы |
| caret-color | Задает цвет курсора (символ) во входных данных, текстовых областях или редактируемом элементе |
| @charset | Указывает кодировку символов, используемую в таблице стилей |
| clear | Определяет, на каких сторонах элемента плавающие элементы не могут плавать |
| clip | Клипы абсолютно расположенный элемент |
| color | Задает цвет текста |
| column-count | Указывает количество столбцов, на которые должен быть разделен элемент |
| column-fill | Указывает, как заполнять столбцы, сбалансированные или нет |
| column-gap | Определяет зазор между столбцами |
| column-rule | Сокращенное свойство для всех свойств column-rule-* |
| column-rule-color | Задает цвет правила между столбцами |
| column-rule-style | Задает стиль правила между столбцами |
| column-rule-width | Задает ширину правила между столбцами |
| column-span | Указывает, сколько столбцов должен занимать элемент |
| column-width | Задает ширину столбца |
| columns | Сокращенное свойство для свойств column-width и column-count |
| content | Используется с псевдо-элементами: before и: after для вставки генерированного содержимого |
| counter-increment | Увеличивает или уменьшает значение одного или нескольких счетчиков CSS |
| counter-reset | Создает или сбрасывает один или несколько счетчиков CSS |
| cursor | Указывает курсор мыши будет отображаться при наведении на элемент |
D
| direction | Задает направление текста направление/записи |
| display | Указывает, как должен отображаться определенный элемент HTML |
E
| empty-cells | Указывает, следует ли отображать границы и фон пустых ячеек в таблице |
F
| filter | Определяет эффекты (например, размытие или смещение цвета) для элемента перед его отображением |
| flex | Сокращенное свойство для свойств flex-grow, flex-shrink, и flex-basis |
| flex-basis | Задает начальную длину гибкого элемента |
| flex-direction | Указывает направление гибких элементов |
| flex-flow | Сокращенное свойство для свойств flex-direction и flex-wrap |
| flex-grow | Указывает, насколько элемент будет расти относительно остальных |
| flex-shrink | Указывает, как элемент будет сжиматься относительно остальных |
| flex-wrap | Указывает, следует ли оборачивать гибкие элементы |
| float | Указывает, должен ли бокс быть плавающим |
| font | Сокращенное свойство для свойств font-style, font-variant, font-weight, font-size/line-height, и font-family |
| @font-face | Правило, которое позволяет веб-сайтам загружать и использовать шрифты, отличные от шрифтов «web-safe» |
| font-family | Задает шрифт для текста |
| font-feature-settings | Позволяет управлять расширенными типографскими возможностями шрифтов OpenType |
| @font-feature-values | Позволяет авторам использовать общее имя в font-variant-alternate для функции, активированной по-разному в OpenType |
| font-kerning | Управляет использованием информации Кернинга (как расставляются буквы) |
| font-language-override | Контролирует использование языковых символов в шрифте |
| font-size | Задает размер шрифта текста |
| font-size-adjust | Сохраняет читаемость текста при резервном копировании шрифта |
| font-stretch | Выбор нормальной, сжатой или развернутой грани из семейства шрифтов |
| font-style | Задает стиль шрифта для текста |
| font-synthesis | Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы браузером |
| font-variant | Указывает, должен ли текст отображаться шрифтом с маленькими прописными буквами |
| font-variant-alternates | Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-feature-values |
| font-variant-caps | Управляет использованием альтернативных символов для заглавных букв |
| font-variant-east-asian | Управляет использованием альтернативных глифов для восточноазиатских скриптов (e. g японский и китайский языки) |
| font-variant-ligatures | Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым они применяются |
| font-variant-numeric | Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров |
| font-variant-position | Управляет использованием альтернативных глифов меньшего размера, расположенных в виде верхнего или нижнего индекса относительно базовой линии шрифта |
| font-weight | Задает вес шрифта |
G
| grid | Сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow |
| grid-area | Либо задает имя элемента сетки, и это свойство является свойством, характеристикой свойств grid-row-start, grid-column-start, grid-row-end, и grid-column-end |
| grid-auto-columns | Задает индекс размера столбца |
| grid-auto-flow | Указывает, как автоматически размещаемые элементы вставляются в сетку |
| grid-auto-rows | Задает индекс размера строки |
| grid-column | Сокращенное свойство для свойств grid-column-start и grid-column-end |
| grid-column-end | Указывает, где заканчивается элемент сетки |
| grid-column-gap | Определяет размер зазора между столбцами |
| grid-column-start | Указывает, с чего начать элемент сетки |
| grid-gap | Сокращенное свойство для свойств grid-row-gap и grid-column-gap |
| grid-row | Сокращенное свойство для свойств grid-row-start и grid-row-end |
| grid-row-end | Указывает, где заканчивается элемент сетки |
| grid-row-gap | Определяет размер зазора между строками |
| grid-row-start | Указывает, с чего начать элемент сетки |
| grid-template | Сокращенное свойство для свойств grid-template-rows, grid-template-columns и grid-areas properties |
| grid-template-areas | Указывает, как отображать столбцы и строки, используя именованные элементы сетки |
| grid-template-columns | Задает размер столбцов и количество столбцов в макете сетки |
| grid-template-rows | Задает размер строк в макете сетки |
H
| hanging-punctuation | Указывает, может ли знак пунктуации располагаться за пределами строки |
| height | Задает высоту элемента |
| hyphens | Задает способ разделения слов для улучшения расположения абзацев |
I
| image-rendering | Подсказывает браузеру, какие аспекты изображения наиболее важны для сохранения при масштабировании |
| @import | Позволяет импортировать таблицу стилей в другую таблицу стилей |
| isolation | Определяет, должен ли элемент создавать новое содержимое стека |
J
| justify-content | Задает выравнивание между элементами внутри гибкого контейнера, если не использовать все доступное пространство |
K
| @keyframes | Задает код анимации |
L
| left | Определяет левое положение расположенного элемента |
| letter-spacing | Увеличивает или уменьшает расстояние между символами в тексте |
| line-break | Определяет как/если ломать линии |
| line-height | Устанавливает высоту линии |
| list-style | Задает все свойства списка в одном объявлении |
| list-style-image | Задает изображение в качестве маркера элемента списка |
| list-style-position | Указывает положение маркеров элементов списка (жирные точки) |
| list-style-type | Указывает тип маркера элемента списка |
M
| margin | Устанавливает все свойства полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Задает левое поле элемента |
| margin-right | Задает правое поле элемента |
| margin-top | Задает верхнее поле элемента |
| max-height | Задает максимальную высоту элемента |
| max-width | Задает максимальную ширину элемента |
| @media | Устанавливает правила стиля для различных типов/устройств/размеров носителей |
| min-height | Задает минимальную высоту элемента |
| min-width | Задает минимальную ширину элемента |
| mix-blend-mode | Указывает, как содержимое элемента должно сочетаться с его прямым родительским фоном |
O
| object-fit | Определяет как содержание замененного элемента должно быть приспособлено к боксу установленной своими используемыми высотой и шириной |
| object-position | Задает выравнивание заменяемого элемента внутри его бокса |
| opacity | Задает уровень непрозрачности для элемента |
| order | Устанавливает порядок гибкого элемента относительно остальных |
| orphans | Задает минимальное количество строк, которое должно оставаться в нижней части страницы при разрыве страницы внутри элемента |
| outline | Сокращенное свойство для свойств outline-width, outline-style, и outline-color |
| outline-color | Задает цвет контура |
| outline-offset | Смещает контур и рисует его за границей |
| outline-style | Задает стиль контура |
| outline-width | Задает ширину контура |
| overflow |
Указывает, что происходит, если содержимое переполняет бокс элемента |
| overflow-wrap | Указывает, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы соответствовать содержащему ее блоку) |
| overflow-x | Указывает, следует ли обрезать левый/правый края содержимого, если оно переполняет область содержимого элемента |
| overflow-y | Указывает, следует ли обрезать верхний/нижний края содержимого, если оно переполняет область содержимого элемента |
P
| padding | Сокращенное свойство для свойств padding-* |
| padding-bottom | Устанавливает нижней отступ элемента |
| padding-left | Задает отступ слева для элемента |
| padding-right | Задает правый отступ элемента |
| padding-top | Задает отступ сверху элемента |
| page-break-after | Задает поведение разрыва страницы после элемента |
| page-break-before | Задает поведение разрыва страницы перед элементом |
| page-break-inside | Задает поведение разрыва страницы внутри элемента |
| perspective | Дает 3D-позиционированному элементу некоторую перспективу |
| perspective-origin | Определяет, в какой позиции пользователь смотрит на 3D-позиционированный элемент |
| pointer-events | Определяет, реагирует ли элемент на события указателя |
| position | Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) |
Q
| quotes | Задает тип кавычек для внедренных предложений |
R
| resize | Определяет, если (и как) элемент изменяется пользователем |
| right | Определяет правое положение расположенного элемента |
T
| tab-size | Задает ширину символа табуляции |
| table-layout | Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы |
| text-align | Задает выравнивание текста по горизонтали |
| text-align-last | Описывает выравнивание последней строки блока или строки непосредственно перед принудительным разрывом строки при выравнивании текста «justify» |
| text-combine-upright | Указывает сочетание нескольких символов в один символ |
| text-decoration | Задает украшение, добавляемое к тексту |
| text-decoration-color | Задает цвет оформления текста |
| text-decoration-line | Определяет тип линии в тексте украшений |
| text-decoration-style | Задает стиль линии в оформлении текста |
| text-indent | Задает отступ первой строки в текстовом блоке |
| text-justify | Указывает метод выравнивания, используемый при выравнивании текста «justify» |
| text-orientation | Определяет ориентацию текста в строке |
| text-overflow | Указывает, что должно произойти, когда текст переполняет содержащий элемент |
| text-shadow | Добавляет тень к тексту |
| text-transform | Управляет капитализацией текста |
| text-underline-position | Задает положение подчеркивания, заданного с помощью свойства text-decoration |
| top | Определяет верхнее положение расположенного элемента |
| transform | Применяется 2D-или 3D-преобразования к элементу |
| transform-origin | Позволяет изменять положение преобразованных элементов |
| transform-style | Задает способ отображения вложенных элементов в 3D-пространстве |
| transition | Сокращенное свойство для всех свойств transition-* |
| transition-delay | Указывает, когда начнется эффект перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода |
| transition-property | Задает имя свойства CSS эффект перехода для |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
U
| unicode-bidi | Используется вместе с свойством direction для установки или возврата переопределения текста для поддержки нескольких языков в одном документе |
| user-select | Указывает, можно ли выбрать текст элемента |
V
| vertical-align | Задает вертикальное выравнивание элемента |
| visibility | Указывает, является ли элемент видимым |
W
| white-space | Задает способ обработки пробелов внутри элемента |
| widows | Задает минимальное количество строк, которое должно оставаться в верхней части страницы при разрыве страницы внутри элемента |
| width | Задает ширину элемента |
| word-break | Указывает, как слова должны ломаться при достижении конца строки |
| word-spacing | Увеличивает или уменьшает расстояние между словами в тексте |
| word-wrap | Позволяет длинные, нерушимые слова, которые будут разбиты и перенесены на следующую строку |
| writing-mode | Указывает, должны ли строки текста уложены горизонтально или вертикально |
Z
| z-index | Задает порядок расположения элементов в стеке |
❮ Главная Далее ❯
Изучение CSS: полное руководство
Итак, вы хотите изучить CSS?
Если вы хотите стать успешным веб-дизайнером, вам необходимо хорошо разбираться в CSS.
Даже если вы не занимаетесь программированием самостоятельно, понимание того, как это работает, поможет вам создавать веб-дизайн. Мы создали исчерпывающее руководство, которое поможет вам изучить CSS в Интернете, независимо от того, начинаете ли вы с основ или хотите изучить более продвинутый CSS. Это учебное пособие поможет вам:
- Изучить CSS и HTML с нуля.
- Используйте свой опыт работы с CSS, чтобы быстрее писать лучший код.
- Ознакомьтесь с последними разработками в области CSS.
Мы начнем с базового объяснения того, что такое CSS и как он работает. Затем мы рассмотрим основы CSS, такие как типографика, макет, цвета и фон. После этого мы изучим некоторые более сложные области CSS и взглянем на то, что может ожидать CSS в будущем. И закончим рассмотрением препроцессоров CSS и анимации.
В каждом разделе мы предоставим вам множество ресурсов, которые вы можете использовать, чтобы узнать больше об определенной области. С этим руководством по CSS, а также с курсами и учебными пособиями, на которые мы ссылаемся в нем, у вас есть вся информация, необходимая для перехода от новичка CSS к профессионалу.
1. Что такое CSS?
CSS означает каскадные таблицы стилей, документы, содержащие правила стилей, описывающие, как отображаются элементы HTML. CSS позволяет вам управлять макетом нескольких веб-страниц одновременно.
Как это работает?
CSS работает рука об руку с HTML; HTML сортирует структуру страницы, а CSS добавляет стиль, делает ее красивой и позволяет ввести тонкие уровни взаимодействия.
Несколько правил стиля могут указывать на один элемент HTML, и в этом случае должен быть способ определить, какое правило должно действовать. Термин каскадирование описывает процесс фильтрации от общих правил до тех пор, пока не встретится наиболее конкретное правило. Это правило затем выбирается для выполнения своей работы.
Веб-браузеры читают CSS. Они берут документ разметки HTML, а затем применяют правила стиля CSS к элементам в этом документе.
Изучение основ HTML
В этом руководстве предполагается, что у вас уже есть базовые знания HTML.
Если вы этого не сделаете, вы можете быстро освоить наш краткий курс по основам HTML. К концу этого краткого курса вы будете знать, что такое HTML, как он работает и как использовать его наиболее распространенные элементы.
2. Основы CSS
Специфика CSS и селекторы
Целью CSS является нацеливание элементов и их стилизация. Эти два руководства помогут вам правильно начать работу:
Типографика, макет, цвета и фон
Пришло время освоить основы CSS: типографику, макет, цвета и фон.
В разделе «Начните здесь: изучите типографику CSS» вы начнете с того, что узнаете, как CSS влияет на отображение веб-сайта, что такое селекторы CSS, что такое свойства CSS и синтаксис кодирования, который вам нужно знать, чтобы написать свой собственный CSS. .
В нашей серии курсов «Начните здесь» Кезз Брейси покажет вам, как построить типографскую основу вашего сайта, как создать наиболее распространенные типы макетов в веб-дизайне и как вдохнуть жизнь в сайт.
вы создавали с использованием цветов и фона CSS.
Когда вы освоите основы работы с фоном, ознакомьтесь с этим учебным пособием, в котором подробно рассматриваются обновленное свойство фона и новые возможности, помимо простого добавления фонового изображения или цвета CSS.
CSS-позиционирование
CSS-позиционирование, пожалуй, самый фундаментальный навык в веб-дизайне; он поддерживает макеты и, следовательно, формирует основу всего внутри этих макетов. Тем не менее, может быть довольно сложно понять, когда вы только начинаете.
К тому времени, когда вы закончите этот курс, вы будете четко понимать основные принципы, необходимые для создания макетов. Вы изучите каждый из четырех типов позиционирования, используемых в CSS, а также узнаете, как обойти некоторые странности, которые могут возникнуть при их использовании.
Продолжайте изучать CSS
Следуйте за мастерами
CSS постоянно развивается, и лучший способ оставаться на вершине своей игры — это погрузиться в нее.
Обратите внимание на то, что делают знаменитости CSS, и вы многому научитесь. Вот лишь несколько человек в Твиттере, на которых вы должны подписаться:
- @chriscoyier
- @LeaVerou
- @csswizardry
- @rachelandrew
- @snookca
- @vlh
- @MeyerWeb
- @zeldman
- @jensimmons
- @простые биты
Еженедельные дайджесты
Убедитесь, что вы также подписаны на наши еженедельные дайджесты, чтобы получать подробные сводки обо всех наших новых учебных пособиях по веб-дизайну каждую неделю, доставляемые прямо на ваш почтовый ящик.
Учитесь в сообществе
Почему бы не найти своих героев на сайте социального кодирования, таком как GitHub или CodePen? Самое лучшее в таких сетях — это советы, которые все дают друг другу; если у вас есть проблема с CSS, кто-то уже сталкивался с ней до вас и будет готов протянуть руку помощи. Помните, вы всегда можете обратиться за помощью на наш форум!
Получите доступ к поддержке браузеров
Браузеры не всегда одинаково интерпретируют правила стиля, и по мере развития браузеров также расширяется поддержка новых предложений стилей.
Важно понимать, как основные десктопные и мобильные браузеры будут обрабатывать ваш CSS.
Часто сами производители браузеров экспериментируют со свойствами CSS в надежде, что их предложения будут приняты пользователями. В конечном счете, Консорциум World Wide Web (W3C) решает, стандартизированы свойства CSS или нет.
К счастью, все современные браузеры (такие как Google Chrome, Mozilla Firefox, Apple Safari, Opera и Microsoft Edge) имеют упреждающее управление обновлениями, что должно предотвратить слишком долгое использование старых версий.
Однако между каждым из этих браузеров существуют различия, независимо от их актуальности. Некоторые CSS будут хорошо поддерживаться в одном браузере, но по-разному интерпретироваться в другом, поэтому рекомендуется обратить внимание на браузеры.
Вот несколько полезных ресурсов, которые помогут вам в пути:
- BrowserStack – это просто лучший на сегодняшний день инструмент для кросс-браузерного тестирования. Используйте его, чтобы увидеть, как разные браузеры и платформы взаимодействуют с вашим CSS.
- Can I Use… – бесценный веб-сайт для проверки того, какие свойства CSS поддерживаются в каких браузерах.
Используйте его, чтобы увидеть, как разные браузеры и платформы взаимодействуют с вашим CSS.3. CSS следующего уровня
После того, как вы освоите основы, вам предстоит еще многому научиться, чтобы по-настоящему извлечь максимальную пользу из всего, что может предложить CSS, от фреймворков, помогающих организовать CSS, до библиотек CSS и создания гибких сеток. макеты на основе блочной модели.
SMACSS
SMACSS (Масштабируемая и модульная архитектура для CSS) — это набор руководящих принципов CSS, который организует ваши правила CSS в повторно используемые модули. В этом курсе Ади Пурдила познакомит вас с этим замечательным интерфейсным фреймворком!
Основные библиотеки CSS
В следующем курсе вы узнаете, как использовать десять основных библиотек CSS для веб-дизайнеров. Вы узнаете о сбросах, анимации, переходах и библиотеках, связанных с типографикой.
Вы будете использовать Bower для управления своими проектами, чтобы убедиться, что все остается в актуальном состоянии и легко обслуживается.
Макет CSS
CSS никогда не предназначался для компоновки сложных интерфейсов; он был создан с учетом простых документов. Таким образом, его путь был трудным.
В наши дни, однако, CSS способен на очень многое, когда речь идет о макете, как подтвердят эти курсы. Следуйте за нашими инструкторами, чтобы освоить блочную модель, взять под контроль макеты на основе сетки и использовать Flexbox для создания гибких интерфейсов.
CSS Grid Layout
Наш подход к макету в Интернете меняется, и в авангарде этого изменения CSS Grid Layout. В этом кратком руководстве будут пропущены детали и нюансы, вместо этого оно поможет вам разобраться прямо сейчас.
Новый CSS-макет
Если вы хотите продвинуться вперед в CSS Grid Layout, эта новая книга от Рэйчел Эндрю и A Book Apart — именно то, что вам нужно.
Воспользуйтесь этим поворотным моментом в эволюции макета с помощью Нового макета CSS.
Проекты CSS
Теперь пришло время закрепить полученные знания, попробовав несколько практических проектов! В этих трех курсах используется CodePen, поэтому вы можете легко следовать им.
Курсы нового уровня
Уделите немного времени изучению невероятных результатов, которых можно добиться с помощью CSS следующего уровня. Эти курсы и учебные пособия по CSS идеально подходят для расширения ваших знаний и более глубокого изучения отсечения, маскирования, сеток, режимов наложения, счетчиков и единиц измерения.
Учебные пособия следующего уровня
Будущее CSS
CSS постоянно развивается, и вы можете оставаться в курсе событий и опережать события, зная, как будет выглядеть будущее. В этих курсах и руководствах вы узнаете о некоторых передовых функциях CSS, таких как селекторы CSS, модули макета, фильтры, псевдоэлементы и добавление буквицы, чтобы вывести свои проекты на новый уровень.
4. Препроцессоры CSS
Что такое препроцессор CSS?
Препроцессор CSS — это язык сценариев, который расширяет возможности CSS и позволяет выполнять ряд действий, а также может значительно улучшить рабочий процесс. Препроцессоры помогают вам писать хорошо организованный код, который легче поддерживать, и позволяют использовать код, совместно используемый другими людьми, но самое большое преимущество заключается в том, что они экономят ваше время.
Это краткое объяснение препроцессоров CSS за 60 секунд!
Изучите Sass, LESS и Stylus
Sass, LESS и Stylus — три самых зрелых и стабильных языка расширений CSS. У нас есть курсы, которые помогут вам освоить все три!
Вы можете узнать больше о препроцессорах CSS, ознакомившись со следующими ресурсами:
- Учебники по Sass от Хью Жироделя
- МЕНЬШЕ: Помимо основ
- Категория препроцессора на Envato Tuts+
5.
Анимация CSS В последние годы движение стало действительно важной частью области веб-дизайна. Движение и анимация добавляют интерфейсу многоуровневости, помогая пользователю, предлагая обратную связь, доставляя удовольствие и вовлекая в процесс.
Методы CSS-анимации часто являются воротами веб-дизайнера в мир движения, и лучший способ начать работу – ознакомиться с нашим полным руководством:
- Веб-анимация: полное руководство
6. Learn CSS: The Complete Guide
Это учебное руководство будет пополняться последними и лучшими учебными пособиями и курсами по CSS, которые помогут вам оставаться на вершине своей игры!
Чтобы быть в курсе всего контента CSS, который мы публикуем, не забудьте подписаться на наши еженедельные дайджесты, чтобы получать исчерпывающую сводку всех наших новых руководств по веб-дизайну каждую неделю, подписывайтесь на @tutsplus в Твиттере и лайкайте страницу Envato Tuts+ на Facebook. .
Полное руководство по CSS + шпаргалки 📑 | Брэдли Найс | Уровень повышен!
Полное руководство по CSS + шпаргалки 📑 | Брэдли Найс | Уровень повышен! | Medium от Брэдли Найса, контент-менеджера ClickHelp.
com — профессиональное средство технического письма
CSS — это язык, описывающий стиль HTML-документа и его элементов. Узнайте, как использовать CSS для создания красивых веб-страниц. Для тех из вас, кто все еще изучает CSS или хочет немного углубиться в определенные темы CSS, я составил список учебных ресурсов, с которыми я столкнулся в последние месяцы.
Возможно, я пропустил что-то важное, поэтому, пожалуйста, предлагайте свои категории и ресурсы в комментариях, и я внесу изменения в следующий список!
Селекторы CSS
Селекторы CSS определяют элементы, к которым применяется набор правил CSS. Оттуда вы можете перейти к расширенным селекторам и псевдоселекторам. Это отправная точка изучения CSS.
- Понятия для начинающих: как работают селекторы CSS
- Улучшите свои навыки работы с селекторами CSS
- Селекторы CSS | MDN Web Docs
Блочная модель CSS
Блочная модель CSS объясняет, как управлять элементами на вашей странице.
Это важное знание для новичков в CSS.
- Вскрытие коробочной модели | ShayHowe
- Коробочная модель | Веб-документы MDN
- Блочная модель CSS | CSS-Tricks
CSS Layout
Макет включает в себя управление расположением элементов на странице. Узнайте, как манипулировать этим, чтобы создать именно тот дизайн, который вы хотите.
- Начало работы с CSS Layout | Smashing Magazine
- Полное руководство по Flexbox — Обучение на примерах Оханс Эммануэль
- Полное руководство по Grid | CSS-Tricks
- Шпаргалка по компоновке сетки (PDF)
Стилизация текста с помощью CSS
Текст является основным блоком любого веб-сайта. Узнайте, как применить к нему дизайн с помощью CSS.
- Основные стили текста и шрифта | MDN Web Docs
- Списки стилей | Веб-документы MDN
Единицы CSS
Единицы используются для определения положения, размера и других параметров.
- Значения и единицы CSS | Веб-документы MDN
- Взгляд на единицы окна просмотра CSS | Alligator. io
- Функция Calc() с вариантами использования | Pineco
ioЦвета и градиенты CSS
- Цвет | Веб-документы MDN
- Градиенты CSS | CSS-трюки
CSS-переходы и анимации
- CSS-переходы объясняются | Целль
- CSS-переходы | CSS3 = Awesome
Более 40 примеров кнопок CSS3 с эффектами и анимацией
Брэдли Найс, контент-менеджер ClickHelp.co — профессиональный инструмент для написания технических текстов
medium.com
Удивительные библиотеки анимации CSS 9002 0
от Брэдли Найс, контент-менеджер ClickHelp.co — профессионального инструмента для написания технических текстов
medium.com
CSS-псевдоклассы и псевдоэлементы
- Обучение использованию псевдоэлементов :after и :before в CSS | Smashing Magazine
- Целая куча удивительных вещей, которые могут делать псевдоэлементы | CSS-Tricks
- Как работают псевдоклассы CSS, объяснение с кодом и большим количеством диаграмм Нэша Вейла
- Целая куча удивительных вещей, которые могут делать псевдоэлементы | CSS-трюки
Препроцессоры CSS
- Основы Sass | sass-lang. com
- Узнайте МЕНЬШЕ за 10 минут (или меньше) | Обучающий журнал
comСистемы именования CSS и архитектура
- БЭМ для начинающих: зачем вам БЭМ | Smashing Magazine
- Полная шпаргалка по CSS + PDF | OnBlastBlog
- Памятка Mega CSS3
- Памятка CSS | Учебники Hostinger
- CSS Cheat Sheat Infographic | Автор CSS
- Альманах CSS | CSS-Tricks
Бесплатные приложения и инструменты для работы с CSS
от Брэдли Найса, контент-менеджера ClickHelp.co — лучший инструмент для написания технических текстов
medium.com
Более 100 ресурсов CSS для веб-дизайнеров и разработчиков
Брэдли Найс, контент-менеджер ClickHelp.co — профессионального инструмента для написания технических текстов
medium.com
Top 20 Лучшие бесплатные CSS3-фреймворки для Веб-разработка
Брэдли Найс, контент-менеджер ClickHelp.co — лучший инструмент для написания технических текстов
medium.