Стилизация Сайтов

Цвета и варианты их включения

В CSS можно задавать как цвета самого текста так и заднего фона. Цвет текста задается с помощью свойства "color". Цвет фона командой "background-color". Можно задавать прозрачность с помощью rgba и hsla.

Пример:

color:red

background-color:orange

color: rgb(255, 255, 255)

rgba(182, 10, 255, 0.7);

color:hsl(60, 100%, 50%)

hsla(240, 100%, 50%, 0.5);

color:#000000

background-color:#138b03

color:rgba(229, 55, 165, 0.5)

background-color:#8f2f11

Шрифты и вид текста

Шрифт текста можно задавать как стандартный, уже включенный в редактор, так и интегрированный из Google Fonts, и локально сохраненные.

Пример стандартных шрифтов:

"Этот текст показывает шрифт Arial"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Verdana"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Georgia"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Cambria"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Trebuchet MS"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

Пример интегрированных шрифтов:

"Этот текст показывает шрифт Amatic SC"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Caveat"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт El Messiri"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Lobster"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

"Этот текст показывает шрифт Pacifico"

font-weight: bold;

font-weight: normal;

font-weight: lighter;

Подзаголовки и оформление

Подзаголовки как правило могут создаваться тегами h1..h6 с уже включенными настройками шрифта, которые, при желании можно изменить с помощью CSS. Но не все шрифты поддерживают те или иные настройки (толщину текста, курсив).

Пример подзаголовков:

"Это заголовок h2"

Текст курсивом;

Подчеркнутый текст;

Перечеркнутый текст;

"Это заголовок h4"

Текст курсивом

Подчеркнутый текст

Перечеркнутый текст

"Это заголовок h6"
Текст курсивом
Подчеркнутый текст
Перечеркнутый текст