Основные CSS-свойства
Основные CSS-свойства по категориям
Основные CSS-свойства

Схема CSS-кода выглядит следующим образом:
имяТега { CSS-свойство: значение; }
В этом уроке мы рассмотрим основные CSS-свойства. Для вашего удобства, я разложил их по категориям:
- CSS-свойства влияющие на цвет и фон,
- CSS-свойства влияющие на шрифт,
- CSS-свойства влияющие на текст,
- CSS-свойства влияющие на границу (обводку),
- CSS-свойства влияющие на внешние и внутренние отступы.
CSS-свойства влияющие на цвет и фон
color:
— CSS-свойство влияющее на цвет текста: заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства color:
color: green;
— текст должен быть зелёного цвета, в качестве значения задано имя цвета,
color: #008800;
— текст должен быть зелёного цвета, в качестве значения задан шестнадцатеричный код в RGB-формате.
background-color:
— CSS-свойство влияющее на цвет фона заголовка, абзаца, ссылки и т.д.
В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства background-color:
background-color: blue;
— фон должен быть синего цвета,
background-color: #0000ff;
— фон должен быть синего цвета.
background-image:
— CSS-свойство устанавливающее изображение, в качестве фона фона заголовка, абзаца, ссылки и т.д. Его значением выступает URL (адрес) изображения.
Примеры кода с использованием CSS-свойства background-image:
background-image: url(http://имя домена.ru/kartinka.jpg);
— фоном должно стать изображение, находящееся по адресу http://имя домена.ru/kartinka.jpg
CSS-свойства влияющие на шрифт
font-size:
— CSS-свойство влияющее на размер шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства font-size:
font-size: 17px;
— размер шрифта должен быть 17 пикселей,
font-size: 20pt;
— размер шрифта должен быть 20 пунктов.
font-family:
— CSS-свойство устанавливающее имя шрифта для заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя шрифта: Arial
, Courier
, Impact
, Garamond
, Georgia
, Helvetica
, Tahoma
, Times
(установлен по-умочанию), Verdana
и т.д.
Примеры кода с использованием CSS-свойства font-family:
font-family: Arial;
— имя шрифта должно быть Arial,
font-family: Impact;
— имя шрифта должно Impact.
font-style:
— CSS-свойство влияющее на начертание (стиль) шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: normal
, oblique
.
Примеры кода с использованием CSS-свойства font-style:
font-style: normal;
— нормальное начертание шифта,
font-style: oblique;
— наклонное начертание шифта.
font-weight:
— CSS-свойство влияющее на толщину шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступет: normal
, bold
.
Примеры кода с использованием CSS-свойства font-weight:
font-weight: normal;
— нормальное начертание шифта,
font-weight: bold;
— жирное начертание шифта.
CSS-свойства влияющие на текст
text-align:
— CSS-свойство влияющее на выравнивание текста в заголовке, абзаце и других блочных элементах. В качестве его значения выступает: left
, center
, right
, justify
.
Примеры кода с использованием CSS-свойства text-align:
text-align: left;
— выравнивание текста по левому краю (установлен по-умолчанию),
text-align: center;
— выравнивание текста по центру,
text-align: right;
— выравнивание текста по правому краю,
text-align: justify;
— равномерное выравнивание текста по левому и правому краям.
text-indent:
— CSS-свойство влияющее на отступ первой строки (красная строка) текста в закаловке, абзаце и других блочных элементах. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent:
text-indent: 20px;
— отступ первой строки равен 20 пикселям,
text-indent: 15pt;
— отступ первой строки равен 15 пунктам.
line-height:
— CSS-свойство влияющее на расстояние между строками текста (интерлиньяж) заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: множитель, пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent:
line-height: 35px;
— расстояние между строками равно 35 пикселей,
line-height: 1.5;
— расстояние между строками равно 1.5 по множителю (аналогичен 150%).
letter-spacing:
— CSS-свойство влияющее на расстояние между символами в словах заголовка, абзаца ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства letter-spacing:
letter-spacing: 3px;
— расстояние между символами в словах, равно 3 пикселя,
letter-spacing: 5pt;
— расстояние между символами в словах, равно 5 пунктов.
word-spacing:
— CSS-свойство влияющее на расстояние между словами в тексте заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства word-spacing:
word-spacing: 10px;
— расстояние между словами, равно 10 пикселей,
word-spacing: 7pt;
— расстояние между словами, равно 7 пунктов.
text-transform:
— CSS-свойство влияющее на вид букв в тексте, делая их прописными или строчными. В качестве его значения выступает: capitalize
, lowercase
, uppercase
.
Примеры кода с использованием CSS-свойства text-transform:
text-transform: capitalize;
— первая буква каждого слова начинается с верхнего регистра,
text-transform: uppercase;
— все буквы в тексте записываются в верхнем регистре,
text-transform: lowercase;
— все буквы в тексте записываются в нижнем регистре.
text-shadow:
— CSS-свойство создающее тень текста.
В качестве его значения выступает: цвет ось-x ось-y радиус
.
Пример кода с использованием CSS-свойства text-shadow:
text-shadow: green 3px 2px 2px;
— тень будет зелёного цвета, со сдвигом в лево на 3 пикселя, со сдвигом вниз на 2 пикселя, радиус (разброс тени) будет составлять 5 пикселей.
CSS-свойства влияющие на границу (обводку)
border-color:
— CSS-свойство влияющее на цвет границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или его шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства border-color:
border-color: green;
— зелёный цвет обводки,
border-color: #008800;
— зелёный цвет обводки, задан в шестнадцатеричном коде RGB-формата.
border-width:
— CSS-свойство влияющее на толщину границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px).
Примеры кода с использованием CSS-свойства border-width:
border-width: 1px;
— толщина обводки равна 1 пикселю,
border-width: 3px;
— толщина обводки равна 3 пикселям.
border-style:
— CSS-свойство влияющее на стиль границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: solid
, dashed
, dotted
, double
.
Примеры кода с использованием CSS-свойства border-style:
border-style: solid;
— обводка как сплошная линия,
border-style: dashed;
— обводка в виде отрезков,
border-style: dotted;
— обводка в виде точек,
border-style: double;
— обводка в виде двойной сплошной линии.
CSS-свойства влияющие на внешние и внутренние отступы
margin:
— CSS-свойство влияющее на отступ между краем фона одного блочного элемента (заголовки, абзацы и т.д.) и краем фона другого блочного элемента. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства margin:
margin: 15px;
— отступ равен 15 пикселям,
margin: 12pt;
— отступ равен 12 пунктам.
padding:
— CSS-свойство влияющее на отступ между краем фона элемента и его содержимым (текстом, изображением). В качестве его значения выступаюет единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства padding:
padding: 5px;
— отступ равен 5 пикселям,
padding: 3pt;
— отступ равен 3 пунктам.
Читать далее: Значения CSS-свойств
я тебе обезательно вышлю деньги ты сделал всё очень класно и насыщено и на совесть красавчик)
Цитирую:
«Примеры кода с использованием CSS-свойства border-width:
border-color: 1px; — толщина обводки равна 1 пикселю,
border-color: 3px; — толщина обводки равна 3 пикселям.
»
Исправьте, пожалуйста, этот пример. Вы перепутали border-color и border-width:
Спасибо Богдан, исправлено!
Небольшое дополнение к свойствy СSS «border»:
некоторые значения, например, «color», отображаются браузером только в связке с другими.
border-style: dotted;
border-color: green;
Если нет свойства border-style, border-color: green на странице не отображается.
(Chome 32.0.1700.77)
Да всё верно, спасибо за замечание!
Есть ли в Вашем блоге возможность выделять ошибку в тексте и дальше клавиатурное сочетание, чтобы не засорять комментарии к статье?
Добрый день Богдан, к сожалению пока такой возможности нету, но я подумаю над этим вопросом.