CASCADING STYLE SHEETS

CASCADING STYLE SHEETS, CSS
Каскадные таблицы стилей
CSS (англ. CASCADING STYLE SHEETS - Каскадные таблицы стилей) - технология описания внешнего вида документа, написанного языком разметки
CSS представляют собой средство разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.

Описание и применение стилей CSS
При работе с CSS предусматривается, что сначала стиль создаётся, а потом применяется. Поэтому отдельно рассматриваются способы (области) ОПИСАНИЯ стилей и способы ПРИМЕНЕНИЯ стилей
Тем не менее есть способ описания и использования в КОНКРЕТНОМ МЕСТЕ. В этом случае стиль одновременно создаётся и используется. При этом теряются основные преимущества CSS по сравнению со стандартными средствами HTML для оформления документов.

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

Способы описания стилей CSS
Описание (и использование) стиля
В КОНКРЕТНОМ МЕСТЕ непосредственно в элементе разметки (прямо внутри тега);
Описание стиля в отдельной области:
размещение описания стиля в шапке документа в элементе
; <br>размещение описания стиля в файле CSS <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-5.jpg" target="_blank" rel="noopener">Слайд 6</a><h3 class="slides-content text-center font-bold"><div><p>Способы применения и синтаксис<br><p>Способы применения<br>В КОНКРЕТНОМ МЕСТЕ непосредственно внутри элемента разметки<br>Переопределение стиля</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/374612/slide-5.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-5.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-5.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-5.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-5.jpg"><!----><div class="slides-content">тега (элемента разметки)<br>Использование классов<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-6.jpg" target="_blank" rel="noopener">Слайд 7</a><h3 class="slides-content text-center font-bold"><div><p>Суть основных способов применения стилей<br><p>Переопределение стиля тэга (элемента разметки)<br>При этом способе, задав</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/374612/slide-6.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-6.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-6.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-6.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-6.jpg"><!----><div class="slides-content">один раз стиль (например, выравнивание по центру, тёмно-синий цвет, большой шрифт) для определенного тэга (например, <h1>), каждый раз при использовании данного тэга, будет применен заданный стиль.<br>Т.е. всё заголовки (h1) будут тёмно-синими, большими, выравненными по центру<br>Использование классов<br>При этом способе стиль описывается один раз, а используется в указанных местах (тэгах) HTML-кодах. Т.е. можно сделать, чтобы данный стиль был применен к некоторым заголовкам и некоторым параграфам, а к остальным не применен. Данный способ наиболее универсальный.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-7.jpg" target="_blank" rel="noopener">Слайд 8</a><h3 class="slides-content text-center font-bold"><div><p>Способы применения и синтаксис<br><p><style><br>Связь с файлом CSS<br><link rel="stylesheet" type="text/css" href="styles.css"><br>Синтаксис создания стиля<br>аттр.:зн-ие;</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Способы применения и синтаксис Связь с файлом CSS Синтаксис создания стиля аттр.:зн-ие;" 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/374612/slide-7.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-7.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-7.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-7.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-7.jpg"><!----><div class="slides-content">аттр.:зн-ие…<br>Пример:<br>font-size:14pt; background-color:yellow; text-align:right<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-8.jpg" target="_blank" rel="noopener">Слайд 9</a><h3 class="slides-content text-center font-bold"><div><p>Синтаксис описания и применения стилей<br></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/374612/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-8.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-8.jpg"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-9.jpg" target="_blank" rel="noopener">Слайд 10</a><h3 class="slides-content text-center font-bold"><div><p>Синтаксис составных конструкций при описании стилей<br><p>1. Перечисление селекторов, для которых действует данное</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Синтаксис составных конструкций при описании стилей 1. Перечисление селекторов, для которых действует" 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/374612/slide-9.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-9.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-9.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-9.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-9.jpg"><!----><div class="slides-content">описание стиля<br>selector[, selector[, ...]]{ attribute:value;[atribute:value;...] } <br>2. Иерархия вложенности селекторов, для совокупности которых определен стиль.<br>selector selector [selector ...] { attribute:value;[atribute:value;...] } <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-10.jpg" target="_blank" rel="noopener">Слайд 11</a><h3 class="slides-content text-center font-bold"><div><p>Переопределение стиля в конкретном месте непосредственно в элементе разметки (прямо внутри тега)<br><p>Синтаксис:<br><тэг</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/374612/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-10.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-10.jpg"><!----><div class="slides-content">style=“аттр1.:зн-ие1;аттр2.:зн-ие2;…”><br>Примеры:<br><H1 STYLE="font-weight: normal;<br>font-style:italic;font-size:10pt;"><br>Заголовок первого уровня</H1><br><HR STYLE="width:100px;"><br> <P STYLE=“font-size:14pt; background-color:yellow; text-align:right”>пример параграфа</p><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/374612/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Размещение описания стиля в заголовке документа в элементе STYLE
<br><p><HEAD><br><STYLE><br>p { color:darkred;text-align:justify;font-size:8pt;</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Размещение описания стиля в заголовке документа в элементе STYLE p { color:darkred;text-align:justify;font-size:8pt;" 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/374612/slide-11.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/374612/slide-11.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/374612/slide-11.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-11.jpg 1440w" class="slides-image" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/374612/slide-11.jpg"><!----><div class="slides-content">}<br>
...
Этот параграф мы используем как пример применения описания стиля для стандартного элемента HTML-разметки.
...

Размещение ссылки на внешнее описание
Размещение ссылки на внешнее описание через элемент LINK
Импорт описания стиля в документ
<br>@import:url(http://intuit.ru/styles.css)<br>

Styles.css
body
{
font-family: Garamond, Times New Roman, Times;
background-color: rgb(51,102,204);
color: rgb(255,255,153);
}
table
{
table-border-color-light: rgb(153,255,204);
table-border-color-dark: rgb(0,0,51);
}
h1, h2, h3, h4, h5, h6
{ font-family: Verdana, Arial, Helvetica; color: rgb(255,204,0);}
div .menu
{background-color: rgb (0,200,50)}

Атрибуты CSS

Свойства блоков
width, height - ширина и высота
margin, padding - Внешние и внутренние отступы
margin (padding) – отступы со всех сторон сразу
margin-left (padding-left) - слева
-”- - right
-”- - top
-”- - bottom

Свойства блоков
display – Отображаемость. Значения: block (видим), none (невидим)
position – Положение. Значения: relative (относительное), absolute (абсолютное)

Настройки цвета и текста
Цвет (red; rgb(255,255,153))
color - цвет текста
background-color – цвет фона
Текст
text-align - выравнивание. значения: left, right, center
text-decoration – оформление текста. значения: underline (подчеркнутый), line-through (перечеркнутый), none (нет);

Настройки шрифта
font-family – семейство (arial, times)
font-size – размер (указывать pt). пример: font-size:14pt;
font-weight – жирность. значения: bold (жирный), normal
font-style – стиль. значения: italic (курсив), normal

Контрольные вопросы

Контрольные вопросы
Что такое CSS? Каков смысл CSS?
Основные преимущества CSS по сравнению со стандартными средствами HTML для оформления документов
Основные способы описания стилей CSS
Основные способы применения стилей CSS. В чём их суть?
Каков синтаксис создания стиля?
Каков синтаксис описания и применения стилей?
Назовите основные атрибуты CSS

Контрольные вопросы
Какой атрибут используется для задания ширины?
Какой атрибут используется для задания высоты?
Какой атрибут используется для задания внешних отступов?
Какой атрибут используется для задания внутренних отступов?
Какой атрибут используется для задания отображаемости?
Какой атрибут используется для задания положения?
Какой атрибут используется для задания цвета текста?
Какой атрибут используется для задания цвета фона?