Примеры
Пример CSSОбъяснение примеров
Примеры Синтакс CSS
Пример CSSОбъяснение примеров Синтакс CSS
Примеры CSS Id и Класс
Пример CSSПример CSS
Пример CSS
Объяснение примеров CSS Id и Класс
Примеры CSS Фон
CSS ПримерCSS Пример
CSS Пример
CSS Пример
CSS Пример
CSS Пример
CSS Пример
CSS Пример
CSS Пример
Этот пример показывает, как установить фиксированное фоновое изображение. Изображение не будет прокручиваться с остальной частью страницы.
Объяснение примеров CSS Фон
Примеры CSS Текст
CSS Пример форматирования текстаCSS Пример форматирования текста
CSS Пример форматирования текста
CSS Пример форматирования текста
CSS Пример форматирования текста
CSS Пример форматирования текста
CSS Пример форматирования текста
Этот пример демонстрирует, как для увеличить или уменьшить расстояние между символами.
Этот пример демонстрирует, как указать расстояние между строками в абзаце.
Этот пример демонстрирует, как изменить направление текста элемента.
Этот пример демонстрирует, как увеличить пробелы между словами в параграфе.
Этот пример демонстрирует, как отключить перенос текста внутри элемента.
В этом примере показано, как задать вертикальное выравнивание изображения в тексте.
Объяснение примеров CSS Текст
Примеры CSS Шрифт
CSS Пример шрифтаCSS Пример шрифта
CSS Пример шрифта
CSS Пример шрифта
CSS Пример шрифта
Этот пример показывает, как установить жирность шрифта.
Этот пример показывает, как установить вариант шрифта.
Этот пример демонстрирует, как использовать сокращенное свойство для установки всех свойств шрифта в одной декларации.
Объяснение примеров CSS Шрифт
Примеры CSS Ссылки
CSS Пример ссылокCSS Пример ссылок
CSS Пример ссылок
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Этот пример демонстрирует более сложный пример, где мы объединили несколько свойств CSS для отображения ссылок.
Объяснение примеров CSS Ссылки
Примеры CSS Списки
CSS Пример списковCSS Пример списков
CSS Пример списков
CSS Пример списков
Этот пример демонстрирует все различные элемента списка в CSS.
Объяснение примеров CSS Списки
Примеры CSS Таблицы
CSS Пример ТаблицCSS Пример Таблиц
CSS Пример Таблиц
CSS Пример Таблиц
CSS Пример Таблиц
CSS Пример Таблиц
CSS Пример Таблиц
Этот пример демонстрирует, как создать причудливую таблицу
Этот пример демонстрирует, как позиционировать заголовок таблицы.
Объяснение примеров CSS Таблицы
Примеры CSS Модель "коробки"
CSS Пример Модель "коробки"CSS Пример Модель "коробки"
Объяснение примеров CSS Модель "коробки"
Примеры CSS Границы
CSS Пример ГраницCSS Пример Границ
CSS Пример Границ
CSS Пример Границ
CSS Пример Границ
CSS Пример Границ
Этот пример демонстрирует сокращенное свойство для установки всех свойств верхней границы в одной декларации.
В этом примере показано, как задать стиль нижней границы.
В этом примере показано, как задать ширину левой границы.
В этом примере показано, как задать цвет четырех границ. Она может иметь от одного до четырех цветов.
В этом примере показано, как задать цвет правой границы.
Объяснение примеров CSS Границы
Примеры CSS Контуры
Этот пример демонстрирует, как нарисовать линию вокруг элемента, за пределами края границы.В этом примере показано, как задать стиль контура.
В этом примере показано, как задать цвет контура.
В этом примере показано, как задать ширину контура.
Объяснение примеров CSS Контуры
Примеры CSS Поля
CSS Поля ПримерCSS Поля Пример
Этот пример показывает, как установить верхнее поле текста с помощью значения cm.
Этот пример показывает, как установить нижнее поле текста с помощью значения процентов.
Объяснение примеров CSS Поля
Примеры CSS Заполнение
CSS Пример ЗаполненияCSS Пример Заполнения
Этот пример демонстрирует сокращенное свойство для установки всех свойств заполнения в одной декларации, может иметь от одного до четырех значений.
Этот пример показывает, как устанавливается заполнение слева элемента P.
Этот пример показывает, как устанавливается заполнение справа элемента P.
Этот пример показывает, как устанавливается заполнение сверху элемента P.
Этот пример показывает, как устанавливается заполнение снизу элемента P.
Объяснение примеров CSS Заполнение
Примеры CSS Группировка и вложенные селекторы
CSS Пример Группировка и вложенные селекторыCSS Пример Группировка и вложенные селекторы
Объяснение примеров CSS Группировка и вложенные селекторы
Примеры CSS Размеры
Этот пример демонстрирует, как установить высоту различных элементов.Этот пример показывает, как установить высоту элемента с помощью процентов.
В этом примере показано, как задать ширину элемента, используя значение в пикселях.
Этот пример показывает, как установить максимальную высоту элемента.
Этот пример показывает, как установить максимальную ширину элемента с помощью процентов.
Этот пример показывает, как установить минимальную высоту элемента.
Этот пример показывает, как установить минимальную ширину элемента, используя значение в пикселях
Объяснение примеров CSS Размеры
Примеры CSS Отображение и Видимость
CSS Пример показа и видимостиCSS Пример показа и видимости
CSS Пример показа и видимости
CSS Пример показа и видимости
Этот пример демонстрирует, как отображать элемент, как встроенный элемент.
В этом примере показано, как отобразить элемент как блочный элемент.
Этот пример демонстрирует, как обрушить элемент таблицы.
Объяснение примеров CSS Отображение и Видимость
Примеры CSS Позиционирование
CSS Пример позиционированияCSS Пример позиционирования
CSS Пример позиционирования
CSS Пример позиционирования
CSS Пример позиционирования
Этот пример показывает, как установить форму элемента. Элемент обрезается в эту форму, и отображается.
Этот пример показывает, как установить переполнение элемента для создания прокрутки, когда содержание элемента слишком велико, чтобы поместиться в указанной области.
Этот пример демонстрирует, как настроить браузер для автоматической обработки переполнения.
Этот пример демонстрирует, как изменить курсор.
Объяснение примеров CSS Позиционирование
Примеры CSS Свободное перемещение
CSS Пример свободного перемещенияCSS Пример свободного перемещения
CSS Пример свободного перемещения
Пусть изображение свободно перемещающегося вправо в параграфе. Добавим границу и поле к изображению.
Пусть изображение с подписью свободно перемещается в правую сторону.
Пусть первая буква параграфа свободно перемещается влево и меняет стиль
Использование свободного перемещения со списком гиперссылок для создания горизонтальных меню.
Использование свободного перемещения для создания домашней страницы с колонтитулом, содержимым слева и основным содержанием.
Объяснение примеров CSS Свободное перемещение
Примеры CSS Горизонтальное выравнивание
CSS Пример горизонтального выравниванияCSS Пример горизонтального выравнивания
CSS Пример горизонтального выравнивания
CSS Пример горизонтального выравнивания
CSS Пример горизонтального выравнивания
Объяснение примеров CSS Горизонтальное выравнивание
Примеры CSS Псевдо-классы
CSS Пример псевдо-классовCSS Пример псевдо-классов
CSS Пример псевдо-классов
CSS Пример псевдо-классов
Этот пример демонстрирует, как использовать псевдо-класс :focus
Объяснение примеров CSS Псевдо-классы
Примеры CSS Псевдо-элементы
CSS Пример псевдо-элементовCSS Пример псевдо-элементов
CSS Пример псевдо-элементов
CSS Пример псевдо-элементов
CSS Пример псевдо-элементов
Объяснение примеров CSS Псевдо-элементы
Примеры CSS Панель навигации
CSS Пример панель навигацииCSS Пример панель навигации
CSS Пример панель навигации
Пример с полностью стилизованной вертикальной панелью навигации
CSS Пример панель навигации
Пример с полностью стилизованной горизонтальной панелью навигации
CSS Пример панель навигации
Пример с полностью стилизованной горизонтальной панелью навигации
Объяснение примеров CSS Панель навигации
Примеры CSS Галерея изображений
Пример галереи изображенийОбъяснение примеров CSS Галерея изображений
Примеры CSS Прозрачность изображения
Пример создания прозрачного изображенияПример прозрачности изображения - Наведите курсора мыши
Пример текста в прозрачной коробке
Объяснение примеров CSS Прозрачность изображения
Примеры CSS Изображение спрайт
Изображение спрайт - Простой примерИзображение спрайт - Создание списка навигации
Изображение спрайт - Эффект наведения
Объяснение примеров CSS Изображение спрайт
Примеры CSS Селекторы атрибутов
CSS Пример селектор атрибутовCSS Пример атрибута и значения селектора
CSS Пример атрибута и значения селектора - множественные значения
CSS Пример атрибута и значения селектора - множественные значения
CSS Пример стилизации форм
Объяснение примеров CSS Селекторы атрибутов
Примеры CSS Не делай
CSS Поведение Internet Explorer - Наведите курсор мыши для выделенияCSS Поведение Internet Explorer - Симуляция пишущей машинки
Объяснение примеров CSS Не делай
Примеры CSS Безопасные комбинации шрифтов
CSS Пример Безопасные комбинации шрифтовОбъяснение примеров CSS Безопасные комбинации шрифтов
Примеры .class
Как выбрать все элементы, которые имеют класс "intro":Как стилизовать элементы <p> с class="hometown":
Объяснение примеров .class
Примеры #id
Как выбрать элемент с id="firstname":Объяснение примеров #id
Примеры *
Как выбрать все элементы, и установить их цвет фона:Как выбрать все элементы внутри элементов <div>:
Объяснение примеров *
Примеры element
Как стилизовать элементы <p>:Объяснение примеров element
Примеры element,element
Как стилизовать все элементы <div> И все элементы <p>:Как стилизовать множество элементов с одинаковым стилем:
Объяснение примеров element,element
Примеры element element
Как стилизовать все элементы <p> находящиеся внутри элементов <div>:Объяснение примеров element element
Примеры element>element
Как стилизовать элементы <p>, чьим родителем является элемент <div>:Объяснение примеров element>element
Примеры element+element
Как стилизовать все элементы <p>, которые расположены сразу после элемента <div>:Объяснение примеров element+element
Примеры [attribute=value]
Как стилизовать ссылки, но только ссылки с taget="_blank":Объяснение примеров [attribute=value]
Примеры [attribute~=value]
Как стилизовать элементы с атрибутом title, который содержит слово "flower":Объяснение примеров [attribute~=value]
Примеры [attribute|=value]
Как стилизовать элементы, где значение атрибута lang начинается с "en":Селектор [attribute|=value] конечно может быть использован для другого атрибута, чем "lang":
Объяснение примеров [attribute|=value]
Примеры :link
Как стилизовать ссылки (элементы <a> с href):Как стилизовать ссылки, непосещенные, посещенные, активные, и когда вы наводите мышкой:
Как различно стилизовать ссылки:
Объяснение примеров :link
Примеры :visited
Как стилизовать ссылки к посещенным страницам:Объяснение примеров :visited
Примеры :active
Как стилизовать активные линки:Объяснение примеров :active
Примеры :hover
Как стилизовать ссылку, когда вы наводите на нее мышкой:Объяснение примеров :hover
Примеры :focus
Как стилизовать текстовые поля, когда они получают фокус:Объяснение примеров :focus
Примеры :first-letter
Как стилизовать первую букву всех элементов <p>:Как стилизовать первую букву всех элементов <p> с id="hometown":
:first-letter часто используется в колонках газет для отображения БОЛЬШОЙ первой буквы:
Объяснение примеров :first-letter
Примеры :first-line
Как стилизовать первую строку всех элементов <p>:Как стилизовать первую строку всех элементов <p> с class="intro":
Объяснение примеров :first-line
Примеры :first-child
Как стилизовать все элементы <p>, которые являются первым потомком родителей:Стилизует первый элемент <i> каждого родительского элемента:
Стилизует все элементы <i> каждого элемента <p>, где элемент <p> является первым потомком его родителей:
Стилизует первый элемент <li> каждого списка:
Стилизует первый элемент каждого элемента <ul>:
Объяснение примеров :first-child
Примеры :before
Как внести содержание до всех элементов <p>:Стилизует внесенное содержание:
Объяснение примеров :before
Примеры :after
Как внести содержание после всех элементов <p>:Стилизует внесенное содержание:
Объяснение примеров :after
Примеры :lang
Как стилизовать элементы <p> с атрибутом lang="it":Объяснение примеров :lang
Примеры background
Как указать все свойства фона в одной декларации:Объяснение примеров background
Примеры background-attachment
Как установить фиксированное изображение фона:Объяснение примеров background-attachment
Примеры background-color
Устанавливает цвет фона для различных элементов:В этом примере показано, как задать цвет фона части текста.
Объяснение примеров background-color
Примеры background-image
Устанавливает изображение фона для элемента body:Объяснение примеров background-image
Примеры background-position
Как позиционировать фоновое изображение:Этот пример демонстрирует, как позиционировать фоновое изображение на странице с помощью процентов.
Этот пример демонстрирует, как позиционировать фоновое изображение на странице используя пиксели.
Объяснение примеров background-position
Примеры background-repeat
Повторение фонового изображения только вертикально:Этот пример демонстрирует, как повторять фоновое изображение по вертикали и горизонтали:
Этот пример демонстрирует, как повторять фоновое изображение только по горизонтали.
В этом примере показано, как отобразить фоновое изображение только один раз, c no-repeat.
Объяснение примеров background-repeat
Примеры border
Устанавливает стиль четырех границ:Объяснение примеров border
Примеры border-bottom
Устанавливает стиль нижней границы:Объяснение примеров border-bottom
Примеры border-bottom-style
Устанавливает стиль нижней границы:Объяснение примеров border-bottom-style
Примеры border-bottom-width
Устанавливает ширину нижней границы:Объяснение примеров border-bottom-width
Примеры border-color
Устанавливает цвет четырех границы:Объяснение примеров border-color
Примеры border-left
Устанавливает стиль левой границы:Объяснение примеров border-left
Примеры border-left-color
Устанавливает цвет левой границы:Объяснение примеров border-left-color
Примеры border-left-style
Устанавливает стиль левой границы:Объяснение примеров border-left-style
Примеры border-left-width
Устанавливает ширину левой границы:Объяснение примеров border-left-width
Примеры border-right
Устанавливает стиль правой границы:Объяснение примеров border-right
Примеры border-right-color
Устанавливает цвет правой границы:Объяснение примеров border-right-color
Примеры border-right-style
Устанавливает стиль правой границы:Объяснение примеров border-right-style
Примеры border-right-width
Устанавливает ширину правой границы:Объяснение примеров border-right-width
Примеры border-style
Устанавливает стиль четырех границ:Как установить различные границы для каждой стороны элемента.
Объяснение примеров border-style
Примеры border-top
Устанавливает стиль верхней границы:Объяснение примеров border-top
Примеры border-top-color
Устанавливает цвет верхней границы:Объяснение примеров border-top-color
Примеры border-top-style
Устанавливает стиль верхней границы:Объяснение примеров border-top-style
Примеры border-top-width
Устанавливает ширину верхней границы:Объяснение примеров border-top-width
Примеры border-width
Устанавливает ширину четырех границ:Объяснение примеров border-width
Примеры outline
Устанавливает контур вокруг элемента:Объяснение примеров outline
Примеры outline-color
Устанавливает цвет контура точками:Объяснение примеров outline-color
Примеры outline-style
Устанавливает стиль контура:Этот пример демонстрирует как установить стиль контура.
Объяснение примеров outline-style
Примеры outline-width
Устанавливает ширину контура:Объяснение примеров outline-width
Примеры height
Устанавливает высоту и ширину параграфа:Этот пример демонстрирует как установить высоту элемента используя значение процентов.
Объяснение примеров height
Примеры max-height
Устанавливает максимальную высоту параграфа:Объяснение примеров max-height
Примеры max-width
Устанавливает максимальную ширину параграфа:Объяснение примеров max-width
Примеры min-height
Устанавливает минимальную высоту параграфа:Объяснение примеров min-height
Примеры min-width
Устанавливает минимальную ширину параграфа:Объяснение примеров min-width
Примеры width
Этот пример демонстрирует как установить ширину элемента используя значение процентов.Объяснение примеров width
Примеры font
Указывает все свойства шрифта в одной декларации:Этот пример демонстрирует некоторые другие значения свойств шрифта.
Объяснение примеров font
Примеры font-family
Указывает шрифт для параграфа:Объяснение примеров font-family
Примеры font-size
Устанавливает размер шрифта для различных элементов HTML:Объяснение примеров font-size
Примеры font-style
Устанавливает различный стиль шрифта для трех параграфов:Объяснение примеров font-style
Примеры font-variant
Устанавливает шрифт параграфа в капитель:Объяснение примеров font-variant
Примеры font-weight
Устанавливает различный вес шрифта для трех параграфов:Объяснение примеров font-weight
Примеры content
Следующий пример вставляет URL в скобках после каждой ссылки:Устанавливает содержание, если указано, в пустое:
Устанавливает содержание, если указано, в нормальное, которое по умолчанию является "none" (которое пустое):
Устанавливает содержание счетчика:
Устанавливает содержание как один из атрибутов селектора:
Устанавливает содержание текста, которое вы укажете:
Устанавливает содержимое для открытия цитатой:
Удаляет открытие цитаты из содержания, если оно указано:
Устанавливает содержание как тип медиа (изображение, звук, видео и т.д.):
Объяснение примеров content
Примеры counter-increment
Способ нумирования секций и подсекций с "Раздел 1", "1.1", "1.2", и т.д.:Объяснение примеров counter-increment
Примеры quotes
Указывает кавычки для встроеных цитат:Объяснение примеров quotes
Примеры list-style
Указывает все свойства списка в одной декларации:Объяснение примеров list-style
Примеры list-style-image
Указывает изображение в качестве маркера элемента списка:Объяснение примеров list-style-image
Примеры list-style-position
Указывает, что маркеры элемента списка должны появиться внутри содержания (в результате с дополнительным отступом):Объяснение примеров list-style-position
Примеры list-style-type
list-style-typeОбъяснение примеров list-style-type
Примеры margin
Указывает все четыре поля элемента p:Объяснение примеров margin
Примеры margin-bottom
Указывает нижнее поле элемента p:Объяснение примеров margin-bottom
Примеры margin-left
Указывает левое поле элемента p:Объяснение примеров margin-left
Примеры margin-right
Указывает правое поле элемента p:Объяснение примеров margin-right
Примеры margin-top
Указывает верхнее поле элемента p:Объяснение примеров margin-top
Примеры padding
Устанавливает заполнение элемента p:Объяснение примеров padding
Примеры padding-bottom
Устанавливает нижнее заполнение для элемента pОбъяснение примеров padding-bottom
Примеры padding-left
Устанавливает левое заполнение для элемента p:Объяснение примеров padding-left
Примеры padding-right
Устанавливает правое заполнение для элемента p:Объяснение примеров padding-right
Примеры padding-top
Устанавливает верхнее заполнение для элемента p:Объяснение примеров padding-top
Примеры bottom
Устанавливает нижний край изображения 5px выше нижнего края содержащего его элемента:Устанавливает позицию изображения на 100px ниже ее нормальной позиции:
Объяснение примеров bottom
Примеры clear
Плавающие элементы не разрешены ни с левой ни с правой стороны изображения:Объяснение примеров clear
Примеры clip
Отсекает изображение:Объяснение примеров clip
Примеры display
Позволяет параграфам располагаться в одну строчкуЭтот пример демонстрирует как использовать значение свойства inherit:
Объяснение примеров display
Примеры left
Устанавливает левый край изображения 50px вправо от левого края содержащего его элемента:Объяснение примеров left
Примеры overflow
Устанавливает свойство overflow в прокрутку:Объяснение примеров overflow
Примеры position
Позиционирует элемент h2:Этот пример демонстрирует, как позиционировать элемент относительно его нормального положения.
Объяснение примеров position
Примеры right
Устанавливает правый край изображения 50px влево от правого края содержащего его элемента:Объяснение примеров right
Примеры top
Позволяет изображению плавать вправо:Устанавливает верхний край изображения 5px ниже верхнего края содержащего его элемента:
Объяснение примеров top
Примеры visibility
Делает элемент h2 невидимым:Объяснение примеров visibility
Примеры z-index
Устанавливает z-index изображения:Объяснение примеров z-index
Примеры border-collapse
Устанавливает модель разрушаемой границы для таблицы:Объяснение примеров border-collapse
Примеры border-spacing
Указывает расстояние до границы в таблице:Объяснение примеров border-spacing
Примеры caption-side
Указывает месторасположение заголовка таблицы:Объяснение примеров caption-side
Примеры empty-cells
Скрывает границу и фон на пустые ячейки в таблице:Объяснение примеров empty-cells
Примеры table-layout
Устанавливает алгоритм макета таблицы:Объяснение примеров table-layout
Примеры Свойства текста
Устанавливает направление текста "справа налево":Объяснение примеров Свойства текста
Примеры color
Устанавливает цвет текста для различных элементов:Объяснение примеров color
Примеры letter-spacing
Указывает расстояние между буквами для элементов h1 и h2:Объяснение примеров letter-spacing
Примеры line-height
Указывает высоту строки в процентах:Этот пример демонстрирует, как указать расстояние между строками в абзаце с использованием значения в пикселях.
Этот пример демонстрирует, как указать расстояние между строками в абзаце с использованием числового значения.
Объяснение примеров line-height
Примеры text-align
Устанавливает выравнивание текста для элементов h1, h2 и h3:Этот пример демонстрирует более продвинутое выравнивание текста.
Объяснение примеров text-align
Примеры text-decoration
Устанавливает оформление текста для элементов h1, h2, h3 и h4:Объяснение примеров text-decoration
Примеры text-indent
Ставит отступ первой строки абзаца 50 пикселей:Объяснение примеров text-indent
Примеры text-transform
Трансформирует текст в различных элементах:Объяснение примеров text-transform
Примеры vertical-align
Вертикальное выравнивание изображения:Объяснение примеров vertical-align
Примеры white-space
Указывает, что текст в параграфе никогда не будет перенесен:Объяснение примеров white-space
Примеры word-spacing
Указывает, что расстояние между словами в параграфе будет 30 пикселей:Объяснение примеров word-spacing
Примеры Устанавливает цвет нижней границы:
Устанавливает цвет нижней границы:Объяснение примеров Устанавливает цвет нижней границы:
Была ли эта информация полезной?
