Справочник — Учебник 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 | Сокращенное свойство для свойств |
| 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-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 | PuzzleWeb.
ruДанный справочник предоставляет подробное описание всех CSS свойств с максимально упрощенными примерами, для более легкого понимания работы свойства.
Свойства CSS по группам:
|
|
|
flexbox
| Свойство | Описание | CSS |
|---|---|---|
| align-content | Задаёт вертикальное выравнивание flex-элементов для flex-контейнеров с многострочным содержимым. |
3 |
| align-items | Вертикальное выравнивание flex-элементов внутри flex-контейнера. | 3 |
| align-self | Вертикальное выравнивание flex-элемента. | 3 |
| flex | Определяет ширину, сжатие и растяжение для flex-элемента. | 3 |
| flex-basis | Указывает ширину для flex-элемента. | 3 |
| flex-direction | Направление расположения flex-элементов. | 3 |
| flex-flow | Направление расположения и возможность переноса для flex-элементов. | 3 |
| flex-grow | Определяет коэффициент растяжения flex-элемента. | 3 |
| flex-shrink | Определяет коэффициент сжатия flex-элемента. |
3 |
| flex-wrap | Определяет возможность переноса flex-элементов. | 3 |
| justify-content | Горизонтальное выравнивание flex-элементов. | 3 |
| order | Определяет порядок вывода flex-элементов. | 3 |
Анимация
| Свойство | Описание | CSS |
|---|---|---|
| @keyframes | Позволяет создавать анимацию. | 3 |
| animation | Позволяет установить несколько или все значения свойств animation в одном объявлении. | 3 |
| animation-delay | Определяет, когда запустится анимация. | 3 |
| animation-direction | Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах. |
3 |
| animation-duration | Определяет сколько понадобится времени, чтобы закончить 1 цикл анимации. | 3 |
| animation-fill-mode | Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания). По умолчанию CSS анимация не влияет на элемент до тех пор, пока анимация не запуститься, во время паузы и после её завершения. Это и позволяет переопределить свойство animation-fill-mode. |
3 |
| animation-iteration-count | Определяет сколько раз анимация должна будет проигрываться. | 3 |
| animation-name | Определяет имя для @keyframes. | 3 |
| animation-play-state | Указывает будет анимация проигрываться или будет в режиме паузы. | 3 |
| animation-timing-function | Определяет кривую скорости для анимации. |
3 |
| backface-visibility | Определяет, должна ли быть видна задняя сторона элемента или нет. | 3 |
Внешний и внутренний отступы
| Свойство | Описание | CSS |
|---|---|---|
| margin | Задает внешние отступы для элемента. | 1 |
| margin-bottom | Задает нижний внешний отступ для элемента. | 1 |
| margin-left | Задает левый внешний отступ для элемента. | 1 |
| margin-right | Задает правый внешний отступ для элемента. | 1 |
| margin-top | Задает верхний внешний отступ для элемента. | 1 |
| padding | Устанавливает внутренние отступы в элементе. |
1 |
| padding-bottom | Задает нижний отступ(внутреннее поле) для элемента. | 1 |
| padding-left | Задает левый отступ(внутреннее поле) для элемента. | 1 |
| padding-right | Задает правый отступ(внутреннее поле) для элемента. | 1 |
| padding-top | Задает верхний отступ(внутреннее поле) для элемента. | 1 |
Позиционирование
| Свойство | Описание | CSS |
|---|---|---|
| bottom | Указывает направление смещения позиционированного элемента от нижнего края. | 2 |
| clear | Указывает с какой стороны элемента не допускаются плавающие элементы. | 1 |
| clip | Определяет видимую часть абсолютно позиционированных элементов. |
2 |
| display | Указывает, как будет отображаться элемент в браузере. | 1 |
| float | Определяет будет ли элемент плавающим. | 1 |
| left | Указывает направление смещения позиционированного элемента от левого края. | 2 |
| position | Определяет метод позиционирования элементов. | 2 |
| right | Указывает направление смещения позиционированного элемента от правого края. | 2 |
| top | Указывает направление смещения позиционированного элемента от верхнего края. | 2 |
| visibility | Определяет, является ли элемент видимым. | 2 |
| z-index | Указывает порядок расположения элементов по оси Z. |
2 |
Размер
| Свойство | Описание | CSS |
|---|---|---|
| height | Устанавливает фиксированную высоту. | 1 |
| max-height | Указывает максимальную фиксированную высоту. | 2 |
| max-width | Указывает максимальную фиксированную ширину. | 2 |
| min-height | Указывает минимальную фиксированную высоту. | 2 |
| min-width | Указывает минимальную фиксированную ширину. | 2 |
| overflow | Определяет, что предпринять, если содержимое элемента превосходит размер области элемента. | 2 |
| overflow-x | Указывает, обрезать или нет левый/правый край содержимого — если оно переполняет доступную область элемента для его содержания. |
3 |
| overflow-y | Указывает, обрезать или нет верхний/нижний край содержимого — если оно переполняет доступную область элемента для его содержания. | 3 |
| resize | Указывает, может ли размер элемента изменяться пользователем. | 3 |
| width | Устанавливает фиксированную ширину. | 1 |
Рамка и контур
| Свойство | Описание | CSS |
|---|---|---|
| border | Позволяет использовать основные свойства границ в одном объявлении. | 1 |
| border-bottom | Позволяет использовать значения основных свойств для нижней границы рамки в одном объявлении. | 1 |
| border-bottom-color | Задает цвет для нижней границы рамки. |
1 |
| border-bottom-left-radius | Позволяет сделать округлую границу нижнего левого угла. | 3 |
| border-bottom-right-radius | Позволяет сделать округлую границу нижнего правого угла. | 3 |
| border-bottom-style | Определяет стиль для нижней границы рамки. | 1 |
| border-bottom-width | Определяет ширину для нижней границы рамки. | 1 |
| border-color | Задает цвет для границ рамки элемента. | 1 |
| border-image | Позволяет использовать изображение в качестве рамки. | 3 |
| border-left | Позволяет использовать значения основных свойств для левой границы рамки в одном объявлении. | 1 |
| border-left-color | Задает цвет для левой границы рамки. |
1 |
| border-left-style | Определяет стиль для левой границы рамки. | 1 |
| border-left-width | Определяет ширину для левой границы рамки. | 1 |
| border-radius | Позволяет изменить форму углов. | 3 |
| border-right | Меняет внешний вид правой границы рамки. | 1 |
| border-right-color | Задает цвет для правой границы рамки. | 1 |
| border-right-style | Определяет стиль для правой границы рамки. | 1 |
| border-right-width | Задает ширину для правой границы рамки. | 1 |
| border-style | Задает стиль для границ рамки элемента. | 1 |
| border-top | Меняет внешний вид верхней границы рамки. |
1 |
| border-top-color | Задает цвет для верхней границы рамки. | 1 |
| border-top-left-radius | Позволяет сделать округлую границу верхнего левого угла. | 3 |
| border-top-right-radius | Позволяет сделать округлую границу верхнего правого угла. | 3 |
| border-top-style | Определяет стиль для верхней границы рамки. | 1 |
| border-top-width | Определяет ширину для верхней границы рамки. | 1 |
| border-width | Задает ширину для границ рамки элемента. | 1 |
| outline | Создает внешнюю границу вокруг элемента. | 2 |
| outline-color | Определяет цвет внешней границы. |
2 |
| outline-offset | Сдвигает внешнюю границу на заданное расстояние от края элемента. | 3 |
| outline-style | Указывает стиль для внешней границы. | 2 |
| outline-width | Указывает ширину для внешней границы. | 2 |
Списки
| Свойство | Описание | CSS |
|---|---|---|
| list-style | Управляет маркером в списках. | 1 |
| list-style-image | Заменяет маркеры списков на изображения. | 1 |
| list-style-position | Определяет расположение маркера относительно пункта списка. | 1 |
| list-style-type | Указывает вид маркера в списке. | 1 |
Таблицы
| Свойство | Описание | CSS |
|---|---|---|
| border-collapse | Определяет будут ли границы рамки объединены в одну. |
2 |
| border-spacing | Определяет расстояние между границами смежных ячеек и общей рамкой таблицы. | 2 |
| caption-side | Указывает расположение заголовка таблицы. | 2 |
| empty-cells | Регулирует видимость пустых ячеек в таблице. | 2 |
| table-layout | Задает алгоритм использования макета таблицы. | 2 |
Текст
| Свойство | Описание | CSS |
|---|---|---|
| color | Изменяет цвет текста. | 1 |
| direction | Определяет направление написания текста. | 2 |
| letter-spacing | Контролирует расстояние между символами в тексте. | 1 |
| line-height | Определяет межстрочный интервал(интерлиньяж). |
1 |
| quotes | Определяет тип кавычек для встроенных цитат. | 2 |
| text-align | Указывает способ выравнивания содержимого по горизонтали. | 1 |
| text-decoration | Добавляет некоторые элементы декорирования к тексту. | 1 |
| text-indent | Определяет отступ первой строки в тексте элемента. | 1 |
| text-overflow | Указывает, что должно произойти, когда текст переполняет содержащий элемент. | 3 |
| text-transform | Контролирует использование строчных и прописных букв в тексте. | 1 |
| vertical-align | Определяет вертикальное выравнивание в элементе. | 1 |
| white-space | Определяет способ обработки пробелов внутри элемента. |
1 |
| word-break | Определяет правила переноса для не-CJK сценариев. | 3 |
| word-spacing | Определяет ширину пробелов между словами. | 1 |
| word-wrap | Позволяет прерывать длинные слова для переноса на другую строку. | 3 |
Тени и прозрачность
| Свойство | Описание | CSS |
|---|---|---|
| box-shadow | Добавляет эффект отбрасывания тени к элементу. | 3 |
| opacity | Устанавливает уровень прозрачности элемента. | 3 |
| text-shadow | Создает тень для текста. | 3 |
Трансформация
| Свойство | Описание | CSS |
|---|---|---|
| perspective | Определяет, на сколько пикселей удален 3D элемент от точки обзора. |
3 |
| perspective-origin | Определяет, где располагается 3D элемент на осях x и y. | 3 |
| transform | Применяет 2D или 3D преобразование к элементу. | 3 |
| transform-origin | Позволяет изменить позицию преобразованных элементов. | 3 |
| transform-style | Определяет, как вложенные элементы будут отображаться в трехмерном пространстве. | 3 |
| transition | Управляет эффектом трансформации. | 3 |
| transition-delay | Указывает, когда должен начаться эффект трансформации. | 3 |
| transition-duration | Указывает продолжительность трансформации. | 3 |
| transition-property | Указывает название CSS свойства, для которого будет применен эффект трансформации. |
3 |
| transition-timing-function | Задает кривую скорости для эффекта трансформации. | 3 |
Фон
| Свойство | Описание | CSS |
|---|---|---|
| background | Устанавливает несколько или все значения свойств фона в одном объявлении. | 1 |
| background-attachment | Указывает будет ли фоновое изображение фиксированным. | 1 |
| background-clip | Определяет область в элементе, для которой задается фон. | 3 |
| background-color | Устанавливает цвет фона для элемента. | 1 |
| background-image | Устанавливает фоновое изображение в элементе. | 1 |
| background-origin | Указывает область позиционирования для фонового изображения. |
3 |
| background-position | Устанавливает начальное место для фонового изображения. | 1 |
| background-repeat | Задает, как фоновое изображение будет повторяться на экране. | 1 |
| background-size | Указывает размер для фонового изображения. | 3 |
Шрифт
| Свойство | Описание | CSS |
|---|---|---|
| font | Изменяет стандартный вид текста. | 1 |
| @font-face | Позволяет использование любого шрифта на странице. | 3 |
| font-family | Указывает шрифт или семейство шрифтов для текста. | 1 |
| font-size | Указывает размер для шрифта. | 1 |
| font-size-adjust | Контролирует размер неосновных шрифтов. |
3 |
| font-stretch | Регулирует ширину текста. | 3 |
| font-style | Позволяет изменять стиль текста. | 1 |
| font-variant | Конвертирует строчные буквы в прописные уменьшенного размера. | 1 |
| font-weight | Задает ширину символов текста. | 1 |
Другое
| Свойство | Описание | CSS |
|---|---|---|
| box-sizing | Позволяет заставить определенные элементы заполнять область определенным способом. | 3 |
| column-count | Разделяет элемент на колонки. | 3 |
| column-gap | Задает расстояние между колонками элемента. | 3 |
| column-rule | Свойство column-rule позволяет указать значения свойств column-rule-* (ширину, стиль и цвет) в одном объявлении. |
3 |
| column-rule-color | Определяет цвет границы между колонками. | 3 |
| column-rule-style | Определяет стиль границы между колонками. | 3 |
| column-rule-width | Указывает ширину границы между колонками. | 3 |
| columns | Позволяет использовать значения свойств column-width и column-count в одном объявлении. | 3 |
| column-span | Указывает элементу количество колонок для обхвата. | 3 |
| column-width | Определяет ширину колонок. | 3 |
| content | Определяет содержимое для псевдо-элементов ::before и ::after. | 2 |
| counter-increment | Увеличивает значение счетчика. |
2 |
| counter-reset | Устанавливает начальное значение счетчика. | 2 |
| cursor | Изменяет вид курсора мыши. | 2 |
| page-break-after | Определяет наличие или отсутствие разрыва страницы после заданного элемента. | 2 |
| page-break-before | Определяет наличие или отсутствие разрыва страницы перед заданным элементом. | 2 |
| page-break-inside | Определяет наличие или отсутствие разрыва страницы внутри элемента. | 2 |
Полное руководство по HTML и CSS | Книга и электронная книга
Создавайте современные веб-сайты с помощью HTML и CSS!
- Просмотрите книгу Просмотрите книгу
автор Юрген Вольф
Электронная книга
$54,99
Доступный
Печатное издание
$59,95
Доступный
Комплект
$69,99
Доступный
Печатное издание Электронная книга Комплект
814 страниц, 2023 г.
, печатное издание в мягкой обложке
ISBN 978-1-4932-2422-7
814 страниц, 2023 г.
Форматы электронных книг: EPUB, MOBI, PDF, онлайн
ISBN 978-1-4932-2423-4
814 страниц, 2023 г., печатное издание в мягкой обложке
Форматы электронных книг: EPUB, MOBI, PDF, онлайн
ISBN 978-1-4932-2424-1
Веб-разработчики — это полное руководство по HTML и CSS! Научитесь использовать HTML для форматирования текста и структурирования веб-страниц. Прежде чем создавать формы, ссылаться на гиперссылки, внедрять активное содержимое и т. д., изучите структуру HTML-документа. Затем придайте своим страницам стиль с помощью CSS: создайте согласованный дизайн с помощью селекторов, блочной модели, каскадного алгоритма и наследования. Завершите свой опыт клиентской разработки, познакомившись с JavaScript. С подробными примерами кода вы быстро освоите HTML и CSS!
Ваше полное руководство по HTML5 и CSS3
Создавайте HTML-документы, проектируйте с помощью CSS и получите практическое введение в основы JavaScript
Создание адаптивных макетов, работа с графикой и видео и многое другое
О книге
Об электронной книге
850 страниц, мягкая обложка.
Гибкий справочник формата 7 x 10 дюймов, в идеальном переплете. Отпечатано в черно-белом цвете на офсетной бумаге 60# из надежных источников. Удобный для чтения шрифт с засечками (TheAntiquaB 9.5 балла). Макет в одну колонку.
Электронная книга в полном цвете. Файлы PDF, EPUB и MOBI для загрузки, без DRM с персонализированным цифровым водяным знаком. Копирование и вставка, закладки и распечатка разрешены. Оглавление, ссылки в тексте и предметный указатель полностью связаны. Включая онлайн-издание книги в специальном приложении для чтения.
В этой книге вы узнаете о:
HTML для форматирования и структуры
Основной синтаксис HTML и структура документа. Работайте с тегами, элементами и атрибутами для создания HTML-документов. Создавайте таблицы и формы, вставляйте изображения, настраивайте ссылки и разрабатывайте интерактивные элементы HTML.
CSS для стиля и дизайна
Разрабатывайте простые и сложные веб-макеты с помощью правил CSS, селекторов, объявлений, комбинаторов, псевдоклассов и псевдоэлементов.
Понимать принципы каскадирования, специфичности и наследования. Научитесь использовать блочную модель CSS, свойство position и многое другое.Основы JavaScript
Расширьте свои знания, ознакомившись с JavaScript. Узнайте, как использовать переменные, операторы, функции, массивы и объекты для написания и запуска простых программ. Изучите основы Ajax для разработки интерактивных веб-приложений.
Понимать принципы каскадирования, специфичности и наследования. Научитесь использовать блочную модель CSS, свойство position и многое другое.Основные моменты включают
Синтаксис и структура HTML
элемента HTML
Таблицы, ссылки и изображения
HTML-формы
CSS-селекторы
Каскад и наследование
Модель коробки CSS
Препроцессоры CSS
Адаптивный дизайн макета
Тестирование
JavaScript
Аякс
Дополнения к продукту
Здесь вы можете найти загружаемые дополнения к продукту.
Список дополнений >
Вам также может понравиться:
JavaScript –
Полное руководство
Филип Акерманн
982 страницы, мягкая обложка
Начните знакомство с JavaScript с помощью этого подробного практического руководства. Вы узнаете все, что нужно знать о профессиональном программировании на JavaScript, от основных концепций языка до основных клиентских задач. Создавайте динамические веб-приложения с помощью пошаговых инструкций и расширяйте свои знания, … Подробнее о книге
от $54,99
Доступный
Электронная книга | Печатное издание | Связка
Докер –
Практическое руководство для разработчиков и групп DevOps
Бернд Оггл, Михаэль Кофлер
491 страница, мягкая обложка
Изучите все тонкости контейнеризации в Docker с помощью этого практического руководства! Начните с установки и настройки платформы.
Затем освойте основы: изучите важную терминологию, поймите, как запускать контейнеры и настроить перенаправление портов.
… Подробнее о книгеот $44,99
Доступный
Электронная книга | Печатное издание | Связка
Разработка приложений с помощью SAP Business Technology Platform
Гайрик Ачарья, Говинд Баджадж, Авиджит Дхар, Ануп Гош, Асидхара Лахири
574 страницы, твердый переплет
Разрабатывайте облачные приложения, адаптированные к потребностям вашего бизнеса! Овладеть основами SAP Business Technology Platform (SAP BTP) и ее сред разработки; затем получите пошаговые инструкции по разработке и эксплуатации собственных приложений. Создайте свою серверную часть с помощью Java, Node.js или … Подробнее о книге
от $84,99
Доступный
Электронная книга | Печатное издание | Связка
Затем освойте основы: изучите важную терминологию, поймите, как запускать контейнеры и настроить перенаправление портов.
… Подробнее о книгеTARGET Краткое руководство по HTML и CSS — (Руководства по быстрому запуску) Дэвида Дурочера (в твердом переплете)
Краткий обзор книги Изучите основы HTML и CSS для создания красивых веб-сайтов.
Лучшая книга по основам современного веб-дизайна на рынке! Каждая из более чем 4 миллиардов веб-страниц сегодня использует язык разметки HTML для отображения своего контента. HTML везде. Опытные разработчики знают, что владение основами HTML и CSS — это не только важный навык веб-дизайна, но и прочная основа для надежного набора навыков кодирования. В кратком руководстве по HTML и CSS, автор, инструктор и ветеран технической компании Fortune 500 с более чем 10-летним стажем, Дэвид ДюРоше раскрывает основы HTML5 и CSS3 в управляемых, практичных и привлекательных сегментах, предназначенных для начинающих разработчиков. Уникальный и увлекательный подход Дэвида к обучению принципам HTML и CSS означает, что читатели готовы приступить к проектированию с самой первой главы, не терпя лавины скучного жаргона или сухой технической болтовни. Действительно, любой человек на любом этапе своей жизни может научиться программировать. HTML и CSS — идеальная отправная точка в этом путешествии — легко изучить, легко реализовать, HTML и CSS открывают дверь в мир возможностей кодирования.
Краткое руководство по HTML и CSS идеально подходит для: разработчиков полного цикла, желающих освежить свои навыки разработки интерфейса; соискателей, желающих повысить ценность своего резюме; художников, блоггеров и цифровых предпринимателей, которые хотят настроить свое присутствие в Интернете. WordPress, Shopify, и пользователей Squarespace, которые хотят настроить шаблоны и сделать их своими собственными. Всем, кто хочет создавать привлекательные, адаптивные и современные веб-сайты без предварительного опыта. Руководство по быстрому запуску HTML и CSS Обложки: HTML и CSS для начинающих — все основные HTML и CSS основы, которые вам нужно знать, в одном месте Теги HTML, элементы CSS, стили CSS и то, как именно соединить части вместе Как сэкономить время, используя передовые методы для создания чистого и аккуратного кода Форматирование, размер, шрифты, изображения, мультимедиа, формы, спрайты и градиенты — все инструменты, которые вам нужны, чтобы сделать свой сайт на 100% своим! Краткое руководство по HTML и CSS научит вас: Основам современного веб-дизайна — Как использовать мощную комбинацию HTML5 и CSS3 для создания функциональных и адаптивных веб-страниц Структура сайта и принципы адаптивного дизайна — Как форматировать разметку HTML и CSS для создания привлекательных веб-сайтов и веб-страницы, которые отлично смотрятся в любом браузере и на любом устройстве.
Вдохните жизнь в ваши проекты. Как включить формы, мультимедийные элементы, специальные символы и многое другое в ваши веб-проекты. Рекомендации по правильной разметке. Как эффективно использовать CSS и HTML вместе для создания чистых, профессиональных HTML-документов с использованием стандартных инструментов, таких как GitHub. HTML и CSS для начинающих — элементы HTML и CSS, форматирование, отступы, градиенты, меню, тестирование, отладка, обновление кода вашего сайта и многое другое — все это поддерживается многочисленными наглядными примерами и практическим практическим проектом! * ПОЖИЗНЕННЫЙ ДОСТУП К БЕСПЛАТНЫМ ЦИФРОВЫМ РЕСУРСАМ HTML И CSS * Полный практический проект с использованием стандартного репозитория кода GitHub, а также полной онлайн-библиотеки ресурсов HTML, CSS и веб-дизайна, шпаргалок по веб-разработке и многого другого! Review Quotes 5 of 5 HTMLand CSS QuickStart Guide — отличный справочник для тех, кто учится программировать и создавать веб-сайты. Справочник по вычислительной технике Дэвида ДюРоше «HTML и CSS QuickStart Guide» может превратить обычных интернет-путешественников в разработчиков и суперпользователей.
Эта книга, составленная так, чтобы помочь обычным людям понять возможности самостоятельного кодирования, объясняет различия между HTML и CSS на повседневном языке, сравнивая первый с чертежами дома, а второй — со схемой проектирования. Его четыре части переходят от обзоров HTML и CSS к более глубоким практическим советам по созданию веб-сайтов. Письмо имеет прекрасное разговорное качество, которое дополняет красивое форматирование повсюду. В книге прекрасно используются пустое пространство, затенение и текст, а четкие метки хорошо представляют фрагменты кода, различные цифровые активы и советы. Книга также продумана в использовании кода, позволяя каждому серому блоку продвигать идеи текста и используя фрагменты кода для описания того, как они могут изменить шрифты или стили. Например, он показывает различные стили заголовков, как со встроенным CSS, так и без него, и хорошо объясняет различия. И хотя текст предназначен для тех, кто уже разбирается в Интернете, он также включает заключительные советы по загрузке и установке предлагаемых материалов.