Разработка WEB-приложений Автор: доцент, к.т.н. Галямова Елена Валентиновна Курс лекций и практических занятий для студентов ИУ 6-7 х и АК 5-71 2006-2007.

Презентация:

Advertisements

Похожие презентации

CSS Cascading Style Sheets. Типы стилей: 1. Стиль браузера 2. Стиль автора 3. Стиль пользователя.

Advertisements

1 Cascading Style Sheets каскадные таблицы стилей 2.

CSS: основные понятия и особенности. Способы добавления стилей на Веб-страницу. Использование стилей при создании сайта.

CSS Cascading Style Sheet. CSS это правила как должен выглядеть HTML. Существуют три типа правил CSS 1. HTML селектор - текстовая часть HTML тэга. P селектор.

Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Что такое CSS Несколько CSS свойств Использование каскадной таблицы.

4.3 Каскадные таблицы стилей. Каскадные таблицы стилей (Cascading Style Sheets, CSS) способ оформления страниц HTML, позволяющий с помощью параметров.

Введение в CSS. Базовый синтаксис CSS селектор { свойство1: значение; свойство2: значение; } селектор некоторое имя стиля, для которого добавляются параметры.

Динамический HTML (dynamic HTML или DHTML) не является каким-то особым языком разметки страниц. Это всего лишь термин, применяемый для обозначения HTML-страниц.

CSS – Cascading Style Sheets (Каскадные таблицы стилей) «Создание Web-сайтов»

CSS Каскадные таблицы стилей. Что такое CSS? CSS (анг. Cascading Style Sheets каскадные таблицы стилей) стандартизованная технология описания представления.

Каскадные таблицы стилей CSS. Стиль – набор параметров, задающий внешнее представление объекта. Таблица стилей – это инструмент языка html, предоставляющий.

Cascading Style Sheets каскадные таблицы стилей CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный.

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

Таблицы стилей Язык HTML. Каскадные таблицы стилей CSS CSS (от английского Cascading Style Sheets). Таблицы стилей позволяют разделить смысловое содержимое.

Каскадные таблицы стилей Назначение и применение CSS.

HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.

Лекция 9 Тема «Каскадные таблицы стилей » Преподаватель: Халелова Е. Н.

Каскадные таблицы стилей (CSS) Каскадные (многоуровневые) таблицы стилей – cascading style sheets (CSS) Автор: Лимаренко А.И., Учитель информатики и ИКТ.

ОСНОВЫ CSS Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде. CSS - это сокращение от Cascading Style.

Таблицы стилей CSS. Основы dynamic HTML. Таблицы стилей CSS Cascading Style Sheets (CSS) - каскадные таблицы стилей. Цель CSS - отделить дизайн web-страницы.

Транксрипт:

Разработка WEB-приложений Автор: доцент, к.т.н. Галямова Елена Валентиновна Курс лекций и практических занятий для студентов ИУ6-7 х и АК учебный год

Каскадные страницы стилей. Спецификации CSS и CSS2 Лекция 2 Автор: к.т.н., доцент Галямова Елена Валентиновна Кафедра ИУ6,

CSS

CSS – это: 1. Элементы и атрибуты Элемент – это первичная синтаксическая конструкция языка документа ("P", "TABLE", "OL"...) Атрибут – это значение, ассоциированное с элементом, состоящее из названия и ассоциированного значения 2. Их свойства и 3. Значения свойств

CSS2 – это : 1. Грамматика Элементы и атрибуты Их свойства и Значения свойств 2. Правила 3. Селекторы 4. Объявления 5.Комментарии

CSS2 – это : Таблицы стилей Таблица стилей – это набор операторов, специфицирующих представление документа

Определения свойств CSS: Каждое определение свойства CSS начинается общей ключевой информацией: 'property- name' –Значение/Value: действительные значения & синтаксис –Начальное/Initial: начальное значение –Применяется/Applies to: к соответствующим элементам –Наследуется /Inherited : если свойство наследуется –Процентное /Percentage values : интерпретация процентных значений –Носитель /Media groups : к каким группам носителей применяется свойство

Типы значений: Следующий пример иллюстрирует различные значения типов: Value\Значение: N | NW | NE Value: [ | thick | thin ]{1,4} Value: [, ]* Value: ? [ / ]? Value: ||

Основы стиля Н1 ( соlor: red) Параметр соlor свойство, а red значение свойства H1 (font: 16pt "Arial"; Font-weight: bold; Margin-left:0.25 in; Color: black) 35 свойств, описывающих текст

Встроенные стили Встроенные стили используются для оформления небольших фрагментов документа This text is 24 point This text probably isn't.

Основные элементы

Блоки стилей

Ссылка на страницу стилей (LINK) <LINK REL = STYLESHEET TYPE = text/CSS SRC =

Результат работы CSS

Элемент 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.

Результат работы элемента STYLE

Псевдоэлементы первая строка и P: first-line {font-size:150%} первая буква текстового блока P: first-letter {font-size:300%}

Четыре категории свойств элементов CSS: свойства шрифта; свойства цвета и фона; свойства текста и свойства CSS-блоков

Изменения CSS2 по сравнению с CSS1 Новая функциональность Обновлённые описания Семантические изменения Понятие ПА (Пользовательский Агент) –ПА - это какая-либо программа, интерпретирующая документ и ассоциированную с ним таблицу стилей в соответствии с терминами данной спецификации.

Новая функциональность CSS2: –Понятие типов носителя типов носителя –Значение 'inherit' для всех свойств'inherit' –Страничные носители Страничные носители –Звуковые таблицы стилей Звуковые таблицы стилей –Несколько опций интернационализации, включая стили нумерации списков, поддержку двунаправленного текста и чувствительных к языку знаков кавычек. стили нумерации списков двунаправленного текста знаков кавычек –Расширенный механизм выбора шрифта, включая смысловой подбор, синтез и загружаемые шрифты.выбора шрифта –Таблицы, включая новые значения 'display' и 'vertical-align'.Таблицы 'display''vertical-align' –Относительное и абсолютное позиционирование, включая фиксированное позиционирование.Относительноеабсолютное позиционирование фиксированное позиционирование –Новые типы боксов (наряду с блок- и онлайн-): compact и run-in.compactrun-in –Возможность контролировать переполнение, сжатие и видимость содержимого в модели визуального форматирования. переполнениесжатиевидимость –Возможность специфицировать максимальные и минимальные ширину и высоту в модели визуального форматирования. ширину высоту –Расширенный механизм селекторов, включая дочерние селекторы, смежные селекторы и селекторы атрибутов.селекторов –Генерируемое содержимое, счётчики и автоматическую нумерацию и маркёры.Генерируемое содержимое счётчики и автоматическую нумерацию маркёры –Оттенение текста с помощью нового свойства 'text-shadow'.'text-shadow' –Различные новые псевдоклассы, :first-child, :hover, :focus, :lang.псевдоклассы –Системные цвета и шрифты.цвета шрифты –Курсоры.Курсоры –Динамические схемы Динамические схемы

Семантические изменения по сравнению с 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' другие

Сокращённые формы свойств 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 }

Если есть 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 Это дерево данного документа:

Синтаксис CSS2 : 1 Лексический разбор 1 Лексический разбор (IDENT, HASH…) 2 Ключевые слова 2 Ключевые слова (red – red) 3 Символы и регистр 3 Символы и регистр (нечувствительны, \) 4 Операторы 4 Операторы (наборы правил) 5 at-правила (at-rules) 6 Блоки 6 Блоки { } 7 Наборы правил, блоки объявлений и селекторы 8 Объявления и свойства 9 Комментарии 9 Комментарии "/* "*/".

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки,

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки ПА могут по-разному обрабатывать URI

Значения в 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) ". "}

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки - это предопределённое слово или числовая спецификация RGB.

Значения в 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

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки Единицами измерения углов являются: deg: градусы grad: грады rad: радианы

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки Единицами измерения времени являются: ms: миллисекунды s: секунды

Значения в CSS2 1 Целые и вещественные числа 2 Размеры 3 Процентные значения 4 URL + URN = URI 5 Счётчики 6 Цвета 7 Угловые значения 8 Время 9 Частоты 10 Строки Единицами измерения частоты являются: Hz: герцы kHz: килогерцы

Значения в 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"] {/*...*/}

Представление документа CSS таблица стилей встроена в другой документ элемент STYLE или атрибут "style" в HTML таблица стилей находится в отдельном файле

Каскадирование и Наследование

Спасибо за внимание!