CSS :: Cправочник
Наш справочник по каскадным таблицам стилей CSS содержит свойства, которые по возможности являются стандартными в CSS3. Свойства отсортированы по алфавиту и по категориям. После перехода на страницу справочника с описанием требуемого свойства, вы сможете посмотреть его синтаксис, описание, список допустимых значений, а также ряд примеров использования данного css-свойства. Кроме того, внизу страницы обычно располагаются ссылки на документацию по данному свойству на официальном сайте W3C и страницу справочника CSS на официальном сайте Mozilla Firefox.
Чтобы посмотреть результат выполнения исходного кода примера во фрейме кодового блока, используйте кнопку «Результат».
Свойства CSS по алфавиту:
CSS по категориям:
Справочные статьи
- Цветовые модели, использующиеся в CSS
- Единицы измерения, использующиеся в CSS
- Таблица кодовых обозначений языков мира
- Таблицы названий цветов, использующихся в HTML и CSS
- Таблицы шрифтов для использования в HTML и CSS
- Абсолютный и относительный путь в веб-программировании
- Наследование, каскадирование и приоритетность стилей CSS
!,A
!important align-content align-items align-self all | animation animation-delay animation-direction animation-duration animation-fill-mode | animation-iteration-count animation-name animation-play-state animation-timing-function |
B
backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size border border-bottom | border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color | border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-sizing |
C
caption-side clear clip color column-count column-fill | column-gap column-rule column-rule-color column-rule-style column-rule-width column-span | column-width columns content counter-increment counter-reset cursor |
D,E
direction | display | empty-cells |
F
filter flex flex-basis flex-direction flex-flow | flex-grow flex-shrink flex-wrap float font | font-family font-size font-style font-variant font-weight |
H,J
height | justify-content |
L
left letter-spacing 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 min-height min-width |
object-fit opacity order orphans | outline outline-color outline-offset outline-style | outline-width overflow overflow-x overflow-y |
P
padding padding-bottom padding-left padding-right | padding-top page-break-after page-break-before page-break-inside | perspective perspective-origin pointer-events position |
Q,R
quotes | resize | right |
table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style | text-indent text_shadow text-transform top transform transform-origin transform-style | transition transition-delay transition-duration transition-property transition-timing-function |
U,V
unicode-bidi | vertical-align | visibility |
W,Z
white-space widows width | word-break word-spacing word-wrap | z-index |
Фон, цвет
background background-attachment background-clip background-color background-image | background-origin background-position background-position-x background-position-y background-repeat | background-size color filter |
Границы и тени
border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style | border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius | border-top-style border-top-width border-width box-shadow outline outline-color outline-offset outline-style outline-width |
Размеры
box-sizing height max-height | max-width min-height min-width | width |
Отступы
margin margin-bottom margin-left margin-right | margin-top padding padding-bottom padding-left | padding-right |
Позиционирование
bottom clip left | position right top | z-index |
Шрифты
font font-family | font-size font-style | font-variant font-weight |
Текст
direction letter-spacing line-height text-align text-align-last text-decoration | text-decoration-color text-decoration-line text-decoration-style text-indent text_shadow text-transform | unicode-bidi white-space word-break word-spacing word-wrap writing-mode |
Контент
content counter-increment | counter-reset quotes |
Печать
orphans page-break-after | page-break-before page-break-inside | widows |
Колонки
column-count column-fill column-gap column-rule | column-rule-color column-rule-style column-rule-width column-span | column-width columns |
list-style list-style-image | list-style-position list-style-type |
Таблицы
border-collapse border-spacing | caption-side empty-cells | table-layout |
Форматирование
all clear cursor display float | object-fit opacity overflow overflow-x overflow-y | pointer-events resize vertical-align visibility |
Флексы
align-content align-items align-self flex | flex-basis flex-direction flex-flow flex-grow | flex-shrink flex-wrap justify-content order |
Анимация
animation animation-delay animation-direction animation-duration animation-fill-mode | animation-iteration-count animation-name animation-play-state animation-timing-function transition | transition-delay transition-duration transition-property transition-timing-function |
Трансформация
perspective perspective-origin | backface-visibility transform | transform-origin transform-style |
@-правила
@charset @font-face @import | @keyframes @media @page | @supports |
Псевдоклассы
:active :checked :default :disabled :empty :enabled :first-child :first-of-type :focus :focus-within :hover | :in-range :indeterminate :invalid :lang :last-child :last-of-type :link :not :nth-child :nth-last-child :nth-last-of-type | :nth-of-type :only-child :only-of-type :optional :out-of-range :required :root :target :valid :visited |
Псевдоэлементы
::after ::before | ::first-letter ::first-line | ::placeholder ::selection |
Селекторы
* E E F E>F E+F | E~F . ![]() [attribute$=»value»] [attribute~=»value»] [attribute*=»value»] |
Функции
attr() calc() | linear-gradient() radial-gradient() | repeating-linear-gradient() repeating-radial-gradient() |
Справочник по CSS. Справочник по CSS
Справочник по CSS. Справочник по CSSВикиЧтение
Справочник по CSS
Коллектив авторов
Содержание
Справочник по CSS
О этом справочнике
Справочник предназначается для людей, уже освоивших азы работы с HTML и CSS.
Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.
В связи с тем, что данный ресурс постоянно пополняется новой информацией, скачать обновленную версию справочника можно из раздела Download
Дата выхода данной версии справочника: 09:00, 26 марта 2007.
Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.
16.5. Справочник по termios
16.5. Справочник по termios Интерфейс termios состоит из структуры, набора функций, оперирующих с нею, и множества флагов, которые можно лично устанавливать.#include <termios.h>struct termios { tcflag_t c_iflag; /* флаги режима ввода */ tcflag_t c_oflag; /* флаги режима вывода */ tcflag_t c_cflag; /* флаги управляющего
Справочник по PHP
Справочник по PHP О этом справочнике Справочник предназначается для людей, уже освоивших азы программирования на языке PHP.Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.В связи с тем, что данный ресурс постоянно
Справочник по Flash
Справочник по Flash
О этом справочнике
Справочник предназначается для людей, уже освоивших азы программирования в Flash. Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.В связи с тем, что данный ресурс постоянно пополняется
СПРАВОЧНИК ПО WinAPI
СПРАВОЧНИК ПО WinAPI _lcreat Описание: function _lcreat(PathName: PChar; Attribute: Integer): Integer;Откpывает указанный файл.Паpаметpы:PathName: Полное имя маpшpута DOS в откpываемому файлу.Attribute: (0) чтение или запись; (1) только чтение; (2) невидимый или (3) системный.Возвpащаемое значение:Описатель файла DOS в случае
Урок № 21. Справочник физических лиц
Урок № 21. Справочник физических лиц Справочник физических лиц предназначен для ввода, редактирования и хранения информации обо всех физических лицах, работающих или работавших на предприятии. Более того, здесь можно хранить сведения и о кандидатах, которые могут стать
Урок № 22.

Урок № 22. Справочник контактных лиц Для ввода, редактирования и хранения информации о контактных лицах в программе ”1С:Бухгалтерия 8” предусмотрено ведение справочника контактных лиц. Отметим, что все контактные лица в программе делятся на три категории:• Контактные
Урок № 23. Справочник банков
Урок № 23. Справочник банков В справочнике банков осуществляются ввод, редактирование и хранение сведений о банках, в которых имеются счета как у собственной организации, так и у ее контрагентов и прочих юридических и физических лиц.Для перехода в режим работы с данным
Урок № 25. Справочник номенклатуры
Урок № 25. Справочник номенклатуры
В справочнике номенклатуры осуществляются ввод, редактирование и хранение информации обо всех товарно-материальных ценностях, а также работах и услугах, которые используются на предприятии. Без этого справочника обойтись невозможно:
«Справочник URL»
«Справочник URL» Производитель: Semantica Inc. (http://www.semantica.ru).Статус: бесплатная.Размер дистрибутива: 670 Кбайт.Программа обладает простым и интуитивно понятным интерфейсом, а также развитыми средствами поиска и фильтрации ссылок (рис. 4.19). Удобный механизм в «Справочнике URL»
Русский справочник по Win32 API
Русский справочник по Win32 API От изготовителя fb2. Данная книга (кроме всего прочего) содержит таблицы, к сожалению не все читалки могут их воспроизводить.Давайте, протестируем вашу читалку. 1 строка, 1 столбец 1 строка, 2 столбец 1 строка, 3 столбец 2 строка 1 столбец 2 строка 2
Справочник работ и материалов
Справочник работ и материалов
Начнем изучение программы «Мини-Смета» с ознакомления с перечнем работ и материалов, которые могут быть использованы в сметах, а также возможностей их добавления в текущие сметы. Запустите программу и выполните команду меню Ремонт ? Работы и
Краткий справочник команд PGP.
Краткий справочник команд PGP. Здесь приведена краткая сводка команд PGP.Зашифровать текстовый файл с открытым ключом получателя: pgp -е textfile her_useridДля подписания текстового файла вашим секретным ключом: pgp -s textfile [-u your_userid]Для подписи текстового файла вашим секретным ключом и,
Справочник физических лиц
Справочник физических лиц Перед тем, как приступить к эксплуатации программы, следует заполнить ряд основных справочников. Справочник в системе 1С 8.0 представляет собой каталог, в котором хранится та либо иная информация (в зависимости от конкретного справочника),
Справочник по языку
Справочник по языку
Описание языка PascalABC. NETЯзык программирования PascalABC.NET — это язык Pascal нового поколения, включающий в себя все возможности стандартного языка Pascal, расширения языка Delphi Object Pascal, ряд собственных расширений, а также ряд возможностей, обеспечивающих его
«Справочник по эфирным маслам»
«Справочник по эфирным маслам» «Справочник по эфирным маслам» (рис. 5.8) представляет подробную информацию о наиболее известных эфирных маслах. Работать с программой просто – в верхней части окна находится алфавит. С помощью стрелок, расположенных справа, его можно
Глоссарий CSS | Codecademy
Комментарии в CSS обозначаются косой чертой и звездочкой.
Пример
/ * Это одноразовый комментарий * /
Пример
/ * Этот
-многострочная
Комментарий * /
8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888
Определение
Свойства определяются в селекторах путем определения свойства и значения. Они разделяются двоеточием и обозначаются точкой с запятой.
Синтаксис
selector {
свойство: значение;
}
Пример
h2 {
цвет: синий;
}
Подробнее
- http://www.htmldog.com/reference/cssproperties/
Определение множества свойств
Каждое правило CSS может иметь любое количество свойств. Каждый из них применяется к элементам, к которым применяется селектор.
Пример
h2 {
размер шрифта: 24px;
вес шрифта: полужирный;
граница: сплошной черный 1 пиксель;
цвет: розовый;
}
/* Это сделает все заголовки
большими, полужирными, розовыми и внутри тонкого черного прямоугольника! */
Заполнение
Заполнение — это расстояние между содержимым и границей (краем элемента). Мы можем настроить это значение с помощью CSS, чтобы переместить границу ближе или дальше от содержимого. Здесь div с идентификатором «box» получит 10 пикселей отступа вокруг себя.
Пример
#box {
padding: 10px;
}
Поля
Поля — это пространство вокруг элемента. Чем больше поле, тем больше пространство между нашим элементом и элементами вокруг него. Мы можем настроить поле, чтобы переместить наши HTML-элементы ближе или дальше друг от друга. Здесь div с идентификатором «box» получит отступ в 10 пикселей сверху и снизу от него и по 5 пикселей слева и справа.
Пример
#box {
margin: 10px 5px 10px 5px;
}
font-family
Свойство font-family устанавливает шрифт текста HTML-элемента.
Синтаксис
p {
семейство шрифтов: Arial, Helvetica, без засечек;
}
Селекторы
Что такое селекторы?
Селекторы используются в CSS для выбора частей HTML, которые стилизуются. Вы можете использовать несколько различных методов для выбора элемента.
Синтаксис
селектор {
правила;
правила;
правила;
}
Подробнее
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/
Селекторы имени класса
Вы также можете выбирать элементы HTML по имени их класса. В отличие от селекторов ID, селекторы класса выбирают все элементы с соответствующим классом.
Пример
a.link {
размер шрифта: 12px;
}
/* HTML Selected: ,
Пример
.jumbo {
text-size: 1000px;
}
*/
Селекторы элементов
Вы можете сначала выбрать элементы HTML, просто используя имя элемента.
Пример
body {
background-color: #333;
}
Пример
h2 {
цвет: синий;
}
Пример
a {
подчеркивание текста: нет;
}
ID-селекторы
ID-селекторы используются для выбора только одного элемента на странице. Как указывает термин («идентификация»), селекторы идентификаторов будут выбирать ТОЛЬКО первый элемент с совпадающим идентификатором.
Пример
#thatThingINeededToStyle {
цвет: синий;
размер шрифта: 24 пикселя;
}
/* HTML Selected: */
Пример
a#codecademy {
цвет: фиолетовый;
}
Селекторы атрибутов
Элементы HTML также можно выбирать по их атрибутам.
Пример
a[href="http://codecademy.com"] {
цвет: фиолетовый;
}
/* HTML Selected: */
Пример
input[type="text"] {
width:
2 100 пикселей;
}
/* HTML Selected: */
Пример
input[required] {
граница: 1 пиксель красная сплошная;
}
/* HTML Selected: */
Подробнее
- http://dev.opera.com/articles/view/27-css- основы/#атрибут
Дочерние селекторы
Вы также можете использовать несколько селекторов, чтобы получить именно те элементы, которые вам нужны, используя родительское вложение. Используя символ «больше» (>), вы можете выбрать только прямые дочерние элементы элемента, опустившись только на один уровень.
Пример
ul> li {
Дисплей: Inline Block
}
/ * Выбирает только элементы списка первого уровня во всех безпорядка списках в HTML * /
Пример примеров.
ul a {
подчеркивание текста: нет;
}
/* Выбирает все якоря, имеющие неупорядоченный список своих предков */
Пример
ul + span {
дисплей: встроенный;
}
/* Выбирает только диапазоны, которые следуют непосредственно за неупорядоченным списком */
Пример
a ~ h2 {
color: blue;
}
/* Выбирает все элементы h2, находящиеся в непосредственной близости от якоря */
Подробнее
- https://developer.
mozilla.org/en-US/docs/Web /CSS/Descendant_selectors
Универсальный селектор
Универсальный селектор (*) может использоваться для выбора всех элементов в определенном диапазоне. Имейте в виду, что универсальный селектор — это селектор с наибольшей нагрузкой на производительность, и его следует использовать с осторожностью.
Пример
* {
цвет фона: синий;
}
/* Выбирает ВСЕ элементы HTML на странице */
Пример
body * {
цвет: красный;
}
/* Выбирает ВСЕ дочерние элементы тела */
Пример
div > * {
цвет: красный;
}
/* Выбирает ВСЕ дочерние элементы первого уровня всех div на странице */
Подробнее
- CSS/универсальные_селекторы
- http://www.
stevesouders.com/blog/2009/06/18/simplifying-css-selectors/
- http://dev.opera.com/articles/view/27-css-basics/#universal
Селекторы псевдоклассов
Псевдоселекторы можно использовать для сужения выбора с определенными правилами.
Пример
li:first-child {
цвет: красный;
}
/*
Выбирает только те элементы
- Selected; будет красным
- Не выбрано
- Не выбрано
*/
li:last-child {
цвет: красный;
}
/* Это делает обратное; только последний
Пример
a:hover {
text-decoration: underline;
}
/* Будут подчеркнуты все ссылки, когда пользователь наведет на них указатель мыши */
a:active {
вес шрифта: полужирный;
}
/* Все ссылки будут выделены жирным шрифтом, пока пользователь нажимает на них.
*/
Подробнее
- https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
- http://dev.opera.com/articles/view/27-css-basics/#псевдоклассы
Хотите глубже погрузиться в CSS? Ознакомьтесь с нашим курсом «Изучение CSS».
Узнайте больше на Codecademy
Путь квалификации
Фонды кодов
Подходит для начинающих,
15 Уроки
Карьера
Инженер с полным стеком
.
Об DoITHTML TutorialJavaScript TutorialXML TutorialPHP Tutorial
Глава 1. Создание веб-страницГлава 2. Базовый макет документаГлава 3. Основные стили документаГлава 4. Форматирование текстаГлава 5. Графические изображенияГлава 6. Применение специальных стилейГлава 7. Связывание страницГлава 8.9 Использование таблиц- Воспроизведение мультимедиаГлава 10. Создание формГлава 11. Дизайн веб-сайтов Приложение HTML/CSS
Новые теги HTML5Справочник по HTMLСправочник по CSSHTML-специальные символыHTML-цвета
Выровнять сторона заголовка прозрачноеплавающее вертикальное выравнивание | Фон background-attachmentbackground-color background-image background-position background-repeat | Граница границацвет границы стиль границы ширина границы граница коллапс | Шрифт шрифтсемейство шрифтов размер шрифта стиль шрифта вариант шрифта вес шрифта | Ссылка а: ссылкаа: наведение а: активно а: посещено |
Список изображение стиля спискапозиция стиля списка тип стиля списка | Позиция позициялевый верхний z-индекс | Размер высоташирина | Расстояние полезаполнение | Текст цветинтервал между буквами высота строки выравнивание текста украшение текста отступ текста преобразование текста интервал между словами |
Стили применяются к элементам XHTML во встроенном формате,
<тип стиля="текст/CSS"> селектор { свойство : значение [; свойство : значение ]...}
где селектор может быть:
простой селектор | h2 { свойство : значение [; свойство : значение ]…} |
---|---|
множественные селекторы | h2, h3, h4 { свойство : значение [; свойство : значение ]…} |
селектор идентификаторов | span# id { свойство : значение [; свойство : значение ]…} |
контекстный селектор | ol li { свойство : значение [; свойство : значение ]…} |
Селектор класса | . имя { свойство : значение [; свойство : значение ]…} |
Стили также могут быть применены в встроенном формате,
< тег >
Свойство CSS | Значение | Описание |
---|---|---|
Выровнять | ||
со стороны надписи | сверху снизу | Помещает заголовок таблицы над или под таблицей.![]() |
прозрачный | оба слева справа нет | Устанавливает, позиционируется ли элемент на одной линии с плавающим элементом или позиционируется на следующей чистой строке документа. |
поплавок | слева справа нет | Устанавливает, плавает ли элемент, чтобы разрешить перенос сопутствующего содержимого. |
вертикальное выравнивание | нижний верхний базовый средний нижний супер текстовый нижний текстовый верхний | Устанавливает вертикальное выравнивание содержимого элемента. |
Верх | ||
Фон | ||
Фон-приставка | фиксированный спиральный | Задает способ прикрепления фонового изображения к документу. |
цвет фона | название цвета # шестнадцатеричное значение rgb( r g b ) rgb( r % г % б %) | Задает цвет фона для элемента.![]() |
фоновое изображение | url( url ) нет | Задает фоновое изображение для элемента. |
фоновая позиция | слева % вверху % слева вверху слева|в центре|справа вверху|в центре|внизу | Задает расположение левого и верхнего краев фонового изображения для элемента как проценты или измерения. Можно использовать пару ключевых слов, разделенных пробелом. |
повтор фона | без повторения повтор повтор-x повтор-y | Устанавливает, повторяется ли фоновое изображение по горизонтали, вертикали, в обоих направлениях или нисколько. |
Верх | ||
Граница | ||
граница | стиль ширина цвет | Задает стиль, ширину и цвет границы с помощью одного свойства.![]() |
цвет границы цвет верхней границы цвет правой границы цвет нижней границы цвет левой границы | название цвета # шестнадцатеричное значение rgb( rg b ) rgb( r % g % b %) 5 | Задает цвет всех границ или одного края границы элемента. |
стиль границы стиль границы сверху стиль границы справа стиль границы снизу стиль границы справа | пунктирная пунктирная двойная канавка вставка без врезка ребро сплошная | Задает стиль всех границ или одного края границы элемента. |
ширина границы ширина верхней границы ширина правой границы ширина нижней границы ширина правой границы | тонкий средний толстый ширина> | Задает ширину всех границ или одного края границы элемента с помощью ключевого слова или
измерение ширины.![]() |
обрушение границ | свернуть отдельно | Задает, будут ли соседние ячейки таблицы отображаться отдельно или объединяться в одну границу. |
Верх | ||
Шрифт | ||
шрифт | стиль вариант вес размер семейство | Задает несколько свойств шрифта, разделенных пробелами, в указанном порядке. Не все свойства должны быть установлены. |
семейство шрифтов | имя [ название ]… с засечками без засечек курсив фэнтези моноширинный | Задает одно или несколько имен шрифтов или общее имя для текста элемента. |
размер шрифта | n пикселей n % xx-маленький x-маленький маленький средний большой x-большой xx-большой | Задает размер шрифта для текста элемента.![]() |
стиль шрифта | обычный курсив наклонный | Задает стиль шрифта для текста элемента. |
вариант шрифта | обычные маленькие | Задает вариант шрифта для текста элемента. |
вес шрифта | обычный полужирный более жирный более светлый 100 — 900 | Задает толщину шрифта для текста элемента. |
Верх | ||
Звено | ||
а: ссылка а: наведение а: активно а: посещено | Любые стили текста. | Устанавливает, как текстовые ссылки реагируют на активацию мыши. |
Верх | ||
Список | ||
изображение в стиле списка | нет url( url ) | Задает изображение, используемое в качестве маркера для элементов списка.![]() |
позиция стиля списка | внутри снаружи | Задает выравнивание переносимого текста для элемента списка. Внутри выравнивает обернутый текст с маркером предмета; снаружи выравнивает обернутый текст с начальной позицией текста. |
стиль списка | круг диск квадрат десятичное число | Устанавливает маркер элемента списка для ненумерованных списков и нумерованных списков. |
Верх | ||
Позиция | ||
позиция | относительная фиксированная | Задает положение элемента в документе. Фиксированное позиционирование относительно верхний левый угол (позиция 0,0 пикселя) элемента-контейнера. |
слева | n пикселей n % | Задает расстояние элемента от левого края его контейнера.![]() |
верх | n пикселей n % | Задает расстояние элемента от верхнего поля его контейнера. |
Z-индекс | нет | Задает слой элемента. Элементы с меньшими числовыми значениями отображаются под элементами с большими значениями. Ноль (0) — это текстовый слой. |
Верх | ||
Размер | ||
высота | авто n пикселей n % | Устанавливает высоту элемента. |
ширина | n пикселей n % авто | Задает ширину элемента. |
Верх | ||
Расстояние | ||
поле поле сверху поле справа поле внизу поле слева | авто n пикселей n % | Устанавливает количество пространства, выходящего за края элемента.![]() |
прокладка прокладка верхняя прокладка правая прокладка нижняя прокладка левая | авто n пикселей n % | Задает размер пространства вокруг содержимого элемента. |
Верх | ||
Текст | ||
цвет | название цвета # шестнадцатеричное значение rgb( r g b ) rgb( r % g % b 5 | Задает цвет текста элемента. |
межбуквенный интервал | обычный n пикселей автоматический | Устанавливает горизонтальный интервал между буквами текста элемента. Измерение может быть отрицательным. |
высота строки | обычный n n пикселей n % | Устанавливает высоту строки текста элемента.![]() |