Разбираем CSS-код — Как создать сайт
Урок №2
Разбираем CSS код
В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:
h2 { color: white; background-color: green; } p { color: orange; font-size: 20px; }
Открыв в браузере файл index.html
вы должны увидеть следующее.
В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.
CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами <style>
</style>
. Сам CSS-код начинается с имени тега, а затем идут фигурные скобки {
}
, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.
Схема CSS-кода выглядит следующим образом:
имяТега { CSS-свойство: значение; }
После CSS-свойства, нужно обязательно ставить двоеточие
:
, а после значения точку с запятой ;
Для заголовка h2
мы применили следующие CSS-свойства и значения:color: white;
— цвет шрифта — белый,background-color: green;
— цвет фона — зелёный.
Для абзацев p
мы применили следующие CSS-свойства и значения:color: orange;
— цвет шрифта — оранжевый,font-size: 20px;
— размер шрифта — 20 пикселей.
CSS-свойств существует очень много, они изменяют у тегов: цвет, фон, размеры, высоту, ширину, отступы, границы, положение, прозрачность, градиент, округление углов и многое другое (в будущем, каждое CSS-свойство мы рассмотрим отдельно).
Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.
К заголовку мы добавим четыре CSS-свойства:width: 50%;
— ширина заголовка должна занимать 50% окна браузера,
text-align: center;
— заголовок должен выравниваться по центру,padding: 5px;
— между шрифтом и границей фона, должен появиться зазор в 5 пикселей,font-family: Impact;
— имя шрифта устанавливаем как Impact. К абзацам мы добавим три CSS-свойства:background-color: #ffc;
— цвет фона абзацев быть светло-жёлтым,width: 50%;
— ширина абзацев должна занимать 50% окна браузера,padding: 10px;
— между шрифтом и границей фона, должен появиться зазор в 10 пикселей,font-family: Arial;
— имя шрифта устанавливаем как Arial.
В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):
<!DOCTYPE html> <html> <head> <title>Страница о снежном барсе</title> <style> h2 { color: white; background-color: green; width: 50%; text-align: center; padding: 5px; font-family: Impact; } p { color: orange; font-size: 20px; background-color: #ffc; width: 50%; padding: 10px; font-family: Arial; } </style> </head> <body> <h2>Снежный барс</h2> <p> Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана.Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.</p> <p> Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.</p> </body> </html>
Открыв в браузере, файл index.html
вы должны увидеть следующее.
Таким образом, добавляя между фигурными скобками различные CSS-свойства, можно влиять на внешний вид того или иного тега (элемента).
Читать далее: Основные CSS-свойства
- Category: Разное
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free
CSS Справочник и примеры элементы
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Главная Дальше ❯
A
align-content | Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство |
align-items | Задает выравнивание для элементов внутри гибкого контейнера |
align-self | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
all | Сбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления) |
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-attachment | Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано |
background-blend-mode | Задает режим наложения для каждого слоя фона (цвет/изображение) |
background-clip | Определяет, насколько фон (цвет или изображение) должен расширяться в элементе |
background-color | Задает цвет фона элемента |
background-image | Задание одного или нескольких фоновых изображений для элемента |
background-origin | Задает исходную позицию фонового изображения |
background-position | Определяет положение фонового изображения |
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-image | Сокращенное свойство для установки всех свойств Border-Image-* |
border-image-outset | Определяет величину, на которую область изображения границы выходит за границы рамки |
border-image-repeat | Указывает, должно ли изображение границы повторяться, округляться или растягиваться |
border-image-slice | Определяет способ среза изображения границы |
border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границы |
border-image-width | Задает ширину изображения границы |
border-left | Сокращенное свойство для задания всех свойств левой границы в одном объявлении |
border-left-color | Задает цвет левой границы |
border-left-style | Задает стиль левой границы |
border-left-width | Задает ширину левой границы |
border-radius | Сокращенное свойство для установки всех четырех границ-*-свойства 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-decoration-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 | Сокращенное свойство для установки всех свойств столбца-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-расти, Flex-сжатия и Flex-основы свойства |
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 | Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType |
font-kerning | Управляет использованием информации о кернинге (как буквы расположены в пространстве) |
font-language-override | Управляет использованием глифов, специфичных для языка, в шрифте |
font-size | Задает размер шрифта текста |
font-size-adjust | Сохраняет читаемость текста, когда происходит откат шрифта |
font-stretch | Выбор нормальной, сжатой или расширенной грани из семейства шрифтов |
font-style | Задает стиль шрифта для текста |
font-synthesis | Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем |
font-variant | Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами |
font-variant-alternates | Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения |
font-variant-caps | Управление использованием альтернативных глифов для заглавных букв |
font-variant-east-asian | Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского) |
font-variant-ligatures | Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится |
font-variant-numeric | Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров |
font-variant-position | Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта |
font-weight | Определяет вес шрифта |
G
grid | Сокращенное свойство |
grid-area | Либо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца |
grid-auto-columns | Задает размер столбца по умолчанию |
grid-auto-flow | Указывает, как автоматически размещаемые элементы вставляются в сетку |
grid-auto-rows | Задает размер строки по умолчанию |
grid-column | Сокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца |
grid-column-end | Указывает, где закончить элемент сетки |
grid-column-gap | Определяет размер зазора между столбцами |
grid-column-start | Указывает, где начать элемент сетки |
grid-gap | Сокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор |
grid-row | Сокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки |
grid-row-end | Указывает, где закончить элемент сетки |
grid-row-gap | Определяет размер зазора между строками |
grid-row-start | Указывает, где начать элемент сетки |
grid-template | Сокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки |
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 | Задает минимальную ширину элемента |
O
object-fit | Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной |
object-position | Задает выравнивание заменяемого элемента внутри его поля |
opacity | Задает уровень непрозрачности для элемента |
order | Задает порядок гибкого элемента по отношению к остальным |
orphans | Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента |
outline | Задает все свойства структуры в одном объявлении |
outline-color | Задает цвет контура |
outline-offset | Смещение контура и его выводит за пределы края границы |
outline-style | Задает стиль контура |
outline-width | Задает ширину контура |
overflow | Указывает, что происходит, если содержимое переполнено полем элемента |
overflow-wrap | Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле) |
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 | Определяет, в какой позиции пользователь смотрит на 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-декорирование |
top | Определяет верхнюю позицию позиционного элемента |
transform | Применяет 2D или 3D преобразование к элементу |
transform-origin | Позволяет изменить положение на преобразованных элементах |
transform-style | Определяет способ визуализации вложенных элементов в трехмерном пространстве |
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
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности О нас Контакты
Примеры CSS
❮ Предыдущий Далее ❯
Синтаксис CSS
Синтаксис CSS
Объяснение синтаксиса CSS
Селекторы CSS
Селектор элементов Селектор идентификатора Селектор класса (для всех элементов) Селектор класса (только для элементов
) Элемент HTML, который ссылается на два класса Универсальный селектор Групповые селекторы
Объяснение селекторов CSS
CSS Как и где
Внешний CSS Внутренний CSS Встроенный CSS Несколько таблиц стилей Каскадный порядок
Как объяснить CSS
Комментарии CSS
Однострочный комментарий Многострочный комментарий
Объяснение комментариев CSS
Цвета CSS
Установка цвета фона элемента Установить цвет текста Установите цвет границы Установите разные значения цвета Установите значения RGB Установить шестнадцатеричные значения Установить значения HSL
Объяснение цветов CSS
Фоны CSS
Установить цвет фона страницы Установите цвет фона различных элементов Установить изображение в качестве фона страницы Как повторить фоновое изображение только по горизонтали Как расположить фоновое изображение Фиксированное фоновое изображение (это изображение не будет прокручиваться вместе с остальной частью страницы) Все свойства фона в одном объявлении Расширенный пример фона
Объяснение свойств фона CSS
Границы CSS
Установите ширину четырех границ Установить ширину верхней границы Установить ширину нижней границы Установите ширину левой границы Установить ширину правой границы Установите стиль четырех границ Установить стиль верхней границы Установите стиль нижней границы Установите стиль левой границы Установите стиль правой границы Установите цвет четырех границ Установить цвет верхней границы Установить цвет нижней границы Установите цвет левой границы Установите цвет правой границы Все свойства границы в одном объявлении Добавить закругленные границы к элементу Установите разные границы с каждой стороны Все основные свойства границы в одном объявлении Все свойства нижней границы в одном объявлении Все свойства левой границы в одном объявлении Все нужные свойства границ в одном объявлении
Объяснение свойств границы CSS
Поля CSS
Задайте разные поля для каждой стороны элемента
Использовать сокращенное свойство margin с четырьмя значениями
Использовать сокращенное свойство margin с тремя значениями
Использовать сокращенное свойство margin с двумя значениями
Использовать сокращенное свойство margin с одним значением
Установите для поля значение auto, чтобы центрировать элемент внутри его контейнера. Пусть левое поле унаследовано от родительского элемента
Обрушение поля
Объяснение свойств поля
CSS Padding
Укажите разные отступы для каждой стороны элемента Используйте сокращенное свойство padding с четырьмя значениями Используйте сокращенное свойство padding с тремя значениями Использовать сокращенное свойство заполнения с двумя значениями Используйте сокращенное свойство заполнения с одним значением Отступы и ширина элемента (без box-sizing) Отступы и ширина элемента (с box-sizing) Установить padding-left элемента Установить padding-right элемента Установить padding-top элемента Установите padding-bottom элемента
Объяснение свойств заполнения CSS
Высота/ширина CSS
Установка высоты и ширины элемента Установить максимальную ширину элемента Установите высоту и ширину различных элементов Установите высоту и ширину изображения, используя проценты Установите минимальную ширину и максимальную ширину элемента Установка минимальной и максимальной высоты элемента
Объяснение свойств высоты/ширины CSS
Блочная модель CSS
Демонстрация блочной модели Укажите элемент общей шириной 250 пикселей
Объяснение блочной модели CSS
Контур CSS
Нарисовать линию вокруг элемента (контур) Установить стиль контура Установить цвет контура Установить ширину контура Используйте сокращенное свойство контура Добавить пространство между контуром и краем/границей элемента
Объяснение свойств контура CSS
Текст CSS
Установить цвет текста различных элементов Выровнять текст Убрать строку под ссылками Украсить текст Управляйте буквами в тексте Отступ текста Укажите пробел между символами Укажите расстояние между строками Установить направление текста элемента Увеличьте пробел между словами Укажите тень текста для элемента Отключить перенос текста внутри элемента Вертикальное выравнивание изображения внутри текста
Объяснение свойств текста CSS
Шрифты CSS
Установить шрифт текста Установить размер шрифта Установите размер шрифта в px Установить размер шрифта в em Установите размер шрифта в процентах и em Установить стиль шрифта Установить вариант шрифта Установить жирность шрифта Все свойства шрифта в одном объявлении
Описание свойств шрифта
Иконки CSS
Иконки Font Awesome Иконки начальной загрузки Иконки Google
Объяснение значков CSS
Ссылки CSS
Добавление разных цветов к посещенным/непосещенным ссылкам Использование оформления текста в ссылках Укажите цвет фона для ссылок Добавьте другие стили к гиперссылкам Различные типы курсоров Дополнительно — Создание блоков ссылок Дополнительно — Создание блоков ссылок с границами
Объяснение свойств ссылок CSS
Списки CSS
Все различные маркеры элементов списка в списках Установите изображение в качестве маркера элемента списка Поместите маркер элемента списка Удалить настройки списка по умолчанию Все свойства списка в одном объявлении Списки стилей с цветами Полноразмерный список с рамками
Объяснение свойств списка CSS
Таблицы CSS
Укажите черную рамку для элементов table, th и td Использование границы коллапса Единая рамка вокруг стола Укажите ширину и высоту таблицы Установить горизонтальное выравнивание контента (text-align) Установить вертикальное выравнивание контента (vertical-align) Укажите отступы для элементов th и td Горизонтальные разделители Парящий стол Полосатые столы Укажите цвет границ таблицы Установите положение заголовка таблицы Адаптивная таблица Создайте необычный стол
Объяснение свойств таблицы CSS
Отображение CSS
Как скрыть элемент (видимость:скрытый) Как не отображать элемент (display:none) Как отобразить элемент уровня блока как встроенный элемент Как отобразить встроенный элемент как элемент блочного уровня Как использовать CSS вместе с JavaScript для отображения скрытого содержимого
Объяснение свойств отображения CSS
Позиционирование CSS
Позиционирование элемента относительно окна браузера Позиционирование элемента относительно его нормального положения Позиционирование элемента с абсолютным значением Липкое позиционирование Перекрывающиеся элементы Установить форму элемента Установите верхний край изображения, используя значение пикселя Установите нижний край изображения, используя значение пикселя Установите левый край изображения, используя значение пикселя Установите правый край изображения, используя значение пикселя Позиция текста изображения (верхний левый угол) Позиция текста изображения (верхний правый угол) Позиция текста изображения (нижний левый угол) Позиция текста изображения (нижний правый угол) Позиция текста изображения (по центру)
Объяснение свойств позиционирования CSS
Переполнение CSS
Использование переполнения: видимое — переполнение не обрезается. Он отображается за пределами поля элемента.
Использование переполнения: скрыто — переполнение обрезается, а остальное содержимое скрывается.
Использование переполнения: прокрутка — переполнение обрезается, но добавляется полоса прокрутки для просмотра остального содержимого.
Использование переполнения: авто — если переполнение обрезано, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого.
Использование переполнения-x и переполнения-y.
Объяснение свойств переполнения CSS
CSS Floating
Простое использование свойства float Изображение с рамкой и полями, плавающее вправо в абзаце Изображение с подписью, плавающей вправо Пусть первая буква абзаца плавает влево Отключение float (используя свойство clear) Отключение float (используя хак «clearfix») Создание плавающих ящиков Создавайте параллельные изображения Создание блоков одинаковой высоты (с помощью flexbox) Создание горизонтального меню Пример создания веб-макета
Объяснение свойств CSS float
CSS Inline-block
Показать различия между inline, inline-block и block Использование встроенного блока для создания навигационных ссылок
Объяснение встроенного блока CSS
Выравнивание элементов CSS
Выравнивание по центру с полями Выравнивание текста по центру Центрировать изображение Левое/правое выравнивание с положением Выравнивание по левому/правому краю по положению — кроссбраузерное решение Выравнивание влево/вправо с поплавком Выравнивание по левому/правому краю с поплавком — кроссбраузерное решение Центрировать по вертикали с отступом Центрировать по вертикали и горизонтали Центрировать по вертикали с высотой строки Центрировать по вертикали и горизонтали с позицией
Описание свойств выравнивания CSS
Комбинаторы CSS
Селектор потомков Детский селектор Селектор смежных братьев и сестер Общий селектор родственных элементов
Объяснение комбинаторов CSS
Псевдоклассы CSS
Добавление разных цветов к гиперссылке Добавьте другие стили к гиперссылкам Использование : фокус :first-child — соответствует первому элементу p :first-child — соответствует первому элементу i во всех элементах p :first-child — Соответствует всем элементам i во всех первых дочерних элементах p Использование: lang
Объяснение псевдоклассов CSS
Псевдоэлементы CSS
Сделать первую букву в тексте особенной Сделать первую строку в тексте особенной Сделайте первую букву и первую строку особенными Используйте :before, чтобы вставить некоторый контент перед элементом Используйте :after для вставки содержимого после элемента
Объяснение псевдоэлементов CSS
Непрозрачность CSS
Создание прозрачных изображений Создание прозрачных изображений — эффект наведения мыши Обратный эффект наведения мыши для прозрачных изображений Прозрачный блок/div Прозрачный блок/дел со значениями RGBA Создание прозрачного блока с текстом на фоновом изображении
Объяснение непрозрачности изображения CSS
Панели навигации CSS
Полностью оформленная вертикальная панель навигации Полностью стилизованная горизонтальная панель навигации Полноразмерная фиксированная вертикальная панель навигации Фиксированная горизонтальная панель навигации Липкая панель навигации (не работает в IE или Edge 15 и более ранних версиях) Отзывчивая верхняя навигация Адаптивная боковая навигация
Объяснение панелей навигации CSS
Выпадающие списки CSS
Выпадающий текст Выпадающее меню Выпадающее меню с выравниванием по правому краю Выпадающее изображение Выпадающая панель навигации
Описание раскрывающихся списков CSS
Галерея изображений CSS
Галерея изображений Галерея адаптивных изображений
Объяснение галереи изображений CSS
Спрайты изображений CSS
Спрайт изображения Спрайт изображения — список навигации Спрайт изображения с эффектом наведения
Описание спрайтов изображений CSS
Селекторы атрибутов CSS
Выбирает все элементы с целевым атрибутом
Выбирает все элементы с атрибутом target=»_blank»
Выбирает все элементы с атрибутом title, который содержит список слов, разделенных пробелами, одним из которых является «цветок». Выбирает все элементы со значением атрибута class, начинающимся с «top» (должно быть целым словом)
Выбирает все элементы со значением атрибута класса, начинающимся с «top» (не должно быть целым словом).
Выбирает все элементы со значением атрибута класса, оканчивающимся на «тест».
Выбирает все элементы со значением атрибута класса, которое содержит «te»
Описание селекторов атрибутов CSS
CSS-формы
Счетчики CSS
Создать счетчик Вложенные счетчики 1 Вложенные счетчики 2
Макет веб-сайта CSS
Простой, адаптивный макет веб-сайта Пример веб-сайта
Объяснение макета веб-сайта CSS
Закругленные углы CSS
Объяснение закругленных углов CSS
Изображения границ CSS
Объяснение изображений границ CSS
Фоны CSS
Градиенты CSS
Эффекты тени CSS
Текстовые эффекты CSS
Веб-шрифты CSS
CSS 2D Transforms
Объяснение двумерных преобразований CSS
Преобразование трехмерных изображений CSS
Объяснение трехмерных преобразований CSS
Переходы CSS
CSS-анимации
Подсказки CSS
Объяснение всплывающих подсказок CSS
Изображения стилей CSS
Отражение изображения CSS
Объяснение отражения изображения CSS
CSS Object-fit
Объяснение подгонки объекта CSS
Положение объекта CSS
Объяснение позиции объекта CSS
Кнопки CSS
Разбивка на страницы CSS
Объяснение нумерации страниц CSS
Несколько столбцов CSS
Объяснение нескольких столбцов CSS
Пользовательский интерфейс CSS
Объяснение пользовательского интерфейса CSS
Переменные CSS
CSS Box Sizing
Ширина элементов без box-sizing Ширина элементов с box-sizing Элементы формы + box-sizing
CSS Flexbox
Запросы CSS Media
Объяснение запросов мультимедиа CSS
Запросы мультимедиа CSS — дополнительные примеры
Объяснение примеров мультимедийных запросов CSS
Адаптивный веб-дизайн CSS
Объяснение адаптивного веб-дизайна CSS
CSS Grid
Макет сетки Элементы сетки Пробелы в столбцах сетки Линии сетки Контейнер сетки Элементы сетки
НАБОР ЦВЕТА
Единицы CSS
❮ Предыдущая Далее ❯
Единицы CSS
CSS имеет несколько различных единиц измерения длины.
Многие свойства CSS принимают значения длины, например ширина
, поля
, отступы
, размер шрифта
и т. д.
Длина — это число, за которым следует единица длины, например 10px
, 2em
и т. д.
Пример
Установите различные значения длины, используя px (пиксели):
h2 {
размер шрифта: 60 пикселей;
}
p {
размер шрифта: 25 пикселей;
высота строки: 50px;
}
Попробуйте сами »
Примечание: Между числом и единицей измерения не должно быть пробела. Однако, если значение
0
единицу измерения можно не указывать.
Для некоторых свойств CSS допускается отрицательная длина.
Существует два типа единиц длины: абсолютный и относительный .
Абсолютные длины
Единицы абсолютной длины являются фиксированными, и длина, выраженная в любом из них, будет отображаться точно как этот размер.
Абсолютные единицы длины не рекомендуются для использования на экране, поскольку размеры экрана сильно различаются. Однако их можно использовать, если известна среда вывода, например что касается макета печати.
Блок | Описание |
---|---|
см | см Попробуй |
мм | миллиметра Попробуй |
в | дюйма (1 дюйм = 96 пикселей = 2,54 см) Попробуй |
пикселей * | пикселей (1 пиксель = 1/96 дюйма) Попробуй |
пт | балла (1 балл = 1/72 от 1 дюйма) Попробуй |
шт.![]() | пика (1 шт = 12 пт) Попробуй |
* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.
Относительная длина
Единицы относительной длины задают длину относительно другого свойства длины. Единицы относительной длины лучше масштабируются между различными средами рендеринга.
Блок | Описание | |
---|---|---|
эм | Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) | Попробуйте |
бывший | Относительно x-высоты текущего шрифта (используется редко) | Попробуйте |
ч | Относительно ширины «0» (ноль) | Попробуйте |
рем | Относительно размера шрифта корневого элемента | Попробуйте |
вв | Относительно 1% ширины окна просмотра* | Попробуйте |
вх | Относительно 1% высоты окна просмотра* | Попробуйте |
об/мин | Относительно 1% меньшего размера области просмотра* | Попробуйте |
вмакс | Относительно 1% большего размера окна просмотра* | Попробуй |
% | Относительно родительского элемента | Попробуйте |
Рекомендация: Единицы em и rem удобны для создания идеальных
масштабируемая планировка!
* Viewport = размер окна браузера.