1. ОСНОВЫ CSS Основным понятием CSS (Cascading Style Sheets – каскадные таблицы стилей) является стиль – то есть набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какомулибо элементу определенных свойств (таких, как цвет, размер, положение на странице и пр.) приходится каждый раз описывать эти свойства, даже если на одной странице должны располагаться 10 или 110 таких элементов, не отличающихся друг от друга. CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик необходимо один раз описать этот элемент и определить это описание как стиль. А в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, относится к данному стилю. 1.1. Синтаксис CSS 1.1.1. Описание стиля Синтаксис определения стиля состоит из двух частей: селектора и блока определений, заключенного в фигурные скобки ({}) (рисунок 1.1). Каждое определение заканчивается точкой с запятой. Определение включает свойство и значение этого свойства, разделенные двоеточием. На рисунке 1.1 определен стиль, который устанавливает для всех абзацев страницы размер шрифта 10 пикселей и цвет шрифта – красный. селектор определение p{ значение color : red; font-size : 10px; свойство } Рисунок 1.1. Описание CSS-стилей В качестве свойств каждого определения используются атрибуты, определенные в CSS для конкретных элементов. Например, для абзаца текста – это выравнивание, отступ красной строки, интервал между строками и пр. В качестве значений атрибутов могут выступать: - перечень слов, типа right, left, center, которые определены для конкретного свойства; - описание цвета HTML в различных форматах, например, красный цвет можно задать как red, #FF000 или rgb(255,0,0); - числовое значение с указанием процента или единицы измерения: px - размер в пикселях; in - размер в дюймах, один дюйм = 2,54 сантиметра; cm - размер в сантиметрах; mm - размер в миллиметрах; pt - размер в пунктах, один пункт = 1/72 дюйма; pc - размер в пиках (12 пунктов); 1 - ссылка на некоторый файл, обозначается url(путь_к_файлу/имя_файла), причем путь определяется от текущего положения страницы, где этот стиль используется, путь может отсутствовать. Связь между CSS и HTML Каждому атрибуту и тегу HTML, отвечающему за форматирование, можно поставить в соответствие некоторое свойство стилей CSS. Это позволяет «очистить» код от множества тегов и атрибутов форматирования. Ниже приведены некоторые соответствия между атрибутами (тегами) и стилями: … … … align = "center" (для текста) - color : red; font-size : 16px; font-weight: bold; text-align : center; В следующем примере из HTML-кода вынесены все элементы форматирования, создан стиль для абзаца. В результате HTML-код получился «чистым». Исходный HTML CSS

Форматирование текста

p{ text-align :justify; font-weight: bold; font-size : 16px;} HTML

Форматирование текста

1.1.2. Типы селекторов Селектор – это формальное описание того элемента или группы элементов, к которым применяется описание стиля. В качестве селекторов могут выступать: 1. Название HTML-тега (H1, P, TD, A и т. д.). В этом случае заданные в блоке определений стили будут применены ко всем HTML-тегам, использованным в качестве селектора. Например, определим стили для заголовка уровня 1 и абзаца текста. Заголовок будет иметь полужирное начертание и размер шрифта 16 пикселей, а абзац отформатируем по правой границе страницы, также установим размер шрифта 12 пикселей. CSS Страница в браузере h1 { font-weight: bold; font-size : 16px;} CSS стиль описание p{ text-align :right; font-size : 12px;} HTML

CSS

стиль

описание

2. Имена классов. CSS реализует возможность присваивать стили не всем элементам, созданных с помощью некоторого тега, а избирательно. Для этого в качестве атрибута тега используется class, после которого следует его имя. Атрибут class применяется в случае, если необходимо создать одинаковый стиль для нескольких элементов страницы, возможно 2 реализуемыми разными тегами. При описании стилей для класса перед его названием ставится точка (.). В следующем примере создается класс, который определяет выравнивание по центру страницы и полужирное начертание шрифта. Этот класс задается для заголовка уровня 1 и одного абзаца текста. В результате заголовок и первый абзац будут иметь одинаковое форматирование, в то время как второй абзац будет иметь форматирование, установленное для тега

(по умолчанию или с помощью стилей). СSS Страница в браузере .center{ text-align : center; font-weight: bold; } CSS стиль описание HTML

CSS

стиль

описание

3. Имена элементов. В случае если некоторый элемент страницы должен иметь особенное, отличное от других форматирование, CSS позволяет описать стиль отдельного элемента. Для этого в HTML-коде этому элементу необходимо присвоить имя с помощью атрибута id. Имя должно быть уникальным для этой страницы. При описании стиля перед именем документа указывается решетка (#). В следующем примере для абзаца с именем par1 задано выравнивание по центру страницы и цвет шрифта – красный. Соответственно, только этот абзац будет иметь заданное форматирование. Остальные абзацы имеют форматирование, определенное для тега p. CSS-стиль Страница в браузере #par1 { color : red; text-align : center;} CSS стиль HTML code

CSS

стиль

Задания для самостоятельного решения 1. Для приведенной ниже HTML-страницы создайте стили, которые бы «очистили» HTML-код (в коде не должно быть атрибутов за исключением id и class).

Основы HTML

Оглавление

Структура документа

3 Форматирование текста

Характеристики шрифта

Характеристики абзаца

Оформление документа

Пояснение. Для рисунков используйте следующие соответствия атрибутов HTML и ССS- свойств: width = "60px" height = "60px" align = "left" align = "right" - width : 60px; height : 16px; float : left; float : right; 1.1.3. Хранение и описание стилей Существует три различных способа хранения стилей: 1. В отдельном файле с расширением css. Этот способ используется, если стили будут применяться к нескольким страницам. Тогда во всех этих страницах необходимо подключить созданный css файл. Для этого в заголовке HTML-документа (…) задается следующий тег, Этот тег указывает, что стили для элементов описаны в файле style.css. 2. Описание стилей можно хранить непосредственно в коде HTML-страницы. В этом случае область действия стилей распространяется только на текущую страницу. Стили задаются в заголовке документа с помощью парного тега style, в котором располагаются описания стилей. 2. Описание стиля может располагаться непосредственно внутри тега элемента. Это делается с помощью атрибута style:

Стили CSS

Этот метод нежелателен: он приводит к потере одного из основных преимуществ CSS – возможности отделения кода HTML от описания его оформления. Если для одного HTML-документа применяется несколько способов хранения стилей, то действуют следующие правила старшинства стилей: 1. сначала применяются стили умолчания браузера; 2. стили умолчания браузера переопределяются прилинкованными стилями (теми стилями, которые хранятся в отдельном файле и подключаются к странице тегами link); 3. прилинкованные стили переопределяются описаниями стилей в теге style текущей страницы; 4. стили тега style переопределяются атрибутом style в любом из тегов страницы. Задания для самостоятельного решения 1. Дана следующая HTML-страница, а также файл со стилями style.css. style.css: h1{ 4 text-align : center; } .center{ text-align : center; } #red { color : red; } HTML-страница:

CSS

Cтиль

Oписание

Для данного кода определить: а) как будет расположен заголовок «CSS» на странице? б) как на странице будет выровнен абзац «Стиль»? в) каким цветом будет выведен абзац «Описание»? 2. Применить описанные выше стили к следующему HTML-коду, чтобы страница выглядела так: HTML-код Страница в браузере CSS

CSS

Cтиль

Описание

стиль описание 1.2 CSS-стили 1.2.1. Стили для шрифта Свойство font - универсальное свойство, позволяющее одновременно задать несколько свойств шрифта, приведенных в таблице 1.1. Таблица 1.1. Свойства шрифта 5 Свойство Возможные значения color цвет текста font-style наклон шрифта font-weight насыщенность шрифта font-size размер шрифта line-height размер межстрочного интервала. font-family тип шрифта для отображения текста normal - обычный прямой шрифт, без наклона (по умолчанию). italic - курсивный шрифт - наклонный шрифт, имитирующий рукописный. oblique - наклонный шрифт, курсив. normal - шрифт стандартной толщины (по умолчанию) bold - cтандартный полужирный шрифт именованный размер: xx-small, x-small, small, medium, large, x-large, xx-large. точный размер, задаваемый числом с единицей измерения: стандартные единицы, применяемой для стилей (px и пр.); em - ширина буквы m в настоящем шрифте (1em – текущий размер шрифта, можно брать любые пропорции от текущего шрифта: 2em, 0.5em) ex - высота буквы x в настоящем шрифте. размер в процентах, задаваемый числом и знаком процента. normal - высота межстрочного интервала зависит от размера и вида шрифта, вычисляется автоматически (по умолчанию); число-множитель - положительное число, на которое умножается размер текущего шрифта, и результат будет считаться размером межстрочного интервала; число с единицей измерения; число% - процент будет вычисляться от размера текущего шрифта. имя шрифта - имя или имена шрифтов через запятую, браузер воспользуется первым шрифтом из списка, найденным на компьютере пользователя семейство - одно из семейств шрифтов: serif, sans-serif, monospace, fantasy или cursive – используется, если ни один из перечисленных в списке шрифтов не установлен. Например, создадим следующий стиль шрифта для абзацев: CSS-стиль Страница в браузере p{ Абзац - это... font-weight: bold; font-style: italic; font-size: 14px; line-height:16px; font-family: arial; Способы форматирования абзаца: по центру, по правому краю, левому краю, по ширине. } HTML code

Абзац - это...

Способы форматирования абзаца: по центру, по правому краю, левому краю, по ширине.

Такой же стиль шрифта можно создать, используя обобщенное свойство font. Его значения могут быть любыми из таблицы 2.1 (за исключением color). При перечислении они разделяются пробелами, их порядок должен быть таким же, как в таблице 2.1, при этом обязательными являются только значения свойств font-family и font-size. Значения line-height можно указать только в паре с font-size, разделив их символом «/». Объявление стиля шрифта из предыдущего примера будет выглядеть следующим образом: 6 p{ font: bold italic 14px/16px arial; } Необходимо отметить, что относительные единицы измерения, такие как проценты, em, ex «работают» только внутри тегов div и span, которые будут рассмотрены ниже. В следующем примере текст «Абзац – это …» будет выведен в два раза больше основного текста: CSS-стиль Страница в браузере Абзац - это... p{ font-size: 200%; } HTML code

Абзац - это...

Способы форматирования абзаца: по центру, по правому краю, левому краю, по ширине.

Способы форматирования абзаца: по центру, по правому краю, левому краю, по ширине. Задания для самостоятельного решения 1. Создайте стиль описания текстовых фрагментов (абзацев текста), для которого используется: - синий цвет шрифта; - курсивное начертание; - размер шрифта, равный 0.5 дюйма; - межстрочный интервал – двойной размер текущего шрифта. 2. Дано следующее описание шрифта для абзаца, перепишите этот стиль, используя обобщенное свойство font: p{ font-size : 150%; font-weight : bold; line-height : 1.5; } 3. Напишите HTML-код и необходимые стили, чтобы в данном фрагменте каждый вложенный текст был в 1.5 раз меньше предыдущего (рисунок 1.2): Рис. 1.2. Образец страницы 1.2.2. Стили для текста Для описания различных характеристик текста используются свойства стилей, приведенные в таблице 1.2. 7 Таблица 1.2. Свойства текста Возможные значения Свойство letter-spacing определяет длину интервала между буквами text-align выравнивает содержимое блочного элемента относительно границ блока, а так же содержимое ячеек таблицы по горизонтали text-decoration определяет размер отступа первой строки в тексте text-indent устанавливает величину отступа первой строки текста vertical-align определяет выравнивание содержимого внутри элемента word-spacing точный размер, задаваемый числом с единицей измерения: стандартные единицы, применяемой для стилей (px и пр.); em - ширина буквы m в настоящем шрифте; ex - высота буквы x в настоящем шрифте; размер в процентах, задаваемый число и знаком процента. left - выравнивание текста по левой границе. right - выравнивание по правой границе. center - выравнивание по центру. justify - выравнивание по ширине. none - отменяет все оформительские приемы. underline - текст будет отображаться с нижним подчеркиванием. overline - текст будет отображаться с верхним подчеркиванием. line-through - текст будет отображаться зачеркнутым. blink - текст будет мигать на экране с частотой примерно 1 раз в секунду. точный размер, задаваемый числом с единицей измерения, при указании отрицательного значения, первая строка будет выступать над остальными строками. размер в процентах, задаваемый числом и знаком процента, в этом случае процент вычисляется от ширины блока, внутри которого находится строка . baseline - выравнивает базовую линию элемента по базовой линии охватывающего элемента. sub - отображает элемент со сдвигом вниз, размер не меняется. super- отображает элемент со сдвигом вверх, размер при этом не меняется. text-top - верхняя граница элемента будет выравниваться по самому высокому текстовому элементу строки. text-bottom - нижняя граница элемента будет выравниваться по самому нижнему краю текущей строки. точный размер, задаваемый числом с единицей измерения, поднимает (положительное число) или опускает (отрицательное число) элемент на указанную величину относительно базовой линии. размер в процентах - поднимает (положительное число) или опускает (отрицательное число) элемент на указанную величину (процент от значения line-height). точный размер, задаваемый числом с единицей измерения. определяет расстояние между словами. Например, создадим следующий стиль для абзаца текста; CSS-стиль Страница в браузере p{ Стиль – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. text-align : justify; text-indent : 30px; color : blue; word-spacing : 30px; } HTML code 8

Cтиль – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы.

В следующем примере используются различные значение свойства verticalalign, для выделения фрагментов текста используется тег span. CSS-стиль Страница в браузере

J a v a S cr i pt

Задания для самостоятельного решения 1. Создайте стиль описания абзацев текста, для которого определено: - выравнивание по левой границе; - расстояние между словами – в 5 раз шире, чем буква m текущего шрифта; - отступ красной строки – 1 см; - буквы в словах выводятся в «р а з р я д к у ». 2. Напишите HTML-код со стилями CSS так, чтобы на странице выводился логотип системы LaTeX (рисунок 1.3). Рис. 1.3. Логотип LaTeХ 9