HTML+CSS (верстка) Лекция 1

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

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

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

Eclipse Свободный фреймворк для разработки модульных кроссплатформенных приложений Плагины Eclipse (Plug-in Development Environment) Aptana – отличные редакторы HTML и CSS Eclipse (JAVA) PDT (PHP, HTML, CSS, …) Aptana (HTML, CSS, …) Pydev (Python) ESFTP …

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

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

Другие инструменты Firebug – не заменим для разработки и отладки HTML, CSS, Javascript Pixel Perfect – плагин для подложки рисунка дизайна при верстке IE Developer Toolbar, IETester, DebugBar for IETester

Теги, атрибуты. Блочные и строковые элементы,, Семантика, логичность кода (,,,, …) Спецсимволы: < > …,,,, …,, текст Вложенность тегов test.html

Обработка ошибок, DTD Отсутствующие теги – плохая практика Первый абзац Второй абзац Заголовок Игнорирование лишних тегов Первый абзац Второй абзац XHTML – намного строже o - не правильно, - правильно o Регистр символов в названии тегов o текст текст текст - не правильно o Обязательные теги, например Инструменты проверки кода на ошибки: HTML – валидатор error.html, error2.html

Текст Текст, абзацы, перевод строки Лишние пробельные символы не учитываются Скачано 10Кб Заголовки, значение заголовков и все браузеры поддерживают, но… блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт) Физическая и логическая разметка text.html

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

Теги логической разметки текста Тег ОписаниеОтображение Выделение аббревиатур, сокращенная форма слова, фразы подч. пункт. Акроним, сокращение из первых букв слов подч. пункт. Библиографическая ссылка, например, название журнала курсив Выделение кода программы монош. уменьш. Термины, впервые появившиеся в тексте курсив Визуальное выделение, логическое ударение курсив Текст, набранный на клавиатуре, название клавиш монош. Результат программы; часть, вырванная из контекста монош. Логическое подчеркивание текста, более сильное ударение полуж. Имя переменной, данные, вводимые пользователем курсив Не гарантируется именно такое отображение

Основные теги физической разметки Тег Описание <b><b> Эквивалент, не несущий определенного смысла Увеличение размера шрифта (на 1 больше, чем у окружающего текста <i><i> Эквивалент, не несущий определенного смысла Тег, обратный тегу <s><s> Устарел, делает текст перечеркнутым Чуть меньший размер шрифта, выше уровня строки на половину. Возводит текст в верхний индекс Чуть меньший размер шрифта, выше уровня строки на половину. Возводит текст в нижний индекс Моноширинный шрифт <u><u> Устарел, подчеркнутый текст Не гарантируется именно такое отображение Содержимое вышеупомянутых тегов – любые элементы допустимые в тексте. Употребляться могут везде, где применяются элементы, относящиеся к тексту.

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

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

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

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

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

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

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

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

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

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

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

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

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

Поля форм forms.html

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

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

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

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

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

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

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

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

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

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

Размеры, цвета, 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

Шрифты 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

Свойства текста 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

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

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

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

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

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

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

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

Изменение представления элемента 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

Поля По умолчанию 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

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

Рамки, стили рамок border-top, border-right, border-bottom, border-left: border-width || border-style || color border: border-width || border-style || color У строковых элементов тоже могут быть

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

Цвета, фон 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

Фон 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

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

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

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

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

Переполнение и отсечение содержимого 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

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

Абсолютное позиционирование Абсолютное позиционирование относительно… Перекрытие элементов Размеры и размещение left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера Значение auto right или bottom компенсируют, если все свойства заданы position_abs.html

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

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

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

Верстка таблиц Объединять ячейки через 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

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

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

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

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

Элементы списка Управлять размещением сложно 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

Генерируемое содержимое Например маркеры списка… 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

Курсоры 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

Курсоры

Контуры Ну участвуют в потоке документа Могут употребляться вместе с рамками 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