CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) –
Каскадные таблицы стилей - это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён:
к отдельному тегу - элементу, или
одновременно ко всем идентичным элементам на всех страницах сайта.
CSS по сути своего рода дополнение к HTML, которое значительно расширяет его возможности.
CSS (Cascading Style Sheets) –

Внедрение CSS в HTML документ
Осуществить данную задачу можно тремя способами:
Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.

Внедрение CSS в HTML документ
Осуществить данную задачу можно тремя способами:
Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).

Внедрение CSS в HTML документ
Осуществить данную задачу можно тремя способами:
Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

Атрибут STYLE
Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание.
Пишется так:
это параграф с индивидуальным стилем
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента.
это параграф с индивидуальным стилем
Пример:

пример
результат

НО, такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

Тег
<br><p>Для того, что бы описать необходимые элементы одновременно на всей странице</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Тег Для того, что бы описать необходимые элементы одновременно на всей странице" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/1031101/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/1031101/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/1031101/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1031101/slide-8.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/1031101/slide-8.jpg"><!----><div class="slides-content">в заголовок HTML документа внедряют тег <STYLE>
(не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Пример описания стилей:
Использование тегов для которых описан стиль:
В данном случае стили описываются в заголовке документа между тегами HEAD!!!!!

Внутри тега
идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

CSS
в отдельном внешнем файле.
открываем блокнот (или другой редактор) и пишем стилевые правила;
Сохраняем файл с расширением *.css (обычно файл со стилями называют style.css).

Подключить файл CSS к web – странице:
многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег
является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как
несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

Тег
имеет атрибуты:
href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
shortcuticon - Определяет, что подключаемый файл является иконкой.
stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
application/rss+xml - Файл в формате XML для описания ленты новостей.
type - MIME тип данных подключаемого файла.

Подключить файл CSS к web – странице:
ссылка приобретает следующий вид: type="text/css“>

Свойства текста
Выравнивание текста

Свойства текста
Выравнивание текста

Свойства текста
Оформление текста
ext-decoration позволяет декорировать текст, присвоив ему одно или несколько значений из ниже представленных вариантов оформления текста:
Ссылка без подчёркивания
В файле CSS "декорировали" ссылку элемент
, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег
подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}, Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент

Свойства текста
Отступ первой строки
Свойство text-indent - задаёт отступ первой строки в текстовом блоке с левой стороны.
Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS. В примере ниже расстояние отступа от левого края задаётся в пикселях (px):

Свойства текста
Трансформация текста
Своийство text-transform трансформирует символы в указанном текстовом блоке, делая их заглавными или прописными по одному из правил в зависимости от присужденного значения данному свойству.

Свойства текста
Вертикальное выравнивание
Вертикальное выравнивание текста в строке устанавливает свойство vertical-align
Возможные значения свойства vertical-align:

Свойства текста
Вертикальное выравнивание
Базовая линия - это линия, на которой располагаются "сидят" символы в текстовой строке, Например буква "А" сидит прямо на этой линии, а вот строчная буква "у" сидит на ней же, но свесив ноги.
Вертикальное выравнивание элемента относительно строки может выражаться в процентах, пикселях или любых других принятых в CSS единицах измерения, причем эти единицы могут принимать как положительные, так и отрицательные значения

Свойства текста

Свойства текста
Пробелы и перенос строки
Набранный текст, в каком либо текстовом редакторе браузерами по умолчанию выводится на экран в виде сплошного текста, где переносы строк расставляются автоматически, а так же убираются лишние (более одного) пробелы между символами.
Свойство white-space имитирует работу тега
, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

В вашей именованной папке да диске D
создайте папку с именем CSS.
Выполните задание из раздаточного материала
(уроки 1-5 )
Задание для индивидуальной работы