Цвета и варианты их включения
В 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"
Текст курсивом
Подчеркнутый текст
Перечеркнутый текст