Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 8 лет назад пользователемАнтон Эрдман
1 Разработка WEB-приложений Автор: доцент, к.т.н. Галямова Елена Валентиновна Курс лекций и практических занятий для студентов ИУ6-7 х и АК учебный год
2 Каскадные страницы стилей. Спецификации CSS и CSS2 Лекция 2 Автор: к.т.н., доцент Галямова Елена Валентиновна Кафедра ИУ6,
3 CSS
4 CSS – это: 1. Элементы и атрибуты Элемент – это первичная синтаксическая конструкция языка документа ("P", "TABLE", "OL"...) Атрибут – это значение, ассоциированное с элементом, состоящее из названия и ассоциированного значения 2. Их свойства и 3. Значения свойств
5 CSS2 – это : 1. Грамматика Элементы и атрибуты Их свойства и Значения свойств 2. Правила 3. Селекторы 4. Объявления 5.Комментарии
6 CSS2 – это : Таблицы стилей Таблица стилей – это набор операторов, специфицирующих представление документа
7 Определения свойств CSS: Каждое определение свойства CSS начинается общей ключевой информацией: 'property- name' –Значение/Value: действительные значения & синтаксис –Начальное/Initial: начальное значение –Применяется/Applies to: к соответствующим элементам –Наследуется /Inherited : если свойство наследуется –Процентное /Percentage values : интерпретация процентных значений –Носитель /Media groups : к каким группам носителей применяется свойство
8 Типы значений: Следующий пример иллюстрирует различные значения типов: Value\Значение: N | NW | NE Value: [ | thick | thin ]{1,4} Value: [, ]* Value: ? [ / ]? Value: ||
9 Основы стиля Н1 ( соlor: red) Параметр соlor свойство, а red значение свойства H1 (font: 16pt "Arial"; Font-weight: bold; Margin-left:0.25 in; Color: black) 35 свойств, описывающих текст
10 Встроенные стили Встроенные стили используются для оформления небольших фрагментов документа This text is 24 point This text probably isn't.
11 Основные элементы
12 Блоки стилей ">
13 Ссылка на страницу стилей (LINK)
14 Результат работы CSS
15 Элемент STYLE и его атрибут TYPE="text/css Our First Style Sheet Лекция 2 - Каскадные Страницы Стилей Cascade Style Sheets Страницы стилей - важное дополнение в языке HTML. Они дают возможность Web-разработчику легко контролировать размещение, шрифт и размер веб-страницы. Пользователи могут установить любой шрифт в своем браузере, и это может создать хаос на веб-странице, которая разработана с каким- либо определенным шрифтом. Страницы стилей как раз исключают возможность появления этой проблемы. Пример "кода" стиля: P { font: 11pt "New Times Roman"; margin-top: -0.25in; margin-bottom:0.0in; margin-left: 0.5in; margin-right: 0.5in font-weight: normal; line-height: 14pt; text-indent: 0.25in; color: black } Стиль наследования Inheriting Style Страницы стилей также поддерживают свойство наследования. Вы знаете что если спецификации HTML начнут использовать свойство наследования, это будет действительно развивающийся язык. В любом случае, цепь наследования выглядит так: HTML, BODY и STYLE. Our First Style Sheet Лекция 2 - Каскадные Страницы Стилей Cascade Style Sheets Страницы стилей - важное дополнение в языке HTML. Они дают возможность Web-разработчику легко контролировать размещение, шрифт и размер веб-страницы. Пользователи могут установить любой шрифт в своем браузере, и это может создать хаос на веб-странице, которая разработана с каким- либо определенным шрифтом. Страницы стилей как раз исключают возможность появления этой проблемы. Пример "кода" стиля: P { font: 11pt "New Times Roman"; margin-top: -0.25in; margin-bottom:0.0in; margin-left: 0.5in; margin-right: 0.5in font-weight: normal; line-height: 14pt; text-indent: 0.25in; color: black } Стиль наследования Inheriting Style Страницы стилей также поддерживают свойство наследования. Вы знаете что если спецификации HTML начнут использовать свойство наследования, это будет действительно развивающийся язык. В любом случае, цепь наследования выглядит так: HTML, BODY и STYLE.">
16 Результат работы элемента STYLE
17 Псевдоэлементы первая строка и P: first-line {font-size:150%} первая буква текстового блока P: first-letter {font-size:300%}
18 Четыре категории свойств элементов CSS: свойства шрифта; свойства цвета и фона; свойства текста и свойства CSS-блоков
19 Изменения CSS2 по сравнению с CSS1 Новая функциональность Обновлённые описания Семантические изменения Понятие ПА (Пользовательский Агент) –ПА - это какая-либо программа, интерпретирующая документ и ассоциированную с ним таблицу стилей в соответствии с терминами данной спецификации.
20 Новая функциональность CSS2: –Понятие типов носителя типов носителя –Значение 'inherit' для всех свойств'inherit' –Страничные носители Страничные носители –Звуковые таблицы стилей Звуковые таблицы стилей –Несколько опций интернационализации, включая стили нумерации списков, поддержку двунаправленного текста и чувствительных к языку знаков кавычек. стили нумерации списков двунаправленного текста знаков кавычек –Расширенный механизм выбора шрифта, включая смысловой подбор, синтез и загружаемые шрифты.выбора шрифта –Таблицы, включая новые значения 'display' и 'vertical-align'.Таблицы 'display''vertical-align' –Относительное и абсолютное позиционирование, включая фиксированное позиционирование.Относительноеабсолютное позиционирование фиксированное позиционирование –Новые типы боксов (наряду с блок- и онлайн-): compact и run-in.compactrun-in –Возможность контролировать переполнение, сжатие и видимость содержимого в модели визуального форматирования. переполнениесжатиевидимость –Возможность специфицировать максимальные и минимальные ширину и высоту в модели визуального форматирования. ширину высоту –Расширенный механизм селекторов, включая дочерние селекторы, смежные селекторы и селекторы атрибутов.селекторов –Генерируемое содержимое, счётчики и автоматическую нумерацию и маркёры.Генерируемое содержимое счётчики и автоматическую нумерацию маркёры –Оттенение текста с помощью нового свойства 'text-shadow'.'text-shadow' –Различные новые псевдоклассы, :first-child, :hover, :focus, :lang.псевдоклассы –Системные цвета и шрифты.цвета шрифты –Курсоры.Курсоры –Динамические схемы Динамические схемы
21 Семантические изменения по сравнению с CSS1: "!important« Значения цвета - в соответствии с гаммой устройства Значения цвета выбор между смягчением 'margin-right' или 'margin-left' зависит от направления письма введен термина "containing block/содержащий блок" Начальное значение 'display' - 'inline' в CSS2, а не 'block', как в CSS1. Свойство 'clear' применяется только к элементам уровня блока link', ':visited' и ':active' - CSS2 ':active' может появляться вместе с ':link' или ':visited'.':active'':link' или ':visited' Фактор масштаба между смежными индексами 'font-size' уменьшен с 1.5 до 1.2.'font-size' Теперь наследуется вычисленное, а не текущее, значение 'font-size'.'font-size' другие
22 Сокращённые формы свойств H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none } H1 { font: bold 12pt/14pt Helvetica }
23 Если есть CSS2: Это пример документа-источника, кодированного в HTML: My home page My home page Welcome to my home page! Let me tell you about my favorite composers: Elvis Costello Johannes Brahms Georges Brassens Это дерево данного документа:
24 Синтаксис CSS2 : 1 Лексический разбор 1 Лексический разбор (IDENT, HASH…) 2 Ключевые слова 2 Ключевые слова (red – red) 3 Символы и регистр 3 Символы и регистр (нечувствительны, \) 4 Операторы 4 Операторы (наборы правил) 5 at-правила (at-rules) 6 Блоки 6 Блоки { } 7 Наборы правил, блоки объявлений и селекторы 8 Объявления и свойства 9 Комментарии 9 Комментарии "/* "*/".
25 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки,
26 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки
27 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки
28 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки ПА могут по-разному обрабатывать URI
29 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки P {counter-increment: par-num} H1 {counter-reset: par- num} P:before {content: counter(par-num, upper-roman) ". "}
30 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки - это предопределённое слово или числовая спецификация RGB.
31 Значения в CSS2 - Цвета BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive } EM { color: #f00 } EM { color: rgb(255,0,0) } EM { color: rgb(100%, 0%, 0%) } 16 основных модель цветов RGB 'rgb
32 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки Единицами измерения углов являются: deg: градусы grad: грады rad: радианы
33 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки Единицами измерения времени являются: ms: миллисекунды s: секунды
34 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки Единицами измерения частоты являются: Hz: герцы kHz: килогерцы
35 Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки "this is a 'string " "this is a \"string\"" 'this is a "string"' 'this is a \'string\ ' A[TITLE="a not s\ o very long title"] {/*...*/} A[TITLE="a not so very long title"] {/*...*/}
36 Представление документа CSS таблица стилей встроена в другой документ элемент STYLE или атрибут "style" в HTML таблица стилей находится в отдельном файле
37 Каскадирование и Наследование
38 Спасибо за внимание!
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.