Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты. кандидат. - презентация

1 Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты. кандидат технических наук Павел Брониславович Храмцов

2 2 CSS: В чем прелесть? Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и дает полный контроль над формой представления элементов HTML-разметки

3 3 CSS: влияние на технологию 1.Сначала нужно определиться с номенклатурой страниц, т.е. все страницы проектируемого Web- узла разбить на типы, например,: домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.. У каждого узла этот перечень может быть своим. 2.Для каждого из типов страниц разрабатывается определенная логическая структура (стандартный набор компонентов страницы). 3.После этого разрабатывается навигационная карта узла и форма ее реализации на страница

4 CSS: влияние на технологию 4.Для каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS- описатель). 5.Теперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним.

5 5 Способы применения CSS переопределение стиля в элементе разметки размещение описания стиля в заголовке документа в элементе STYLE размещение ссылки на внешнее описание через элемент LINK импорт описания стиля в документ

6 6 Переопределение стиля Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки: Заголовок первого уровня

7 7 Элемент STYLE Элемент STYLE позволяет определить стиль отображения для: стандартных элементов HTML-разметки произвольных классов (селектор class) HTML-объектов (селектор id)

8 Пример p {color:darkred;text-align:justify; font-size:8pt;}... Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки. 8

9 9 Ссылка на описание стиля Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD.

10 10 Импорт стиля Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям a {color:cyan;text-decoration:underline;}

11 11 Синтаксис Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[,...]]{attribute:value; [atribute:value;...]} или selector selector [selector...] {attribute:value;[atribute:value;...]} Первый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.

12 12 Описание селектора Селектор - имя элемента разметки i, em {color:#003366,font-style:normal} a, i {font-style:normal;font-weight:bold; text-decoration:line-through} Первая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково: Это курсив и это тоже курсив Это курсив и это тоже курсив Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива: kuku kuku

13 Селектор - имя класса.kuku {color:darkred;background-color:white;} Этот параграф мы отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону. Этот параграф мы отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку мы отобразим темно- красным цветом по белому фону. 13

14 Селектор - идентификатор объекта Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом "#": a.mainlink {color:darkred;text- decoration:underline;font-style:italic;} #blue {color:#003366} основная гипертекстовая ссылка модифицированная гипертекстовая ссылка основная гипертекстовая ссылка модифицированная гипертекстовая ссылка 14

15 Наследование и переопределение Сначала применяются стили умолчания браузера Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). Прилинкованные стили переопределяются описаниями стилей в элементе STYLE Стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки 15

16 16 Элемент DIV DIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента:границей блокаотступами блока от границ старшего элемента "набивку"...

17 17 Элемент SPAN Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п. Стили могут пересекаться

18 18 Свойства блоков

19 19 Отступы (margins) p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;}

20 20 Набивка (padding) p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;}

21 21 Обтекание блока текста Атрибут float определяет плавающий блок текста. Он может принимать значения: left - блок прижат к левой границе охватывающего блок элемента; rigth - блок прижат к правой границе охватывающего блок элемента; both - текст может обтекать блок с обеих сторон. Атрибут clean – запрет обтекания: У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.

22 22 Управление цветом Цвет текста: td {color:darkred;} p {color:darkred;} i {color:#003366;font-style:normal;} Цвет фона:... как строковые элементы разметки p {background: gray no-repeat fixed center center;}

23 23 Шрифты font-family - семейство начертаний шрифта (гарнитура); font-style - прямое начертание или курсив; font-weight - "усиление" (насыщенность) шрифта, "жирность" букв; font-size - размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt); font-variant - вариант начертания (обычный или мелкими буквами - капитель).

24 24 Гарнитура Эта строка набрана пропорциональным шрифтом с засечками. Эта строка набрана пропорциональным шрифтом без засечек. Эта строка набрана моноширинным шрифтом.

25 25 Кегль (font-size) Кегль параграфа установлен в 12 пунктов Кегль параграфа установлен в 12 пикселей Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента Размер кегля large

26 26 Начертание Прямое начертание Курсив

27 27 Межбуквенные расстояния Межбуквенное расстояние 10pt