Скачать презентацию IRAR 3 CSS L Joonas 2012 Содержание
9c826ceec448ddec204b2793a4a7c25d.ppt
- Количество слайдов: 48
IRAR 3. CSS L. Joonas 2012
Содержание • • • CSS 1 и CSS 2 DOM DHTML Java. Script CSS 3
Что такое W 3 C • World Wide Web Consortium • Создана в 1994 году – Универсальный доступ – Семантика WEB – Доверие
Преимущества CSS • Разделение представления и содержания • Каскадный порядок • Единообразие оформления сайта • Уменьшение размеров страниц
Версии СSS • CSS 1 – 1996 год – Простейшие приемы форматирования • CSS-P – Позиционирование текста • CSS 2 – 1998 год – Поддержка медиа-особенностей и расширение международного доступа • СSS 3 – Векторная графика
Единицы измерения Обозначение Описание Пример
Относительные длины Обозначение Тип величины Описание Пример em Em dash Ширина буквы М для данного шрифта 3 em ex x-height Высота маленькой буквы х для данного шрифта 5 ex px Pixel Базируется на разрешении монитора 125 px
Абсолютные длины Обозначение Тип величины Описание Пример pt Пункты Обычно используется для обозначения размера шрифта 1/72 дюйма 12 pt pc Пики Обычно используется для обозначения размера шрифта 1 pc=12 pt 3 pc mm Миллиметры 25 mm cm Сантиметры 5. 1 cm in Дюймы 1 дюйм=2. 54 см 2. 25 in
Цвет Обозначение Описание Пример #RRGGBB Шестнадцатеричный код красного, зеленого и синего цвета (0 -99, AA-FF) #CCBBFF rgb Численные значения, соответствующие красному, зеленому и синему цветам (0255) rgb(204, 51, 255) rgb(R%, G%, B%) Процентное соотношение красного, зеленого и синего цветов от 100% каждого цвета (1 -100%) rgb(81%, 18%, 100%) name Название цвета
Типы правил CSS 1. HTML- селектор – P{font: bold 12 pt times; } 1. Класс – . my. Class{font: bold 12 pt times; } 1. Правила ID – – (применяются только один раз на странице к определенному тэгу) #object 1{position: absolute; top: 10 px}
HTML- селектор • Селектор{свойство: значение; }
Три основных типа тэгов • Тэги блок-уровня • Inline-тэги • Замененные (replace) тэги
Тэги блок-уровня Селектор Использование blockquote Тип кавычек center Выравнивание текста по центру dd Описание определения dfn Определенный терм dir Список директорий div Логическое деление dl Список определений dt Терм определений h 1 -7 Уровни заголовков li Элемент списка ol Упорядоченный список p Абзац table Таблица td Данные таблицы tn Заголовок табицы tr Строка таблицы ul Неупорядоченный список
Inline-тэги Селектор Использование a Ссылка b Выделение жирным big Текст большого размера cite Короткая цитата code Шрифт кода em Выделение font Вид шрифта i Курсив pre Преформатированный текст span Локализованное форматирование стиля strike Зачеркивание strong Усиленный шрифт sub Подпись снизу sup Подпись сверху tt Шрифт печатный u Подчеркнутый текст
Замененные тэги Селектор Использование img Изображение input Поле ввода object Объект select Выпадающий список textarea Многострочное поле ввода
Добавление CSS в HTML-тэг •
Добавление CSS на WEBстраницу
Добавление CSS на WEB-сайт • Использование на всем сайте в целом • Создание каскада • Текстовый файл, созданный обычным способом • *. css • Создание в документе ссылки на внешний файл
Создание ссылки на внешний файл • @import. url(filename. css); •
Создание классов • . copy {font-size: 12 px; } • blockquote. copy {font-size: 12 px; } – зависимый класс •
…
Идентификация объекта • #area 1 {font-size: 12 px; } •
…
• Использование элемента один раз на странице
Создание инлайн-тэга • …
Создание тэгов блок-уровня •
Управление текстом • Кернинг • Интервал между словами • Межстрочные интервалы
An enormous puppy" src="https://present5.com/presentation/9c826ceec448ddec204b2793a4a7c25d/image-25.jpg" alt="Кернинг An enormous puppy" />
Кернинг An enormous puppy was looking down at her with large round eyes, and feebly stretching out one paw, trying to touch her. 'Poor little thing!' said Alice, in a coaxing tone, and she tried hard to whistle to it; but she was terribly frightened all the time at the thought that it might be hungry, in which case it would be very likely to eat her up in spite of all her coaxing.
Интервал между словами Yet more Alice in Wonderland
Межстрочные интервалы
After a time she heard a little pattering of feet in the distance, and she hastily dried her eyes to see what was coming. It was the White Rabbit returning, splendidly sir--' The Rabbit started violently, dropped the white kid gloves and the fan, and skurried away into the darkness as hard as he could go.
Заглавные и строчные буквы
alice
Выравнивание текста
Вертикальное выравнивание текста
'But then, ' thought Alice, 'shall I never get any older than I am now? That'll be a comfort, one way--never to be an old woman-- but then--always to have lessons to learn! Oh, I shouldn't like that!'
Украшение текста CHAPTER IV The Rabbit Sends in a Little Bill
It was 'The Duchess! Alice
Украшение текста (2) • • • none underline overline-through blink
p {white-space: pre; }. collapse {white-space: normal; }
A" src="https://present5.com/presentation/9c826ceec448ddec204b2793a4a7c25d/image-35.jpg" alt="Управление пробелами
A" /> Управление пробелами
A L I C E 'S R I G H T F OO T, E S Q.
H E A R T H R U G ,
(W I T H A L I C E ' S L O V E ).
Управление пробелами (2) • normal • pre • nowrap
CHAPTER" src="https://present5.com/presentation/9c826ceec448ddec204b2793a4a7c25d/image-37.jpg" alt="Установка разрыва страницы
Once more she found herself.
Once more she found herself.
'Look out now, Five! Don't go splashing paint over me like that!'
Установка разрыва страницы (2) • always • auto
Управление шрифтом Тип шрифта Пример serif Times New Roman sans-serif Helvetica, Arial monospace Courier New cursive Apple Chancery fantasy Webdings
Cпособы представления текста в Web • HTML-текст • Графический текст • Векторный текст
" src="https://present5.com/presentation/9c826ceec448ddec204b2793a4a7c25d/image-41.jpg" alt="Установка шрифта (1)
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book, ' thought Alice 'without pictures or conversation? '
Последовательность шрифтов Кавычки для названий, состоящих из нескольких слов Возможна загрузка шрифтов
Загрузка шрифтов Для ИЕ – программа перевода шрифтов в формат eot www. microsoft. com/typography/web/embedding/weft 2/ Для Netscape www. truedoc. com
Шрифты в браузере • Helvetica, Times
Размер шрифта (1)
Oh dear, what nonsense I'm talking!'
Курсив (1)
Толщина шрифта (1)
'I wish I hadn't cried so much!' said Alice, as she swam about, trying to find her way out. 'I shall be punished for it now, I suppose, by being drowned in my own tears! That will be a queer thing , to be sure! However, everything is queer today. '
Определение нескольких значений шрифта одновременно (1)