CSS – это язык, позволяющий оформить внешний вид web-страницы и отчасти управляющий структурированием HTML-документов. CSS обладает большими возможностями по оформлению элементов веб-страниц, чем HTML.

СSS используется для оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, а также применяться к любым XML-документам.

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

Основные преимущества CSS:

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

CSS позволяет значительно сократить размер кода и сделать его читабельным.

CSS позволяет легко изменять внешний вид страниц. Представьте, Вы сделали сайт из 30 страниц, на которых все заголовки 36 размера. Для изменения размера заголовка указанного в CSS вам будет достаточно поменять только одну цифру.

 Более точный контроль над внешним видом страниц.

Различные представления для разных носителей информации (экран, печать, и т. д.).

 Сложная и проработанная техника дизайна.
ИНЛАЙНОВЫЙ СПОСОБ ПРИМЕНЕНИЯ CSS СТИЛЕЙ

Хотя CSS (Cascading Style Sheets) обычно не применяется для изменения вида каждого тега в отдельности, Вы можете задавать стили для конкретных тегов. Это особенно полезно, если вы хотите обойти другие установленные на странице стили.

На рисунке 1 показан общий синтаксис добавления стиля непосредственно в HTML-тег.

Рисунок 1. Инлайновый способ добавления css стилей

В этом примере с помощью универсального атрибута «style», применяемого для любого тега, устанавливается цвет заголовка.

ПРИМЕНЕНИЕ CSS СТИЛЕЙ ЧЕРЕЗ ТЕГ <STYLE></STYLE>

Для этого нужно включить правила стилей в теге <style></style> в заголовке документа (раздел HEAD), в соответствии с рисунком 2.

Если добавить стиль таким способом, то результат будет идентичен результату добавления стилей непосредственно в тег (при корректном использовании селекторов). Однако этот метод позволяет легко поменять стили всего документа из одного места.

Например, если вы будете использовать тег заголовка первого уровня в нескольких местах на Web-странице, вы сможете определить стиль тегов h1 в заголовке вашего документа. Этот стиль будет применен ко всем тегам <h1> в данном документе.

Рисунок 2. Расположение стилей в теге <style></style>

ПОДКЛЮЧЕНИЕ CSS ФАЙЛОВ. ТЕГ LINK

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

Создание внешнего CSS-файла состоит из двух этапов. Сначала в текстовом файле устанавливаются правила. Затем он импортируется или связывается с HTML-документом при помощи операции ©import и/или тега <link> соответственно (рисунок 3). Связанные или импортированные CSS- файлы работают так же, как если бы этот же код помещался в файле, в который

они импортированы или с которым связаны.

Рисунок 3. Схема подключения CSS-файлов и HTML-страниц

СОЗДАНИЕ ВНЕШНЕГО CSS-ФАЙЛА

Первый шаг при использовании внешней таблицы стилей на Web-сайте состоит в том, чтобы создать текстовый файл с расширением «.css», который включает весь CSS-код. Однако в отличие от встроенных стилей теги <style> не используются во внешнем CSS-файле.

1. Создайте новый файл с помощью любого текстового редактора или SublimeText3.

2. Добавьте на страницу правило CSS, написав селектор для определяемого тега и открывающую фигурную скобку. Селектор может принадлежать к одному из следующих типов:

•   селектор HTML-тега (например: h1;);

•  селектор класса (например: myClass;);

•   ID-селектор (например: #object;);
   группа селекторов, разделенных запятой, то есть список

  определений (например: h1, h2, .myClass;);

группа селекторов, разделенных пробелами, то есть проход по

дереву селекторов (от корневого, до дочернего). H1 {

color:red;

font-size: 16px; }

3. Напишите определения, которые нужно присвоить правилу в виде свойство: величина, и поставьте точку с запятой, чтобы разделить различные определения в списке.

4. Повторитешаги2-3длявсехселекторов,которыетребуетсязадать.

5. Сохраните документ как default.сss, где «default» — это любое имя файла, а «.сss» — это расширение, которое позволяет идентифицировать тип файла.

Создание ссылки на таблицу стилей

Внешние файлы таблиц стилей могут использоваться с любым HTML- файлом посредством тега <link>. На рисунке 4 показана общая структура ссылки на таблицу стилей.

Рисунок 4

@import. Импорт таблицы стилей

Другой способ добавления внешних таблиц стилей в документ заключается в том, чтобы использовать команду @import. Преимущество импорта состоит в том, что с его помощью вы можете не только поместить внешний CSS-файл в файл HTML-документа, но и поместить один внешний CSS-файл в другой. На рисунке 5 показана общая структура команды ©import.

Рисунок 5

ТИПЫ СЕЛЕКТОРОВ

Существуют 3 основных способа обращения к HTML-тегам:

Первый способ напрямую через имя тега. Например, для обращения к тегу p нужно написать:

p{
//Комментарий в CSS-коде
color: #ccc; //Цвет становится серым
font-size:18px; //Размер шрифта увеличивается до 18px.

}

Второй способ обратится через имя класса. У тегов можно объявлять атрибут класса:

Рисунок 6. Структура написания правил при обращении через имя html- тега

<p class=”myClass”>Текст абзаца</p>

Рисунок 7. Структура CSS-кода при обращении к классу

Рисунок 8. Структура CSS-кода при обращении к классу через HTML-тег

В CSS-коде же для обращения к тегу через значение класса пишем следующее:

.myClass {
color: #ccc; //Цвет становится серым
font-size:18px; //Размер шрифта увеличивается до 18px.

}

Хочу заметить, что на странице может быть несколько как одинаковых классов для разных тегов, так и много разных классов в одном теге:

<p class=”myClass secondClass greenText”>Текст абзаца</p> <span class=”myClass”>Текст</span>
<div class=”greenText”>Текст внутри контейнера</div>

Третий способ обращения к тегу через id. Как и селектор класса, ID- селектор можно использовать для создания уникальных, независимых от конкретного HTML-тега стилей. Таким образом, их легко приписать любому применяемому тегу. На рисунке 9 представлен общий синтаксис ID.

Рисунок 9

ID — основное понятие динамического HTML (DHTML). С помощью ID функция JavaScript определяет уникальный объект на экране. Это означает, что в отличие от класса ID обычно используется на странице один раз и определяет один элемент как объект. Этим объектом затем можно управлять с помощью JavaScript.

ID допускается определять внутри тега <style>… </style> в заголовке документа или во внешнем CSS-файле, который затем импортируется в HTML-

документ или связывается с ним при помощи ссылки.
Пример написания HTML-кода для обращения к тегу через id.
<p id=”greenText”>Текст абзаца</p>
В CSS-коде же для обращения к тегу через значение id пишем

следующее: #greenText {

color: green; //Цвет становится зеленым

font-size:18px; //Размер шрифта увеличивается до 18px. }

Если требуется, чтобы несколько селекторов имели одинаковое определение, запишите эти селекторы через запятую. Общий синтаксис для группы определений представлен на рисунке 10.

Рисунок 10. Структура обращения к нескольким селекторам.

Пример кода представлен ниже: p, h2, #greenText, .myClass {

color: green; //Цвет становится зеленым

font-size:18px; //Размер шрифта увеличивается до 18px. }

Определение стилей с одинаковыми правилами CSS допустимо определять внутри тега <style>… </style> в заголовке документа или во внешнем CSS-файле, который затем импортируется в HTML-документ либо связывается с ним.

Наследование родительских свойств

В соответствии с объектной моделью документа (Document object model (DOM)). Каждый тег на странице – это объект. Текст также является объектом. На рисунке 11 представлена примерная схема dom-модели, по своей сути – это дерево.

Рисунок 11 – Пример dom-модели документа

У всех HTML-тегов (объектов или элементов), которыми можно управлять с помощью CSS, есть родитель, то есть тег-контейнер, который его окружает.

HTML-теги обычно обладают теми же свойствами, что и их теги- родители. Это так называемое наследование стилей. Например, набор цветов, описанный в теге <body>, используется во всех тегах, находящихся внутри него.

Некоторые свойства не наследуются тегами, например, поля (margin), ширина (width), границы (border).

Термин «элемент» относится к различным частям HTML-документа, которые определяются с помощью тегов-контейнеров. Например, <р>Книга самурая</р> представляет собой HTML-элемент. Выражение <div><p><b> Книга самурая <img scr=»samuray.gif»></b></p></ div> также является HTML-элементом.

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

Составляющие элемента

У HTML-элемента есть четыре стороны: левая, правая, верхняя и нижняя. Они являются составляющими элемента, и к ним можно применять CSS- свойства. У каждой стороны элемента есть следующие свойства:

 ширина и высота (width, height) — длины сторон элемента. Ширина относится к верхней и нижней части, а высота — к левой и правой стороне. Длина параллельных сторон (левая/правая и верхняя/нижняя) одинакова. Если

вы не определите ширину и высоту элемента, это сделает браузер;
поле (margin) — пространство между рамкой и элементом и другими

элементами окна;
 граница (border) — линия, очерченная вокруг элемента. Рамка остается

невидимой до тех пор, пока не определен ее цвет, ширина и стиль, например сплошная или пунктирная линия;

 отступ (padding) представляет собой пространство между рамкой и содержимым элемента;

В центре элемента находится его содержимое (content). К этой области применяются все остальные CSS-свойства (шрифт, текст, цвет, фон и списки). Заметьте, что свойство «фон» относится и к заполненной части элемента. Содержимое включает в себя текст, списки, формы и изображения.

Определение стилей потомка

Определяются в строке следом за тэгами, классами и ID-селекторами. Состоят как правило из двух элементов, причем второй элемент является потомком (Рисунок 12).

Рисунок 12 – Определение стилей потомка Пример кода представлен ниже:

li a {

color:red; }

Определение стилей прямого потомка

Стиль прямого потомка означает, что стиль будет применяться только к тому элементу который является прямым потомком родительского элемента (Рисунок 13).

Рисунок 13 – Определение стилей прямого потомка

Пример кода представлен ниже:

li > a

{ color:red; }

Определение стилей сестринских элементов

Отношение между двумя элементами, размещенными рядом (рисунок 14). li +li
{color:red;}
! Примечание: Поддерживается Mazilla, Opera.

Рисунок 14 – Определение сестринских элементов

Универсальный селектор

Применяются ко всем элементам и обозначаются звездочкой (*). *
{
color:red;

}

Определение стилей атрибутов

Поиск соответствий, базирующий на атрибуте. a[href]

{
text-decoration: none;

}

Поиск соответствий, базирующийся на значении a[href=’yandex.ru’]
{

text-decoration: none; }

ОПРЕДЕЛЕНИЕ ССЫЛОК СТИЛЕЙ С ПСЕВДОКЛАССАМИ

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

Большинство браузеров позволяют вам задавать цвет ссылок для различных состояний (ссылка, посещенная ссылка и активная ссылка) в теге <body> документа. При помощи CSS вы можете указать не только цвет, но и другие CSS-свойства для ссылок.

Хотя ссылка представляет собой тег (<а>), ее индивидуальные атрибуты не являются тегами. Чтобы задать эти свойства, вам придется использовать псевдоклассы, связанные с состояниями, которыми может обладать ссылка: ссылка, посещенная ссылка, ссылка при наведении и активная ссылка.

Таблица 1. Псевдоклассы

ОПРЕДЕЛЕНИЕ СТИЛЕЙ С ПСЕВДОЭЛЕМЕНТОВ

Псевдоэлементы – это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью.

Таблица 2. Псевдоэлементы Псевдокласс Описание

:first-letter Первая буква элемента :only-child

:first-line Первая строка текста в элементе

Псевдокласс :only-child применяется к дочернему элементу,

только если он единственный у родителя.

Значение !important

Значение !important служит для того, чтобы присвоить определению максимальный приоритет в каскадном порядке. На рисунке 15 показано, как использовать это значение.

Определение каскадного порядка

Таблицы стилей внутри одной Web-страницы могут быть связанными, импортированными и встроенными.

Во многих браузерах пользователи могут создавать собственные таблицы стилей и задействовать их поверх ваших. Естественно, что при применении двух или более таблиц стилей одновременно появится проблема выбора определения, которое имеет больший приоритет. Какое важнее? Разгадка кроется в самом названии каскадных таблиц стилей.

Каскадный порядок в подобных ситуациях определяется по следующим правилам, в соответствии с таблицей 3.

Таблица 3. Веса селекторов

Селектор тега:

Селектор класса:

Селектор ID:

Inline-стиль:

Селектор

ID

Класс

Тег

1

10

100

1000

Общий вес

p 0011

.your_class

p.your_class

#your_id

0 1 0 10

0 1 1 11

1 0 0 100

#your_id p 1 0 1 101 #your_id .your_class 1 1 0 110 pa 0022 #your_id #my_id .your_class p a 2 1 2 212

Особенности каскадности стилей:
 существование атрибута !important. Определению присваивается

максимальный приоритет, если этот атрибут в нем присутствует. Многие браузеры позволяют создавать собственные таблицы стилей. Теоретически, если и автор страницы, и посетитель включили в определение значение !important, то преимущество получит определение пользователя;

 источник правил. Таблица стилей автора страницы должна перекрывать таблицу стилей пользователя, если последний не включил атрибут !important. На самом деле браузеры скорее отдадут предпочтение таблицам стилей пользователя, а не Web-дизайнера;

 специфичность. Чем специфичней правило, тем выше его каскадный приоритет. Значит, чем больше в правиле HTML-селекторов, ID-селекторов или селекторов класса, тем оно важнее. При определении приоритета ID-селекторы получают 100 очков, классы — 10, а HTML-селекторы — всего одно очко. Следовательно, селекторы ОL OL OL.cool приобретают вес 13 (то есть 1+1+1+10), а вес Р равен единице. Такая установка приоритета может показаться странной, но она позволяет присвоить больший вес контекстным и ID-правилам и гарантирует их использование;

 последний выигрывает. CSS считает более приоритетным последнее из перечисленных правил. Это особенно полезно, если вы включаете определение в строку, чтобы перекрыть установки стилей, перечисленные в заголовке.

@MEDIA. ТАБЛИЦЫ СТИЛЕЙ ДЛЯ РАЗНЫХ ТИПОВ УСТРОЙСТВ

Создав таблицы стилей для разных устройств вывода (принтер, экран КПК, телевизор и т.п.) можно настроить автоматическое применение необходимой таблицы стилей для используемого пользователем устройства.

Например:
<link rel=»stylesheet» type=»text/css» href=»/css/print.css» media=»print» /> <link rel=»stylesheet» type=»text/css» href=»/css/screen.css»

media=»screen» /> или

@media screen { /* Стиль для отображения в браузере */ BODY

{
color: red;

}

Первая таблица стилей будет использоваться для печати на принтере, вторая для вывода на цветной монитор. В таблице 3 перечислены современные типы устройств вывода информации, которые включены в спецификацию CSS3, а также возможные значения, но считающиеся устаревшими.

Таблица 1.3. Перечень типов носителей информации

aural

embossed

print

screen

Предназначено для речевых синтезаторов. Значение считается устаревшим.

Устройства, предназначенные Брайля. Значение считается устаревшим.

для печати шрифта

Предназначен для печатных страниц и для режима предварительного просмотра печати.

Экраны компьютера.

projection Устройства проекционного типа (проекторы). Значение считается устаревшим.

@PAGE. УСТАНОВКА ПОЛЕЙ ДЛЯ СТРАНИЦЫ ПРИ ПЕЧАТИ

Для установки полей на странице используется универсальное свойство margin или его производные — margin-top, margin-right, margin-bottom и margin- left, задающие соответственно отступ сверху, справа, снизу и слева.

Ключевое слово :left позволяет задать поля для всех левых страниц, :right — для всех правых, а :first — для первой страницы.

@page :first

{
margin: 2cm; /* Отступы для первой страницы */
}
@page :left
{
margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */ }
@page :right
{
margin: 1cm 3cm 1cm 3cm; /* Отступы для всех правых страниц */ }
! Не поддерживается IE6 и IE7. Chrome 9, 10, 11, 12. Firefox 2,3,4.

Свойства с сокращенной формой записи

При написании некоторых свойств таблиц стилей разрешена их сокращенная запись.

Например:

p {

}
что равнозначно следующему: p
{

border: 2px solid red; }

Комментарии в CSS

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

/* p {

} */

Единицы измерения в CSS

border-width:2px; border-style:solid; border-color:red;

border-width:2px; border-style:solid; border-color:red;

CSS поддерживает множества единиц измерения. Условно их можно разбить на абсолютные (сантиметры, пункты, пиксели) и относительные (проценты, em, rem, vh, vw и т.д.). В таблице ниже представлены единицы и их краткое описание.

cm Определяет измерение в сантиметрах.

ex Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x

шрифта.

mm Устанавливает измерение в миллиметрах.

vh Равен 1% высоты окна просмотра.

vmin Равен 1vw или 1vh, в зависимости от того, что меньше.

p {padding- top: 1cm;}

p {letter- spacing: 7ex;}

div {margin: .15mm;}

h1 {font-size: 2.0vh;}

div {font- size: 5vmin;}

in Определяет измерение в дюймах. h2 {word- spacing:

.10in;}

vw Равен 1% ширины окна просмотра. h2 {font-size: 2.0vw;}