Основы css

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

Любое правило каскадных таблиц стилей
состоит из 2-х частей:
селектора и определения.
Селектором может быть любой тег HTML, для
которого определение задает, каким образом
необходимо его форматировать.
Определение также состоит из 2-х частей:
свойства и его значения, разделенных знаком
двоеточия.

Например, если необходимо, чтобы в документе все заголовки
первого уровня отображались синим цветом и размером в 16
пунктов, то в таблице следует задать правило:
Н1 {color: blue;
font-size: 16pt}
Н1 – селектор;
{color: blue;
font-size: 16pt} – определение;
color, font-size – свойства;
blue, 16pt – значение.

Существует четыре способа встраивания CSS в документ:
Внедрение
Связывание
Импортирование
Встраивание

При внедрении описание стилей находиться между тэгами
и размешаются между тегами
Пример:
<!--
P {
text-align : justify;
font-size : 10pt;
font-family : sans-serif;
}
-->
Пример внедрения
Внедрение

При связывании Вы располагаете стили в отдельном файле. Тогда между тегами каждого HTML документа нужно добавить ссылку на CSS файл:
Пример:
Пример связывания
Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться теги
.
Связывание

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Общий синтаксис следующий.
Импортирование
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
Импорт стиля
<br> @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */ <br>@import "/style/palm.css" handheld, print; /* Стиль для печати */ <br>
...
В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и palm.css — при печати страницы и отображении на КПК.

Типы носителей

Встраивание в тэги
Встраивание в тэги - тэги HTML имеют параметр style, в котором можно задать
стили.
Например, в следующем примере задаётся форматирование заголовка
втрого уровня, определяющее его отображение шрифтом красного цвета:
Пример:
встраивание
Пример встраивания

Пример использования CSS при работе со шрифтами
Шрифт
H1 {
font-family:</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример использования CSS при работе со шрифтами Шрифт H1 { font-family: Arial," 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/382729/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/382729/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/382729/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-10.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-10.jpg" class="slides-image"><!----><div class="slides-content">Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 150%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
Заголовок
Обычный текст

Виды селекторов

Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса“.
Имена классов выбираются по желанию, главное, чтобы они были понятны и соответствовали их использованию, при этом имя должно всегда начинаться с символа.

Пример использования классов
Классы
<br> P <br> {</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример использования классов Классы P { /* Обычный параграф */ text-align: justify;" 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/382729/slide-13.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/382729/slide-13.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/382729/slide-13.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-13.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-13.jpg" class="slides-image"><!----><div class="slides-content">/* Обычный параграф */ text-align: justify; /* Выравнивание текста по ширине */ <br> } <br> P.cite <br> { /* Параграф с классом cite */ <br> text-align: justify; /* Выравнивание текста по ширине */ <br> color: navy; /* Синий цвет текста */ <br> font-style: italic; /* Курсивное начертание */ <br> } <br>
Параграф без использования классов.
Параграф с использованием классов.

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса { свойство1: значение; свойство2: значение; ... }
При такой записи, класс можно применять к любому тегу.
Классы
<br> .cite <br> { <br> color: navy; /* Синий цвет текста */ <br> font-style: italic; /* Курсивное начертание */ <br> } <br>
Следует тщательно позаботиться о своем рабочем месте. Освещение в помещении отрегулировать таким образом, чтобы источник света находился сбоку. Во избежании медицинских осложнений
стул рекомендуется выбирать с мягким сидением
.

Идентификаторы
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля.
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
В отличие от классов идентификаторы должны быть уникальны, т.е. встречаться в коде документа только один раз.
Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора. Символ решетки при этом уже не указывается.
Синтаксис использования идентификатора следующий.

Пример использования идентификаторов.
Идентификаторы
<br>#help <br>{ <br>position: absolute; /*</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример использования идентификаторов. Идентификаторы #help { position: absolute; /* Абсолютное позиционирование */" 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/382729/slide-16.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/382729/slide-16.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/382729/slide-16.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-16.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-16.jpg" class="slides-image"><!----><div class="slides-content">Абсолютное позиционирование */ <br>left: 160px; /* Положение элемента от левого края */ <br>top: 50px; /* Положение от верхнего края */ <br>width: 225px; /* Ширина блока */ <br>height: 180px; /* Высота блока */ <br>background: #f0f0f0; /* Цвет фона */ <br>} <br>
Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент вы и догадываетесь, что помочь вам никто не сможет.

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий.
Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }
Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора.
Идентификаторы
<br>P <br>{ <br>color: green; /* Зеленый цвет текста */ <br>font-style: italic; /* Курсивное начертание текста */ <br>} <br>P#opa <br>{ <br>color: red; /* Красный цвет текста */ <br>border: 1px solid #666; /* Параметры рамки */ <br>background: #eee; /* Цвет фона */ <br>padding: 5px; /* Поля вокруг текста */ <br>} <br>
Обычный параграф
Параграф необычный

Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.
Например, задать стиль для тега
только когда он располагается внутри контейнера
. Т.о. можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1.
<Тег1>
<Тег2> ...

Пример использования контекстного селектора.
Контекстные селекторы
<br> P</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример использования контекстного селектора. Контекстные селекторы P B { font-family: Times, serif;" 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/382729/slide-19.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/382729/slide-19.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/382729/slide-19.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-19.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-19.jpg" class="slides-image"><!----><div class="slides-content">B <br> { <br> font-family: Times, serif; /* Семейство шрифта */ <br> font-weight: bold; /* Жирное начертание */ <br> color: navy; /* Синий цвет текста */ <br> } <br>
Жирное начертание текста
Одновременно жирное начертание текста и выделенное цветом

Пример использования контекстного селектора.
Контекстные селекторы
<br>A <br>{ color:</div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Пример использования контекстного селектора. Контекстные селекторы A { color: green; /* Зеленый" 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/382729/slide-20.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/382729/slide-20.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/382729/slide-20.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-20.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-20.jpg" class="slides-image"><!----><div class="slides-content">green; /* Зеленый цвет текста для всех ссылок */ } <br>.menu <br>{ padding: 7px; /* Поля вокруг текста */ <br>border: 1px solid #333; /* Параметры рамки */ <br>background: #fc0; /* Цвет фона */} <br>.menu A <br>{ color: navy; /* Темно-синий цвет ссылок */ } <br>.menu A:hover <br>{ color: red; /* Красный цвет ссылок при наведении на нее */ } <br>
Русская кухня
|
Украинская кухня
|
Кавказская кухня
Другие материалы по теме

Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют друг за другом в коде документа.
Lorem ipsum
dolor
sit
amet.
Теги
и
никак не перекрываются и представляют собой соседние элементы.
То, что они расположены внутри контейнера
, никак не влияет на их отношение.
Lorem
ipsum
dolor sit amet,
consectetuer
adipiscing
elit
.
Соседними здесь являются теги
и
, а также
и
. При этом
и
к соседним элементам не относятся из-за того, что между ними расположен контейнер
.
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.
Селектор 1 + Селектор 2 { Описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору 2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Соседние селекторы
<br> B + I <br></div></h3></h3><img onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Соседние селекторы B + I { color: red; /* Красный цвет текста" 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/382729/slide-22.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/382729/slide-22.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/382729/slide-22.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-22.jpg 1440w" src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/382729/slide-22.jpg" class="slides-image"><!----><div class="slides-content">{ <br> color: red; /* Красный цвет текста */ <br> } <br>
Lorem
ipsum
dolor sit amet,
consectetuer
adipiscing elit.
Lorem ipsum dolor sit amet,
consectetuer
adipiscing elit.
Пример использования соседних селекторов.
Замечание
Соседние селекторы не поддерживаются браузером Internet Explorer.

Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента.
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности.
Замечание
Дочерние селекторы не поддерживаются браузером Internet Explorer.
Синтаксис применения таких селекторов следующий: