Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему HTML+CSS (верстка)

Содержание

Короткое введениеПоследний стандарт HTML – версия 4.01XHML – переработанный HTML в соответствии со стандартом XMLСтандарты неоднозначны, не все моменты регламентированы Придерживайтесь стандартов, осторожнее с нестандартными решениями
HTML+CSS (верстка)Лекция 1 Короткое введениеПоследний стандарт HTML – версия 4.01XHML – переработанный HTML в соответствии Элементы и тегисодержание тегаТекст абзацаHTML – это прежде всего содержание, данные. РедакторыWYSIWYG или текстовые процессоры EclipseСвободный фреймворк для разработки модульных кроссплатформенных приложенийПлагины Eclipse (Plug-in Development Environment) Преимущества EclipseБесплатный продукт с поддержкойРабота с проектамиРасширяемость и тонкая настройкаКроссплатформенностьОтличные редакторы(автокомплит, шаблоны, БраузерыInternet ExplorerFirefoxOperaSafariChrome Популярность браузеров по Liveinternet в рунете Другие инструментыFirebug – не заменим для разработки и отладки HTML, CSS, JavascriptPixel Теги, атрибуты. Блочные и строковые элементы, , Семантика, логичность кода (, , Обработка ошибок, DTDОтсутствующие теги – плохая практика Первый абзац Второй абзац ЗаголовокИгнорирование ТекстТекст, абзацы, перевод строкиЛишние пробельные символы не учитываютсяСкачано 10КбЗаголовки, значение заголовков и ШрифтНемного терминовНазвание шрифта, семейство (serif,  sans-serif, monospace…)РазмерЦветМежсимвольное  расстояниеКурсив, жирность Буква Теги логической разметки текстаНе гарантируется именно такое отображение Основные теги физической разметкиНе гарантируется именно такое отображениеСодержимое вышеупомянутых тегов – любые Цитаты, адреса и — цитаты (длинная и короткая) Длииинная цитатаАдрес - адрес Линейки Использование атрибутов не рекомендуетсяЧасто используется для логического отделения информационных блоковline.html Изображения в документе HTMLФормат? Все зависит от браузеров, в HTML нет спецификацийФормат Формат JPEG24 битная палитра (16 млн цветов)потеря качества рисункаФормат PNGцветовые схемы:truecolorgrayscaleиндексированная палитра ИтогJPEG – для фотографий, изображений с большим количеством градиентов и цветовGIF – Применение изображений в HTMLalign= Карты на изображенияхСерверные карты    Клиентские карты   	 	 usemap.html Применим карту?usemap.html ГиперссылкиОснова гипертекста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 (/ код Отношения. Мета-теги.Мы имеем дело не с документом, а с проектом, набором документов Списки	Страны					Англия			Швейцария				Города	Крокодил Гена	Чебурашкаrelations.html Списки определений	Термин 1	Определение первого термина	Термин 2	Определение второго термина lists.html ФормыПроцесс заполнения, отправкиСобытия (controls)type=text, password, filesize= Поля форм forms.html Поля форм 2 текстtexxxtaccesskey, disabled, readonlyВведите имя: forms.htmlhttp://trevordavis.net/play/input-vs-button/ Таблицы Название таблицы   111    background, bgcolor, bordercolor, ФреймыФреймы     Рамки для framesetnoresize, scrolling, frameborder для frameНе Объекты и апплеты  Вложенные objectobject.html, object.htmlhttp://www.i2r.ru/static/245/out_21542.shtml - Параметры object div и spanDiv – блочныйSpan – строчный title, dir, lang, style, class CSS 2Стиль – это правило отображения тегаВстроенные стили, стили документа, внешние таблицы Синтаксисseceltor {property:value; property1:value1;}p {color: red; text-decoration: underline;}p {font-family: Georgia, 'Times New Roman', Селекторыp {} /* типовой, по тегу */#id1 {} /* идентификатор */.class1 {} Приоритеты стилейСтили  !important Порядок каскадирования:По источнику ( Специфичностьa – id; b – класс, псевдокласс, аттрибут; c – имя тега.* Размеры, цвета, URL в CSSКлючевые слова, inheriturl(http://localhost/1.jpg)red, #7788AA, rgb(12,11,34)Размеры:em — ширина буквы Шрифтыfont-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)font-size: larger;font-style: Свойства текстаletter-spacing: 2px;line-height: 120%; (наслед. вычисл. от родителя)text-align: right; text-decoration: blink | Контейнер строки Свойства контейнеровБлочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)top, right, bottom, left Горизонтальное форматированиеЗначение auto – заполняет всю оставшуюся ширину контейнера (margin, width)Отрицательные поляСумма контейнерконтейнерheight=autohoris1.html Вертикальное форматированиеВысота по содержимому (auto)Или через height. Если содержимого больше чем height Сворачивание вертикальных полейmargins.html Форматирование строчных элементовМногострочный строковый элемент, рамки, фонСтроковый блок и контейнер строкиОтступы, рамки Изменение представления элементаdisplay: block | inline | inline-table | list-item | none ПоляПо умолчанию margin=0У некоторых элементов есть поля по умолч.img {margin: 1em;}img {margin: РамкиРамки внутри полей, они ограничивают фонШирина, стиль, цветШирина по умолч.=medium или noneЦвет Рамки, стили рамокborder-top, border-right, border-bottom, border-left: border-width || border-style || color border: Отступыpadding: значение (любые меры, проценты) (TRBL)Залиты фономОтступы не сворачиваются% относительно ширины родителя Цвета, фон color: | inheritСвойство color для элементов формbackground-color: цвет | transparent Фонbackground-position: [проценты | значение] | [left | center | right] || [top Перемещение, плавающая модельРисунки, параграф с floatЗадание ширины обязательноПоля не сворачиваютсяПеремещаемый элемент генерирует Позиционированиеposition: absolute | fixed | relative | staticstatic – нормальный потокrelative – Позиционирование 2Блок-контейнер для элементов с position = relative | static – родитель Свойства смещенияtop, right, bottom, left: | | auto | inheritШирина и высотаmin-width, Переполнение и отсечение содержимогоoverflow: visible | hidden | scroll | auto | Видимость элементовvisibility: visible | hidden | collapse | inheritvisibility.html Абсолютное позиционированиеАбсолютное позиционирование относительно…Перекрытие элементовРазмеры и размещение left + margin-left + border-left-width Размещение по оси zz-index: число | autoМожет быть отрицательнымЛокальный контекст  занесения в стекокноАБz-index.html Фиксированное позиционированиеОтносительно окна браузераУдобно, например, для баннеров или для менюposition_fixed.html Относительное позиционированиеСмещение относительно текущего положенияposition_relative.html Верстка таблицОбъединять ячейки через CSS нельзяУ ячеек нет полейСвойство displaytables2.html Таблицы. Продолжениеdisplay: inline-table – таблица строкового уровня (типа inline-block)Значения можно присвоить любым Таблицы. ПродолжениеСлои таблицыcaption-side: top | bottomborder-collapse: collapse | separate |  inheritborder-spacing: Сливающиеся рамки ячеекЕсли display: table | inline-table у элемента не может быть Размеры таблицШиринаtable-layout: auto | fixed | inheritСкорость рендера с фиксированной шириной большеЕсли Элементы спискаУправлять размещением сложноlist-style-position: inside | outside – вне содержимого или как Генерируемое содержимоеНапример маркеры списка…a[href]:before {content: Курсорыcursor: [[,]* [auto | default | pointer | crosshair | move | Курсоры КонтурыНу участвуют в потоке документаМогут употребляться вместе с рамкамиoutline-style: none | dotted
Слайды презентации

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

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

переработанный HTML в соответствии со стандартом XML
Стандарты неоднозначны, не

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


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

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

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

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

как отображать документы.


Слайд 4 Редакторы
WYSIWYG или текстовые процессоры


РедакторыWYSIWYG или текстовые процессоры

Слайд 5 Eclipse
Свободный фреймворк для разработки модульных кроссплатформенных приложений
Плагины Eclipse

EclipseСвободный фреймворк для разработки модульных кроссплатформенных приложенийПлагины Eclipse (Plug-in Development Environment)

(Plug-in Development Environment)


Aptana – отличные редакторы

HTML и CSS

Eclipse (JAVA)

PDT (PHP, HTML, CSS, …)

Aptana (HTML, CSS, …)

Pydev (Python)

ESFTP



Слайд 6 Преимущества Eclipse
Бесплатный продукт с поддержкой
Работа с проектами
Расширяемость и

Преимущества EclipseБесплатный продукт с поддержкойРабота с проектамиРасширяемость и тонкая настройкаКроссплатформенностьОтличные редакторы(автокомплит,

тонкая настройка
Кроссплатформенность
Отличные редакторы
(автокомплит, шаблоны, навигация по коду…)
Работа с разными

языками программирования



Слайд 7 Браузеры
Internet Explorer
Firefox
Opera
Safari
Chrome
Популярность браузеров по Liveinternet в рунете

БраузерыInternet ExplorerFirefoxOperaSafariChrome Популярность браузеров по Liveinternet в рунете

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

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

отладки HTML, CSS, Javascript
Pixel Perfect – плагин для подложки

рисунка дизайна при верстке


IE Developer Toolbar,
IETester,
DebugBar for IETester



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

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

bgcolor="#A0BEC4" onload="alert('Loaded');">

Семантика, логичность кода (, , , ,

…)
Спецсимволы: < > …

,

,

,

, …,
,

текст

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

test.html


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

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

Второй абзац Заголовок
Игнорирование лишних тегов Первый абзац Второй

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

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

error.html, error2.html


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

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

align="left" class="log" lang="ru" id="loginfo" style="color:blue" title="Некоторая статистическая информация">Скачано 10Кб
Заголовки,

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

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


text.html


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

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

жирность
Буква


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

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

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

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

вышеупомянутых тегов – любые элементы допустимые в тексте.
Употребляться могут

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

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

Цитаты, адреса и — цитаты (длинная и короткая) Длииинная цитатаАдрес - адрес

короткая) Длииинная цитата
Адрес - адрес


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

Использование атрибутов не

Линейки Использование атрибутов не рекомендуетсяЧасто используется для логического отделения информационных блоковline.html

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

line.html


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

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

в HTML нет спецификаций
Формат GIF
сжатие "без потерь"
256 цветов максимум
чересстрочный

(всплывающий) и нормальный формат
прозрачность
анимация

Слайд 18 Формат JPEG
24 битная палитра (16 млн цветов)
потеря качества

Формат JPEG24 битная палитра (16 млн цветов)потеря качества рисункаФормат PNGцветовые схемы:truecolorgrayscaleиндексированная

рисунка
Формат PNG
цветовые схемы:
truecolor
grayscale
индексированная палитра (GIF-подобная) – PNG-8
альфа канал на

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


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

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

градиентов и цветов
GIF – для маленьких рисунков, иконок, пиктограмм,

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

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

Применение изображений в HTMLalign=

align="middle" width="50" height="70">
align="bottom | left | middle | right

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

images.html


Слайд 25 Карты на изображениях
Серверные карты
Клиентские

Карты на изображенияхСерверные карты  Клиентские карты  	 	 usemap.html

карты

href="/index.html#p1">

usemap.html


Слайд 26 Применим карту?
usemap.html

Применим карту?usemap.html

Слайд 27 Гиперссылки
Основа гипертекста
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

ГиперссылкиОснова гипертекста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 (/ код

(/ код /)
foto - ссылка с относительным

адресом
mailto:mail@mail.ru?subject=Subject


links.html, folder1/links.html


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

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

с проектом, набором документов

/>

relations.html


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

Страны

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


Города


Списки	Страны					Англия			Швейцария				Города	Крокодил Гена	Чебурашкаrelations.html

i, 1 -->
Крокодил Гена
Чебурашка

relations.html


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

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


lists.html

Списки определений	Термин 1	Определение первого термина	Термин 2	Определение второго термина lists.html

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

События
(controls)
type=text,

ФормыПроцесс заполнения, отправкиСобытия (controls)type=text, password, filesize=

password, file
size="30" maxlength="20" value="my name"
accept="image/*"
forms.html


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

Поля форм forms.html

type="radio" name="border" value="top" checked>

форму">





forms.html


Слайд 33 Поля форм 2

Поля форм 2 текстtexxxtaccesskey, disabled, readonlyВведите имя: forms.htmlhttp://trevordavis.net/play/input-vs-button/

текст

texxxt
accesskey, disabled,

readonly
Введите имя:

forms.html

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


Слайд 34 Таблицы
Название таблицы

Таблицы Название таблицы  111  background, bgcolor, bordercolor, cols, height, title, nowrapcolspan, rowspan, , tables.html

align="left" valign="middle"> 111
background, bgcolor, bordercolor, cols, height, title, nowrap
colspan, rowspan
,


,

tables.html


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

ФреймыФреймы   Рамки для framesetnoresize, scrolling, frameborder для frameНе работают фреймы?target у ссылки, frames.html, iframe.html

scrolling, frameborder для frame

Не работают фреймы?
target

у ссылки,

frames.html, iframe.html


Слайд 36 Объекты и апплеты

Вложенные object

Объекты и апплеты Вложенные objectobject.html, object.htmlhttp://www.i2r.ru/static/245/out_21542.shtml - Параметры object

type="application/x-shockwave-flash" />

object.html, object.html
http://www.i2r.ru/static/245/out_21542.shtml - Параметры object


Слайд 37 div и span
Div – блочный
Span – строчный
title,

div и spanDiv – блочныйSpan – строчный title, dir, lang, style, class

dir, lang, style, class


Слайд 38 CSS 2
Стиль – это правило отображения тега
Встроенные стили,

CSS 2Стиль – это правило отображения тегаВстроенные стили, стили документа, внешние

стили документа, внешние таблицы
или @import
@media – правило
/*

комментарий к стилям */






css.html, css.css, css1.css


Слайд 39 Синтаксис
seceltor {property:value; property1:value1;}
p {color: red; text-decoration: underline;}
p {font-family:

Синтаксисseceltor {property:value; property1:value1;}p {color: red; text-decoration: underline;}p {font-family: Georgia, 'Times New

Georgia, 'Times New Roman', Times, serif;}
p {border: 1px solid

red;}
Стиль элемента явно указан, либо унаследован, либо взят по умолчанию



css0.html


Слайд 40 Селекторы
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


Слайд 41 Приоритеты стилей
Стили
!important
Порядок каскадирования:
По источнику ("ближе" к тегу)
Специфичность,

Приоритеты стилейСтили !important Порядок каскадирования:По источнику (

более узкое, точное определение
Порядок следования
Как правило стили приоритетнее атрибутов

агент,

браузер

пользователь

разработчик

агент, браузер

разработчик

пользователь





css.html, css.css, css1.css


Слайд 42 Специфичность
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


Слайд 43 Размеры, цвета, URL в CSS
Ключевые слова, inherit
url(http://localhost/1.jpg)
red, #7788AA,

Размеры, цвета, URL в CSSКлючевые слова, inheriturl(http://localhost/1.jpg)red, #7788AA, rgb(12,11,34)Размеры:em — ширина

rgb(12,11,34)
Размеры:
em — ширина буквы m в настоящем шрифте. Например,

p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.
px — пикселы
pt — пункты. Один пункт = 1/72 дюйма.
% — проценты
ex — ширина буквы x
in — дюймы
cm — сантиметры
mm — миллиметры
pc —размер в пиках. (12 пунктов).


keywords.html


Слайд 44 Шрифты
font-family: Georgia, 'Times New Roman', Times, serif; (с

Шрифтыfont-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)font-size:

засечками, без, рукописные..)
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-face

font_css.html


Слайд 45 Свойства текста
letter-spacing: 2px;
line-height: 120%; (наслед. вычисл. от родителя)
text-align:

Свойства текстаletter-spacing: 2px;line-height: 120%; (наслед. вычисл. от родителя)text-align: right; text-decoration: blink

right;
text-decoration: blink | line-through | overline | underline

| none
text-ident: -5em;
text-transform: capitalize | lowercase | uppercase | none
vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты (только строк. и замещ. элементы)
word-spacing: 10em;
white-space: normal | nowrap | pre (pre в ie6 работает ☹)
Другие языки…

text_css.html


Слайд 46 Контейнер строки

Контейнер строки

Слайд 47 Свойства контейнеров
Блочная модель CSS, горизонтальное и вертикальное форматирование

Свойства контейнеровБлочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)top, right, bottom, left

(по 7 свойств)






top, right, bottom, left


Слайд 48 Горизонтальное форматирование
Значение auto – заполняет всю оставшуюся ширину

Горизонтальное форматированиеЗначение auto – заполняет всю оставшуюся ширину контейнера (margin, width)Отрицательные

контейнера (margin, width)
Отрицательные поля
Сумма 7 размеров дочернего элемента =

width родительского
Для замещающих элементов размеры auto равны реальным размерам
Размеры замещающих элементов изменяются пропорционально, если задавать одно из них

autowidth.html


Слайд 49 контейнер
контейнер
height=auto
horis1.html

контейнерконтейнерheight=autohoris1.html

Слайд 50 Вертикальное форматирование
Высота по содержимому (auto)
Или через height. Если

Вертикальное форматированиеВысота по содержимому (auto)Или через height. Если содержимого больше чем

содержимого больше чем height – прокрутка
margin-top или bottom равное

auto = 0
Высота в процентах – от блока контейнера, но…
Центрирование по вертикали через процентные margin и высоту блока-контейнера
Сворачивание полей
Отрицательные margin



vert1.html, vert2.html,
negative_margins.html


Слайд 51 Сворачивание вертикальных полей
margins.html

Сворачивание вертикальных полейmargins.html

Слайд 52 Форматирование строчных элементов
Многострочный строковый элемент, рамки, фон
Строковый блок

Форматирование строчных элементовМногострочный строковый элемент, рамки, фонСтроковый блок и контейнер строкиОтступы,

и контейнер строки
Отступы, рамки и поля незамещаемых элементов не

оказывают влияния на высоту строкового блока в отличии от замещаемых
Вспомним line-height
Если в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока

str_format.htm


Слайд 53 Изменение представления элемента
display: block | inline | inline-table

Изменение представления элементаdisplay: block | inline | inline-table | list-item |

| 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:inline
display определяет только лишь представление элемента, но не его тип, не его суть
display: inline-block
Иногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)

display1.html
display_inline_block.html


Слайд 54 Поля
По умолчанию margin=0
У некоторых элементов есть поля по

ПоляПо умолчанию margin=0У некоторых элементов есть поля по умолч.img {margin: 1em;}img

умолч.
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
Поля строковых элементов (левое и правое)




top

bottom

right

left

margin-percent.html


Слайд 55 Рамки
Рамки внутри полей, они ограничивают фон
Ширина, стиль, цвет
Ширина

РамкиРамки внутри полей, они ограничивают фонШирина, стиль, цветШирина по умолч.=medium или

по умолч.=medium или none
Цвет по умолч.=цвет элемента
border-style: стиль (TRBL)

или отдельно
border-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены
Если border-style=none, то border-width=0
border-color: color (TRBL) или отдельно
Цвет рамки может = transparent



Слайд 56 Рамки, стили рамок
border-top, border-right, border-bottom, border-left: border-width ||

Рамки, стили рамокborder-top, border-right, border-bottom, border-left: border-width || border-style || color

border-style || color
border: border-width || border-style || color
У

строковых элементов тоже могут быть


Слайд 57 Отступы
padding: значение (любые меры, проценты) (TRBL)
Залиты фоном
Отступы не

Отступыpadding: значение (любые меры, проценты) (TRBL)Залиты фономОтступы не сворачиваются% относительно ширины

сворачиваются
% относительно ширины родителя (причем и верхние и нижние

поля)
padding-top, padding-right, padding-bottom, padding-left
Можно применять к строковым элементам


paddings.html


Слайд 58 Цвета, фон
color: | inherit
Свойство color для

Цвета, фон color: | inheritСвойство color для элементов формbackground-color: цвет |

элементов форм
background-color: цвет | transparent (умолч.)
background-image: url(путь к файлу)

| none
background-color + background-image
background-repeat: no-repeat | repeat | repeat-x | repeat-y


colors-css.html,
background_css.html


Слайд 59 Фон
background-position: [проценты | значение] | [left | center

Фонbackground-position: [проценты | значение] | [left | center | right] ||

| 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-repeat

background_css.html,
background2_css.html


Слайд 60 Перемещение, плавающая модель
Рисунки, параграф с float
Задание ширины обязательно
Поля

Перемещение, плавающая модельРисунки, параграф с floatЗадание ширины обязательноПоля не сворачиваютсяПеремещаемый элемент

не сворачиваются
Перемещаемый элемент генерирует блочный элемент
Правила перемещаемых элементов (стр.327)
Перемещаемый

элемент увеличивается, чтобы вместить всех перемещаемых потомков
Отрицательные поля
Если ширина больше – перемещаемый элемент окажется за боковым краем родителя
clear: both | left | none | right

float1.html, float2.html
float3.html, float_problem.html


Слайд 61 Позиционирование
position: absolute | fixed | relative | static
static

Позиционированиеposition: absolute | fixed | relative | staticstatic – нормальный потокrelative

– нормальный поток
relative – смещение элемента с теми же

размерами и начальными координатами
absolute – удаление из нормального потока. Генерация структурного блока.
fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.

Слайд 62 Позиционирование 2
Блок-контейнер для элементов с position = relative

Позиционирование 2Блок-контейнер для элементов с position = relative | static –

| static – родитель
Блок-контейнер для элементов с position

= absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер



Слайд 63 Свойства смещения
top, right, bottom, left: |

Свойства смещенияtop, right, bottom, left: | | auto | inheritШирина и

значение> | auto | inherit
Ширина и высота
min-width, min-height:

| <процентное значение> | inherit
max-width, max-height: <длина> | <процентное значение> | none | inherit

position.html


Слайд 64 Переполнение и отсечение содержимого
overflow: visible | hidden |

Переполнение и отсечение содержимогоoverflow: visible | hidden | scroll | auto

scroll | auto | inherit
overflow-x и overflow-y
clip: rect(top, right,

bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit


overflow.html


Слайд 65 Видимость элементов
visibility: visible | hidden | collapse |

Видимость элементовvisibility: visible | hidden | collapse | inheritvisibility.html

inherit
visibility.html


Слайд 66 Абсолютное позиционирование
Абсолютное позиционирование относительно…
Перекрытие элементов
Размеры и размещение
left

Абсолютное позиционированиеАбсолютное позиционирование относительно…Перекрытие элементовРазмеры и размещение left + margin-left +

+ margin-left + border-left-width + padding-left + width +

padding-right + border-right-width + margin-right + right = ширина блока-контейнера
Значение auto
right или bottom компенсируют, если все свойства заданы

position_abs.html


Слайд 67 Размещение по оси z
z-index: число | auto
Может быть

Размещение по оси zz-index: число | autoМожет быть отрицательнымЛокальный контекст занесения в стекокноАБz-index.html

отрицательным
Локальный контекст занесения в стек



окно


А
Б
z-index.html


Слайд 68 Фиксированное позиционирование
Относительно окна браузера
Удобно, например, для баннеров или

Фиксированное позиционированиеОтносительно окна браузераУдобно, например, для баннеров или для менюposition_fixed.html

для меню
position_fixed.html


Слайд 69 Относительное позиционирование
Смещение относительно текущего положения
position_relative.html

Относительное позиционированиеСмещение относительно текущего положенияposition_relative.html

Слайд 70 Верстка таблиц
Объединять ячейки через CSS нельзя
У ячеек нет

Верстка таблицОбъединять ячейки через CSS нельзяУ ячеек нет полейСвойство displaytables2.html

полей
Свойство display
tables2.html


Слайд 71 Таблицы. Продолжение
display: inline-table – таблица строкового уровня (типа

Таблицы. Продолжениеdisplay: inline-table – таблица строкового уровня (типа inline-block)Значения можно присвоить

inline-block)
Значения можно присвоить любым элементам и сделать на основе

них таблицу
Анонимные объекты таблицы
Name:


tables2.html


Слайд 72 Таблицы. Продолжение
Слои таблицы
caption-side: top | bottom
border-collapse: collapse | separate |

Таблицы. ПродолжениеСлои таблицыcaption-side: top | bottomborder-collapse: collapse | separate | inheritborder-spacing:

inherit
border-spacing: ? | inherit
empty-cells: show |

hide | inherit


tables3.html


Слайд 73 Сливающиеся рамки ячеек
Если display: table | inline-table у

Сливающиеся рамки ячеекЕсли display: table | inline-table у элемента не может

элемента не может быть отступов, только поля
Рамки могут применяться

к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов
Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются

tables3.html


Слайд 74 Размеры таблиц
Ширина
table-layout: auto | fixed | inherit
Скорость рендера

Размеры таблицШиринаtable-layout: auto | fixed | inheritСкорость рендера с фиксированной шириной

с фиксированной шириной больше
Если сумма ширин столбцов больше ширины

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


tables4.html


Слайд 75 Элементы списка
Управлять размещением сложно
list-style-position: inside | outside –

Элементы спискаУправлять размещением сложноlist-style-position: inside | outside – вне содержимого или

вне содержимого или как строковый маркер в начале содержимого
list-style-type:

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
list-style-image: none | url('путь к файлу')
list-style: list-style-type || list-style-position || list-style-image

lists_css.html


Слайд 76 Генерируемое содержимое
Например маркеры списка…
a[href]:before {content: "(link)";}
Ограничения на display
content:

Генерируемое содержимоеНапример маркеры списка…a[href]:before {content:

строка | attr(атрибут) | open-quote | close-quote | no-open-quote

| no-close-quote | url }
Теги недопустимы
Генерируемые кавычки
Счетчики
counter-reset и counter-increment



css_gen_content.html
css_gen_content2.html


Слайд 77 Курсоры
cursor: [[,]* [auto | default | pointer |

Курсорыcursor: [[,]* [auto | default | pointer | crosshair | move

crosshair | move | e-resize | ne-resize | nw-resize

| n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit
a[href] {cursor: pointer;}

cursors.html


Слайд 78 Курсоры

Курсоры

Слайд 79 Контуры
Ну участвуют в потоке документа
Могут употребляться вместе с

КонтурыНу участвуют в потоке документаМогут употребляться вместе с рамкамиoutline-style: none |

рамками
outline-style: none | dotted | dashed | solid |

double | groove | ridge | inset | outset | inherit (TRBL – нет)
outline-width: thin | medium | thick | <длина> | inherit
outline-color: <цвет> | invert | inherit
outline: [ || || ] | inherit

outline.html


  • Имя файла: htmlcss-verstka.pptx
  • Количество просмотров: 147
  • Количество скачиваний: 0
- Предыдущая Солнышко на ножке
Следующая - спасская башня