HTML+CSS (верстка) Лекция 1. Короткое введение Последний стандарт HTML – версия 4.01 XHML – переработанный HTML в соответствии со стандартом XML Стандарты. - презентация

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

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

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

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

19

20

21

22

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 Карты на изображениях Серверные карты Клиентские карты usemap.html

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

27 Гиперссылки Основа гипертекста URL scheme:scheme_specific_part :// : / Только US-ACSII – символы 0%B4%20%2F (/ код /) foto - ссылка с относительным адресом links.html, folder1/links.html

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

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

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

31 Формы Процесс заполнения, отправки События (controls) type=text, password, file size="30" maxlength="20" value="my name" accept="image/*" forms.html

32 Поля форм forms.html

33 Поля форм 2 текст texxxt accesskey, disabled, readonly Введите имя: forms.html

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

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

36 Объекты и апплеты Вложенные object object.html, object.html shtml - Параметры object

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

38 CSS 2 Стиль – это правило отображения тега Встроенные стили, стили документа, внешние – правило /* комментарий к стилям */ css.html, css.css, css1.css

39 Синтаксис 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

40 Селекторы p {} /* типовой, по тегу */ #id1 {} /* идентификатор */.class1 {} /* по имени класса */ * {} /* универсальный */ *[align="right"] {} /* по атрибутам */ p#id1.class1.class2 {} p:first-line {} /* псевдоэлементы */ div, table,.class1 {} /*групповой*/ ul ul{} /*контекст, на следующие*/ ol > li {} /*дочерний*/ li + li {} /*соседние*/ - поддерживаемые в браузерах селекторы css2.html li {} /*дочерний*/ li + li {} /*соседние*/ http://xhtml.ru/2008/01/08/css-selectorshttp://xhtml.ru/2008/01/08/css-selectors - поддерживаемые в браузерах селекторы css2.html">

41 Приоритеты стилей Стили !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 специфичность = 1000 */ css1.html">

43 Размеры, цвета, URL в CSS Ключевые слова, inherit url( red, #7788AA, 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-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_css.html

45 Свойства текста letter-spacing: 2px; line-height: 120%; (на след. вычисл. от родителя) text-align: 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, горизонтальное и вертикальное форматирование (по 7 свойств) top, right, bottom, left margin border padding [width] x [height]

48 Горизонтальное форматирование Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width) Отрицательные поля Сумма 7 размеров дочернего элемента = width родительского Для замерающих элементов размеры auto равны реальным размерам Размеры замерающих элементов изменяются пропорционально, если задавать одно из них autowidth.html

49 margin border padding [width] x [height] margin border padding [width] x [height] height=auto horis1.html

50 Вертикальное форматирование Высота по содержимому (auto) Или через height. Если содержимого больше чем height – прокрутка margin-top или bottom равное auto = 0 Высота в процентах – от блока контейнера, но… Центрирование по вертикали через процентные margin и высоту блока-контейнера Сворачивание полей Отрицательные margin vert1.html, vert2.html, negative_margins.html

51 Сворачивание вертикальных полей margin border padding [width] x [height] margin border padding [width] x [height] margins.html

52 Форматирование строчных элементов Многострочный строковый элемент, рамки, фон Строковый блок и контейнер строки Отступы, рамки и поля незамераемых элементов не оказывают влияния на высоту строкового блока в отличии от замераемых Вспомним line-height Если в строке есть замераемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока str_format.htm

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

54 Поля По умолчанию 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 Поля строковых элементов (левое и правое) top bottom right left margin-percent.html

55 Рамки Рамки внутри полей, они ограничивают фон Ширина, стиль, цвет Ширина по умолч.=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-style || color border: border-width || border-style || color У строковых элементов тоже могут быть

57 Отступы padding: значение (любые меры, проценты) (TRBL) Залиты фоном Отступы не сворачиваются % относительно ширины родителя (причем и верхние и нижние поля) padding-top, padding-right, padding-bottom, padding-left Можно применять к строковым элементам paddings.html

58 Цвета, фон color: | inherit Свойство 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 | right] || [top | center | bottom] (если одно задано, второе – center) background-attachment: fixed | scroll ( background: background-attachment || background-color || background-image || background-position || background-repeat background_css.html, background2_css.html

60 Перемещение, плавающая модель Рисунки, параграф с float Задание ширины обязательно Поля не сворачиваются Перемещаемый элемент генерирует блочный элемент Правила перемещаемых элементов (стр.327) Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков Отрицательные поля Если ширина больше – перемещаемый элемент окажется за боковым краем родителя clear: both | left | none | right float1.html, float2. html float3.html, float_problem.html

61 Позиционирование position: absolute | fixed | relative | static static – нормальный поток relative – смещение элемента с теми же размерами и начальными координатами absolute – удаление из нормального потока. Генерация структурного блока. fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.

62 Позиционирование 2 Блок-контейнер для элементов с position = relative | static – родитель Блок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер

63 Свойства смещения top, right, bottom, left: | | auto | inherit Ширина и высота min-width, min-height: | | inherit max-width, max-height: | | none | inherit position.html

64 Переполнение и отсечение содержимого overflow: visible | hidden | 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 | inherit visibility.html

66 Абсолютное позиционирование Абсолютное позиционирование относительно… Перекрытие элементов Размеры и размещение 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 Может быть отрицательным Локальный контекст занесения в стек окно А Б z-index.html

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

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

70 Верстка таблиц Объединять ячейки через CSS нельзя У ячеек нет полей Свойство CSSАналог HTM display: tabletable display: tablerowtr display: tableheadthead display: tablerowgrouptbody display: tablefootergrouptfoot display: tablecolumncol display: tablecolumngroupcolgroup display: tablecelltd, th display: tablecaptioncaption Свойство display tables2.html

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

72 Таблицы. Продолжение Слои таблицы caption-side: top | bottom border-collapse: collapse | separate | inherit border-spacing: ? | inherit empty-cells: show | hide | inherit tables3.html

73 Сливающиеся рамки ячеек Если display: table | inline-table у элемента не может быть отступов, только поля Рамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются tables3.html

74 Размеры таблиц Ширина table-layout: auto | fixed | inherit Скорость рендера с фиксированной шириной больше Если сумма ширин столбцов больше ширины таблицы, то берется первое Высота: или заданная или как сумма высот строк Вертикальное выравнивание – не то же самое что и для строковых элементов tables4.html

75 Элементы списка Управлять размещением сложно 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: строка | 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 | 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 | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет) outline-width: thin | medium | thick | | inherit outline-color: | invert | inherit outline: [ || || ] | inherit outline.html

80