HTML5 CSS3

Вёрстка шаблона страницы на HTML CSS. Определение стилей и правил для сайта.


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

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

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

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

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

background
Задаёт цвет фона в формате rgb.

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

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

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

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

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

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

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

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

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

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

font-size
Размер текста.

color
Цвет текста.

text-align
Выравнивание текста.

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

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

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

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

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

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

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;
}


Понравилась страница? Поделитесь ссылкой в социальных сетях. Поддержите проект!