Работаем со шрифтами и цветом!

А теперь самое приятное в CSS, мы меняем шрифты и цвета тексту! А приятно всё тем, что это - конец всего объяснения CSS.

И задаётся вопрос - как установить сам шрифт? Это делается очень просто: нужно установить свойство font-family, после которого в ковычках пишется сам шрифт.
Именно таким образом в этом предложении я поставил шрифт Times New Roman
Это выглядит вот так:
<span style="font-family: "Times New Roman;">...

Также доступны видоизменения шрифтов с помощью свойств font-weight ( жирность текста ), font-stretch ( растянутость шрифта ), font-style ( курсивность текста ) и font-size ( размер текста )

Если вы думали, что изменение шрифта - просто, то изменение цвета ещё проще! Чтобы поменять цвет используется атрибут color после которого можно написать цвет ( например: black, white, yellow, red,... ) или его код ( сейчас все из мира дизайна меня поймут - значение из букв и цифр, перед которым стоит #).
Здесь у меня стоит чёрный цвет, который я поставил, написав black
Здесь у меня стоит хах, смешно, стоит один из любимых цветов для графического дизайна, который я поставил, написав #181f27. Сейчас добавлю подленник мною сказанного. мой темплейт не поддерживает этот цвет

В идеальном мире это выглядело бы именно так:

<span style="color: black; font-family: &quot;open sans&quot;;">...
и
<span style="color: #181f27; font-family: &quot;open sans&quot;;">...

Официально заявляю, что вы теперь всемогущий пониматель основ великого CSS, для совершения цели ничего не остаётся, кроме тестирования

Работаем с текстом с помощью CSS

Работаем с текстом с помощью CSS! Чем дальше мы идём, тем скучнее всё выглядит.

 

Сейчас я дам отдельные списки по разным способам преобразования текста!

text-transform

Cвойство text-transform стилизует текст:

1. text-transform: none - отсутствие эффектов.
2. text-transform: capitalize делает все первые буквы слов прописными.
3. text-transform: uppercase делает все буквы прописными.
4. text-transform: lowercase делает все буквы строчными.
5. text-transform: initial - значение по умолчанию.
6. text-transform: inherit - наследование значений от родительского элемента.

white-space

Cвойство white-space работает с пробелами и переносами строк:

1. white-space: normal - отсутствие эффектов: между словами один пробел, текст переносится по необходимости.
2. white-space: nowrap запрещает переносить текст, это возможно осуществить только с помощью <br />.
3. white-space: pre в браузере отображаются дополнительные пробелы и переносы.
4. white-space: pre-wrap сохраняет пробелы в тексте, переносит текст по необходимости.
5. white-space: pre-line удаляет лишние пробелы в тексте.
6. white-space: break-spaces - работает аналогично pre-wrap, только пробелы в конце строк имеют значение.
7. white-space: initial - значение по умолчанию.
8. white-space: inherit - наследование значений от родительского элемента.

tab-size

Cвойство tab-size устанавливает отступ, который получается с помощью клавиши TAB, оно работает только для элементов <textarea>, <pre>. Это свойство может быть обозначенно целым положительным числом или длинной ( в правильных единицах измерения, например, px ), также доступны значения initial, inherit

word-break

Cвойство word-break определяет возможность мягкого перехода текста на новую строку, разделяя слова. Используются значения normal, break-all ( разрыв строк происходит без переноса слов ), keep-all ( разрыв происходит между парными символами ), initial, inherit.

line-break

Cвойство line-break определяет правила переноса строк относительно знаков препинания и символов

1. line-break: auto назначает значение по умолчанию относительно используемого браузера.
2. line-break: loose разделяет строки по наименьшему количеству правил, чаще используется для коротких строк.
3. line-break: normal разбивает строки стандартным набором правил.
4. line-break: strict разделяет строки, используя строгий набор правил переноса.
5. line-break: initial - значение по умолчанию.
6. line-break: inherit наследует значение.

text-align

Свойства text-align, text-align-all, text-align-last выравнивают текст по значению, которое вы устанавливаете. Такими могут быть: start, end, left, right, center, justify и match-parent по-моему, понятно, что есть что

Извиняюсь за сухость этой темы творческое мышление меня сегодня подвело - в следующий раз будет лучше!

Позиционируем элементы с CSS

Позиционирование элемента? Это же элементарно! Взял и поставил!

CSS-позиционирование

Есть три главные схемы позиционирования - это нормальный поток, обтекание и абсолютное позиционирование. 

1. Нормальный поток - относительное и липкое позиционирование уровня блока и строки (блочный контекст форматирования - элементы display, block, list-item или table; строчный контекст форматирования - display inline, inline-block или inline-table). 
2. В Обтекании блок удаляется из нормального потока и позиционируется справа или слева от элемента (float: left/right). 
3. Абсолютное позиционирование полностью убирает элемент из нормального потока и ему присваивается позиция относительно непосредственно блока. (position: absolute/fixed)

Cодержащий блок - прямоугольник, относительно которого определяется положение и размер элемента, он полностью зависит от типа позиционирования.

Свойство position

Свойство position определяет, какой алгоритм позиционирования используется. Существует несколько алгоритмов позиционирования:

1. position: static - блок располагается в соотвествии с нормальным потоком.
2. position: relative - блок располагается, смещаясь относительно нормальному потоку.
3. position: absolute - положение блока задаётся с помощью атрибутов top, bottom, left, right ( в них можно указывать как и растояние в пикселях, так и процентуальные значения относительно экрана ), границы с помощью атрибута margins. Абсолютное позиционирование убирает блок из нормального потока.
4. position: sticky - блок располагается, смещаясь относительно ближайшему предку потока.
5. position: fixed - блок располагается во всём окне просмотра.
6. position: initial - блок располагается по умолчанию.
7. position: inherit - блок располагается относительно родительскому элементу.

С помощью свойства float можно установить обтекание элементов ( left/right, в зависимости от стороны обтекания ).
Теперь вы можете сместить блоки - так держать!

CSS, или вы думали, что HTML был сложным

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

Как раз-таки для подобных целей существует CSS, благодаря которому возможно осуществить единость стиля всей веб-страницы. Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. 
Элемент форматирования состоит из двух главных частей - селектора и объявления (в свою очередь объявление состоит из свойства и значения). Селектор - тот объект, который подлежит форматированию, объявление указывает сам вид форматирования (свойство указывает, какой аспект объекта надлежит форматированию (обычно это может быть шрифтом, размером, цветом и т.д), а значение указывает, как форматируется). Чтобы упростить мне вам жизнь, я попытаюсь кратко объяснить разделение CSS стилей в кратком и лаконичном списке определений (Забыл, что это? Тебе сюда!)

Виды таблиц стилей

Внешняя таблица стилей

Является текстовым файлом с расширением .css, которая подключается к веб-странице тегом <link>, который находится внутри тегов <head>...</head> HTML документа. Также существует возможность вставить несколько тегов <link>, указывая с помощью атрибута media их назначение. Важно отметить, что среди всех таблиц стилей их приоритет самый низкий
Например:
<head>
<link rel="style1" href="css/style1.css" media="all">
</head> 

Внутренние стили

Внутренние стили также находятся внутри тегов <head>...</head>, но они определяются внутри тегов <style>...</style>. Их приоритет выше внешней таблицы стилей
Например:
<head>
<style>
h1 { color: bright-red; }
</style>
</head> 

Встроенные стили

Встроенные стили пишутся непосредственно в сам тег, используя атрибут style.
Например:
<span style= color: "#444444"; font-family: "open sans";>

Очень важными во всём CSS являются понятия наследования и каскадирование.
Наследование по названию же не очевидно является механизмом, с помощью которого возможна передача свойств от предков к потомкам. Наследуемые свойства: color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing. Также существует возможность принудительно присвоить наследуемость любого свойства с помощью атрибута inherit.
Каскадирование - механизм, который который управляет конечным результатом в ситуации, когда к одному элементу применяются несколько CSS стилей. Есть три главных критерия, по которым происходит каскадирование: наличие ключевого слова !important после значения свойства, отбор стилей по их специфичности (выбирается более специфичное свойство), и по порядку подключённых таблиц (выбирается то, что находится ниже HTML документе).

Зная, что такое CSS появляется вопрос - как этим пользоваться? Нужно ли он вообще или одного HTML может хватить?А какие вообще есть опции форматирования в CSS? С помощью CSS можно позиционировать элементы, преобразововать и стилизовать тексты, создавать ссылки, списки, форматировать фоны и обрамлять элементы. Но о каждом подробнее отдельно!