IRAR3. CSS L.Joonas 2012. Содержание CSS1 и CSS2 DOM DHTML JavaScript CSS3. - презентация

1 IRAR3. CSS L.Joonas 2012

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

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

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

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

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

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

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

9 Цвет ОбозначениеОписаниеПример #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Название цвета

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

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

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

13 Тэги блок-уровня СелекторИспользование blockquoteТип кавычек centerВыравнивание текста по центру ddОписание определения dfnОпределенный терм dirСписок директорий divЛогическое деление dlСписок определений dtТерм определений h1-7Уровни заголовков liЭлемент списка olУпорядоченный список pАбзац tableТаблица tdДанные таблицы tnЗаголовок табицы trСтрока таблицы ulНеупорядоченный список

14 Inline-тэги СелекторИспользование aСсылка bВыделение жирным bigТекст большого размера citeКороткая цитата codeШрифт кода emВыделение fontВид шрифта iКурсив preПреформатированный текст spanЛокализованное форматирование стиля strikeЗачеркивание strongУсиленный шрифт subПодпись снизу supПодпись сверху ttШрифт печатный uПодчеркнутый текст

15 Замененные тэги СелекторИспользование imgИзображение inputПоле ввода objectОбъект selectВыпадающий список textareaМногострочное поле ввода

16 Добавление CSS в HTML-тэг Alice's Adventures in Wonderland

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

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

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

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

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

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

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

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

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

26 Интервал между словами Yet more Alice in Wonderland

27 Межстрочные интервалы 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.

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

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

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

31 Вертикальное выравнивание текста (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 } -->

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

33 Украшение текста CHAPTER IV The Rabbit Sends in a Little Bill It was 'The Duchess! Alice

34 Украшение текста (2) none underline overline line-through blink

35 Управление пробелами 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 ).

36 Управление пробелами (2) normal pre nowrap

37 Установка разрыва страницы 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!'

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

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

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

41 Установка шрифта (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?' Последовательность шрифтов Кавычки для названий, состоящих из нескольких слов Возможна загрузка шрифтов

42 Загрузка шрифтов Для ИЕ – программа перевода шрифтов в формат eot Для Netscape

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

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

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

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

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

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