Основные css-свойства – что нужно знать при работе с css.

Я всегда мечтал о том, чтобы моим компьютером можно было пользоваться так же легко, как телефоном;
моя мечта сбылась: я уже не могу разобраться, как пользоваться моим телефоном.
Bjarne Stroustrup

Д ля включения стилей в html-документ применяются - каскадные таблицы стилей CSS (Cascading Style Sheet) , с их возможностями значительно упрощается разработка web-страниц и управление полученным сайтом. В этом разделе кратко описаны некоторые частоприменяемые свойства стилевых таблиц.

Как и все компьютерные языки, CSS имеет свой синтаксис, по которым создаются таблицы стилей. CSS отличается от HTML тем, что у первого нет элементов, атрибутов и тегов, а только строго определенный синтаксис или правило, которое и описывает внешний вид одного или группы элементов . Иными словами правило определяет (задает) , как будет выглядеть определенный элемент.

Правило, обязательно, состоит из селектора (в примере ниже это - H1) и блока объявления стилей, заключенного в фигурные скобки. Объявление так же состоит из свойства (COLOR) и его значения (Limegreen) .

h1 {color : Limegreen }

Правило может содержать несколько объявлений, разделенных точкой с запятой. Для удобства чтения и редактирования правила записывают так, чтобы каждое объявление начиналось с отдельной строки.

h1 {
color : Limegreen ;
font-family : Verdana ;
font-size : 16pх
}

Но и записанное в одну строку, будет воспринято точно так же.

h1 {color : Limegreen ; font-family : Verdana ; font-size : 16pх }

Данное правило определяет для заголовка H1 цвет - color:Limegreen, наименование шрифта - font-family:Verdana и размер шрифта - font-size:16pх.

Это правило можно записать и так:

h1 {color : #32CD32 ; font : normal 16pх Verdana }

Включение CSS в HTML

Для включения CSS в html-документ используется , который задает служебную информацию и располагается внутри .

http-equiv="Content-Style-Type" content ="text/css" >

В примере, атрибут http-equiv="Content-Style-Type" указывает, что элемент META относится к таблице стилей, а атрибут content="text/css" задает, что таблицы стилей написаны на языке CSS. Таблицы стилей могут быть внутренними, встроенными и внешними.

• Внутренняя таблица стилей задается внутри при помощи атрибута STYLE. Ее недостаток в том, что она придает определенное значение только для одного элемента, для остальных придется задавать атрибут STYLE каждый раз.

style="color : red " >Свойства CSS

Браузер покажет:

Свойства CSS

• Встроенные таблицы стилей добавляются с помощью тегов STYLE и располагаются внутри элементов HEAD. При таком включении, всем заголовкам первого уровня, которые находятся на данной странице, будет применен красный цвет. И если сейчас необходимо будет изменить цвет заголовков, то сделать это достаточно будет только один раз.

type="text/css" >
H1 {color : red }

• Внешними таблицами стилей являются те, которые помещены в отдельный файл с расширением .css и прикреплены к web-странице при помощи элемента LINK, который так же располагается внутри элемента HEAD.

href="css/style.css" rel ="stylesheet" type ="text/css" >

Задает URL таблицы, а REL указывает отношение подключаемого файла к документу. При добавлении основной таблицы стилей используется значение STYLESHEET.

Думаю теперь можно перейти к самому интересному - к изучению свойств CSS и их применению.

Свойства CSS

Все свойства CSS можно разделить на несколько групп.

Урок №3
Основные 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) и т.д.

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 пунктам.

Вам понравились уроки? Поддержите проект "Учебники для вебмастера" !
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

CSS (Cascading Style Sheets ) – широко распространённый метод форматирования веб-страниц. Суть данного метода заключается в создании и регистрации своеобразных стилей оформления CSS . Как правило, определение подобных стилей происходит во внешнем CSS-документе. Но также возможна регистрация стилей оформления и непосредственно в коде самой веб-страницы (см. CSS).

Для определения стилей используются специальные служебные CSS-селекторы (свойства стилей), которым присваиваются соответствующие значения. Описание служебных слов происходит после наименования стиля-селектора и заключается в фигурные скобки "{" и "}", которые символизируют начало и конец определения конкретного стиля. Причём, в отличие от атрибутов , значения селекторам стиля присваиваются при помощи двоеточия ":", а не через знак равенства "=", и разделяются точкой с запятой ";". Таким образом, для регистрации стилей применяется конструкция вида ИмяСтиля {свойство1: значение1; свойство2: значение2;} .

width / height

Ширина / высота элемента .

Значения :

1920px | 55cm | 100%

Задаётся положительным числом. В качестве единицы измерения можно использовать проценты (% ), пиксели (px ), точки (pt ), сантиметры (cm ), дюймы (in )

margin / padding

Внешнее поле / внутренний отступ (границы) .

Значения :

5px |
5px 3px |
2px 5px 3px |
2px 3px 5px 7px

Top=Right=Bottom=Left
Top=Bottom Left=Right
Top Left=Right Bottom
Top Right Bottom Left

Поля элементов определяются для верхней (top ), правой (right ), нижней (bottom ) и левой (left ) сторон. Например, p{margin:auto; padding:5px 15px;}

color / background-color

Цвет шрифта / цвет заднего фона .

Значения :

#808 | #800080 | rgb(128,0,128) | pink | transparent | ...

Цвет элемента определяется при помощи метода RGB: насыщенностью красного (Red), зелёного (Green) и синего (Blue) оттенков. Например, rgb(50%,0%,50%)

background-image

Фоновый рисунок .

Значения :

url(/i/bg.gif) | none | linear-gradient(...)

В качестве фонового рисунка часто используется автоматически создаваемый браузером градиент. Например, body {background-image: -webkit-linear-gradient(left, #fff, transparent); linear-gradient(to right, #fff, transparent);}

Границы элемента .

Значения :

2px solid #c0c0c0 | double #ccc | none

Определяются толщиной (border-width ), стилем (border-style ) и цветом (border-color ) рамки.

border-style

Варианты стиля для внешней рамки границ элемента .

Значения :

solid | double | dashed | dotted | inset | outset | groove | ridge | none

При использовании стиля двойной границы double толщину рамки можно не указывать

border-radius

Закругление углов границы .

Значения :

Может использоваться для ячеек таблицы (поддерживается не во всех версиях браузеров)

font-family

Семейство шрифтов (гарнитура) .

Значения :

Verdana, Times, ...

Как правило, для лучшей совместимости указываются несколько шрифтов

font-size

Размер шрифта .

Значения :

15px | 12pt | 1em | smaller | larger

Как правило, измеряется в точках (pt ) или пикселях (px ). Для удобочитаемости на мобильных устройствах рекомендуется устанавливать размер не менее 12px

font-weight

Свойство управления полужирным начертанием шрифта .

Значения :

bold | lighter | normal

text-decoration

Свойство оформления текста .

Значения :

none | blink | overline | underline | line-through

text-transform

Трансформирование текста .

Значения :

capitalize | lowercase | uppercase | none

text-shadow

Тень .

Значения :

1px -1px 2px #aaa | none

Поддерживается не во всех версиях браузеров. Для определения тени указываются смещение в горизонтальной и вертикальной плоскостях, размер тени и цвет. Причём, смещение тени возможно и с отрицательным значением

text-align

Выравнивание текста в горизонтальной плоскости .

Значения :

left | center | right | justify

Выравнивание может осуществляться по левому краю (left ), по центру (center ), по правому краю (right ) либо по ширине содержимого (justify )

vertical-align

Выравнивание содержимого по вертикали .

Значения :

top | middle | bottom

text-indent

Уровень отступа .

Значения :

Служит для создания отступа "с красной строки" в начале абзаца

line-height

Межстрочный интервал .

Значения :

letter-spacing

Свойство разрежённости интервала между знаками .

Значения :

Используется при необходимости искусственного расширения текста по горизонтали, например, при определении заголовков

position

Позиционирование элемента .

Значения :

absolute | relative | ...

Свойство отображения элемента .

Значения :

inline-block | inline | block | table | none | ...

none элемент не отображается на экране и не занимает место, создавая впечатление абсолютного отсутствия элемента

visibility

Свойство видимости элемента .

Значения :

hidden | visible

В случае использования значения hidden элемент не отображается на экране. Тем не менее, на экране остаётся пустая зона, в которой должен был бы отображаться элемент

Свойство полупрозрачности элемента .

Значения :

Определяется дробным положительным числом от 0 до 1. Например, a{opacity:.5;} a:hover{opacity:1;}

transition / transition-delay

Плавный переход к стилю элемента / задержка перед переходом .

Значения :

0.1s | 0.2s | ... | 1s | ...

Применяется для искусственного замедления применения правил стилей оформления на заданное число секунд (s ). Например, a{-webkit-transition:2s; transition:2s; opacity:.5;} a:hover {-webkit-transition-delay:3s; transition-delay:3s; opacity:1.0; color:#ccc}

transform

Трансформация элемента .

Значения :

Используется для создания интерактивных визуальных эффектов. Например, a{-webkit-transition:1s; transition:1s;} a:hover {-webkit-transform: rotate(360deg); transform: rotate(360deg);}

Существуют некоторые особенности форматирования веб-страниц посредством каскадных стилей CSS, о которых следует упомянуть отдельно. К примеру, в случае необходимости создать масштабированный элемент, т.е. "растянутый" во весь экран, следует указать значение в 100% для свойств ширины width или высоты height соответственно.

При определении числовых значений CSS-свойств единицей измерения могут служить проценты (% ), пиксели (px ), точки (pt ), сантиметры (cm ), дюймы (in ) и т.д... Например, чтобы задать для всех абзацев двойную серую границу, 10%-ный внешний отступ слева и справа, а также внутренний отступ в 5px для всех четырех сторон, можно использовать следующую конструкцию: p {margin: 0 10%; padding: 5px; border: #c0c0c0 double;} .

Кроме того, для свойств margin , padding и border можно указать значение лишь одной из сторон. Так, например, конструкция img {margin-bottom: 15px;} задаёт для всех изображений отступ снизу в 15px. А конструкция .b-TL {border-top: 3px #ccc solid; border-left: 3px #ccc solid;} может установить для элемента, использующего класс .b-TL , сплошные верхнюю и левую границу серого цвета и толщиной в 3px.

Для управления свойствами цвета широко используется шестнадцатеричное представление чисел. К примеру, число FF в шестнадцатеричной системе счисления (СС) представляет привычное арабское число 255 в десятичной СС. И, разумеется, было бы полезным знать принципы СС, а также способы перевода чисел из одной системы в другую. Но подобный перевод можно осуществить и воспользовавшись многофункциональным калькулятором. Либо определить значение нужного цвета при помощи графического редактора, в котором цвета могут отображаться как раз в шестнадцатеричном представлении.

Если же поиск 16-ричных значений будет отнимать слишком много времени и сил, для определения цвета можно использовать привычные целые числа от 0 до 255. Также существует возможность указать процентное соотношение используемого цвета. Например, конструкция a {color: rgb(0,0,255);} a:hover {color: rgb(100%,0%,0%);} указывает синий цвет шрифта для всех неактивных гиперссылок веб-страницы. А при наведении мыши на ссылку задаёт для нее красный цвет шрифта.

В случае необходимости изменения свойств элемента при наведении курсора мыши можно использовать служебное слово hover . Данная команда указывает браузеру на то, что для используемого элемента зарегистрированы разные стили. Причём, один из стилей применяется для оформления элемента в его статичном неактивном состоянии. А второй стиль (с указанием служебного слова через двоеточие после наименования стиля) изменяет указанные в описании CSS-селектора для активного состояния элемента при наведении мыши.

От автора: приветствую вас. В css есть достаточно много свойств, если так подумать, но действительно важных и наиболее употребляемых не так уж и много. В этой статье я хотел бы кратко описать самые используемые css свойства.

Что нужно знать для начала

Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:

body{ background: #fff; color: #ccc; ... }

body { background : #fff; color : #ccc; . . .

Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.

Сначала пишется имя свойства, а потом через двоеточие его значение. Желательно каждый новый стиль писать с новой строки, ах да, еще нужно обязательно ставить точку с запятой в конце, иначе ничего не заработает.

Стили для текстового содержимого

Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: , .

С помощью свойств, описанных там, вы сможете сделать с текстом все, что угодно: изменить его размер, начертание, сам шрифт и многое другое.

Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.

Отображение на экране

По умолчанию элементы делятся на строчные и блочные и разница в них только в том, что блочные не могут стоять в одной строке друг с другом. Зато строчным нельзя задать размер, он зависит от того, сколько в них содержимого.

Итак, иногда такое поведение нужно изменить и для этого используется display и множество его значений, но я расскажу лишь о самых основных:

Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)

Inline- преобразование в строчный элемент.

Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).

Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)

None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.

Опять же, это не все значения, только самые основные.

Свойства размера

Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:

Width – ширина

Height – высота

Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.

Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)

Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:

*{ box-sizing: border-box; }

К блокам добавляется синяя рамка со всех сторон толщиной 3 пикселя с каждой. Суммарно ширина увеличивается на 6 пикселей, а если вы не хотите этого, нужно использовать то самое box-sizing.

Цвет и фон

Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.