HTML+CSS, верстка презентация

Содержание

Короткое введение Последний стандарт HTML – версия 5 XHML – переработанный HTML в соответствии со стандартом XML Стандарты неоднозначны, не все моменты регламентированы Придерживайтесь стандартов, осторожнее с нестандартными решениями

Слайд 1HTML+CSS (верстка)

Слайд 2Короткое введение
Последний стандарт HTML – версия 5
XHML – переработанный HTML в

соответствии со стандартом XML
Стандарты неоднозначны, не все моменты регламентированы
Придерживайтесь стандартов, осторожнее с нестандартными решениями

Слайд 3

    
        
        Заготовка
        
    
    
        
        
        

    

Слайд 4

Привет, Мир!


Слайд 5Элементы и теги

содержание тега
Текст абзаца
HTML – это прежде всего содержание, данные.

HTML, как правило, только лишь советует как отображать документы.

Слайд 6Редакторы
WYSIWYG или текстовые процессоры
WebStorm
Sublime
Atom
Notepad++
Microsoft Word!?


Слайд 7Браузеры
Internet Explorer
Edge
Firefox
Opera
Safari
Chrome
Yandex
Vivaldi

Слайд 8Другие инструменты
Firebug – не заменим для разработки и отладки HTML, CSS,

Javascript
Pixel Perfect – плагин для подложки рисунка дизайна при верстке


IE Developer Toolbar,
IETester,
DebugBar for IETester


Слайд 9Теги, атрибуты. Блочные и строковые элементы
, ,

-->
Семантика, логичность кода (, ,
, , …)
Спецсимволы: < > …

,

,

,

, …,
,

текст

Вложенность тегов

test.html

Слайд 10Обработка ошибок, DTD
Отсутствующие теги – плохая практика Первый абзац Второй абзац Заголовок
Игнорирование

лишних тегов

Первый абзац

Второй абзац
XHTML – намного строже

- не правильно,
- правильно
Регистр символов в названии тегов
текст текст текст - не правильно
Обязательные теги, например
Инструменты проверки кода на ошибки: HTML – валидатор

error.html, error2.html

Слайд 11Текст
Текст, абзацы, перевод строки
Лишние пробельные символы не учитываются

id="loginfo" style="color:blue" title="Некоторая статистическая информация">Скачано 10Кб


Заголовки, значение заголовков

и — все браузеры поддерживают, но…
 — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт)
Физическая и логическая разметка


text.html

Слайд 12Шрифт
Немного терминов
Название шрифта, семейство (serif, sans-serif, monospace…)
Размер
Цвет
Межсимвольное расстояние
Курсив, жирность

face="Courier, Arial"> Буква

Слайд 13Теги логической разметки текста
Не гарантируется именно такое отображение

Слайд 14Основные теги физической разметки
Не гарантируется именно такое отображение
Содержимое вышеупомянутых тегов –

любые элементы допустимые в тексте.
Употребляться могут везде, где применяются элементы, относящиеся к тексту.

Слайд 15Цитаты, адреса
и — цитаты (длинная и короткая)

style="color:green;">Длииинная цитата
Адрес
- адрес

Слайд 16Линейки

Использование атрибутов не рекомендуется
Часто используется для

логического отделения информационных блоков

line.html

Слайд 17Изображения в документе HTML
Формат? Все зависит от браузеров, в HTML нет

спецификаций
Формат GIF
сжатие "без потерь"
256 цветов максимум
чересстрочный (всплывающий) и нормальный формат
прозрачность
анимация

Слайд 18Формат JPEG
24 битная палитра (16 млн цветов)
потеря качества рисунка
Формат PNG
цветовые схемы:
truecolor
grayscale
индексированная

палитра (GIF-подобная) – PNG-8
альфа канал на 254 уровня
улучшенное сжатие без потерь
двухмерное чередование
гамма-коррекция
Формат MNG

Слайд 23Итог
JPEG – для фотографий, изображений с большим количеством градиентов и цветов
GIF

– для маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие
PNG8 – когда не много цветов, четкие края, например скриншоты windows - окон
PNG24 – полупрозрачности, изображение без потери качества, большое количество цветов

Слайд 24Применение изображений в HTML

align="bottom

| left | middle | right | top"
Заливка с помощью width или height
Бывает, что изображения отключены…
ismap, usemap
onAbort – только ie, onError, onLoad
Фоновые изображения

images.html

Слайд 25Гиперссылки
Основа гипертекста
URL scheme:scheme_specific_part ://:@:/ http://ru.wikipedia.org:80/wiki/HTTP?get#GET
Только US-ACSII – символы
http://yandex.ru/yandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F (/ код /)

href="/foto.jpg" target="_blank">foto - ссылка с относительным адресом
mailto:mail@mail.ru?subject=Subject


links.html, folder1/links.html

Слайд 26Отношения. Мета-теги.
Мы имеем дело не с документом, а с проектом, набором

документов

relations.html

Слайд 27Списки

Страны

Англия
Швейцария


Города



Крокодил

Гена
  • Чебурашка


    • relations.html

    Слайд 28Списки определений

    Термин 1
    Определение первого термина
    Термин 2
    Определение второго термина


    lists.html

    Слайд 29Формы
    Процесс заполнения, отправки

    События
    (controls)
    type=text, password, file
    size="30" maxlength="20"

    value="my name"
    accept="image/*"

    forms.html

    Слайд 30Поля форм

    checked>







    forms.html

    Слайд 31Поля форм 2
    текст

    cols="40">

    accesskey, disabled, readonly


    forms.html

    http://trevordavis.net/play/input-vs-button/

    Слайд 32Таблицы
    Название таблицы 111
    background, bgcolor,

    bordercolor, cols, height, title, nowrap
    colspan, rowspan
    ,
    ,

    tables.html

    Слайд 33Фреймы
    Фреймы
    Рамки для frameset
    noresize, scrolling, frameborder для

    frame
    <br><iframe height="100" width="400" src="/fr1.htm">Не работают фреймы?</iframe><br>target у ссылки, <base><br><br><p>frames.html, iframe.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/8792333be9ba7516207891820b86380a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ФреймыФреймы Рамки для framesetnoresize, scrolling, frameborder для frameНе работают фреймы?target у ссылки, frames.html, iframe.html"><img src="/img/tmb/1/33834/8792333be9ba7516207891820b86380a-800x.jpg" title="ФреймыФреймы Рамки для framesetnoresize, scrolling, frameborder для frameНе работают фреймы?target у ссылки, frames.html, iframe.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide34"> <h2><a href="/img/tmb/1/33834/baf9f966235ed4a023ca68a4c05275be-800x.jpg" target="_blank">Слайд 34</a>Объекты и апплеты<br> <br>Вложенные object<br><br><br>object.html, object.html<br>http://www.i2r.ru/static/245/out_21542.shtml</h2> <div class="text"> - Параметры object<br> </div> <div class="image"> <a href="/img/tmb/1/33834/baf9f966235ed4a023ca68a4c05275be-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Объекты и апплеты Вложенные objectobject.html, object.htmlhttp://www.i2r.ru/static/245/out_21542.shtml - Параметры object"><img src="/img/tmb/1/33834/baf9f966235ed4a023ca68a4c05275be-800x.jpg" title="Объекты и апплеты Вложенные objectobject.html, object.htmlhttp://www.i2r.ru/static/245/out_21542.shtml - Параметры object" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide35"> <h2><a href="/img/tmb/1/33834/638f36460ad5b66b5aa1235a2e8e0491-800x.jpg" target="_blank">Слайд 35</a>div и span<br>Div – блочный<br>Span – строчный <br>title, dir, lang, style,</h2> <div class="text"> class<br><br> </div> <div class="image"> <a href="/img/tmb/1/33834/638f36460ad5b66b5aa1235a2e8e0491-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="div и spanDiv – блочныйSpan – строчный title, dir, lang, style, class"><img src="/img/tmb/1/33834/638f36460ad5b66b5aa1235a2e8e0491-800x.jpg" title="div и spanDiv – блочныйSpan – строчный title, dir, lang, style, class" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide36"> <h2><a href="/img/tmb/1/33834/77429ae1d41804db53e0e3dad8bdb765-800x.jpg" target="_blank">Слайд 36</a>CSS 2<br>Стиль – это правило отображения тега<br>Встроенные стили, стили документа, внешние</h2> <div class="text"> таблицы<br><link> или @import<br>@media – правило <br>/* комментарий к стилям */<br><br><br><br><br><br><br><p>css.html, css.css, css1.css<br> </div> <div class="image"> <a href="/img/tmb/1/33834/77429ae1d41804db53e0e3dad8bdb765-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="CSS 2Стиль – это правило отображения тегаВстроенные стили, стили документа, внешние таблицы или @import@media – правило /* комментарий к стилям */css.html, css.css, css1.css"><img src="/img/tmb/1/33834/77429ae1d41804db53e0e3dad8bdb765-800x.jpg" title="CSS 2Стиль – это правило отображения тегаВстроенные стили, стили документа, внешние таблицы или @import@media –" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide37"> <h2><a href="/img/tmb/1/33834/59c9e5e7d93b5e6e76bc1b3dc2742cd9-800x.jpg" target="_blank">Слайд 37</a>Синтаксис<br>seceltor {property:value; property1:value1;}<br>p {color: red; text-decoration: underline;}<br>p {font-family: Georgia, 'Times New</h2> <div class="text"> Roman', Times, serif;}<br>p {border: 1px solid red;}<br>Стиль элемента явно указан, либо унаследован, либо взят по умолчанию<br><br><br><br><p>css0.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/59c9e5e7d93b5e6e76bc1b3dc2742cd9-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Синтаксисseceltor {property:value; property1:value1;}p {color: red; text-decoration: underline;}p {font-family: Georgia, 'Times New Roman', Times, serif;}p {border: 1px solid red;}Стиль элемента явно указан, либо унаследован, либо взят по умолчаниюcss0.html"><img src="/img/tmb/1/33834/59c9e5e7d93b5e6e76bc1b3dc2742cd9-800x.jpg" title="Синтаксисseceltor {property:value; property1:value1;}p {color: red; text-decoration: underline;}p {font-family: Georgia, 'Times New Roman', Times, serif;}p {border:" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide38"> <h2><a href="/img/tmb/1/33834/65d06df68f96b8d7f8c9c702fd5a6014-800x.jpg" target="_blank">Слайд 38</a>Селекторы<br>p {} /* типовой, по тегу */<br>#id1 {} /* идентификатор */<br>.class1</h2> <div class="text"> {} /* по имени класса */<br>* {} /* универсальный */<br>*[align="right"] {} /* по атрибутам */<br>p#id1.class1.class2 {}<br>p:first-line {} /* псевдоэлементы */<br>div, table, .class1 {} /*групповой*/<br>ul ul{} /*контекст, наследующие*/<br>ol > li {} /*дочерний*/<br>li + li {} /*соседние*/<br><p>http://xhtml.ru/2008/01/08/css-selectors - поддерживаемые в браузерах селекторы<br><p>css2.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/65d06df68f96b8d7f8c9c702fd5a6014-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Селекторыp {} /* типовой, по тегу */#id1 {} /* идентификатор */.class1 {} /* по имени класса */* {} /* универсальный */*[align="right"] {} /* по атрибутам */p#id1.class1.class2 {}p:first-line {} /* псевдоэлементы */div, table, .class1 {} /*групповой*/ul ul{} /*контекст, наследующие*/ol > li {} /*дочерний*/li + li {} /*соседние*/http://xhtml.ru/2008/01/08/css-selectors - поддерживаемые в браузерах селекторыcss2.html"><img src="/img/tmb/1/33834/65d06df68f96b8d7f8c9c702fd5a6014-800x.jpg" title="Селекторыp {} /* типовой, по тегу */#id1 {} /* идентификатор */.class1 {} /* по имени" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide39"> <h2><a href="/img/tmb/1/33834/a2bb3cae2c583e41f986732576614fa8-800x.jpg" target="_blank">Слайд 39</a>Приоритеты стилей<br>Стили <br>!important <br>Порядок каскадирования:<br>По источнику ("ближе" к тегу)<br>Специфичность, более узкое, точное</h2> <div class="text"> определение<br>Порядок следования<br>Как правило стили приоритетнее атрибутов<br><br><p>агент, браузер<br><p>пользователь<br><p>разработчик<br><p>агент, браузер<br><p>разработчик<br><p>пользователь<br><p><br><p><br><p><br><p><br><p>css.html, css.css, css1.css<br> </div> <div class="image"> <a href="/img/tmb/1/33834/a2bb3cae2c583e41f986732576614fa8-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приоритеты стилейСтили !important Порядок каскадирования:По источнику ("ближе" к тегу)Специфичность, более узкое, точное определениеПорядок следованияКак правило стили приоритетнее атрибутовагент, браузерпользовательразработчикагент, браузерразработчикпользовательcss.html, css.css, css1.css"><img src="/img/tmb/1/33834/a2bb3cae2c583e41f986732576614fa8-800x.jpg" title="Приоритеты стилейСтили !important Порядок каскадирования:По источнику ("ближе" к тегу)Специфичность, более узкое, точное определениеПорядок следованияКак правило" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide40"> <h2><a href="/img/tmb/1/33834/7d9a98d4288932b4f029e552aa64d4e0-800x.jpg" target="_blank">Слайд 40</a>Специфичность<br>a – id; b – класс, псевдокласс, аттрибут; c – имя</h2> <div class="text"> тега.<br>* {} /* a=0 b=0 c=0 -> специфичность = 0 */ <br>li {} /* a=0 b=0 c=1 -> специфичность = 1 */<br>ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ <br>ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */<br>ul ol li.red {} /* a=0 b=1 c=3 -> специфичность = 13 */<br>li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */<br>#x34y {} /* a=1 b=0 c=0 -> специфичность = 100 */<br>/* style="" -> специфичность = 1000 */<br><p>css1.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/7d9a98d4288932b4f029e552aa64d4e0-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Специфичностьa – id; b – класс, псевдокласс, аттрибут; c – имя тега.* {} /* a=0 b=0 c=0 -> специфичность = 0 */ li {} /* a=0 b=0 c=1 -> специфичность = 1 */ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */ul ol li.red {} /* a=0 b=1 c=3 -> специфичность = 13 */li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */#x34y {} /* a=1 b=0 c=0 -> специфичность = 100 *//* style="" -> специфичность = 1000 */css1.html"><img src="/img/tmb/1/33834/7d9a98d4288932b4f029e552aa64d4e0-800x.jpg" title="Специфичностьa – id; b – класс, псевдокласс, аттрибут; c – имя тега.* {} /* a=0" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide41"> <h2><a href="/img/tmb/1/33834/d1c2c91e08e7262f86da854462ed76bf-800x.jpg" target="_blank">Слайд 41</a>Размеры, цвета, URL в CSS<br>Ключевые слова, inherit<br>url(http://localhost/1.jpg)<br>red, #7788AA, rgb(12,11,34)<br>Размеры:<br>em — ширина</h2> <div class="text"> буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.<br>px — пикселы<br>pt — пункты. Один пункт = 1/72 дюйма.<br>% — проценты<br>ex — ширина буквы x<br>in — дюймы<br>cm — сантиметры<br>mm — миллиметры<br>pc —размер в пиках. (12 пунктов).<br><br><br><p>keywords.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/d1c2c91e08e7262f86da854462ed76bf-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Размеры, цвета, URL в CSSКлючевые слова, inheriturl(http://localhost/1.jpg)red, #7788AA, rgb(12,11,34)Размеры:em — ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.px — пикселыpt — пункты. Один пункт = 1/72 дюйма.% — процентыex — ширина буквы xin — дюймыcm — сантиметрыmm — миллиметрыpc —размер в пиках. (12 пунктов).keywords.html"><img src="/img/tmb/1/33834/d1c2c91e08e7262f86da854462ed76bf-800x.jpg" title="Размеры, цвета, URL в CSSКлючевые слова, inheriturl(http://localhost/1.jpg)red, #7788AA, rgb(12,11,34)Размеры:em — ширина буквы m в настоящем" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide42"> <h2><a href="/img/tmb/1/33834/23c9f818d25bf3b696775d310534883b-800x.jpg" target="_blank">Слайд 42</a>Шрифты<br>font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)<br>font-size:</h2> <div class="text"> larger;<br>font-style: italic;<br>font-variant: small-caps;<br>font-weight: bold; (400)<br>font: [font-style || font-variant || font-weight] font-size [/line-height] font-family<br>Загрузка шрифтов, @font-face<br><p>font_css.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/23c9f818d25bf3b696775d310534883b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Шрифтыfont-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)font-size: larger;font-style: italic;font-variant: small-caps;font-weight: bold; (400)font: [font-style || font-variant || font-weight] font-size [/line-height] font-familyЗагрузка шрифтов, @font-facefont_css.html"><img src="/img/tmb/1/33834/23c9f818d25bf3b696775d310534883b-800x.jpg" title="Шрифтыfont-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)font-size: larger;font-style: italic;font-variant: small-caps;font-weight: bold;" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide43"> <h2><a href="/img/tmb/1/33834/bf59434304c2ff2bd04996f05991c456-800x.jpg" target="_blank">Слайд 43</a>Свойства текста<br>letter-spacing: 2px;<br>line-height: 120%; (наслед. вычисл. от родителя)<br>text-align: right; <br>text-decoration: blink</h2> <div class="text"> | line-through | overline | underline | none<br>text-ident: -5em;<br>text-transform: capitalize | lowercase | uppercase | none<br>vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты (только строк. и замещ. элементы)<br>word-spacing: 10em;<br>white-space: normal | nowrap | pre (pre в ie6 работает ☹)<br>Другие языки…<br><p>text_css.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/bf59434304c2ff2bd04996f05991c456-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Свойства текстаletter-spacing: 2px;line-height: 120%; (наслед. вычисл. от родителя)text-align: right; text-decoration: blink | line-through | overline | underline | nonetext-ident: -5em;text-transform: capitalize | lowercase | uppercase | nonevertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты (только строк. и замещ. элементы)word-spacing: 10em;white-space: normal | nowrap | pre (pre в ie6 работает ☹)Другие языки…text_css.html"><img src="/img/tmb/1/33834/bf59434304c2ff2bd04996f05991c456-800x.jpg" title="Свойства текстаletter-spacing: 2px;line-height: 120%; (наслед. вычисл. от родителя)text-align: right; text-decoration: blink | line-through | overline" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide44"> <h2><a href="/img/tmb/1/33834/1763a068a5ce7b6c54862756604fa8ef-800x.jpg" target="_blank">Слайд 44</a>Контейнер строки<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/1763a068a5ce7b6c54862756604fa8ef-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Контейнер строки"><img src="/img/tmb/1/33834/1763a068a5ce7b6c54862756604fa8ef-800x.jpg" title="Контейнер строки" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide45"> <h2><a href="/img/tmb/1/33834/2c17a8c8722baababae29c230ac52585-800x.jpg" target="_blank">Слайд 45</a>Свойства контейнеров<br>Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)<br><br><br><br><br><br><br>top,</h2> <div class="text"> right, bottom, left<br><br> </div> <div class="image"> <a href="/img/tmb/1/33834/2c17a8c8722baababae29c230ac52585-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Свойства контейнеровБлочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)top, right, bottom, left"><img src="/img/tmb/1/33834/2c17a8c8722baababae29c230ac52585-800x.jpg" title="Свойства контейнеровБлочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)top, right, bottom, left" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide46"> <h2><a href="/img/tmb/1/33834/0be7d6f46d578af86c819b54edfbb567-800x.jpg" target="_blank">Слайд 46</a>Горизонтальное форматирование<br>Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width)<br>Отрицательные</h2> <div class="text"> поля<br>Сумма 7 размеров дочернего элемента = width родительского<br>Для замещающих элементов размеры auto равны реальным размерам<br>Размеры замещающих элементов изменяются пропорционально, если задавать одно из них<br><p>autowidth.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/0be7d6f46d578af86c819b54edfbb567-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Горизонтальное форматированиеЗначение auto – заполняет всю оставшуюся ширину контейнера (margin, width)Отрицательные поляСумма 7 размеров дочернего элемента = width родительскогоДля замещающих элементов размеры auto равны реальным размерамРазмеры замещающих элементов изменяются пропорционально, если задавать одно из нихautowidth.html"><img src="/img/tmb/1/33834/0be7d6f46d578af86c819b54edfbb567-800x.jpg" title="Горизонтальное форматированиеЗначение auto – заполняет всю оставшуюся ширину контейнера (margin, width)Отрицательные поляСумма 7 размеров дочернего" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide47"> <h2><a href="/img/tmb/1/33834/616bbba6a0dda9113d3c88573464f25a-800x.jpg" target="_blank">Слайд 47</a>контейнер<br>контейнер<br>height=auto<br>horis1.html<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/616bbba6a0dda9113d3c88573464f25a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="контейнерконтейнерheight=autohoris1.html"><img src="/img/tmb/1/33834/616bbba6a0dda9113d3c88573464f25a-800x.jpg" title="контейнерконтейнерheight=autohoris1.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide48"> <h2><a href="/img/tmb/1/33834/60ef652f335a928a06693544dd974e65-800x.jpg" target="_blank">Слайд 48</a>Вертикальное форматирование<br>Высота по содержимому (auto)<br>Или через height. Если содержимого больше чем</h2> <div class="text"> height – прокрутка<br>margin-top или bottom равное auto = 0<br>Высота в процентах – от блока контейнера, но…<br>Центрирование по вертикали через процентные margin и высоту блока-контейнера<br>Сворачивание полей<br>Отрицательные margin<br><br><br><br><p>vert1.html, vert2.html,<br>negative_margins.html<br><br> </div> <div class="image"> <a href="/img/tmb/1/33834/60ef652f335a928a06693544dd974e65-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Вертикальное форматированиеВысота по содержимому (auto)Или через height. Если содержимого больше чем height – прокруткаmargin-top или bottom равное auto = 0Высота в процентах – от блока контейнера, но…Центрирование по вертикали через процентные margin и высоту блока-контейнераСворачивание полейОтрицательные marginvert1.html, vert2.html,negative_margins.html"><img src="/img/tmb/1/33834/60ef652f335a928a06693544dd974e65-800x.jpg" title="Вертикальное форматированиеВысота по содержимому (auto)Или через height. Если содержимого больше чем height – прокруткаmargin-top или" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide49"> <h2><a href="/img/tmb/1/33834/49956fb761d80750cafec165aa005b5a-800x.jpg" target="_blank">Слайд 49</a>Сворачивание вертикальных полей<br>margins.html<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/49956fb761d80750cafec165aa005b5a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Сворачивание вертикальных полейmargins.html"><img src="/img/tmb/1/33834/49956fb761d80750cafec165aa005b5a-800x.jpg" title="Сворачивание вертикальных полейmargins.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide50"> <h2><a href="/img/tmb/1/33834/7f9fbbb2487e65ee5c8a02d878403313-800x.jpg" target="_blank">Слайд 50</a>Форматирование строчных элементов<br>Многострочный строковый элемент, рамки, фон<br>Строковый блок и контейнер строки<br>Отступы,</h2> <div class="text"> рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых<br>Вспомним line-height<br>Если в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока<br><br><p>str_format.htm<br> </div> <div class="image"> <a href="/img/tmb/1/33834/7f9fbbb2487e65ee5c8a02d878403313-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Форматирование строчных элементовМногострочный строковый элемент, рамки, фонСтроковый блок и контейнер строкиОтступы, рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемыхВспомним line-heightЕсли в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блокаstr_format.htm"><img src="/img/tmb/1/33834/7f9fbbb2487e65ee5c8a02d878403313-800x.jpg" title="Форматирование строчных элементовМногострочный строковый элемент, рамки, фонСтроковый блок и контейнер строкиОтступы, рамки и поля незамещаемых" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide51"> <h2><a href="/img/tmb/1/33834/8021d7bd951f071b64718fe6f3278792-800x.jpg" target="_blank">Слайд 51</a>Изменение представления элемента<br>display: block | inline | inline-table | list-item |</h2> <div class="text"> none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-block<br>Пример употребления display:block<br>Пример употребления display:inline<br>display определяет только лишь представление элемента, но не его тип, не его суть<br>display: inline-block<br>Иногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)<br><br><p>display1.html<br>display_inline_block.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/8021d7bd951f071b64718fe6f3278792-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Изменение представления элементаdisplay: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-blockПример употребления display:blockПример употребления display:inlinedisplay определяет только лишь представление элемента, но не его тип, не его сутьdisplay: inline-blockИногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)display1.htmldisplay_inline_block.html"><img src="/img/tmb/1/33834/8021d7bd951f071b64718fe6f3278792-800x.jpg" title="Изменение представления элементаdisplay: block | inline | inline-table | list-item | none | run-in |" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide52"> <h2><a href="/img/tmb/1/33834/edb9e7235f6d1f1f19078626b2d2361a-800x.jpg" target="_blank">Слайд 52</a>Поля<br>По умолчанию margin=0<br>У некоторых элементов есть поля по умолч.<br>img {margin: 1em;}<br>img</h2> <div class="text"> {margin: 1em 2em 3em 4em;}<br>img {margin: 1em 2em;}<br>img {margin: 1em 2em 3em;}<br>Процентные значения от ширины родительского элемента<br>margin-left, margin-right, margin-top, margin-bottom<br>Поля строковых элементов (левое и правое)<br><br><br><p><br><p><br><p>top<br><p>bottom<br><p>right<br><p>left<br><p>margin-percent.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/edb9e7235f6d1f1f19078626b2d2361a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ПоляПо умолчанию margin=0У некоторых элементов есть поля по умолч.img {margin: 1em;}img {margin: 1em 2em 3em 4em;}img {margin: 1em 2em;}img {margin: 1em 2em 3em;}Процентные значения от ширины родительского элементаmargin-left, margin-right, margin-top, margin-bottomПоля строковых элементов (левое и правое)topbottomrightleftmargin-percent.html"><img src="/img/tmb/1/33834/edb9e7235f6d1f1f19078626b2d2361a-800x.jpg" title="ПоляПо умолчанию margin=0У некоторых элементов есть поля по умолч.img {margin: 1em;}img {margin: 1em 2em 3em" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide53"> <h2><a href="/img/tmb/1/33834/7fb94e0df6c0d080dff87a1a76405883-800x.jpg" target="_blank">Слайд 53</a>Рамки<br>Рамки внутри полей, они ограничивают фон<br>Ширина, стиль, цвет<br>Ширина по умолч.=medium или</h2> <div class="text"> none<br>Цвет по умолч.=цвет элемента<br>border-style: стиль (TRBL) или отдельно<br>border-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены<br>Если border-style=none, то border-width=0<br>border-color: color (TRBL) или отдельно<br>Цвет рамки может = transparent<br><br><br> </div> <div class="image"> <a href="/img/tmb/1/33834/7fb94e0df6c0d080dff87a1a76405883-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="РамкиРамки внутри полей, они ограничивают фонШирина, стиль, цветШирина по умолч.=medium или noneЦвет по умолч.=цвет элементаborder-style: стиль (TRBL) или отдельноborder-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещеныЕсли border-style=none, то border-width=0border-color: color (TRBL) или отдельноЦвет рамки может = transparent"><img src="/img/tmb/1/33834/7fb94e0df6c0d080dff87a1a76405883-800x.jpg" title="РамкиРамки внутри полей, они ограничивают фонШирина, стиль, цветШирина по умолч.=medium или noneЦвет по умолч.=цвет элементаborder-style:" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide54"> <h2><a href="/img/tmb/1/33834/72203a4235ec698551fea077acb16d96-800x.jpg" target="_blank">Слайд 54</a>Рамки, стили рамок<br>border-top, border-right, border-bottom, border-left: border-width || border-style || color</h2> <div class="text"> <br>border: border-width || border-style || color<br>У строковых элементов тоже могут быть<br><br> </div> <div class="image"> <a href="/img/tmb/1/33834/72203a4235ec698551fea077acb16d96-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Рамки, стили рамокborder-top, border-right, border-bottom, border-left: border-width || border-style || color border: border-width || border-style || colorУ строковых элементов тоже могут быть"><img src="/img/tmb/1/33834/72203a4235ec698551fea077acb16d96-800x.jpg" title="Рамки, стили рамокborder-top, border-right, border-bottom, border-left: border-width || border-style || color border: border-width || border-style" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide55"> <h2><a href="/img/tmb/1/33834/c06335e8a5a233accb85f5d283dc6706-800x.jpg" target="_blank">Слайд 55</a>Отступы<br>padding: значение (любые меры, проценты) (TRBL)<br>Залиты фоном<br>Отступы не сворачиваются<br>% относительно ширины</h2> <div class="text"> родителя (причем и верхние и нижние поля)<br>padding-top, padding-right, padding-bottom, padding-left<br>Можно применять к строковым элементам<br><br><br><p>paddings.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/c06335e8a5a233accb85f5d283dc6706-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Отступыpadding: значение (любые меры, проценты) (TRBL)Залиты фономОтступы не сворачиваются% относительно ширины родителя (причем и верхние и нижние поля)padding-top, padding-right, padding-bottom, padding-leftМожно применять к строковым элементамpaddings.html"><img src="/img/tmb/1/33834/c06335e8a5a233accb85f5d283dc6706-800x.jpg" title="Отступыpadding: значение (любые меры, проценты) (TRBL)Залиты фономОтступы не сворачиваются% относительно ширины родителя (причем и верхние" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide56"> <h2><a href="/img/tmb/1/33834/69f96a91484c48e3490fd75e034056ec-800x.jpg" target="_blank">Слайд 56</a>Цвета, фон <br>color: | inherit<br>Свойство color для элементов форм<br>background-color: цвет</h2> <div class="text"> | transparent (умолч.)<br>background-image: url(путь к файлу) | none <br>background-color + background-image<br>background-repeat: no-repeat | repeat | repeat-x | repeat-y<br><br><br><p>colors-css.html,<br>background_css.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/69f96a91484c48e3490fd75e034056ec-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Цвета, фон color: | inheritСвойство color для элементов формbackground-color: цвет | transparent (умолч.)background-image: url(путь к файлу) | none background-color + background-imagebackground-repeat: no-repeat | repeat | repeat-x | repeat-ycolors-css.html,background_css.html"><img src="/img/tmb/1/33834/69f96a91484c48e3490fd75e034056ec-800x.jpg" title="Цвета, фон color: | inheritСвойство color для элементов формbackground-color: цвет | transparent (умолч.)background-image: url(путь к" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide57"> <h2><a href="/img/tmb/1/33834/7e381e8fa7060c45c5d263c7d0166749-800x.jpg" target="_blank">Слайд 57</a>Фон<br>background-position: [проценты | значение] | [left | center | right] ||</h2> <div class="text"> [top | center | bottom] (если одно задано, второе – center)<br>background-attachment: fixed | scroll (http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html)<br>background: background-attachment || background-color || background-image || background-position || background-repeat<br><p>background_css.html,<br>background2_css.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/7e381e8fa7060c45c5d263c7d0166749-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Фонbackground-position: [проценты | значение] | [left | center | right] || [top | center | bottom] (если одно задано, второе – center)background-attachment: fixed | scroll (http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html)background: background-attachment || background-color || background-image || background-position || background-repeatbackground_css.html,background2_css.html"><img src="/img/tmb/1/33834/7e381e8fa7060c45c5d263c7d0166749-800x.jpg" title="Фонbackground-position: [проценты | значение] | [left | center | right] || [top | center |" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide58"> <h2><a href="/img/tmb/1/33834/cde6325fbcecfdfe11b147f6869b538f-800x.jpg" target="_blank">Слайд 58</a>Перемещение, плавающая модель<br>Рисунки, параграф с float<br>Задание ширины обязательно<br>Поля не сворачиваются<br>Перемещаемый элемент</h2> <div class="text"> генерирует блочный элемент<br>Правила перемещаемых элементов (стр.327)<br>Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков<br>Отрицательные поля<br>Если ширина больше – перемещаемый элемент окажется за боковым краем родителя<br>clear: both | left | none | right<br><br><p>float1.html, float2.html<br>float3.html, float_problem.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/cde6325fbcecfdfe11b147f6869b538f-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Перемещение, плавающая модельРисунки, параграф с floatЗадание ширины обязательноПоля не сворачиваютсяПеремещаемый элемент генерирует блочный элементПравила перемещаемых элементов (стр.327)Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомковОтрицательные поляЕсли ширина больше – перемещаемый элемент окажется за боковым краем родителяclear: both | left | none | rightfloat1.html, float2.htmlfloat3.html, float_problem.html"><img src="/img/tmb/1/33834/cde6325fbcecfdfe11b147f6869b538f-800x.jpg" title="Перемещение, плавающая модельРисунки, параграф с floatЗадание ширины обязательноПоля не сворачиваютсяПеремещаемый элемент генерирует блочный элементПравила перемещаемых" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide59"> <h2><a href="/img/tmb/1/33834/5afb25adaacb3b43a1dfbad6d2c6a87a-800x.jpg" target="_blank">Слайд 59</a>Позиционирование<br>position: absolute | fixed | relative | static<br>static – нормальный поток<br>relative</h2> <div class="text"> – смещение элемента с теми же размерами и начальными координатами<br>absolute – удаление из нормального потока. Генерация структурного блока.<br>fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.<br> </div> <div class="image"> <a href="/img/tmb/1/33834/5afb25adaacb3b43a1dfbad6d2c6a87a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Позиционированиеposition: absolute | fixed | relative | staticstatic – нормальный потокrelative – смещение элемента с теми же размерами и начальными координатамиabsolute – удаление из нормального потока. Генерация структурного блока.fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра."><img src="/img/tmb/1/33834/5afb25adaacb3b43a1dfbad6d2c6a87a-800x.jpg" title="Позиционированиеposition: absolute | fixed | relative | staticstatic – нормальный потокrelative – смещение элемента с" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide60"> <h2><a href="/img/tmb/1/33834/dc5fb9b481fc222bfba809e6fb723260-800x.jpg" target="_blank">Слайд 60</a>Позиционирование 2<br>Блок-контейнер для элементов с position = relative | static –</h2> <div class="text"> родитель <br>Блок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер<br><br><br> </div> <div class="image"> <a href="/img/tmb/1/33834/dc5fb9b481fc222bfba809e6fb723260-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Позиционирование 2Блок-контейнер для элементов с position = relative | static – родитель Блок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер"><img src="/img/tmb/1/33834/dc5fb9b481fc222bfba809e6fb723260-800x.jpg" title="Позиционирование 2Блок-контейнер для элементов с position = relative | static – родитель Блок-контейнер для элементов" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide61"> <h2><a href="/img/tmb/1/33834/320f8c9c4bb183c93b255ebcc9ccbcb9-800x.jpg" target="_blank">Слайд 61</a>Свойства смещения<br>top, right, bottom, left: | | auto</h2> <div class="text"> | inherit<br>Ширина и высота<br>min-width, min-height: <длина> | <процентное значение> | inherit<br>max-width, max-height: <длина> | <процентное значение> | none | inherit<br><p>position.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/320f8c9c4bb183c93b255ebcc9ccbcb9-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Свойства смещенияtop, right, bottom, left: | | auto | inheritШирина и высотаmin-width, min-height: | | inheritmax-width, max-height: | | none | inheritposition.html"><img src="/img/tmb/1/33834/320f8c9c4bb183c93b255ebcc9ccbcb9-800x.jpg" title="Свойства смещенияtop, right, bottom, left: | | auto | inheritШирина и высотаmin-width, min-height: | |" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide62"> <h2><a href="/img/tmb/1/33834/f1b3b1f031369937525c1c51595eac61-800x.jpg" target="_blank">Слайд 62</a>Переполнение и отсечение содержимого<br>overflow: visible | hidden | scroll | auto</h2> <div class="text"> | inherit<br>overflow-x и overflow-y<br>clip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit <br><br><br><p>overflow.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/f1b3b1f031369937525c1c51595eac61-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Переполнение и отсечение содержимогоoverflow: visible | hidden | scroll | auto | inheritoverflow-x и overflow-yclip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit overflow.html"><img src="/img/tmb/1/33834/f1b3b1f031369937525c1c51595eac61-800x.jpg" title="Переполнение и отсечение содержимогоoverflow: visible | hidden | scroll | auto | inheritoverflow-x и overflow-yclip:" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide63"> <h2><a href="/img/tmb/1/33834/91d621d76595570d9ee3c9b332e89143-800x.jpg" target="_blank">Слайд 63</a>Видимость элементов<br>visibility: visible | hidden | collapse | inherit<br>visibility.html<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/91d621d76595570d9ee3c9b332e89143-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Видимость элементовvisibility: visible | hidden | collapse | inheritvisibility.html"><img src="/img/tmb/1/33834/91d621d76595570d9ee3c9b332e89143-800x.jpg" title="Видимость элементовvisibility: visible | hidden | collapse | inheritvisibility.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide64"> <h2><a href="/img/tmb/1/33834/9f988e1ff59fa560fbd1870e696f93f2-800x.jpg" target="_blank">Слайд 64</a>Абсолютное позиционирование<br>Абсолютное позиционирование относительно…<br>Перекрытие элементов<br>Размеры и размещение <br>left + margin-left +</h2> <div class="text"> border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера<br>Значение auto<br>right или bottom компенсируют, если все свойства заданы<br><p>position_abs.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/9f988e1ff59fa560fbd1870e696f93f2-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Абсолютное позиционированиеАбсолютное позиционирование относительно…Перекрытие элементовРазмеры и размещение left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнераЗначение autoright или bottom компенсируют, если все свойства заданыposition_abs.html"><img src="/img/tmb/1/33834/9f988e1ff59fa560fbd1870e696f93f2-800x.jpg" title="Абсолютное позиционированиеАбсолютное позиционирование относительно…Перекрытие элементовРазмеры и размещение left + margin-left + border-left-width + padding-left +" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide65"> <h2><a href="/img/tmb/1/33834/7018f885d9b9d206978210acb4d8bf46-800x.jpg" target="_blank">Слайд 65</a>Размещение по оси z<br>z-index: число | auto<br>Может быть отрицательным<br>Локальный контекст занесения</h2> <div class="text"> в стек<br><br><br><p><br><p>окно<br><p><br><p><br><p>А<br><p>Б<br><p>z-index.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/7018f885d9b9d206978210acb4d8bf46-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Размещение по оси zz-index: число | autoМожет быть отрицательнымЛокальный контекст занесения в стекокноАБz-index.html"><img src="/img/tmb/1/33834/7018f885d9b9d206978210acb4d8bf46-800x.jpg" title="Размещение по оси zz-index: число | autoМожет быть отрицательнымЛокальный контекст занесения в стекокноАБz-index.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide66"> <h2><a href="/img/tmb/1/33834/3bd09ad0023945dc6a87ad7dabe105a4-800x.jpg" target="_blank">Слайд 66</a>Фиксированное позиционирование<br>Относительно окна браузера<br>Удобно, например, для баннеров или для меню<br>position_fixed.html<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/3bd09ad0023945dc6a87ad7dabe105a4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Фиксированное позиционированиеОтносительно окна браузераУдобно, например, для баннеров или для менюposition_fixed.html"><img src="/img/tmb/1/33834/3bd09ad0023945dc6a87ad7dabe105a4-800x.jpg" title="Фиксированное позиционированиеОтносительно окна браузераУдобно, например, для баннеров или для менюposition_fixed.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide67"> <h2><a href="/img/tmb/1/33834/427b453859e04863291791c179b2eb8a-800x.jpg" target="_blank">Слайд 67</a>Относительное позиционирование<br>Смещение относительно текущего положения<br>position_relative.html<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/427b453859e04863291791c179b2eb8a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Относительное позиционированиеСмещение относительно текущего положенияposition_relative.html"><img src="/img/tmb/1/33834/427b453859e04863291791c179b2eb8a-800x.jpg" title="Относительное позиционированиеСмещение относительно текущего положенияposition_relative.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide68"> <h2><a href="/img/tmb/1/33834/c6c12edacceb68f3f3c735110fdbd25d-800x.jpg" target="_blank">Слайд 68</a>Верстка таблиц<br>Объединять ячейки через CSS нельзя<br>У ячеек нет полей<br>Свойство display<br>tables2.html<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/c6c12edacceb68f3f3c735110fdbd25d-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Верстка таблицОбъединять ячейки через CSS нельзяУ ячеек нет полейСвойство displaytables2.html"><img src="/img/tmb/1/33834/c6c12edacceb68f3f3c735110fdbd25d-800x.jpg" title="Верстка таблицОбъединять ячейки через CSS нельзяУ ячеек нет полейСвойство displaytables2.html" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide69"> <h2><a href="/img/tmb/1/33834/aa4ca0d4a987739859bccbb06bea9d44-800x.jpg" target="_blank">Слайд 69</a>Таблицы. Продолжение<br>display: inline-table – таблица строкового уровня (типа inline-block)<br>Значения можно присвоить</h2> <div class="text"> любым элементам и сделать на основе них таблицу<br>Анонимные объекты таблицы<br><table> <td>Name:</td> <td><input type="text"></td> </table><br><br><p>tables2.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/aa4ca0d4a987739859bccbb06bea9d44-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблицы. Продолжениеdisplay: inline-table – таблица строкового уровня (типа inline-block)Значения можно присвоить любым элементам и сделать на основе них таблицуАнонимные объекты таблицы Name: tables2.html"><img src="/img/tmb/1/33834/aa4ca0d4a987739859bccbb06bea9d44-800x.jpg" title="Таблицы. Продолжениеdisplay: inline-table – таблица строкового уровня (типа inline-block)Значения можно присвоить любым элементам и сделать" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide70"> <h2><a href="/img/tmb/1/33834/9a3e139c5e3c1d625824a88bd3efa76c-800x.jpg" target="_blank">Слайд 70</a>Таблицы. Продолжение<br>Слои таблицы<br>caption-side: top | bottom<br>border-collapse: collapse | separate | inherit<br>border-spacing: </h2> <div class="text"> <длина верт.>? | inherit<br>empty-cells: show | hide | inherit<br><br><br><p>tables3.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/9a3e139c5e3c1d625824a88bd3efa76c-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблицы. ПродолжениеСлои таблицыcaption-side: top | bottomborder-collapse: collapse | separate | inheritborder-spacing: ? | inheritempty-cells: show | hide | inherittables3.html"><img src="/img/tmb/1/33834/9a3e139c5e3c1d625824a88bd3efa76c-800x.jpg" title="Таблицы. ПродолжениеСлои таблицыcaption-side: top | bottomborder-collapse: collapse | separate | inheritborder-spacing: ? | inheritempty-cells: show" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide71"> <h2><a href="/img/tmb/1/33834/8922b1ad24452e4a594ca74e505d7628-800x.jpg" target="_blank">Слайд 71</a>Сливающиеся рамки ячеек<br>Если display: table | inline-table у элемента не может</h2> <div class="text"> быть отступов, только поля<br>Рамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов<br>Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются<br><br><p>tables3.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/8922b1ad24452e4a594ca74e505d7628-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Сливающиеся рамки ячеекЕсли display: table | inline-table у элемента не может быть отступов, только поляРамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцовМежду рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируютсяtables3.html"><img src="/img/tmb/1/33834/8922b1ad24452e4a594ca74e505d7628-800x.jpg" title="Сливающиеся рамки ячеекЕсли display: table | inline-table у элемента не может быть отступов, только поляРамки" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide72"> <h2><a href="/img/tmb/1/33834/297feed1e99b919fd676d101a2205c7c-800x.jpg" target="_blank">Слайд 72</a>Размеры таблиц<br>Ширина<br>table-layout: auto | fixed | inherit<br>Скорость рендера с фиксированной шириной</h2> <div class="text"> больше<br>Если сумма ширин столбцов больше ширины таблицы, то берется первое<br>Высота: или заданная или как сумма высот строк<br>Вертикальное выравнивание – не то же самое что и для строковых элементов<br><br><br><p>tables4.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/297feed1e99b919fd676d101a2205c7c-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Размеры таблицШиринаtable-layout: auto | fixed | inheritСкорость рендера с фиксированной шириной большеЕсли сумма ширин столбцов больше ширины таблицы, то берется первоеВысота: или заданная или как сумма высот строкВертикальное выравнивание – не то же самое что и для строковых элементовtables4.html"><img src="/img/tmb/1/33834/297feed1e99b919fd676d101a2205c7c-800x.jpg" title="Размеры таблицШиринаtable-layout: auto | fixed | inheritСкорость рендера с фиксированной шириной большеЕсли сумма ширин столбцов" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide73"> <h2><a href="/img/tmb/1/33834/eb1c5a022797e20fb40f0effe4a8d4a9-800x.jpg" target="_blank">Слайд 73</a>Элементы списка<br>Управлять размещением сложно<br>list-style-position: inside | outside – вне содержимого или</h2> <div class="text"> как строковый маркер в начале содержимого<br>list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none<br>list-style-image: none | url('путь к файлу')<br>list-style: list-style-type || list-style-position || list-style-image<br><p>lists_css.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/eb1c5a022797e20fb40f0effe4a8d4a9-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Элементы спискаУправлять размещением сложноlist-style-position: inside | outside – вне содержимого или как строковый маркер в начале содержимогоlist-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | nonelist-style-image: none | url('путь к файлу')list-style: list-style-type || list-style-position || list-style-imagelists_css.html"><img src="/img/tmb/1/33834/eb1c5a022797e20fb40f0effe4a8d4a9-800x.jpg" title="Элементы спискаУправлять размещением сложноlist-style-position: inside | outside – вне содержимого или как строковый маркер в" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide74"> <h2><a href="/img/tmb/1/33834/8e06d73e66615473cd9c66f371bf7790-800x.jpg" target="_blank">Слайд 74</a>Генерируемое содержимое<br>Например маркеры списка…<br>a[href]:before {content: "(link)";}<br>Ограничения на display<br>content: строка | attr(атрибут)</h2> <div class="text"> | open-quote | close-quote | no-open-quote | no-close-quote | url }<br>Теги недопустимы<br>Генерируемые кавычки<br>Счетчики <br>counter-reset и counter-increment<br><br><br><br><p>css_gen_content.html<br>css_gen_content2.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/8e06d73e66615473cd9c66f371bf7790-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Генерируемое содержимоеНапример маркеры списка…a[href]:before {content: "(link)";}Ограничения на displaycontent: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }Теги недопустимыГенерируемые кавычкиСчетчики counter-reset и counter-incrementcss_gen_content.htmlcss_gen_content2.html"><img src="/img/tmb/1/33834/8e06d73e66615473cd9c66f371bf7790-800x.jpg" title="Генерируемое содержимоеНапример маркеры списка…a[href]:before {content: "(link)";}Ограничения на displaycontent: строка | attr(атрибут) | open-quote | close-quote" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide75"> <h2><a href="/img/tmb/1/33834/8f66e3a0c1b86e2e4341e5155dfcce51-800x.jpg" target="_blank">Слайд 75</a>Курсоры<br>cursor: [[,]* [auto | default | pointer | crosshair | move</h2> <div class="text"> | e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit<br>a[href] {cursor: pointer;}<br><br><p>cursors.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/8f66e3a0c1b86e2e4341e5155dfcce51-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Курсорыcursor: [[,]* [auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherita[href] {cursor: pointer;}cursors.html"><img src="/img/tmb/1/33834/8f66e3a0c1b86e2e4341e5155dfcce51-800x.jpg" title="Курсорыcursor: [[,]* [auto | default | pointer | crosshair | move | e-resize | ne-resize" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide76"> <h2><a href="/img/tmb/1/33834/387ea03cde4a342b6335f7d8fe4610e7-800x.jpg" target="_blank">Слайд 76</a>Курсоры<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/387ea03cde4a342b6335f7d8fe4610e7-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Курсоры"><img src="/img/tmb/1/33834/387ea03cde4a342b6335f7d8fe4610e7-800x.jpg" title="Курсоры" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide77"> <h2><a href="/img/tmb/1/33834/c764ec366a98a2cf3604161334aaf16e-800x.jpg" target="_blank">Слайд 77</a>Контуры<br>Ну участвуют в потоке документа<br>Могут употребляться вместе с рамками<br>outline-style: none |</h2> <div class="text"> dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)<br>outline-width: thin | medium | thick | <длина> | inherit<br>outline-color: <цвет> | invert | inherit<br>outline: [ <outline-color> || <outline-style> || <outline-width> ] | inherit<br><br><p>outline.html<br> </div> <div class="image"> <a href="/img/tmb/1/33834/c764ec366a98a2cf3604161334aaf16e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="КонтурыНу участвуют в потоке документаМогут употребляться вместе с рамкамиoutline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)outline-width: thin | medium | thick | | inheritoutline-color: | invert | inheritoutline: [ || || ] | inheritoutline.html"><img src="/img/tmb/1/33834/c764ec366a98a2cf3604161334aaf16e-800x.jpg" title="КонтурыНу участвуют в потоке документаМогут употребляться вместе с рамкамиoutline-style: none | dotted | dashed |" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide78"> <h2><a href="/img/tmb/1/33834/ddaee82c87839ace944a8c3ef77648b6-800x.jpg" target="_blank">Слайд 78</a><br><br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/1/33834/ddaee82c87839ace944a8c3ef77648b6-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/1/33834/ddaee82c87839ace944a8c3ef77648b6-800x.jpg" title="" alt=""></a> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-468740-8 --> <div id="yandex_rtb_R-A-468740-8"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-468740-8", renderTo: "yandex_rtb_R-A-468740-8", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> <div class="url" id="download"><a href="/uncategorized/htmlcss-verstka/download">Скачать презентацию</a></div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-468740-2 --> <div id="yandex_rtb_R-A-468740-2"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: 'yandex_rtb_R-A-468740-2', blockId: 'R-A-468740-2' }) })</script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/uncategorized/godovoy-otchetinstrument-kommunikatsiykak-sdelat-ego-luchshe"> <img src="/img/tmb/3/201589/9a3106325dcc59d2b96170aa282a01fe-800x.jpg" alt=""> <span class="desc"> <span>Годовой отчет – инструмент коммуникацийКак сделать его лучше?</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 542</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/38335-diplomnaya-rabota-na-temuavtomatizirovannaya-informatsionnaya-sistema-protsessov-upravleniya-dokumentooborotom-v-gouz-onkologicheskiy-dispanser-g%20shahty--vypolnil-klyuchnikova-ayurukovoditel-taradina-mv"> <img src="/img/tmb/1/38335/3f0074e5b02c05be84792628f652a991-800x.jpg" alt=""> <span class="desc"> <span>Дипломная работа на тему: Автоматизированная информационная система процессов управления документооборотом в ГОУЗ Онкологический диспансер г. Шахты Выполнил: Ключникова А.Ю. Руководитель: Тарадина М.В.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 0</span> </span> </a> </div> <div class="custom" > <!-- Yandex.RTB R-A-468740-13 --> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ type: 'fullscreen', blockId: 'R-A-468740-13' }) })</script></div> <div class="wrapper"> <a href="/uncategorized/o-deyatelnosti-ofitsialnogo-sayta-ministerstva-sotsialnoy-zashchity-naseleniya-sverdlovskoy-oblasti"> <img src="/img/tmb/1/7512/2c3f24456ee98b7198099ed5ce2c941d-800x.jpg" alt=""> <span class="desc"> <span>О деятельности официального сайта Министерства социальной защиты населения Свердловской области</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 219</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/rok-muzyka-4"> <img src="/img/tmb/4/309049/929e7dab6270334233eccf142432e31c-800x.jpg" alt=""> <span class="desc"> <span>Рок - музыка</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 216</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/zadanien3"> <img src="/img/tmb/3/239274/451672ce73cfd41ecb2a92111f6da475-800x.jpg" alt=""> <span class="desc"> <span>Задание№3</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 191</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/kafedra-pedagogiki-i-psihologii"> <img src="/img/tmb/2/164410/72b8f454f018b30b4be124fe2bf802dd-800x.jpg" alt=""> <span class="desc"> <span>Кафедра педагогики и психологии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 225</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="container bottom"> <div> <div class="call_back"> <h4><i class="fas fa-bullhorn"></i>Обратная связь</h4> <p>Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:</p> <p>Email: <a href="#" class="js_hidden_email" data-address="thepresentation" data-domain="ya.ru">Нажмите что бы посмотреть</a>&nbsp;</p> </div> <div class="links"> </div> <div class="whatis"> <h4><i class="fa fa-info text-red"></i>Что такое ThePresentation.ru?</h4> <p>Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.</p> <hr /> <p><a href="/privacy">Для правообладателей</a></p> <a href="https://metrika.yandex.ru/stat/?id=54509641&amp;from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/54509641/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="54509641" data-lang="ru" /></a> <!--LiveInternet counter--> <script type="text/javascript"> document.write('<a href="//www.liveinternet.ru/click" '+ 'target="_blank"><img src="//counter.yadro.ru/hit?t16.2;r'+ escape(document.referrer)+((typeof(screen)=='undefined')?'': ';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+ ';h'+escape(document.title.substring(0,150))+';'+Math.random()+ '" alt="" title="LiveInternet: показано число просмотров за 24'+ ' часа, посетителей за 24 часа и за сегодня" '+ 'border="0" width="88" height="31"><\/a>') </script> <!--/LiveInternet--> </div> <div class="clear"></div> </div> </div> <script src="/templates/presentation/js/script.js?0ed36ea232886ff4063bbdd9e2c5b9c0"></script> </body> </html>