Презентация Основы информационных технологий. Компьютерные языки разметки онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Основы информационных технологий. Компьютерные языки разметки абсолютно бесплатно. Урок-презентация на эту тему содержит всего 80 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:80 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:488.50 kB
- Просмотров:79
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: ОСНОВЫ ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ
КОМПЬЮТЕРНЫЕ ЯЗЫКИ РАЗМЕТКИ
№2 слайд
Содержание слайда:
№3 слайд
Содержание слайда:
№4 слайд
Содержание слайда:
№5 слайд
Содержание слайда:
№6 слайд
Содержание слайда: CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
№7 слайд
Содержание слайда: Включение в HTML
№8 слайд
Содержание слайда: CSS
№9 слайд
Содержание слайда: Типы верстки
№10 слайд
Содержание слайда: CSS-верстка
Преимущества:
Несколько дизайнов страницы для разных устройств просмотра.
Уменьшение времени загрузки страниц сайта
Простота последующего изменения дизайна.
Дополнительные возможности оформления.
Оптимально с точки зрения поисковых систем.
Недостатки:
Различное отображение вёрстки в различных браузерах (особенно устаревших)
Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS
№11 слайд
Содержание слайда: Уровень 1 (CSS1)
№12 слайд
Содержание слайда: Уровень 2 (CSS2)
№13 слайд
Содержание слайда: Уровень 2.1 (CSS2.1)
№14 слайд
Содержание слайда: Уровень 3 (CSS3)
№15 слайд
Содержание слайда: CSS: влияние на технологию
№16 слайд
Содержание слайда: CSS: влияние на технологию
Для каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель).
Теперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержание страниц автоматически во время обращения к ним.
№17 слайд
Содержание слайда: Способы применения CSS
переопределение стиля в элементе разметки
размещение описания стиля в заголовке документа в элементе STYLE
размещение ссылки на внешнее описание через элемент LINK
импорт описания стиля в документ
№18 слайд
Содержание слайда: Переопределение стиля
Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента разметки:
<h1 style="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</h1>
№19 слайд
Содержание слайда: Элемент 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>
№21 слайд
Содержание слайда: Ссылка на описание стиля
Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента 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>
№23 слайд
Содержание слайда: Синтаксис
Синтаксис описания стилей в общем виде представляется следующим образом:
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
№25 слайд
Содержание слайда: Селектор - имя класса
<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>
основная гипертекстовая ссылка
модифицированная гипертекстовая ссылка
№27 слайд
Содержание слайда: Наследование и переопределение
Сначала применяются стили умолчания браузера
Стили умолчания браузера переопределяются прилинкованными стилями (элемент LINK заголовка документа).
Прилинкованные стили переопределяются описаниями стилей в элементе STYLE
Стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов разметки
№28 слайд
Содержание слайда: Элемент 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>
№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 - блок прижат к левой границе охватывающего блок элемента;
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;}
№35 слайд
Содержание слайда: Шрифты
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>
№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>
№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>
№39 слайд
Содержание слайда: Межбуквенные расстояния
<p style="font-family:monospace;
letter-spacing:10pt;color:darkred">
Межбуквенное расстояние 10pt</p>
№40 слайд
Содержание слайда:
№41 слайд
Содержание слайда: Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количество контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки.
Каждый блок-бокс ограничен в размерах, например шириной и высотой окна браузера или если вы явно задали размер какого либо бокса, при этом количество контента превышает эти размеры то происходит переполнение, т.е. часть содержимого прячется и чтобы нам увидеть спрятанный контент достаточно прокрутить полосу прокрутки.
№42 слайд
Содержание слайда: В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса.
В каскадных таблицах стилей мы можем управлять визуальными эффектами, в том числе управлять полосой прокрутки, сжатием или даже обрезкой страницы до размера бокса.
№43 слайд
Содержание слайда: Для начала рассмотрим ситуации когда появляется полоса прокрутки:
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 не наследуется.
№45 слайд
Содержание слайда: По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет,
По умолчанию браузер выводит на экран контент с верхнего левого угла и сколько влезет,
в каскадных таблицах стилей мы можем изменять умолчания при помощи свойства 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 не наследуется.
№47 слайд
Содержание слайда: Свойство правил visibility предписывает отображать ли бокс или нет.
Свойство правил visibility предписывает отображать ли бокс или нет.
Например если вернуться к теме об моделях боксов и вспомнить
display: none, не смотря на то что блок с таким правилом скрыт, он все же занимает место на странице.
А свойство visibility управляет этим процессом, т.е. резервирует место под боксы или вообще подавляет.
№48 слайд
Содержание слайда: Свойство 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, если правило не установлено, то это значение по умолчанию.
№52 слайд
Содержание слайда: В 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 - вычисленное браузером.
№54 слайд
Содержание слайда: Правило 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
№56 слайд
Содержание слайда: Правило 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 - вычесленное браузером, если в браузере вмонтированы звуки, то он может подставить свои.
Правило не наследуется и используется только для звуковых носителей
№58 слайд
Содержание слайда: Правило 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 применяется только для звуковых носителей, оно не наследуется и его можно использовать с всеми элементами.
№60 слайд
Содержание слайда: Правило 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
что они значат смотрите в спецификации.
№62 слайд
Содержание слайда: Правило 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 наследуются, применяются к всем элементам для звуковых типов носителей.
№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 наследуется, применяется к всем элементам и используется только к звуковым носителям
№66 слайд
Содержание слайда: Правило 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.
№68 слайд
Содержание слайда: Правило pitch-range: управляет оживлённостью голоса, задается числами:
*{pitch-range:50;} -это начальное значение, его можно изменить от от 0 до 100.
Правило pitch-range: управляет оживлённостью голоса, задается числами:
*{pitch-range:50;} -это начальное значение, его можно изменить от от 0 до 100.
№69 слайд
Содержание слайда: Правило stress:
управляет интонацией голоса, например по умолчанию stress:50, но если вам нужно подавить интонацию вы можете понизить stress:0 или повысить до stress:100.
Это правило действует только вместе с pitch-range.
№70 слайд
Содержание слайда: Правило 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 - знаки пунктуации не произносятся.
№72 слайд
Содержание слайда: Правило 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
№74 слайд
Содержание слайда: CSS позволяет добиться межбраузерности
т.е. дизайн будет отображаться в всех браузерах не зависимо от операционной системы одинаково, но это немного не так, что бы добиться абсолютной межбраузерностью нужно пользоваться "хаками" или проще говоря патчами.
№75 слайд
Содержание слайда: Патч от английского 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;}
}
№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;;
}
№78 слайд
Содержание слайда: 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;
}
№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.
Скачать все slide презентации Основы информационных технологий. Компьютерные языки разметки одним архивом:
