§ 8. Понятие о каскадных таблицах стилей

В соответствии с концепцией современной веб-разработки html-код должен содержать только теги и контент в них. Для описания внешнего вида сайта используются стилевые правила специального языка разметки стилей — CSS.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида html-документа.

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

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

Способы подключения стилей CSS к html-документу:

  1. Встроенные стили — стилевое описание непосредственно в открывающем теге (пример 8.1). Действует только для этого тега.
  2. Таблицы стилей — стилевое описание для всех идентичных элементов веб-страницы (пример 8.2).
    Задается с помощью парного тега <style>, который должен находиться в заголовке документа. Стили html-элементов внутри тега <style> задаются в соответствии с определенным синтаксисом.
  3. Внешние таблицы стилей — стилевое описание html-элементов в отдельном файле (пример 8.3).

Внешние таблицы стилей — это файлы с расширением .css, которые содержат стилевые правила. Могут быть созданы в любом редакторе кода. Для подключения внешних таблиц стилей в заголовок html-документа помещается тег <link> с обязательными атрибутами:

  • href — ссылка на css-файл (на-пример, href = ”my_styles.css”);
  • rel = stylesheet — отвечает за установку взаимосвязи html-документа и css-файла;
  • type = text/css — описывает тип данных в таблице стилей.

Понятие каскадности CSS заключается в том, что стили, подключенные к html-документу разными способами, имеют различные приоритеты.

Наличие приоритетов означает, что сначала будут применены параметры форматирования, заданные во внешнем css-файле, а затем — прописанные в заголовке документа. В последнюю очередь форматирование будет дополнено или изменено в соответствии с параметрами, объявленными непосредственно в тегах.

На веб-странице при помощи CSS можно изменить:

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

С помощью CSS можно определять стиль и вид текста аналогично использованию тега <font>, задающего свойства шрифта. При этом стили обладают большими возможностями и позволяют сократить html-код. С атрибутами CSS, задающими свойства шрифта, можно познакомиться в Приложении к главе 2 (с. 110).

Стили шрифта задаются большим перечнем отдельных свойств. Запись, определяющую свойства шрифта, можно сократить. В сокращенной записи нужно быть осторожным с порядком указания свойств. Например, свойство size должно задаваться раньше, чем свойство family (пример 8.4).

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в Приложении к главе 2 (с. 110).

С помощью CSS задаются свойства блоков (пример 8.5).

Внутренние отступы в блоке (отступы от внешней границы блока до его содержания) задает свойство padding. Эти отступы иногда называют полями.

Существует несколько способов задания полей:

  1. padding: 10 px — одинаковые отступы со всех сторон;
  2. padding: 5 px 10 px — отступы сверху и снизу 5px, справа и слева 10px;
  3. padding: 5 px 10 px 15 px — отступы сверху 5 px, слева и справа 10 px, снизу 15 px;
  4. padding: 5 px 10 px 15 px 20 px — разные отступы со всех сторон, слева направо: верхний, правый, нижний, левый.
Внешние отступы блока (отступы от внешней границы блока до границ страницы или до соседних элементов) задает свойство margin. Способы задания внешних отступов аналогичны способам задания внутренних (пример 8.6).
Когда необходимо определить стиль для отдельного элемента веб-страницы или задать разные стили для одного тега, применяют классы (пример 8.7).
Синтаксис при использовании классов:
.Имя_класса { свойство1: значение; свойство2: значение; … }
Чтобы указать в html-коде, что тег используется с определенным классом, к тегу добавляется атрибут class= “Имя_класса”.
Классы гибкие, их можно создавать много и называть понятными именами. Имя класса может содержать в себе латинские буквы, цифры, символ дефиса (-) и подчеркивания (_). Начинаться имя должно с латинской буквы.
Созданный класс можно применять к любым элементам веб-страницы. С помощью классов можно придавать стиль не только целым заголовкам и абзацам, но и отдельным фрагментам страницы, например словам. Для этого нужно заключить слово в контейнер <span> и добавить атрибут class.

Хокон Виум Ли (род. 27 июля 1965 г., Норвегия) — ученый, специалист в области информатики, в 1994 г. предложил использовать каскадные таблицы стилей (CSS).  

Пример 8.1. Встроенные стили.
Стилевое описание:
<h1 style = “color: blue; font-style: italic”>Заголовок синий курсив</h1>

Отображение в браузере:

Пример 8.2. Таблицы стилей.
Стилевое описание:

<style>
h1 {color: blue; font-style: italic}
</style>

Разметка веб-страницы:

<body>
<h1>Заголовок 1</h1>
<hr>
<p>Абзац 1</p>
<h1>Заголовок 2</h1>
<hr>
<p>Абзац 2</p>
</body>
Отображение в браузере:
Пример 8.2. Продолжение.
Синтаксис подключения стилей к html-элементам в таблицах стилей:
Пример 8.3. Внешние таблицы стилей.
Описание стилей в css-файле:
h1
{color: red}
/*Заголовок красного цвета*/
body
{background: #ffffcc; font-family:
Verdana}
/*цвет фона #ffffcc, шрифт Verdana*/
Подключение css-файла к html- документу:
<head>
<link rel = stylesheet type = text/css href = “1.css”>
</head>
Отображение в браузере:
При использовании CSS следует руководствоваться следующими правилами:

  1. Использовать атрибут style для какого-либо элемента, только если стиль этого элемента отличается от стилей других аналогичных элементов сайта.
  2. Тег <style> со стилевым описанием использовать в том случае, если страница должна иметь индивидуальный дизайн, отличный от других страниц сайта.
  3. В большинстве случаев разумно выносить стилевые описания в отдельный css-файл.
Пример 8.4. Применение стилей форматирования шрифта.
p {
font-family: Tahoma;
/* Тип шрифта */
font-weight: bold;
/* Жирность шрифта */
font-size: 18pt;
/* Размер шрифта */
color: tomato;
/* Цвет текста */
text-align: center;
/* Выравнивание текста */
}
Сокращенная запись:
p {
font: bold 18pt Tahoma;
color: tomato; text-align: center;
}
Отображение в браузере:
Пример 8.5. Применение стилей для блока.
div {
width:80%;
/*Ширина блока */
background: #f0fff0;
/*Цвет фона*/
border: 3px solid limegreen;
/*Толщина, стиль и цвет границы */
padding: 10px;
/*Поля*/
font: 18pt Tahoma;
/*Размер и тип шрифта */
color: seagreen;
/*Цвет текста */
}
Отображение в браузере:
Пример 8.6. Отступы в блоке.
padding: 20px 10px;
margin: 10px 80px;
Отображение в браузере:
Пример 8.7. Использование классов в CSS.
Стилевое описание:
p {
/* Обычный абзац */
text-align: justify;
/*Выравнивание текста по ширине*/
}
.figura {
/* Абзац с классом figura */
color: navy;
/*Цвет текста*/
margin-left: 20px;
/*Отступ слева*/
border-left: 1px solid navy;
/*Граница слева от текста*/
padding-left: 15px;
/*Расстояние от линии до текста*/
}
Указание на использование класса:
<p class = “figura”>

 
1. Что такое каскадные таблицы стилей?
2. Какими способами можно подключить каскадные таблицы стилей к html- документу?
3. Каким образом определяются приоритеты при подключении каскадных таблиц стилей различными способами к одному html-документу?
4. Что можно изменять на веб-странице с помощью каскадных таблиц стилей?

Упражнения

1 Откройте файл 8.html. Оформите абзацы этой веб-страницы, используя встроенные стили.
• 1-й абзац — style = ”color: #c71585; font-style: italic” (цвет текста — лилово-красный, начертание — курсив).
• 2-й абзац — style = ”color: #c71585; font-size: 16px; text-align: justify” (цвет текста — лилово-красный, размер шрифта — 16 рх, выравнивание текста — по ширине).
• 3-й абзац — style = ”color: #dc143c; font-family: Arial” (цвет текста — малиновый, шрифт — Arial).
• 4-й абзац — style = ”color: teal; font-family: Verdana; font¬size: 16px” (цвет текста — зеленовато-синий, шрифт — Verdana, размер шрифта — 16 рх).
Сохраните страницу под новым именем.

2 Откройте файл 8.html. Оформите веб-страницу, используя таблицы стилей.
<style>
p {color: teal; font-style: italic; text-align: justify}
h1 {font-family: Verdana; text-align: center}
</style>
Сохраните страницу под новым именем.

3 Откройте файл 8.html. Оформите веб-страницу, используя внешние таблицы стилей (описание стилей в файле). Параметры стилей задайте самостоятельно. Сохраните страницу под новым именем.

4 Откройте файл. Примените к блокам текста различное форматирование, используя классы.

1-й блок:
div.b1 {
width: 300px; /* Ширина */
background: #d3d3d3; /* Цвет фона */
padding: 8px; /* Поля */
padding-right: 40px; /* Правое поле */
border: solid 1px black; /* Стиль, толщина и цвет границы */
float: left; /*Выравнивание блока по левому краю */
}
2-й блок:
div.b2 {
width: 300px;
background: #f0e68c;
padding: 8px;
border: solid 2px black;
float: left;
position: relative; /* Расположение блока относительно первого блока */
top: 40px; /* Смещение по вертикали вниз */
left: -70px; /*Смещение по горизонтали влево*/
}

Должно получиться:

Используйте класс для форматирования слова Призма во втором блоке. Описание класса:
.termin {font-family: Verdana}
Применение класса:
<span class = “termin”>npизма</span>

 

Проверь себя