Виды войск
<<  Инновационные технические средства образовательного назначения Социальные институты  >>
Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей
Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей
CSS: В чем прелесть
CSS: В чем прелесть
CSS: влияние на технологию
CSS: влияние на технологию
CSS: влияние на технологию
CSS: влияние на технологию
Способы применения CSS
Способы применения CSS
Переопределение стиля
Переопределение стиля
Элемент STYLE
Элемент STYLE
Пример
Пример
Ссылка на описание стиля
Ссылка на описание стиля
Импорт стиля
Импорт стиля
Синтаксис
Синтаксис
Описание селектора
Описание селектора
Селектор - имя класса
Селектор - имя класса
Селектор - идентификатор объекта
Селектор - идентификатор объекта
Наследование и переопределение
Наследование и переопределение
Элемент DIV
Элемент DIV
Элемент SPAN
Элемент SPAN
Свойства блоков
Свойства блоков
Отступы (margins)
Отступы (margins)
Набивка (padding)
Набивка (padding)
Обтекание блока текста
Обтекание блока текста
Управление цветом
Управление цветом
Шрифты
Шрифты
Гарнитура
Гарнитура
Кегль (font-size)
Кегль (font-size)
Начертание
Начертание
Межбуквенные расстояния
Межбуквенные расстояния

Презентация: «Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения». Автор: paul. Файл: «Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения.ppt». Размер zip-архива: 110 КБ.

Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения

содержание презентации «Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения.ppt»
СлайдТекст
1 Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей

Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей

(CSS) – назначение и применения. Блочные и строчные элементы. Цвет и шрифты.

кандидат технических наук Павел Брониславович Храмцов paul@kiae.su

2 CSS: В чем прелесть

CSS: В чем прелесть

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

2

3 CSS: влияние на технологию

CSS: влияние на технологию

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

3

4 CSS: влияние на технологию

CSS: влияние на технологию

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

5 Способы применения CSS

Способы применения CSS

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

5

6 Переопределение стиля

Переопределение стиля

Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки: <h1 style="font-weight:normal; font-style:italic; font-size:10pt;"> Заголовок первого уровня </h1>

6

7 Элемент STYLE

Элемент STYLE

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

7

8 Пример

Пример

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

8

9 Ссылка на описание стиля

Ссылка на описание стиля

Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. <link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">

9

10 Импорт стиля

Импорт стиля

Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей: <style> @import:url(http://kuku.ru/style.css) a {color:cyan;text-decoration:underline;} </style>

10

11 Синтаксис

Синтаксис

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

11

12 Описание селектора

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

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

12

13 Селектор - имя класса

Селектор - имя класса

<style> .kuku {color:darkred;background-color:white;} </style> <p class=kuku>Этот параграф мы отобразим темно-красным цветом по белому фону.</p> <p>Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим темно-красным цветом по белому фону.</p> Этот параграф мы отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону.

13

14 Селектор - идентификатор объекта

Селектор - идентификатор объекта

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

14

15 Наследование и переопределение

Наследование и переопределение

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

15

16 Элемент DIV

Элемент DIV

DIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.Е. Отступ от границы блока до границы вложенного элемента: <div style="border-color:#003366; border-width:1px; margin:20px; padding:10px;"> ... </div>

16

17 Элемент SPAN

Элемент SPAN

Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п. <span style="font-weight:bold;">Стили <span style="font-style:italic;">могут </span> пересекаться</span>

17

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

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

18

19 Отступы (margins)

Отступы (margins)

p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;}

19

20 Набивка (padding)

Набивка (padding)

p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;}

20

21 Обтекание блока текста

Обтекание блока текста

Атрибут float определяет плавающий блок текста. Он может принимать значения: left - блок прижат к левой границе охватывающего блок элемента; rigth - блок прижат к правой границе охватывающего блок элемента; both - текст может обтекать блок с обеих сторон. Атрибут clean – запрет обтекания: <p style='clear:right;text-align:justify;'>У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.</p>

21

22 Управление цветом

Управление цветом

Цвет текста: td {color:darkred;} p {color:darkred;} i {color:#003366;font-style:normal;} Цвет фона: <body bgcolor=...>...</body> <table bgcolor=...>...</table> <span style="background-color:#003366; color:white;">как строковые элементы разметки</span> p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}

22

23 Шрифты

Шрифты

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

23

24 Гарнитура

Гарнитура

<p align=left style="font-size:24px; font-family:serif;color:darkred;">Эта строка набрана пропорциональным шрифтом с засечками.</p> <p align=left style="font-size:24px; font-family:sans-serif;color:darkred;">Эта строка набрана пропорциональным шрифтом без засечек.</p> <p align=left style="font-size:24px; font-family:monospace;color:darkred;">Эта строка набрана моноширинным шрифтом.</p>

24

25 Кегль (font-size)

Кегль (font-size)

<p style="font-size:12pt;">Кегль параграфа установлен в 12 пунктов</p> <p style="font-size:12px;">Кегль параграфа установлен в 12 пикселей</p> <p style="font-size:120%;">Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента</p> <p style="font-size:large;">Размер кегля large</p>

25

26 Начертание

Начертание

<p style="color:darkred; font-style:normal;">Прямое начертание</p> <p style="color:darkred; font-style:italic;">Курсив</p> <p style="color:darkred;font-style:italic; font-weight:bold;">Курсив</p>

26

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

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

<p style="font-family:monospace; letter-spacing:10pt;color:darkred"> Межбуквенное расстояние 10pt</p>

27

«Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения»
http://900igr.net/prezentacija/obschestvoznanie/uchebnyj-kurs-vvedenie-v-html-i-css-lektsija-5-kaskadnye-tablitsy-stilej-css-naznachenie-i-primenenija-146276.html
cсылка на страницу
Урок

Обществознание

85 тем
Слайды
900igr.net > Презентации по обществознанию > Виды войск > Учебный курс Введение в HTML и CSS Лекция 5 Каскадные таблицы стилей (CSS) – назначение и применения