HTML5 CSS3

CSS3 (англ. Cascading Style Sheets — каскадные таблицы стилей) 3 версия.

Организация W3C призывает веб-разработчиков использовать HTML5 и CSS3 вместе, как часть одной новой волны современного веб-дизайна.

Все, что связано с форматированим текста, стилей и правил для сайта делается через CSS.

Отделить код html от кода описания стилей и дизайна.

Рядом с веб-страницей вам нужно создать файл стилей (например: style.css). На веб странице, внутри head, прописать <link rel="stylesheet" href="style.css" />.

width
Длина элемента.

height
Высота элемента.

margin
Задает величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

margin-right
Задает величину отступа справа.

padding
Задаёт величину поля сразу для всех сторон элемента. Для отступов справа или слева, используются padding-right и padding-left соответственно.

float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

text-align
Выравнивание текста. Может принимать значения: left, right, center.

clear
Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.

Пример страницы

none
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.

both
Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.

left
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.

right
Отменяет обтекание с правой стороны элемента.

display: block;
Блочный элемент.

Пример страницы

border
Устанавливает толщину, стиль и цвет границы вокруг элемента.

Пример страницы.

Объявление содержит правила, каждое из которых состоит из свойства и значения.

p {
font-size: 20px;
}


В данном случае тегу p применяется одно правило, которое устанавливает значение 20px для свойства font-size:

Можно присвоить одинаковые значения нескольким тегам через запятую.

p, a {
font-size: 20px;
}


Для привязки стиля к необходимому элементу на странице используются два атрибута HTML-элементов: class и id.

Различие между ними состоит в том, что внутри HTML-документа одно и то же значение class используется для одного или нескольких элементов, а id только один раз. Как следствие, с использованием классов CSS выбираются элементы с двумя и более конкретными именами классов, что невозможно с помощью идентификаторов.

Классы обозначаются с помощью символа (точка), в то время как для идентификаторов используется символ #.

Пример использования класса.

html

<p class="text">
Текст.
</p>

css

.text {
font-size: 20px;
}


Пример использования идентификатора.

html

<p id="text">
Текст.
</p>

css

#text {
font-size: 20px;
}