🗊Презентация Основы информационных технологий. Компьютерные языки разметки

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Основы информационных технологий. Компьютерные языки разметки, слайд №1Основы информационных технологий. Компьютерные языки разметки, слайд №2Основы информационных технологий. Компьютерные языки разметки, слайд №3Основы информационных технологий. Компьютерные языки разметки, слайд №4Основы информационных технологий. Компьютерные языки разметки, слайд №5Основы информационных технологий. Компьютерные языки разметки, слайд №6Основы информационных технологий. Компьютерные языки разметки, слайд №7Основы информационных технологий. Компьютерные языки разметки, слайд №8Основы информационных технологий. Компьютерные языки разметки, слайд №9Основы информационных технологий. Компьютерные языки разметки, слайд №10Основы информационных технологий. Компьютерные языки разметки, слайд №11Основы информационных технологий. Компьютерные языки разметки, слайд №12Основы информационных технологий. Компьютерные языки разметки, слайд №13Основы информационных технологий. Компьютерные языки разметки, слайд №14Основы информационных технологий. Компьютерные языки разметки, слайд №15Основы информационных технологий. Компьютерные языки разметки, слайд №16Основы информационных технологий. Компьютерные языки разметки, слайд №17Основы информационных технологий. Компьютерные языки разметки, слайд №18Основы информационных технологий. Компьютерные языки разметки, слайд №19Основы информационных технологий. Компьютерные языки разметки, слайд №20Основы информационных технологий. Компьютерные языки разметки, слайд №21Основы информационных технологий. Компьютерные языки разметки, слайд №22Основы информационных технологий. Компьютерные языки разметки, слайд №23Основы информационных технологий. Компьютерные языки разметки, слайд №24Основы информационных технологий. Компьютерные языки разметки, слайд №25Основы информационных технологий. Компьютерные языки разметки, слайд №26Основы информационных технологий. Компьютерные языки разметки, слайд №27Основы информационных технологий. Компьютерные языки разметки, слайд №28Основы информационных технологий. Компьютерные языки разметки, слайд №29Основы информационных технологий. Компьютерные языки разметки, слайд №30Основы информационных технологий. Компьютерные языки разметки, слайд №31Основы информационных технологий. Компьютерные языки разметки, слайд №32Основы информационных технологий. Компьютерные языки разметки, слайд №33Основы информационных технологий. Компьютерные языки разметки, слайд №34Основы информационных технологий. Компьютерные языки разметки, слайд №35Основы информационных технологий. Компьютерные языки разметки, слайд №36Основы информационных технологий. Компьютерные языки разметки, слайд №37Основы информационных технологий. Компьютерные языки разметки, слайд №38Основы информационных технологий. Компьютерные языки разметки, слайд №39Основы информационных технологий. Компьютерные языки разметки, слайд №40Основы информационных технологий. Компьютерные языки разметки, слайд №41Основы информационных технологий. Компьютерные языки разметки, слайд №42Основы информационных технологий. Компьютерные языки разметки, слайд №43Основы информационных технологий. Компьютерные языки разметки, слайд №44Основы информационных технологий. Компьютерные языки разметки, слайд №45Основы информационных технологий. Компьютерные языки разметки, слайд №46Основы информационных технологий. Компьютерные языки разметки, слайд №47Основы информационных технологий. Компьютерные языки разметки, слайд №48Основы информационных технологий. Компьютерные языки разметки, слайд №49Основы информационных технологий. Компьютерные языки разметки, слайд №50Основы информационных технологий. Компьютерные языки разметки, слайд №51Основы информационных технологий. Компьютерные языки разметки, слайд №52Основы информационных технологий. Компьютерные языки разметки, слайд №53Основы информационных технологий. Компьютерные языки разметки, слайд №54Основы информационных технологий. Компьютерные языки разметки, слайд №55Основы информационных технологий. Компьютерные языки разметки, слайд №56Основы информационных технологий. Компьютерные языки разметки, слайд №57Основы информационных технологий. Компьютерные языки разметки, слайд №58Основы информационных технологий. Компьютерные языки разметки, слайд №59Основы информационных технологий. Компьютерные языки разметки, слайд №60Основы информационных технологий. Компьютерные языки разметки, слайд №61Основы информационных технологий. Компьютерные языки разметки, слайд №62Основы информационных технологий. Компьютерные языки разметки, слайд №63Основы информационных технологий. Компьютерные языки разметки, слайд №64Основы информационных технологий. Компьютерные языки разметки, слайд №65Основы информационных технологий. Компьютерные языки разметки, слайд №66Основы информационных технологий. Компьютерные языки разметки, слайд №67Основы информационных технологий. Компьютерные языки разметки, слайд №68Основы информационных технологий. Компьютерные языки разметки, слайд №69Основы информационных технологий. Компьютерные языки разметки, слайд №70Основы информационных технологий. Компьютерные языки разметки, слайд №71Основы информационных технологий. Компьютерные языки разметки, слайд №72Основы информационных технологий. Компьютерные языки разметки, слайд №73Основы информационных технологий. Компьютерные языки разметки, слайд №74Основы информационных технологий. Компьютерные языки разметки, слайд №75Основы информационных технологий. Компьютерные языки разметки, слайд №76Основы информационных технологий. Компьютерные языки разметки, слайд №77Основы информационных технологий. Компьютерные языки разметки, слайд №78Основы информационных технологий. Компьютерные языки разметки, слайд №79Основы информационных технологий. Компьютерные языки разметки, слайд №80
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Основы информационных технологий. Компьютерные языки разметки. Доклад-сообщение содержит 80 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


ОСНОВЫ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ КОМПЬЮТЕРНЫЕ ЯЗЫКИ РАЗМЕТКИ
Описание слайда:
ОСНОВЫ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ КОМПЬЮТЕРНЫЕ ЯЗЫКИ РАЗМЕТКИ

Слайд 2


Основы информационных технологий. Компьютерные языки разметки, слайд №2
Описание слайда:

Слайд 3


Основы информационных технологий. Компьютерные языки разметки, слайд №3
Описание слайда:

Слайд 4


Основы информационных технологий. Компьютерные языки разметки, слайд №4
Описание слайда:

Слайд 5


Основы информационных технологий. Компьютерные языки разметки, слайд №5
Описание слайда:

Слайд 6


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

Слайд 7


Включение в HTML
Описание слайда:
Включение в HTML

Слайд 8


CSS
Описание слайда:
CSS

Слайд 9


Типы верстки
Описание слайда:
Типы верстки

Слайд 10


CSS-верстка Преимущества: Несколько дизайнов страницы для разных устройств просмотра. Уменьшение времени загрузки страниц сайта Простота последующего изменения дизайна. Дополнительные возможности оформления. Оптимально с точки зрения поисковых систем. Недостатки: Различное отображение вёрстки в различных браузерах (особенно устаревших) Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS
Описание слайда:
CSS-верстка Преимущества: Несколько дизайнов страницы для разных устройств просмотра. Уменьшение времени загрузки страниц сайта Простота последующего изменения дизайна. Дополнительные возможности оформления. Оптимально с точки зрения поисковых систем. Недостатки: Различное отображение вёрстки в различных браузерах (особенно устаревших) Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS

Слайд 11


Уровень 1 (CSS1)
Описание слайда:
Уровень 1 (CSS1)

Слайд 12


Уровень 2 (CSS2)
Описание слайда:
Уровень 2 (CSS2)

Слайд 13


Уровень 2.1 (CSS2.1)
Описание слайда:
Уровень 2.1 (CSS2.1)

Слайд 14


Уровень 3 (CSS3)
Описание слайда:
Уровень 3 (CSS3)

Слайд 15


CSS: влияние на технологию
Описание слайда:
CSS: влияние на технологию

Слайд 16


CSS: влияние на технологию Для каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель). Теперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним.
Описание слайда:
CSS: влияние на технологию Для каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель). Теперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним.

Слайд 17


Способы применения CSS переопределение стиля в элементе разметки размещение описания стиля в заголовке документа в элементе STYLE размещение ссылки на внешнее описание через элемент LINK импорт описания стиля в документ
Описание слайда:
Способы применения CSS переопределение стиля в элементе разметки размещение описания стиля в заголовке документа в элементе STYLE размещение ссылки на внешнее описание через элемент LINK импорт описания стиля в документ

Слайд 18


Переопределение стиля Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки: <h1 style="font-weight:normal; font-style:italic; font-size:10pt;"> Заголовок первого уровня </h1>
Описание слайда:
Переопределение стиля Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки: <h1 style="font-weight:normal; font-style:italic; font-size:10pt;"> Заголовок первого уровня </h1>

Слайд 19


Элемент STYLE Элемент STYLE позволяет определить стиль отображения для: стандартных элементов HTML-разметки произвольных классов (селектор class) HTML-объектов (селектор id)
Описание слайда:
Элемент STYLE Элемент STYLE позволяет определить стиль отображения для: стандартных элементов HTML-разметки произвольных классов (селектор class) HTML-объектов (селектор id)

Слайд 20


Пример <head> <style> p {color:darkred;text-align:justify; font-size:8pt;} </style> </head> <body> ... <p>Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки.</p> </body>
Описание слайда:
Пример <head> <style> p {color:darkred;text-align:justify; font-size:8pt;} </style> </head> <body> ... <p>Этот параграф мы используем в качестве примера применения описания стиля для стандартного элемента HTML-разметки.</p> </body>

Слайд 21


Ссылка на описание стиля Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. <link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">
Описание слайда:
Ссылка на описание стиля Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. <link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">

Слайд 22


Импорт стиля Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей: <style> @import:url(http://kuku.ru/style.css) a {color:cyan;text-decoration:underline;} </style>
Описание слайда:
Импорт стиля Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей: <style> @import:url(http://kuku.ru/style.css) a {color:cyan;text-decoration:underline;} </style>

Слайд 23


Синтаксис Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[, ...]]{attribute:value; [atribute:value;...]} или selector selector [selector ...]  {attribute:value;[atribute:value;...]} Первый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.
Описание слайда:
Синтаксис Синтаксис описания стилей в общем виде представляется следующим образом: selector[, selector[, ...]]{attribute:value; [atribute:value;...]} или selector selector [selector ...]  {attribute:value;[atribute:value;...]} Первый вариант перечисляет селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль.

Слайд 24


Описание селектора Селектор - имя элемента разметки i, em {color:#003366,font-style:normal} a, i {font-style:normal;font-weight:bold; text-decoration:line-through} Первая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково: <i>Это курсив</i> и это тоже <em>курсив</em> Это курсив и это тоже курсив Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива: <a name=empty><i>kuku</i></a> kuku
Описание слайда:
Описание селектора Селектор - имя элемента разметки i, em {color:#003366,font-style:normal} a, i {font-style:normal;font-weight:bold; text-decoration:line-through} Первая строка этого описания перечисляет селекторы-элементы, которые будут отображаться одинаково: <i>Это курсив</i> и это тоже <em>курсив</em> Это курсив и это тоже курсив Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива: <a name=empty><i>kuku</i></a> kuku

Слайд 25


Селектор - имя класса <style> .kuku {color:darkred;background-color:white;} </style> <p class=kuku>Этот параграф мы отобразим темно-красным цветом по белому фону.</p> <p>Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим темно-красным цветом по белому фону.</p> Этот параграф мы отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону.
Описание слайда:
Селектор - имя класса <style> .kuku {color:darkred;background-color:white;} </style> <p class=kuku>Этот параграф мы отобразим темно-красным цветом по белому фону.</p> <p>Эту <a class=kuku>гипертекстовую ссылку</a> мы отобразим темно-красным цветом по белому фону.</p> Этот параграф мы отобразим темно-красным цветом по белому фону. Эту гипертекстовую ссылку мы отобразим темно-красным цветом по белому фону.

Слайд 26


Селектор - идентификатор объекта Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом "#": a.mainlink {color:darkred;text-decoration:underline;font-style:italic;} #blue {color:#003366} <a class=mainlink>основная гипертекстовая ссылка</a> <a class=mainlink id=blue>модифицированная гипертекстовая ссылка</a> основная гипертекстовая ссылка модифицированная гипертекстовая ссылка
Описание слайда:
Селектор - идентификатор объекта Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом "#": a.mainlink {color:darkred;text-decoration:underline;font-style:italic;} #blue {color:#003366} <a class=mainlink>основная гипертекстовая ссылка</a> <a class=mainlink id=blue>модифицированная гипертекстовая ссылка</a> основная гипертекстовая ссылка модифицированная гипертекстовая ссылка

Слайд 27


Наследование и переопределение Сначала применяются стили умолчания браузера Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). Прилинкованные стили переопределяются описаниями стилей в элементе STYLE Стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки
Описание слайда:
Наследование и переопределение Сначала применяются стили умолчания браузера Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа). Прилинкованные стили переопределяются описаниями стилей в элементе STYLE Стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки

Слайд 28


Элемент DIV DIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента: <div style="border- color:#003366; border-width:1px; margin:20px; padding:10px;"> ... </div>
Описание слайда:
Элемент DIV DIV позволяет применить атрибуты стиля, связанные с границей блока, отступами блока от границ старшего элемента и "набивку", т.е. отступ от границы блока до границы вложенного элемента: <div style="border- color:#003366; border-width:1px; margin:20px; padding:10px;"> ... </div>

Слайд 29


Элемент SPAN Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п. <span style="font- weight:bold;">Стили <span style="font- style:italic;">могут </span> пересекаться</span>
Описание слайда:
Элемент SPAN Элемент разметки SPAN - это обобщенный строковый элемент разметки, применение которого не приводит к образованию блока текста. Он может заменить собой элементы: FONT, I, B, U, SUB, SUP и т.п. <span style="font- weight:bold;">Стили <span style="font- style:italic;">могут </span> пересекаться</span>

Слайд 30


Свойства блоков
Описание слайда:
Свойства блоков

Слайд 31


Отступы (margins) p {margin-left:50px;margin-right:5px; margin-top:15px;margin-bottom:50px; padding:0px; text-align:left;}
Описание слайда:
Отступы (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;}
Описание слайда:
Набивка (padding) p {padding-left:100px; padding-right:50px; padding-top:20px; padding-bottom:10px; text-align:left; border-width:1px;}

Слайд 33


Обтекание блока текста Атрибут float определяет плавающий блок текста. Он может принимать значения: left - блок прижат к левой границе охватывающего блок элемента; rigth - блок прижат к правой границе охватывающего блок элемента; both - текст может обтекать блок с обеих сторон. Атрибут clean – запрет обтекания: <p style='clear:right;text-align:justify;'>У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.</p>
Описание слайда:
Обтекание блока текста Атрибут float определяет плавающий блок текста. Он может принимать значения: left - блок прижат к левой границе охватывающего блок элемента; rigth - блок прижат к правой границе охватывающего блок элемента; both - текст может обтекать блок с обеих сторон. Атрибут clean – запрет обтекания: <p style='clear:right;text-align:justify;'>У этого блока запрещен \"плавающий\" блок справа, поэтому он начинается ниже прижатого вправо ограниченного блока.</p>

Слайд 34


Управление цветом Цвет текста: td {color:darkred;} p {color:darkred;} i {color:#003366;font-style:normal;} Цвет фона: <body bgcolor=...>...</body> <table bgcolor=...>...</table> <span style="background-color:#003366; color:white;">как строковые элементы разметки</span> p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}
Описание слайда:
Управление цветом Цвет текста: td {color:darkred;} p {color:darkred;} i {color:#003366;font-style:normal;} Цвет фона: <body bgcolor=...>...</body> <table bgcolor=...>...</table> <span style="background-color:#003366; color:white;">как строковые элементы разметки</span> p {background: gray http://kuku.ru/kuku.gif no-repeat fixed center center;}

Слайд 35


Шрифты font-family - семейство начертаний шрифта (гарнитура); font-style - прямое начертание или курсив; font-weight - "усиление" (насыщенность) шрифта, "жирность" букв; font-size - размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt); font-variant - вариант начертания (обычный или мелкими буквами - капитель).
Описание слайда:
Шрифты font-family - семейство начертаний шрифта (гарнитура); font-style - прямое начертание или курсив; font-weight - "усиление" (насыщенность) шрифта, "жирность" букв; font-size - размер шрифта (кегль). Задается в пикселях (px) и типографских пунктах (pt); font-variant - вариант начертания (обычный или мелкими буквами - капитель).

Слайд 36


Гарнитура <p align=left style="font-size:24px; font-family:serif;color:darkred;">Эта строка набрана пропорциональным шрифтом с засечками.</p> <p align=left style="font-size:24px; font-family:sans-serif;color:darkred;">Эта строка набрана пропорциональным шрифтом без засечек.</p> <p align=left style="font-size:24px; font-family:monospace;color:darkred;">Эта строка набрана моноширинным шрифтом.</p>
Описание слайда:
Гарнитура <p align=left style="font-size:24px; font-family:serif;color:darkred;">Эта строка набрана пропорциональным шрифтом с засечками.</p> <p align=left style="font-size:24px; font-family:sans-serif;color:darkred;">Эта строка набрана пропорциональным шрифтом без засечек.</p> <p align=left style="font-size:24px; font-family:monospace;color:darkred;">Эта строка набрана моноширинным шрифтом.</p>

Слайд 37


Кегль (font-size) <p style="font-size:12pt;">Кегль параграфа установлен в 12 пунктов</p> <p style="font-size:12px;">Кегль параграфа установлен в 12 пикселей</p> <p style="font-size:120%;">Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента</p> <p style="font-size:large;">Размер кегля large</p>
Описание слайда:
Кегль (font-size) <p style="font-size:12pt;">Кегль параграфа установлен в 12 пунктов</p> <p style="font-size:12px;">Кегль параграфа установлен в 12 пикселей</p> <p style="font-size:120%;">Кегль параграфа установлен в 120% от размера букв охватывающего параграф элемента</p> <p style="font-size:large;">Размер кегля large</p>

Слайд 38


Начертание <p style="color:darkred; font-style:normal;">Прямое начертание</p> <p style="color:darkred; font-style:italic;">Курсив</p> <p style="color:darkred;font-style:italic; font-weight:bold;">Курсив</p>
Описание слайда:
Начертание <p style="color:darkred; font-style:normal;">Прямое начертание</p> <p style="color:darkred; font-style:italic;">Курсив</p> <p style="color:darkred;font-style:italic; font-weight:bold;">Курсив</p>

Слайд 39


Межбуквенные расстояния <p style="font-family:monospace; letter-spacing:10pt;color:darkred"> Межбуквенное расстояние 10pt</p>
Описание слайда:
Межбуквенные расстояния <p style="font-family:monospace; letter-spacing:10pt;color:darkred"> Межбуквенное расстояние 10pt</p>

Слайд 40


Основы информационных технологий. Компьютерные языки разметки, слайд №40
Описание слайда:

Слайд 41


Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количество контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки.  Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количество контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки. 
Описание слайда:
Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количество контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки.  Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количество контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки. 

Слайд 42


В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса. В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса.
Описание слайда:
В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса. В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса.

Слайд 43


Для начала рассмотрим ситуации когда появляется полоса прокрутки:   1)Переполнение по высоте, эта ситуация возникает если контента на странице больше чем размер окна браузера.  2)Переполнение по ширине возникает если контент не может быть перенесен на другую строку, например текст в теге PRE или слишком широкая картинка или другой объект  3)Явно заданные размеры бокса, но контент в него не помещается.  4)Если бокс позиционирован абсолютно(class{position:absolute})  5) Если задан отрицательный размер бокса.
Описание слайда:
Для начала рассмотрим ситуации когда появляется полоса прокрутки:   1)Переполнение по высоте, эта ситуация возникает если контента на странице больше чем размер окна браузера.  2)Переполнение по ширине возникает если контент не может быть перенесен на другую строку, например текст в теге PRE или слишком широкая картинка или другой объект  3)Явно заданные размеры бокса, но контент в него не помещается.  4)Если бокс позиционирован абсолютно(class{position:absolute})  5) Если задан отрицательный размер бокса.

Слайд 44


Чтобы управлять переполнением, т.е. полосой прокрутки в каскадных таблицах стилей существует существует правило overflow, которое может принимать следующие значения: 1)class{overflow:visible} - это значение по умолчанию, его задавать не обязательно кроме тех случаев если вам нужно вернуть умолчания. При использовании этого правила полоса прокрутки будет возникать только при необходимости, т.е. если действительно будет происходить переполнение блока. 2)class{overflow:hidden} - это правило скрывает полосу прокрутки всегда, даже если происходит переполнение и скрытое содержимое не отображается ни когда.  3)class{overflow:scroll} в этом случае полоса прокрутки будет всегда, независимо происходит переполнение или нет. Очень полезное правило при динамическом содержимом. 4)class{overflow:auto} аналог overflow:visible, но зависит от браузера. 5)class{overflow:inherit} на усмотрение браузера(пользовательского агента). Свойство overflow не наследуется.
Описание слайда:
Чтобы управлять переполнением, т.е. полосой прокрутки в каскадных таблицах стилей существует существует правило overflow, которое может принимать следующие значения: 1)class{overflow:visible} - это значение по умолчанию, его задавать не обязательно кроме тех случаев если вам нужно вернуть умолчания. При использовании этого правила полоса прокрутки будет возникать только при необходимости, т.е. если действительно будет происходить переполнение блока. 2)class{overflow:hidden} - это правило скрывает полосу прокрутки всегда, даже если происходит переполнение и скрытое содержимое не отображается ни когда.  3)class{overflow:scroll} в этом случае полоса прокрутки будет всегда, независимо происходит переполнение или нет. Очень полезное правило при динамическом содержимом. 4)class{overflow:auto} аналог overflow:visible, но зависит от браузера. 5)class{overflow:inherit} на усмотрение браузера(пользовательского агента). Свойство overflow не наследуется.

Слайд 45


По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет, По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет, в каскадных таблицах стилей мы можем изменять умолчания при помощи свойства clip и отображать нужную нам область.
Описание слайда:
По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет, По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет, в каскадных таблицах стилей мы можем изменять умолчания при помощи свойства clip и отображать нужную нам область.

Слайд 46


Свойство правила clip принимает следующие значения: 1)class{clip:auto} Сжимаемая область имеет тот же размер и размещение, что и боксы элемента.  2)class{clip:inherit} На усмотрение браузера.  3)class{clip:rect(верх справа низ слева)}  В этом значении мы сами задаем область видимости, значение могут быть auto или единицы длины, например class{clip:rect(auto 10px -20px 50px)} Свойство clip применяется дополнением к свойству overflow, только в том случае если значение последнего отлизается от overflow:visible. Свойство clip не наследуется.
Описание слайда:
Свойство правила clip принимает следующие значения: 1)class{clip:auto} Сжимаемая область имеет тот же размер и размещение, что и боксы элемента.  2)class{clip:inherit} На усмотрение браузера.  3)class{clip:rect(верх справа низ слева)}  В этом значении мы сами задаем область видимости, значение могут быть auto или единицы длины, например class{clip:rect(auto 10px -20px 50px)} Свойство clip применяется дополнением к свойству overflow, только в том случае если значение последнего отлизается от overflow:visible. Свойство clip не наследуется.

Слайд 47


Свойство правил visibility предписывает отображать ли бокс или нет. Свойство правил visibility предписывает отображать ли бокс или нет. Например если вернуться к теме об моделях боксов и вспомнить  display: none, не смотря на то что блок с таким правилом скрыт, он все же занимает место на странице. А свойство visibility управляет этим процессом, т.е. резервирует место под боксы или вообще подавляет.
Описание слайда:
Свойство правил visibility предписывает отображать ли бокс или нет. Свойство правил visibility предписывает отображать ли бокс или нет. Например если вернуться к теме об моделях боксов и вспомнить  display: none, не смотря на то что блок с таким правилом скрыт, он все же занимает место на странице. А свойство visibility управляет этим процессом, т.е. резервирует место под боксы или вообще подавляет.

Слайд 48


Свойство visibility принимает такие значения:  1)class{visibility:visible}  Место под данный бокс резервируется. 2)class{visibility:hidden}  Место под данный бокс вырезается. 3)class{visibility:collapse}  Если это значение не используется для тегов TR, TH и TD то используется как и visibility:hidden.
Описание слайда:
Свойство visibility принимает такие значения:  1)class{visibility:visible}  Место под данный бокс резервируется. 2)class{visibility:hidden}  Место под данный бокс вырезается. 3)class{visibility:collapse}  Если это значение не используется для тегов TR, TH и TD то используется как и visibility:hidden.

Слайд 49


Звуковые Таблицы стилей
Описание слайда:
Звуковые Таблицы стилей

Слайд 50


не все пользователь могут четко видеть ваш дизайн, а некоторые вообще его не видят, а причина вся в том что у них очень плохое зрение и для таких пользователей существуют звуковые браузеры, которые считывают текст с страниц и воспроизводят их не все пользователь могут четко видеть ваш дизайн, а некоторые вообще его не видят, а причина вся в том что у них очень плохое зрение и для таких пользователей существуют звуковые браузеры, которые считывают текст с страниц и воспроизводят их
Описание слайда:
не все пользователь могут четко видеть ваш дизайн, а некоторые вообще его не видят, а причина вся в том что у них очень плохое зрение и для таких пользователей существуют звуковые браузеры, которые считывают текст с страниц и воспроизводят их не все пользователь могут четко видеть ваш дизайн, а некоторые вообще его не видят, а причина вся в том что у них очень плохое зрение и для таких пользователей существуют звуковые браузеры, которые считывают текст с страниц и воспроизводят их

Слайд 51


В CSS есть целый ряд правил, который поможет правильно обработать ваши файлы Правило volume: позволяет регулировать громкость и имеет значения:  volume:50 - это значение устанавливается цифрой в диапазоне от нуля до ста, соответственно чем цифра больше тем громче. volume:silent - без звука. volume:x-soft - аналогично volume:0. volume:soft - аналогично volume:25. volume:medium - аналогично volume:50, если правило не установлено, то это значение по умолчанию.
Описание слайда:
В CSS есть целый ряд правил, который поможет правильно обработать ваши файлы Правило volume: позволяет регулировать громкость и имеет значения:  volume:50 - это значение устанавливается цифрой в диапазоне от нуля до ста, соответственно чем цифра больше тем громче. volume:silent - без звука. volume:x-soft - аналогично volume:0. volume:soft - аналогично volume:25. volume:medium - аналогично volume:50, если правило не установлено, то это значение по умолчанию.

Слайд 52


В CSS есть целый ряд правил, который поможет правильно обработать ваши файлы volume:loud - аналогично volume:75. volume:x-loud - аналогично volume:100. volume:inherit - значение вычисленное браузером. volume:50% - громкость можно задавать в процентах, относительно наследуемого значения, а затем выравниваются в пределах от 0 до 100. Правило volume наследуется и используется только для звуковых носителей.
Описание слайда:
В CSS есть целый ряд правил, который поможет правильно обработать ваши файлы volume:loud - аналогично volume:75. volume:x-loud - аналогично volume:100. volume:inherit - значение вычисленное браузером. volume:50% - громкость можно задавать в процентах, относительно наследуемого значения, а затем выравниваются в пределах от 0 до 100. Правило volume наследуется и используется только для звуковых носителей.

Слайд 53


Правило speak: определяет будет ли текст произноситься, если да то как. Допустимые значения: speak:normal - значение по умолчанию, текст воспроизводится согласно языку. speak:none - текст не воспроизводится, как будто отсуствует. speak:spell-out - текст воспроизводится по буквам. speak:inherit - вычисленное браузером.
Описание слайда:
Правило speak: определяет будет ли текст произноситься, если да то как. Допустимые значения: speak:normal - значение по умолчанию, текст воспроизводится согласно языку. speak:none - текст не воспроизводится, как будто отсуствует. speak:spell-out - текст воспроизводится по буквам. speak:inherit - вычисленное браузером.

Слайд 54


Правило pause-before: определяет паузу(задержку) перед воспроизведением бокса и имеет значения: pause-before:700ms - пауза задается в секундах или милисекундах pause-before:75% - задается в процентах относительно правила speech-rate, т.е. если speech-rate установлено 80 слов в минуту, а абзац содержит 120 слов то pause-before:100% бутет иметь смысл как pause-before:1500ms. pause-before:inherit - значение вычисленное браузером. Не наследуется и относится только к звуковым носителям.
Описание слайда:
Правило pause-before: определяет паузу(задержку) перед воспроизведением бокса и имеет значения: pause-before:700ms - пауза задается в секундах или милисекундах pause-before:75% - задается в процентах относительно правила speech-rate, т.е. если speech-rate установлено 80 слов в минуту, а абзац содержит 120 слов то pause-before:100% бутет иметь смысл как pause-before:1500ms. pause-before:inherit - значение вычисленное браузером. Не наследуется и относится только к звуковым носителям.

Слайд 55


Правило pause-after: определяет паузу после воспроизведения бокса и имеет те же значения что и pause-before
Описание слайда:
Правило pause-after: определяет паузу после воспроизведения бокса и имеет те же значения что и pause-before

Слайд 56


Правило pause: помещает в себе два предыдущих.  P{pause:100ms} если указано одно значение то оно распространяется на 2 правила(pause-before и pause-after). DIV{pause:100ms 150ms} если указано два значения то первое распространяется на pause-before, а второе на pause-after. Правило pause не наследуется.
Описание слайда:
Правило pause: помещает в себе два предыдущих.  P{pause:100ms} если указано одно значение то оно распространяется на 2 правила(pause-before и pause-after). DIV{pause:100ms 150ms} если указано два значения то первое распространяется на pause-before, а второе на pause-after. Правило pause не наследуется.

Слайд 57


Правило cue-before: определяет иконку(звуковой файл) перед боксом. Т.е. перед боксов будет проигрываться какая-то мелодия, возможно с словами. Правило имеет значения:  cue-before:none значение по умолчанию, иконка отсутствует. cue-before:url("file.wav") абсолютный или относительный адрес иконки. cue-before:inherit - вычесленное браузером, если в браузере вмонтированы звуки, то он может подставить свои. Правило не наследуется и используется только для звуковых носителей
Описание слайда:
Правило cue-before: определяет иконку(звуковой файл) перед боксом. Т.е. перед боксов будет проигрываться какая-то мелодия, возможно с словами. Правило имеет значения:  cue-before:none значение по умолчанию, иконка отсутствует. cue-before:url("file.wav") абсолютный или относительный адрес иконки. cue-before:inherit - вычесленное браузером, если в браузере вмонтированы звуки, то он может подставить свои. Правило не наследуется и используется только для звуковых носителей

Слайд 58


Правило cue-after: определяет иконку(звуковой файл) после бокса. Правило cue-after: определяет иконку(звуковой файл) после бокса. Значения как и у cue-before Правило cue: - это сокращенная форма для cue-before и cue-after.DIV{cue:url("file.wav")}, может принимать два значения для начала и конца.
Описание слайда:
Правило cue-after: определяет иконку(звуковой файл) после бокса. Правило cue-after: определяет иконку(звуковой файл) после бокса. Значения как и у cue-before Правило cue: - это сокращенная форма для cue-before и cue-after.DIV{cue:url("file.wav")}, может принимать два значения для начала и конца.

Слайд 59


Правило play-during: устанавливает и управляет фоновой музыкой, т.е. каскадные таблицы стилей позволяют добавлять мелодию в время воспроизведения страницы. Правило play-during имеет значения:  {play-during:url("file.wav")} - указывает путь к фоновой музыке.  {play-during:url("file.wav") mix } - фоновая музыка в дескрипторе url смешивается с фоновой музыкой родительского элемента. {play-during:url("file.wav") repeat } - если время воспроизведение фоновой музыки короче времени воспроизведения страницы, то она повторяется. {play-during:auto} - это значение по умолчанию, которое имеет смысл что фоновая музыка родительского элемента воспроизводится без рестарта. {play-during:none } - фоновая музыка не воспроизводится. Правило play-during применяется только для звуковых носителей, оно не наследуется и его можно использовать с всеми элементами.
Описание слайда:
Правило play-during: устанавливает и управляет фоновой музыкой, т.е. каскадные таблицы стилей позволяют добавлять мелодию в время воспроизведения страницы. Правило play-during имеет значения:  {play-during:url("file.wav")} - указывает путь к фоновой музыке.  {play-during:url("file.wav") mix } - фоновая музыка в дескрипторе url смешивается с фоновой музыкой родительского элемента. {play-during:url("file.wav") repeat } - если время воспроизведение фоновой музыки короче времени воспроизведения страницы, то она повторяется. {play-during:auto} - это значение по умолчанию, которое имеет смысл что фоновая музыка родительского элемента воспроизводится без рестарта. {play-during:none } - фоновая музыка не воспроизводится. Правило play-during применяется только для звуковых носителей, оно не наследуется и его можно использовать с всеми элементами.

Слайд 60


Правило azimuth: управляет звуковыми эффектами, по умолчанию воспроизводится моно, но можно использовать стерео, квадро или даже систему домашнего кинотеатра. Правило azimuth: управляет звуковыми эффектами, по умолчанию воспроизводится моно, но можно использовать стерео, квадро или даже систему домашнего кинотеатра. Управление звуковой системы производится при помощи единиц измерения deg в диапазоне от -360 до 360, центр(перед) это 0deg, сзади = 180deg, слева -90(270)deg и справа 90deg.
Описание слайда:
Правило azimuth: управляет звуковыми эффектами, по умолчанию воспроизводится моно, но можно использовать стерео, квадро или даже систему домашнего кинотеатра. Правило azimuth: управляет звуковыми эффектами, по умолчанию воспроизводится моно, но можно использовать стерео, квадро или даже систему домашнего кинотеатра. Управление звуковой системы производится при помощи единиц измерения deg в диапазоне от -360 до 360, центр(перед) это 0deg, сзади = 180deg, слева -90(270)deg и справа 90deg.

Слайд 61


Синтаксис правила azimuth:  *{azimuth:90deg -90deg}  Значения могут быть: left-side, far-left, left, center-left, center, center-right, right, far-right, right-side,,behind, leftwards, rightwards что они значат смотрите в спецификации.
Описание слайда:
Синтаксис правила azimuth:  *{azimuth:90deg -90deg}  Значения могут быть: left-side, far-left, left, center-left, center, center-right, right, far-right, right-side,,behind, leftwards, rightwards что они значат смотрите в спецификации.

Слайд 62


Правило elevation: управляет звуковым эффектом по вертикали, некоторые системы(например ПсевдоСтерео) позволяет звуку литься сверху или снизу. Правило elevation: управляет звуковым эффектом по вертикали, некоторые системы(например ПсевдоСтерео) позволяет звуку литься сверху или снизу. Правило elevation так-же измеряется в единицах измерения deg, но в диапазоне от -90 до 90, -90deg звук льется по низу, 90deg звук идет по верху.
Описание слайда:
Правило elevation: управляет звуковым эффектом по вертикали, некоторые системы(например ПсевдоСтерео) позволяет звуку литься сверху или снизу. Правило elevation: управляет звуковым эффектом по вертикали, некоторые системы(например ПсевдоСтерео) позволяет звуку литься сверху или снизу. Правило elevation так-же измеряется в единицах измерения deg, но в диапазоне от -90 до 90, -90deg звук льется по низу, 90deg звук идет по верху.

Слайд 63


Правило elevation может иметь только одно значение: elevation:0deg - задается в единицах измерения. elevation:below - тоже что и -90. elevation:level - значение по умолчанию, тоже что и ноль.  elevation:above - тоже что и 90. elevation:higher - добаляет 10deg к значению родителя. elevation:lower - убаляет 10deg у значения родителя. Правила azimuth и elevation наследуются, применяются к всем элементам для звуковых типов носителей. Правило elevation может иметь только одно значение: elevation:0deg - задается в единицах измерения. elevation:below - тоже что и -90. elevation:level - значение по умолчанию, тоже что и ноль.  elevation:above - тоже что и 90. elevation:higher - добаляет 10deg к значению родителя. elevation:lower - убаляет 10deg у значения родителя. Правила azimuth и elevation наследуются, применяются к всем элементам для звуковых типов носителей.
Описание слайда:
Правило elevation может иметь только одно значение: elevation:0deg - задается в единицах измерения. elevation:below - тоже что и -90. elevation:level - значение по умолчанию, тоже что и ноль.  elevation:above - тоже что и 90. elevation:higher - добаляет 10deg к значению родителя. elevation:lower - убаляет 10deg у значения родителя. Правила azimuth и elevation наследуются, применяются к всем элементам для звуковых типов носителей. Правило elevation может иметь только одно значение: elevation:0deg - задается в единицах измерения. elevation:below - тоже что и -90. elevation:level - значение по умолчанию, тоже что и ноль.  elevation:above - тоже что и 90. elevation:higher - добаляет 10deg к значению родителя. elevation:lower - убаляет 10deg у значения родителя. Правила azimuth и elevation наследуются, применяются к всем элементам для звуковых типов носителей.

Слайд 64


Свойства характеристики голоса
Описание слайда:
Свойства характеристики голоса

Слайд 65


Правило speech-rate: управляет темпом речи, т.е. сколько слов в минуту должно воспроизводиться. Данное правило имеет значение:  speech-rate:120 - значение задается цифрой. speech-rate:x-slow - 80 слов в минуту. speech-rate:slow - 120 слов в минуту. speech-rate:medium - значение по умолчанию, 180-200 слов в минуту. speech-rate:fast - 300 слов в минуту. speech-rate:x-fast - 500 слов в минуту. speech-rate: - ускорить на 40 слов в минуту. speech-rate: - замедлить на 40 слов в минуту. При выборе темпа нужно учитывать язык текста. Правило speech-rate наследуется, применяется к всем элементам и используется только к звуковым носителям
Описание слайда:
Правило speech-rate: управляет темпом речи, т.е. сколько слов в минуту должно воспроизводиться. Данное правило имеет значение:  speech-rate:120 - значение задается цифрой. speech-rate:x-slow - 80 слов в минуту. speech-rate:slow - 120 слов в минуту. speech-rate:medium - значение по умолчанию, 180-200 слов в минуту. speech-rate:fast - 300 слов в минуту. speech-rate:x-fast - 500 слов в минуту. speech-rate: - ускорить на 40 слов в минуту. speech-rate: - замедлить на 40 слов в минуту. При выборе темпа нужно учитывать язык текста. Правило speech-rate наследуется, применяется к всем элементам и используется только к звуковым носителям

Слайд 66


Правило voice-family: управляет стилем воспроизведения текста.  voice-family:male - текст воспроизводится мужским голосом. voice-family:female - текст воспроизводится женским голосом.  voice-family:child - текст воспроизводится детским голосом.  Значения могут быть и специфичными например comedian, trinoids, carlos или lani. Есть и другие специфичные значения. Правило voice-family наследуется, применяется к всем элементам и используется только к звуковым носителям.
Описание слайда:
Правило voice-family: управляет стилем воспроизведения текста.  voice-family:male - текст воспроизводится мужским голосом. voice-family:female - текст воспроизводится женским голосом.  voice-family:child - текст воспроизводится детским голосом.  Значения могут быть и специфичными например comedian, trinoids, carlos или lani. Есть и другие специфичные значения. Правило voice-family наследуется, применяется к всем элементам и используется только к звуковым носителям.

Слайд 67


Правило pitch: управляет высотой(частотой) голоса и имеет значения: pitch:150Hz - высота голоса задается в герцах pitch:x-low - очень низкий голос. pitch:low - низкий голос. pitch:medium - средний голос. pitch:high - высокий голос. pitch:x-high - очень высокий голос. Правило pitch если оно имеет значение не в герцах, то оно только дополняет voice-family.
Описание слайда:
Правило pitch: управляет высотой(частотой) голоса и имеет значения: pitch:150Hz - высота голоса задается в герцах pitch:x-low - очень низкий голос. pitch:low - низкий голос. pitch:medium - средний голос. pitch:high - высокий голос. pitch:x-high - очень высокий голос. Правило pitch если оно имеет значение не в герцах, то оно только дополняет voice-family.

Слайд 68


Правило pitch-range: управляет оживлённостью голоса, задается числами:  *{pitch-range:50;} -это начальное значение, его можно изменить от от 0 до 100. Правило pitch-range: управляет оживлённостью голоса, задается числами:  *{pitch-range:50;} -это начальное значение, его можно изменить от от 0 до 100.
Описание слайда:
Правило pitch-range: управляет оживлённостью голоса, задается числами:  *{pitch-range:50;} -это начальное значение, его можно изменить от от 0 до 100. Правило pitch-range: управляет оживлённостью голоса, задается числами:  *{pitch-range:50;} -это начальное значение, его можно изменить от от 0 до 100.

Слайд 69


Правило stress:  управляет интонацией голоса, например по умолчанию stress:50, но если вам нужно подавить интонацию вы можете понизить stress:0 или повысить до stress:100. Это правило действует только вместе с pitch-range.
Описание слайда:
Правило stress:  управляет интонацией голоса, например по умолчанию stress:50, но если вам нужно подавить интонацию вы можете понизить stress:0 или повысить до stress:100. Это правило действует только вместе с pitch-range.

Слайд 70


Правило richness:  управляет полетностью голоса, например на улице или в большем зале нужен более "полетнй" голос(richness:100), а в небольшой комнате нужен более мелодичный(мягкий) тогда richness:0. По умолчанию значение 50, не обязательно чтобы повысить или понизить использовать значение 0 или 100, вы можете самостоятельно определить это значение от 0 до 100, например 30 или 79.
Описание слайда:
Правило richness:  управляет полетностью голоса, например на улице или в большем зале нужен более "полетнй" голос(richness:100), а в небольшой комнате нужен более мелодичный(мягкий) тогда richness:0. По умолчанию значение 50, не обязательно чтобы повысить или понизить использовать значение 0 или 100, вы можете самостоятельно определить это значение от 0 до 100, например 30 или 79.

Слайд 71


Правило speak-punctuation: управляет произношением знаков пунктуации и имеет значения:  speak-punctuation:code - знаки пунктуации произносятся буквально, т.е. если в тексте встречается точка, то браузер произносит: "точка", тоже с запятымы, скобками кавычками.  speak-punctuation:none - знаки пунктуации не произносятся. Правило speak-punctuation: управляет произношением знаков пунктуации и имеет значения:  speak-punctuation:code - знаки пунктуации произносятся буквально, т.е. если в тексте встречается точка, то браузер произносит: "точка", тоже с запятымы, скобками кавычками.  speak-punctuation:none - знаки пунктуации не произносятся.
Описание слайда:
Правило speak-punctuation: управляет произношением знаков пунктуации и имеет значения:  speak-punctuation:code - знаки пунктуации произносятся буквально, т.е. если в тексте встречается точка, то браузер произносит: "точка", тоже с запятымы, скобками кавычками.  speak-punctuation:none - знаки пунктуации не произносятся. Правило speak-punctuation: управляет произношением знаков пунктуации и имеет значения:  speak-punctuation:code - знаки пунктуации произносятся буквально, т.е. если в тексте встречается точка, то браузер произносит: "точка", тоже с запятымы, скобками кавычками.  speak-punctuation:none - знаки пунктуации не произносятся.

Слайд 72


Правило speak-numeral: управляет произношением цифр и имеет следующие значения:  speak-numeral:digits - цифры произносятся посимвольно, например число 123 браузер произнесет как: "один два три". speak-numeral:continuous - число произносится целиком, например число 123 браузер произнесет как: "сто двадцать три". Правило speak-numeral: управляет произношением цифр и имеет следующие значения:  speak-numeral:digits - цифры произносятся посимвольно, например число 123 браузер произнесет как: "один два три". speak-numeral:continuous - число произносится целиком, например число 123 браузер произнесет как: "сто двадцать три".
Описание слайда:
Правило speak-numeral: управляет произношением цифр и имеет следующие значения:  speak-numeral:digits - цифры произносятся посимвольно, например число 123 браузер произнесет как: "один два три". speak-numeral:continuous - число произносится целиком, например число 123 браузер произнесет как: "сто двадцать три". Правило speak-numeral: управляет произношением цифр и имеет следующие значения:  speak-numeral:digits - цифры произносятся посимвольно, например число 123 браузер произнесет как: "один два три". speak-numeral:continuous - число произносится целиком, например число 123 браузер произнесет как: "сто двадцать три".

Слайд 73


Патчи в какскадных таблиц стилей для I.E., FireFox, Opera и Safari Патчи в какскадных таблиц стилей для I.E., FireFox, Opera и Safari
Описание слайда:
Патчи в какскадных таблиц стилей для I.E., FireFox, Opera и Safari Патчи в какскадных таблиц стилей для I.E., FireFox, Opera и Safari

Слайд 74


CSS позволяет добиться межбраузерности т.е. дизайн будет отображаться в всех браузерах не зависимо от операционной системы одинаково, но это немного не так, что бы добиться абсолютной межбраузерностью нужно пользоваться "хаками" или проще говоря патчами.
Описание слайда:
CSS позволяет добиться межбраузерности т.е. дизайн будет отображаться в всех браузерах не зависимо от операционной системы одинаково, но это немного не так, что бы добиться абсолютной межбраузерностью нужно пользоваться "хаками" или проще говоря патчами.

Слайд 75


Патч от английского patch - это заплатка, которая покрывает какую либо дыру. В каскадных таблицах стилей есть тоже "дыры", т.е. некоторые браузеры неправильно обрабатывают документы, в элементарных правилах дыры не образовываются, а вот с свойствами правил таких как: display, position, float и превдоклассы начинаются проблемы. Например InternetExplorer некорректно понимает float, а I.E-6 не понимает :hover вместо него можно использовать :focus, и таких примеров может быть сотни.. Патч от английского patch - это заплатка, которая покрывает какую либо дыру. В каскадных таблицах стилей есть тоже "дыры", т.е. некоторые браузеры неправильно обрабатывают документы, в элементарных правилах дыры не образовываются, а вот с свойствами правил таких как: display, position, float и превдоклассы начинаются проблемы. Например InternetExplorer некорректно понимает float, а I.E-6 не понимает :hover вместо него можно использовать :focus, и таких примеров может быть сотни..
Описание слайда:
Патч от английского patch - это заплатка, которая покрывает какую либо дыру. В каскадных таблицах стилей есть тоже "дыры", т.е. некоторые браузеры неправильно обрабатывают документы, в элементарных правилах дыры не образовываются, а вот с свойствами правил таких как: display, position, float и превдоклассы начинаются проблемы. Например InternetExplorer некорректно понимает float, а I.E-6 не понимает :hover вместо него можно использовать :focus, и таких примеров может быть сотни.. Патч от английского patch - это заплатка, которая покрывает какую либо дыру. В каскадных таблицах стилей есть тоже "дыры", т.е. некоторые браузеры неправильно обрабатывают документы, в элементарных правилах дыры не образовываются, а вот с свойствами правил таких как: display, position, float и превдоклассы начинаются проблемы. Например InternetExplorer некорректно понимает float, а I.E-6 не понимает :hover вместо него можно использовать :focus, и таких примеров может быть сотни..

Слайд 76


Патчи для браузера FireFox для браузера FireFox всех версий: @-moz-document url-prefix() {  .style {color:#000000;}  }
Описание слайда:
Патчи для браузера FireFox для браузера FireFox всех версий: @-moz-document url-prefix() {  .style {color:#000000;}  }

Слайд 77


Патчи для браузера Opera Только для Оперы-9.5:  html:first-child .style {  color:#000000;  }  Для других версий оперы: @media all and (-webkit-min-device-pixel-ratio:10000),  not all and (-webkit-min-device-pixel-ratio:0) {  .style {color:#000000;}  }  или  *|html[xmlns*=""] .style {  color:#000000;;  }
Описание слайда:
Патчи для браузера Opera Только для Оперы-9.5:  html:first-child .style {  color:#000000;  }  Для других версий оперы: @media all and (-webkit-min-device-pixel-ratio:10000),  not all and (-webkit-min-device-pixel-ratio:0) {  .style {color:#000000;}  }  или  *|html[xmlns*=""] .style {  color:#000000;;  }

Слайд 78


CSS-патчи для браузера Safari Первый вариант:  body:last-child:not(:root:root) .style {  color:#000000;  }  Второй вариант:  html[xmlns*=""] body:last-child .style {  color:#000000;  }
Описание слайда:
CSS-патчи для браузера Safari Первый вариант:  body:last-child:not(:root:root) .style {  color:#000000;  }  Второй вариант:  html[xmlns*=""] body:last-child .style {  color:#000000;  }

Слайд 79


CSS-патчи для браузера Internet Explorer Для браузера Internet Explorer 6 : .style {  _color:#000000;  }  или  * html .style {  background: #F00;  } Для браузера Internet Explorer 7 :  *+html .style {  color:#000000;  }  или  *:first-child+html .style {  color:#000000;  } 
Описание слайда:
CSS-патчи для браузера Internet Explorer Для браузера Internet Explorer 6 : .style {  _color:#000000;  }  или  * html .style {  background: #F00;  } Для браузера Internet Explorer 7 :  *+html .style {  color:#000000;  }  или  *:first-child+html .style {  color:#000000;  } 

Слайд 80


Из-за постоянных проблем в Internet Explorer, были разработаны даже условные конструкции в которые помещают стили тегом link или style:  <!--[if IE]>  <style type="text/css">  html{overflow:auto;} body{color:#000000;}  </style>  <![endif]-->  <!--[if IE]> ... <![endif]--> - для всех версий Internet Explorer <!--[if IE 5]> ... <![endif]--> - только для 5 версии. <!--[if IE 6]> ... <![endif]--> - только для 6 версии. <!--[if IE 7]> ... <![endif]--> - только для 7 версии. <!--[if IE 8]> ... <![endif]--> - только для 8 версии. <!--[if IE 9]> ... <![endif]--> - только для 9 версии. <!--[if ! IE]> ... <![endif]--> - не для Internet Explorer. <!--[if lt IE 7]> ... <![endif]--> - для всех что ниже 7.  <!--[if gt IE 6]> ... <![endif]--> - для всех что выше 6. <!--[if gte IE 7]> ... <![endif]--> - для 7 и выше. <!--[if lte IE 7]> ... <![endif]--> - для 7 и ниже. <!--[if ! gte IE 7]> ... <![endif]--> - для всех версий кроме 7. В последних 5 вариантах цифра может быть любая до 9.
Описание слайда:
Из-за постоянных проблем в Internet Explorer, были разработаны даже условные конструкции в которые помещают стили тегом link или style:  <!--[if IE]>  <style type="text/css">  html{overflow:auto;} body{color:#000000;}  </style>  <![endif]-->  <!--[if IE]> ... <![endif]--> - для всех версий Internet Explorer <!--[if IE 5]> ... <![endif]--> - только для 5 версии. <!--[if IE 6]> ... <![endif]--> - только для 6 версии. <!--[if IE 7]> ... <![endif]--> - только для 7 версии. <!--[if IE 8]> ... <![endif]--> - только для 8 версии. <!--[if IE 9]> ... <![endif]--> - только для 9 версии. <!--[if ! IE]> ... <![endif]--> - не для Internet Explorer. <!--[if lt IE 7]> ... <![endif]--> - для всех что ниже 7.  <!--[if gt IE 6]> ... <![endif]--> - для всех что выше 6. <!--[if gte IE 7]> ... <![endif]--> - для 7 и выше. <!--[if lte IE 7]> ... <![endif]--> - для 7 и ниже. <!--[if ! gte IE 7]> ... <![endif]--> - для всех версий кроме 7. В последних 5 вариантах цифра может быть любая до 9.

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию