IRAR3. CSS L.Joonas 2012

Содержание CSS1 и CSS2 DOM DHTML JavaScript CSS3

Что такое W3C World Wide Web Consortium Создана в 1994 году – Универсальный доступ – Семантика WEB – Доверие

Преимущества CSS Разделение представления и содержания Каскадный порядок Единообразие оформления сайта Уменьшение размеров страниц

Версии СSS CSS1 – 1996 год – Простейшие приемы форматирования CSS-P – Позиционирование текста CSS2 – 1998 год – Поддержка медиа-особенностей и расширение международного доступа СSS3 – Векторная графика

Единицы измерения Обозначе- ние ОписаниеПример Целое1,2,3 Измерение расстояния или размеров 1 in ЦветRed Пропорция35% Абсолютный или относительный путь к удаленному файлу

Относительные длины ОбозначениеТип величиныОписаниеПример emEm dashШирина буквы М для данного шрифта 3em exx-heightВысота маленькой буквы х для данного шрифта 5ex pxPixelБазируется на разрешении монитора 125px

Абсолютные длины ОбозначениеТип величиныОписаниеПример ptПунктыОбычно используется для обозначения размера шрифта 1/72 дюйма 12pt pcПикиОбычно используется для обозначения размера шрифта 1 pc=12 pt 3pc mmМиллиметры 25mm cmСантиметры 5.1cm inДюймы1 дюйм=2.54 см2.25in

Цвет ОбозначениеОписаниеПример #RRGGBBШестнадцатеричный код красного, зеленого и синего цвета (0-99, AA-FF) #CCBBFF rgbЧисленные значения, соответствующие красному, зеленому и синему цветам (0- 255) rgb(204,51,255) rgb(R%,G%,B%)Процентное соотношение красного, зеленого и синего цветов от 100% каждого цвета (1-100%) rgb(81%, 18%,100%) nameНазвание цвета

Типы правил CSS 1.HTML- селектор – P{font:bold 12pt times;} 1.Класс –.myClass{font:bold 12pt times;} 1.Правила ID – (применяются только один раз на странице к определенному тэгу) – #object1{position:absolute; top:10px}

HTML- селектор Селектор{свойство:значение;}

Три основных типа тэгов Тэги блок-уровня Inline-тэги Замененные (replace) тэги

Тэги блок-уровня СелекторИспользование blockquoteТип кавычек centerВыравнивание текста по центру ddОписание определения dfnОпределенный терм dirСписок директорий divЛогическое деление dlСписок определений dtТерм определений h1-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-тэг Alice's Adventures in Wonderland

Добавление CSS на WEB- страницу

Добавление CSS на WEB-сайт Использование на всем сайте в целом Создание каскада Текстовый файл, созданный обычным способом *.css Создание в документе ссылки на внешний файл

Создание ссылки на внешний

Создание классов.copy {font-size: 12 px;} blockquote.copy {font-size: 12 px;} – зависимый класс …

Идентификация объекта #area1 {font-size: 12 px;} … Использование элемента один раз на странице

Создание инлайн-тэга …

Создание тэгов блок-уровня …

Управление текстом Кернинг Интервал между словами Межстрочные интервалы

Кернинг 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.

Заглавные и строчные буквы Dramatis Personae alice

Выравнивание текста Left

Вертикальное выравнивание текста

Вертикальное выравнивание текста (2).middle { font-size: 12px; vertical-align: middle }.bottom { vertical-align: bottom; font-size: 12px }.texttop { vertical-align: text-top; font-size: 12px }.textbottom { vertical-align: text-bottom; font-size: 12px }.normal { font-weight: bold; font-size: 24px } -->

Выделение абзацев в тексте '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 line-through blink

Управление пробелами p {white-space: pre;}.collapse {white-space: normal;} 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

Установка разрыва страницы Once more she found herself. CHAPTER VIII The Queen's Croquet-Ground 'Look out now, Five! Don't go splashing paint over me like that!'

Установка разрыва страницы (2) always auto

Управление шрифтом Тип шрифтаПример serifTimes New Roman sans-serifHelvetica, Arial monospaceCourier New cursiveApple Chancery fantasyWebdings

Cпособы представления текста в Web HTML-текст Графический текст Векторный текст

Установка шрифта (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 Для Netscape

Шрифты в браузере Helvetica, Times

Размер шрифта (1) Oh dear, what nonsense I'm talking!'

Курсив (1) An excerpt from Alice in Wonderland

Толщина шрифта (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 to- day.'

Small caps (1) Chapter III A Caucus-Race and a Long Tale

Определение нескольких значений шрифта одновременно (1) Alice's Adventures In Wonderland