Содержание
- 2. Стоимость проведения лабораторной работы 190800
- 3. CSS Cascading Style Sheets
- 4. Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к
- 5. CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц
- 6. CSS CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык) — формальный язык
- 7. Включение в HTML Внешний файл: Непосредственно в HTML-документе: body { color: red; } Непосредственно в элемент:
- 8. CSS Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или
- 9. Типы верстки На сегодняшний день существует два основных типа верстки веб-документов: - табличная верстка (посредством HTML-таблиц)
- 10. CSS-верстка Преимущества: Несколько дизайнов страницы для разных устройств просмотра. Уменьшение времени загрузки страниц сайта Простота последующего
- 11. Уровень 1 (CSS1) Рекомендация W3C принята 17 декабря 1996, откорректирована 11 января 1999. Среди возможностей, предоставляемых
- 12. Уровень 2 (CSS2) Рекомендация W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.
- 13. Уровень 2.1 (CSS2.1) Рабочая версия W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок
- 14. Уровень 3 (CSS3) Сильно расширена по сравнению с предыдущими версиями. Нововведения, начиная с малых, вроде закругленных
- 15. CSS: влияние на технологию Сначала нужно определиться с номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить
- 16. CSS: влияние на технологию Для каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель). Теперь остается
- 17. Способы применения CSS переопределение стиля в элементе разметки размещение описания стиля в заголовке документа в элементе
- 18. Переопределение стиля Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента
- 19. Элемент STYLE Элемент STYLE позволяет определить стиль отображения для: стандартных элементов HTML-разметки произвольных классов (селектор class)
- 20. Пример p {color:darkred;text-align:justify; font-size:8pt;} ... Этот параграф мы используем в качестве примера применения описания стиля для
- 21. Ссылка на описание стиля Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента
- 22. Импорт стиля Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой
- 23. Синтаксис Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[, ...]]{attribute:value; [atribute:value;...]} или selector
- 24. Описание селектора Селектор - имя элемента разметки i, em {color:#003366,font-style:normal} a, i {font-style:normal;font-weight:bold; text-decoration:line-through} Первая строка
- 25. Селектор - имя класса .kuku {color:darkred;background-color:white;} Этот параграф мы отобразим темно-красным цветом по белому фону. Эту
- 26. Селектор - идентификатор объекта Описание стиля для объекта задается строкой, в которой селектор представляет собой имя
- 27. Наследование и переопределение Сначала применяются стили умолчания браузера Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK
- 28. Элемент DIV DIV позволяет применить атрибуты стиля, связанные с границей блокаDIV позволяет применить атрибуты стиля, связанные
- 29. Элемент SPAN Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к
- 30. Свойства блоков
- 31. Отступы (margins) p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;}
- 32. Набивка (padding) p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;}
- 33. Обтекание блока текста Атрибут float определяет плавающий блок текста. Он может принимать значения: left - блок
- 34. Управление цветом Цвет текста: td {color:darkred;} p {color:darkred;} i {color:#003366;font-style:normal;} Цвет фона: ... ... как строковые
- 35. Шрифты font-family - семейство начертаний шрифта (гарнитура); font-style - прямое начертание или курсив; font-weight - "усиление"
- 36. Гарнитура Эта строка набрана пропорциональным шрифтом с засечками. Эта строка набрана пропорциональным шрифтом без засечек. Эта
- 37. Кегль (font-size) Кегль параграфа установлен в 12 пунктов Кегль параграфа установлен в 12 пикселей Кегль параграфа
- 38. Начертание Прямое начертание Курсив Курсив
- 39. Межбуквенные расстояния letter-spacing:10pt;color:darkred"> Межбуквенное расстояние 10pt
- 40. Визуальные эффекты в каскадных таблицах стилей
- 41. Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали
- 42. В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием
- 43. Для начала рассмотрим ситуации когда появляется полоса прокрутки: 1)Переполнение по высоте, эта ситуация возникает если контента
- 44. Чтобы управлять переполнением, т.е. полосой прокрутки в каскадных таблицах стилей существует существует правило overflow, которое может
- 45. По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет, в каскадных
- 46. Свойство правила clip принимает следующие значения: 1)class{clip:auto} Сжимаемая область имеет тот же размер и размещение, что
- 47. Свойство правил visibility предписывает отображать ли бокс или нет. Например если вернуться к теме об моделях
- 48. Свойство visibility принимает такие значения: 1)class{visibility:visible} Место под данный бокс резервируется. 2)class{visibility:hidden} Место под данный бокс
- 49. Звуковые Таблицы стилей
- 50. не все пользователь могут четко видеть ваш дизайн, а некоторые вообще его не видят, а причина
- 51. В CSS есть целый ряд правил, который поможет правильно обработать ваши файлы Правило volume: позволяет регулировать
- 52. В CSS есть целый ряд правил, который поможет правильно обработать ваши файлы volume:loud - аналогично volume:75.
- 53. Правило speak: определяет будет ли текст произноситься, если да то как. Допустимые значения: speak:normal - значение
- 54. Правило pause-before: определяет паузу(задержку) перед воспроизведением бокса и имеет значения: pause-before:700ms - пауза задается в секундах
- 55. Правило pause-after: определяет паузу после воспроизведения бокса и имеет те же значения что и pause-before
- 56. Правило pause: помещает в себе два предыдущих. P{pause:100ms} если указано одно значение то оно распространяется на
- 57. Правило cue-before: определяет иконку(звуковой файл) перед боксом. Т.е. перед боксов будет проигрываться какая-то мелодия, возможно с
- 58. Правило cue-after: определяет иконку(звуковой файл) после бокса. Значения как и у cue-before Правило cue: - это
- 59. Правило play-during: устанавливает и управляет фоновой музыкой, т.е. каскадные таблицы стилей позволяют добавлять мелодию в время
- 60. Правило azimuth: управляет звуковыми эффектами, по умолчанию воспроизводится моно, но можно использовать стерео, квадро или даже
- 61. Синтаксис правила azimuth: *{azimuth:90deg -90deg} Значения могут быть: left-side, far-left, left, center-left, center, center-right, right, far-right,
- 62. Правило elevation: управляет звуковым эффектом по вертикали, некоторые системы(например ПсевдоСтерео) позволяет звуку литься сверху или снизу.
- 63. Правило elevation может иметь только одно значение: elevation:0deg - задается в единицах измерения. elevation:below - тоже
- 64. Свойства характеристики голоса
- 65. Правило speech-rate: управляет темпом речи, т.е. сколько слов в минуту должно воспроизводиться. Данное правило имеет значение:
- 66. Правило voice-family: управляет стилем воспроизведения текста. voice-family:male - текст воспроизводится мужским голосом. voice-family:female - текст воспроизводится
- 67. Правило pitch: управляет высотой(частотой) голоса и имеет значения: pitch:150Hz - высота голоса задается в герцах pitch:x-low
- 68. Правило pitch-range: управляет оживлённостью голоса, задается числами: *{pitch-range:50;} -это начальное значение, его можно изменить от от
- 69. Правило stress: управляет интонацией голоса, например по умолчанию stress:50, но если вам нужно подавить интонацию вы
- 70. Правило richness: управляет полетностью голоса, например на улице или в большем зале нужен более "полетнй" голос(richness:100),
- 71. Правило speak-punctuation: управляет произношением знаков пунктуации и имеет значения: speak-punctuation:code - знаки пунктуации произносятся буквально, т.е.
- 72. Правило speak-numeral: управляет произношением цифр и имеет следующие значения: speak-numeral:digits - цифры произносятся посимвольно, например число
- 73. Патчи в какскадных таблиц стилей для I.E., FireFox, Opera и Safari
- 74. CSS позволяет добиться межбраузерности т.е. дизайн будет отображаться в всех браузерах не зависимо от операционной системы
- 75. Патч от английского patch - это заплатка, которая покрывает какую либо дыру. В каскадных таблицах стилей
- 76. Патчи для браузера FireFox для браузера FireFox всех версий: @-moz-document url-prefix() { .style {color:#000000;} }
- 77. Патчи для браузера Opera Только для Оперы-9.5: html:first-child .style { color:#000000; } Для других версий оперы:
- 78. CSS-патчи для браузера Safari Первый вариант: body:last-child:not(:root:root) .style { color:#000000; } Второй вариант: html[xmlns*=""] body:last-child .style
- 79. CSS-патчи для браузера Internet Explorer Для браузера Internet Explorer 6 : .style { _color:#000000; } или
- 81. Скачать презентацию