Тег
Тег APPLET это маленькие по объему файлы с расширением .class, предназначенные для вставки его в html-документы с целью получения самых разнообразных эффектов. Закрывающий тег обязателен
Атрибуты
alignВыравнивание элемента. Может принимать значения: BSBOTTOM, ABSMIDDLE, BASELINE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP, TOP codeИмя файла, содержащего скомпилированный java class
Пример
Взято с сайта http://www.dataway.ch/~bennet/
document.writeln('') document.writeln('') document.writeln('

') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('') document.writeln('

')
Код

Категория

Другие теги

Тег

Тег !DOCTYPE сообщает валидатору, какую именно версию HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег !DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором. Закрывающий тег не требуется. Документация на данный тег достаточна туманна, поэтому предлагаются следующие варианты, которые "считаются правильными"
Пример

Стандарт HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)


Категория

Другие теги

BASE

Тег BASE позволяет авторам явно указать базовый URL документа. Если BASE указан, он должен присутствовать в разделе HEAD документа HTML, до элементов, ссылающихся на внешние ресурсы. Информация о пути, указанная в элементе BASE, влияет только на URL в документе, в котором присутствует этот элемент. Начальный тег обязателен, конечный тег запрещен
Атрибуты
href=задает абсолютный URL, служащий базовым URL для разрешения относительных URL
Пример

Щелкни здесь, чтобы узнать больше
Категория

Теги форматирования документа

BGSOUND

Тег служит для внедрения звуковых файлов на страницы в качестве фоновой музыки. Закрывающий тег не требуется
Атрибуты
loopВозвращает или устанавливает число повторов. Может принимать следующие значения

-1	Постоянное воспроизведение звука
0	Только один раз
n	Устанавливает точное число повторов

srcURL звукового файла
Пример
Код с использованием тега


Категория

Звук

Big

Тег и обязательный парный ему
Тег выводит более крупный текст
Атрибуты
titleПоказывает текст в виде всплывающей подсказки
Пример
Это обычный текст

А это уже более крупный текст с использованием тега
Категория

Теги физического форматирования текста

Blockquote

Тег

и обязательный парный закрывающий тег

Тег

предназначен для включения в документ длинных цитат, cоздавая отступы с обеих сторон текста и отделяясь от остального текста пустыми строками
Пример
Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку

А это уже длинный текст c отступами от сторон текста для лучшего восприятия
Категория

Теги форматирования текста

Br

Тег
не требует парного закрывающего тега
Тег
(BReak line) вставляет перевод строки
Пример
Это обычный и очень длинный текст, который весьма неудобно читать, если он написан в одну строчку


А это уже длинный текст, разбитый
на две строки с помощью тега

Категория

Теги форматирования текста

Код для второй кнопки

Кнопочка

в таблице

Я недоступна! 60x60
Код для первой кнопки

Кнопочка

в таблице

Код для второй кнопки Я недоступна!
Категория

Элементы управления

Тег

Тег B создает жирный текст. Закрывающий тег обязателен
Атрибуты
contentEditableВозможность редактирования titleПоказывает текст в виде всплывающей подсказки
Пример
Это обычный текст

А это уже жирный текст с использованием тега
Категория

Теги физического форматирования текста

Тег BODY

Пример красной ссылки
vlink=Нежелательный. Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет alink=Нежелательный. Устанавливает цвет гиперссылок при нажатии. Например, на этой странице ссылки становятся синими при нажатии мышкой bgproperties=fixedФоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только Internet Explorer
Эти параметры можно объединять, например на этой страничке используется
Категория

Теги форматирования документа

Тег

Тег создает кнопку с рисунком или с другими встроенными элементами. Закрывающий тег требуется
Атрибуты
disabledДелает кнопку недоступной styleЗадает стили для кнопки. Например, размеры кнопки title=Всплывающая подсказка type=Тип кнопки

Атрибут contentEditable

Атрибут contentEditable позволяет пользователю редактировать содержимое объекта. Доступно, начиная с версии Internet Explorer 5.5

Center

Тег и обязательный парный ему
Тег предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты
Пример
Это обычный текст

А это уже текст с использованием тега
Категория

Другие теги

Cite

Тег и обязательный парный ему
Тег используется для цитат, названий книг. Обычно наклонный текст
Атрибуты
titleВсплывающая подсказка
Пример
Это обычный текст

А это уже текст с использованием тега
Категория

Теги логического форматирования текста

Code

Тег и обязательный парный ему
Тег отмечает текст как небольшой фрагмент программного кода. Обычно отображается моноширинным шрифтом
Атрибуты
titleВсплывающая подсказка
Пример
Это обычный текст

А это уже текст с использованием тега
Категория

Теги логического форматирования текста

sCanEdit может принимать следующие значения

sCanEdit может принимать следующие значения

inherit	По умолчанию. Содержимое объекта можно редактировать зависит от родительского объекта
false	Пользователь не может редактировать содержимое объекта
true	Пользователь может редактировать содержимое объекта

Пример
Текст с использованием тега , который вы можете редактировать!
Второй пример позволяет с помощь скрипта отключать и включать возможность редактирования

Нажмите на кнопку для возможности или запрета редактирования содержимого тега SPAN.
Разрешить редактирование
Вы можете изменять этот зеленый текст
SPAN можно редактировать:

Тег

Тег определяет заголовок для таблицы TABLE. Элемент CAPTION может располагаться только непосредственно после начального тега TABLE. Элемент TABLE может включать только один элемент CAPTION. Закрывающий тег обязателен.
Атрибуты
align=Не рекомендуемый параметр. Выравнивание заголовка относительно таблицы. Возможные значения: left, right, top (по умолчанию), bottom titleВсплывающая подсказка
Пример
Пример простой таблицы
Мой заголовок таблицы
Заголовок столбца 1Заголовок столбца 2

Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2	Ячейка столбца 2, ряд 2

Код для таблицы

Мой заголовок таблицы

Заголовок столбца 1	Заголовок столбца 2
Ячейка столбца 1, ряд 1	Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2	Ячейка столбца 2, ряд 2

Категория

Таблицы

CSS: ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

color	Определяет цвет элемента I {color: green;}
background-color	Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. H4 {background-color: yellow;} В скриптовых языках используйте object.style.backgroundColor [ = sColor ]
background-image	Устанавливает или получает фоновый рисунок для элемента Может принимать значения none - По умолчанию. Используется цвет родительского объекта sUrl - Задается абсолютный или относительный путь к рисунку H3 {background-image: yellow;} В скриптовых языках используйте object.style.backgroundImage [ = sLocation ]
background-attachment	Устанавливает или получает поведение фонового рисунка для элемента Может принимать значения scroll - По умолчанию. Фоновый рисунок прокручивается вместе с элементом fixed - Фоновый рисунок не прокручивается вместе с элементом body {background-attachment: fixed;} В скриптовых языках используйте object.style.backgroundAttachment [ = sAttachment ]

Примеры

Курсивный текст зеленым цветом

CSS: Границы

Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы:

border-width	Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая). table {border-width: 2px;}
border-color	Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно table {border-color: green;}
border-style	Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset table {border-style: dashed;} table {border-style: groove;}
border-collapse	Задает стиль рисования таблицы. Может принимать следующие значения: separate (по умолчанию) - Ячейки отделены друг от друга collapse - ячейки не имеют промежутков между собой CSS: Курсоры Internet Explorer позволяет задавать стили для курсоров. Некоторые стили доступны только для IE 6. all-scroll Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении I {cursor: all-scroll;} auto По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте I {cursor: auto;} col-resize Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали H4 {cursor: col-resize;} crosshair Курсор-крест H4 {cursor: crosshair;} default Стандартный курсор, используемый системой H4 {cursor: default;} hand Рука с вытянутым указательным пальцем. Используется при гиперссылке H4 {cursor: hand;} help Стрелка с вопросительным знаком. H3 {cursor: help;} move Курсор со 4 стрелками, показывающий возможность перемещения H2 {cursor: move;} no-drop Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора TD {cursor: no-drop;} not-allowed Перечеркнутый круг. Данная операция не поддерживается TD {cursor: not-allowed;} pointer Идентична стилю hand TD {cursor: pointer;} progress Песочные часы, показывающие на продолжение операции TD {cursor: progress;} row-resize Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали TD {cursor: row-resize;} text Текстовый курсор-каретка TD {cursor: text;} url(uri) Ваш собственный курсор. Поддерживаются файлы .cur и .ani TD {cursor:url(elogo.cur);} vertical-text Горизонтальная текстовая каретка для вертикального текста TD {cursor: vertical-text;} wait Курсор, показывающий, что система занята и требуется подождать TD {cursor: wait;} *-resize Курсоры, показывающие возможность потянуть за край окна. Вместо символа * используйте N, NE, NW, S, SE, SW, E, или W, определяющие направление стрелок TD {cursor: n-resize;} < Примеры Проведите курсоры над ячейками таблицы для демонстрации стилей all-scroll auto col-resize crosshair default hand help move no-drop not-allowed pointer progress row-resize text vertical-text wait n-resize s-resize ne-resize sw-resize nw-resize se-resize e-resize w-resize url(new.cur) url(kiss.ani) CSS: Отступы margin Задает или получает ширину отступа от четырех сторон объекта H4 {margin:1cm;} body {margin:5mm;} margin-top Задает или получает высоту верхнего отступа объекта H5 {margin-top:3cm;} margin-left Задает или получает ширину левого отступа объекта img {margin-left:2cm;} margin-right Задает или получает ширину правого отступа объекта img {margin-right:2cm;} margin-bottom Задает или получает высоту нижнего отступа объекта img {margin-bottom:2cm;} padding Задает или получает величину пространтства, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей td {padding:2cm;} padding-bottom Задает или получает величину пространтства, вставляемого между объектом его нижней границей td {padding-bottom:2cm;} padding-left Задает или получает величину пространтства, вставляемого между объектом его левой границей td {padding-left:2cm;} padding-right Задает или получает величину пространтства, вставляемого между объектом его правой границей td {padding-right:2cm;} padding-top Задает или получает величину пространтства, вставляемого между объектом его верхней границей td {padding-top:2cm;} CSS: ПОЛОСА ПРОКРУТКИ Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д. scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки body {scrollbar-3dlight-color: green;} scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке со стрелками body {scrollbar-arrow-color: red;} scrollbar-base-color Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color body {scrollbar-base-color: green;} scrollbar-darkshadow-color Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками body {scrollbar-darkshadow-color: red;} scrollbar-face-color Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки body {scrollbar-face-color: green;} scrollbar-highlight-color Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол body {scrollbar-highlight-color: green;} scrollbar-shadow-color Схоже с scrollbar-darkshadow-color body {scrollbar-shadow-color: green;} scrollbar-track-color Устанавливает или получает цвет дорожки для ползунка body {scrollbar-track-color: aqua;} Примеры Верх и левый край ползунка и кнопок со стрелками в этом текстовом поле должны быть синего цвета, стрелки белого цвета. А дорожка для ползунка небесного цвета. CSS: Позиционирование position Устанавливает или определяет позицию элемента. Может принимать значения: static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top и left relative - Позиция объекта определяется смещением от заданных свойств top и left left/top Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения: auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам length - число с заданной единицей измерения (10mm;5px;3em) percentage - число процентов от ширины/высоты родительского объекта (10%) Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются z-index Устанавливает или получает порядок слоев для объектов. В скриптовых языках используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два значения: строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам Order - число, задающее позицию объекта в слоях. С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим атрибут absolute или relative свойства position Нельзя применять к объектам, имеющим окно (например, select) Пример применения в скрипте Примеры Свойство absolut Зададим элементу SPAN, содержащему слово ХАКЕР абсолютную позицию (0,0), что позволит вывести слово в левом верхнем углу браузера XAKEP Свойство relative А теперь поднимем слово относительно базовой линии строки на 5 пикселей поднимем Причем, можно изменять позицию динамически, с помощью скриптов function fnDown(){ oSpan.style.position="relative"; oSpan.style.top="5px"; oSpan.innerText="опустим"; } function fnRelative(){ oSpan.style.position="relative"; oSpan.style.top="-5px"; oSpan.innerText="поднимем"; } function fnStatic(){ oSpan.style.position="static"; oSpan.innerText="выравним"; } CSS: Псевдо-элементы Псевдо-элементы являются особой группой, позволяющих объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдо-элемент first-letter, в котором устанавливаете различные стили: p:first-letter { float:right;font-size:2em;color:red;} :first-letter Устанавливает стили для первой буквы объекта :first-line Устанавливает стили для первой строки объекта :hover Устанавливает стили для элемента, когда пользователь подводит курсор мыши к ссылке. Данный псевдокласс часто используется вместе с псевдоклассами :active, :link и :visited :active Устанавливает стили для элемента, когда ссылка становится активной, но переход по ссылке еще не совершен. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :link и :visited :link Устанавливает стили для элемента, когда ссылка не является часто посещаемой. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :visited :visited Устанавливает стили для элемента, когда ссылка недавно посещалась. Данный псевдокласс часто используется вместе с псевдоклассами :hover, :active и :link. (Используйте данный псевдокласс перед ними, чтобы не подавлять их поведение) CSS: РАЗМЕР ЭЛЕМЕНТА min-height Устанавливает или получает минимальную высоту элемента TR {min-height: 10px;} Данный атрибут применим к TR, TD, TH в таблице, у которой свойство table-layout имеет значение fixed Примеры Высота данной ячейки равна 50 пикселям. Так что содержимое в ячейку не влезает и обрезается Минимальная Высота данной ячейки равна 150 пикселям. Так что текст в нее влезает и не обрезается CSS: СВОЙСТВА ШРИФТА font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P {font-family: Times New Roman, sans-serif;} font-style Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный. P {font-style: italic;} font-variant Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small-caps - Все буквы заглавные). P {font-variant: small-caps;} font-weight Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 B {font-weight: bolder;} font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;} CSS: СВОЙСТВА ТАБЛИЦЫ table-layout Устанавливает или получает алгоритм обработки таблицы TABLE {table-layout: fixed;} Имеет два значения auto - По умолчанию. Браузер самостоятельно вычисляет необходимые размеры таблицы fixed - Браузер не учитывает содержимое отдельных ячеек при вычислении ширины таблицы и отдельных ячеек. Он использует значения ширины таблицы, ширины столбцов, рамок и расстояний между ячейками. Ширина столбцов таблицы вычисляется в следующем порядке: используя значение атрибута WIDTH элементов COL используя значение атрибута WIDTH элементов TD первого ряда таблицы если данные значения не установлены, то ширина столбцов вычисляется соответственно контенту ячеек Примеры Смотри также Размеры элемента Высота данной ячейки равна 50 пикселям. Так что содержимое в ячейку не влезает и обрезается Минимальная Высота данной ячейки равна 150 пикселям. Так что текст в нее влезает и не обрезается CSS: СВОЙСТВА ТЕКСТА text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} - подчеркивание A {text-decoration: none;} - стандартный текст I {text-decoration: line-through;} - зачеркивание B {text-decoration:overline;} - надчеркивание text-transform Задает преобразование регистра текста при отображении H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в заглавную A {text-transform: uppercase;} - Все буквы преобразуются в заглавные I {text-transform: lowercase;} - Все буквы преобразуются в строчные B {text-decoration:none;} - Отменяет установленные преобразования text-align Определяет выравнивание элемента. Возможные значения: left, right, center, justify P {text-align:justify} H5 {text-align: center} text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. P {text-indent: 50pt;} line-height Управляет интервалами между строками текста. P {line-height: 50 %} word-spacing Устанавливает интервалам между словами. Можно использовать отрицательные значения P {word-spacing: 50 %} letter-spacing Устанавливает интервалам между буквами P {letter-spacing: 50 pt} vertical-align Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom P {vertical-align: 50 pt} Примеры Демонстация Z-index в скрипте САША + ТАНЯ = Любовь! setTimeout "MoveLeft",5,"VBScript" Sub MoveLeft MovingMessage.style.posLeft = MovingMessage.style.posLeft + 1 If MovingMessage.style.posLeft <> 550 Then setTimeout"MoveLeft",10,"VBScript" End Sub ЕДИНИЦЫ ИЗМЕРЕНИЯ В языке HTML существует два способа задать линейные размеры элемента: пиксели и проценты. В CSS единиц длины гораздо больше. ЕДИНИЦЫ ИЗМЕРЕНИЯ in - Дюймы pt - Пункты (типограф.) px - Пикселы cm - Сантиметры pc - Пика em - Вычисляется относительно размера шрифта элемента mm - Миллиметры ex - Высота строчной буквы "x" в шрифте % - Проценты Условно единицы измерения можно разделить на три группы. Первая группа - это величины, которые используются для измерения длин реальных предметов. К ним относятся: in - дюймы; cm - сантиметры; mm - миллиметры. Ко второй группе можно отнести величины, которые пришли в CSS из типографии. То есть они используются для установки размеров шрифта, межстрочных интервалов и прочих типографских величин. Данная группа величин привычна полиграфистам. К ним относятся: pt - типографский пункт; pc - пика; ex - высота строчной буквы "x" в шрифте. Третью группу составляют величины, которые являются относительными, то есть реальный размер элемента вычисляется относительно какой-либо иной величины. К ним относятся: em - вычисляется относительно размера шрифта элемента; px - пиксель. Вычисляется относительно устройства отображения; % - процент. Естественно, процентные соотношения не являются единицами измерения в привычном смысле слова. Они вычисляются относительно размеров элемента-предка. Подчеркнутый заголовок (underline) Это ссылка без подчеркивания (none) Перечеркнутый курсивный текст (line-through) Текст с подчеркиванием сверху (overline) каждая первая буковка слова большая Спецификация CSS2 позволяет задать стили Спецификация CSS2 позволяет задать стили для каждой из сторон границы. Например: border-сторона[-атрибут]. Где сторона может принимать следующие значения: top (верхняя граница), bottom (нижняя граница), left (левая граница) и right (правая граница). Таким образом { border-bottom-width: 1px } будет означать, что ширина нижней границы равна 1 пикселу. Можно указать до трех семейств font-family - Можно указать до трех семейств шрифта. Это необходимо, так как, если на компьютере клиента отсутствует, скажем, семейство Verdana, а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указано несколько семейств, браузер будет последовательно перебирать все перечисленные, пока не найдет того, которое присутствует на машине клиента. Браузер при запуске сам распределяет имеющиеся семейства для подстановки вместо стандартных. font-weight - Значения bolder и lighter являются относительными. Т.е. если элемент является дочерним к элементу со значением font-weight: bold и правило font-weight для него задано lighter, то он будет отображен нормальным шрифом. font-size - В абсолютных размерах можно использовать некоторые предопределенные значения: xx-small | x-small | small | medium | large | x-large | xx-large. При использовании относительных размеров задаются размеры шрифта относительно родительского элемента. Возможные значения: larger, smaller. И наконец, можно использовать точные значения - Задаются размеры шрифта в единицах длины, допускаемых в рекомендациях W3C. Это: px - логические пиксели, pt - логические пункты, em - единицы размера шрифта. em подразумевает, что размер шрифта устанавливается относительно размера шрифта в родительском элементе. 1em равно размеру шрифта родительского элемента. Либо используются проценты - Задаются размеры шрифта в процентах по отношению к родительскому элементу Жирный шрифт на 200 Курсивный шрифт все буквы заглавные Жирный шрифт bolder Жирный шрифт bold Жирный шрифт на 200 % XAKEP- журнал компьютерных хулиганов Как видите, первая буква и первая строка каждого параграфа имеет особый вид, заданный при помощи различных стилей. Данный прием вам хорошо известен по книгам, использующим подобный прием в глубокой древности Подведите курсор к ссылке, ведущей на сайт Xakep, и она станет красного цвета и исчезнет подчеркивание ссылки Реальные единицы измерения Реальные единицы измерения великолепно работают в физическом мире, однако для использования на экране монитора они оказываются мало пригодны. Причина на редкость проста: мониторы имеют совершенно разные физические параметры. К ним относятся: размер монитора по диагонали (варьируется от 14 дюймов до 21 дюйма) разрешение монитора (варьируется от 640х480 до 1600х1200) Кроме того, на различных платформах могут быть различные экранные разрешения. Так, например, на платформе Macintosh разрешение 72 пикселя на дюйм, тогда как на платформе Windows - 96 пикселей на дюйм. К чему это приводит? Если на мониторе с диагональю 21 дюйм шрифт размером 0.5 дюйма будет смотреться нормально, то на мониторе с диагональю 14 дюймов он будет слишком велик. Точно так же, если при разрешении 640х480 текст размером 3mm читается нормально, то при разрешении 1600х1200 невозможно будет ничего разобрать. Кроме того, браузер сам по себе не в состоянии корректно отобразить величину в реальных единицах. Давайте рассмотрим, почему это происходит. Как известно, изображение на экране монитора строится на основе пикселей. Пиксель является минимальной единицей измерения, то есть не бывает величины 0.5 пикселя. Чтобы отобразить на экране, скажем, два дюйма, операционная система переводит реальную величину в пиксели. И тут вступают в расчет все вышеперечисленные факторы. Во-первых, физические размеры монитора, во-вторых, разрешение монитора, в-третьих, экранное разрешение. Возьмем конкретный пример. Монитор размером 13 дюймов по горизонтали и 9 дюймов по вертикали с разрешением 1024х768 в операционной системе Windows, то есть с экранным разрешением 96 пикселей на дюйм. Тогда величина два дюйма будет соответствовать 96*2=192 пикселям. Однако реальная высота этих двух дюймов будет (768/9)*2=171 пиксель. То есть получается несоответствие: браузер считает, что два дюйма - это 192 пикселя, а реальный размер двух дюймов на мониторе - 171 пиксель. Таким образом, если вы устанавливаете размер элемента в два дюйма, то на этом конкретном мониторе реальный размер элемента будет равен 2,22 дюйма. В то же время на другом мониторе с другими параметрами реальный размер может быть совершенно иным. Исходя из всего этого, можно сделать простой вывод: использование в CSS реальных единиц измерения крайне ограничено. Принципиально использовать реальные единицы измерения можно только в том случае, когда известны параметры устройства вывода. Таким устройством может быть принтер, потому что для него известны геометрические размеры страницы и разрешение (например, 300 точек на дюйм и страница формата А4). Однако особого смысла использование реальных единиц и для печати не имеет. Типографские единицы Типографские единицы измерения для дизайнера даже привычнее, чем реальные единицы, потому что они сталкиваются с ними повсеместно, в любом графическом пакете размер шрифта задается с помощью пунктов (pt). Так что использовать типографские единицы в CSS хочется по привычке. Однако придется изменить свои привычки по той простой причине, что пункты (pt) и пики (pc) принципиально ничем не отличаются от реальных единиц измерения. Это становится понятно, если вспомнить, что такое пункт. Так вот один пункт равен 1/72 дюйма, а пика равна 12 пунктам, то есть 1/6 дюйма. Таким образом, на использование данных типографских величин накладывается абсолютно такое же ограничение, как и на использование реальных величин. Получается, что использовать пункты и пики надо только в той таблице стилей, которая предназначается для вывода страницы на печать. Надо сказать, что для принтера действительно лучше использовать типографские единицы, потому что они для него являются родными. Дело в том, что некоторые достаточно старые браузеры некорректно переводят пиксели в пункты. Например, если вы укажете размер шрифта 16 пикселей, то некоторые браузеры и распечатают его как шестнадцать точек. Но экранное разрешение значительно отличается от разрешения принтера. Например, принтер с разрешением 600dpi выведет 16 пикселей как 0,03 дюйма, что читаться не будет совершенно. Все вышесказанное ни в коей мере не относится к браузерам пятых и тем более шестых версий. Они совершенно корректно трансформируют пиксели при печати, так что можно не беспокоится за неправильную распечатку страниц. Кроме пунктов и пик есть еще одна достаточно интересная типографская единица - ex, которая соответствует высоте строчной букве "x". В отличие от всех предыдущих единиц, эта единица является относительной. Относительные единицы просто незаменимы в резиновой верстке, когда главным является сохранение пропорций. Что касается высоты буквы "x", то она может значительно варьироваться от шрифта к шрифту. У большинства шрифтов высоты буквы "x" равна половине высоты шрифта, однако у некоторых декоративных шрифтов может составлять всего одну треть от высоты шрифта. Для чего же можно использовать единицу измерения, которая базируется на высоте буквы "x"? На самом деле, область применения данной единицы достаточно узка. Ее предпочтительно использовать для выравнивания по вертикали, чтобы точно выровнять какой-либо блок по линии текста. Кроме того, можно делать рамки, отступы и поля шириной по высоте текста. Вот, в общем-то, и все. Для установки размера шрифта ex подходит слабо, потому что он обладает узким спектром значений. Например, невозможно задать размер шрифта на 25% больше, чем у родительского элемента. Для установки высоты строки тоже не подходит, потому что надо знать полную высоту шрифта, иначе расстояние между строками может быть совсем не таким, каким задумывалось. В браузере Internet Explorer 5.0 1ex равен 0.5em, что абсолютно неверно, потому что у разных шрифтов соотношение высоты буквы "х" и высоты шрифта может быть и 0.3em, и 0.6em. Так что использованию данной единицы измерения мешает еще и плохая реализация ее поддержки браузерами. Верхняя часть заголовка зеленого цвета (dotted) Верхняя граница окрашена в синий цвет Пример стиля dashed Пример стиля double Граница из двух линий. Сумма ширины каждой линии и промежуток между ними равняется значению border-width. Пример использования тега DIV Пример атрибутов границы элемента DIV Здесь приводится код примера Пример атрибутов границы элемента DIV Это обычный вид таблицы Ячейки отделены друг от друга Теперь попробуйте щелкнуть мышкой внутри таблицы Ячейки должны соединиться Заголовок H5 имеет верхний отступ в 3 см Кликните на картинке, чтобы увеличить отступ от левого края на 5 см Кликните на центральной картинке, чтобы увеличить пространство между границей таблицы и картинкой Заголовок имеет отступ от всех сторон документа в 1 см Обратите также внимание, что все объекты (абзац, таблица и т.п.) имеют отступ в 5 мм от краев документа (используется body {margin:5mm;}) Заголовок по центру Абзац с отступом для лучшего восприятия текстов при оформлении ваших страничек Текст с уменьшеным интервалом на 50% между строками. Данным метод можно применять в декоративных целях Увеличим промежутки между словами Уменьшим промежутки между буквами Vertical-align Формула спирта C 2 H 5 OH Dd Тег и необязательный парный ему Тег (Definition Description) является описанием списка определений Пример Это определение Описание определения А выглядит код так: Это определение Описание определения Категория Списки Dfn Тег и обязательный парный ему Тег отмечает текст как определение (DeFeNition). Этим тегом можно отметить термин, впервые встречающийся в документе Атрибуты titleВсплывающая подсказка Пример Это обычный текст Интернет - это... Вторая строка с использованием тега Категория Теги логического форматирования текста Dl Тег и необязательный парный ему Тег (Definition List) служит для создания списка определений. Списки состоят из двух частей: определения (DT) и описания (DD) Атрибуты title Показывает текст в виде всплывающей подсказки Пример HTML Это язык разметки гипертекста Браузер Это программа для просмотра гипертекста в интернете А выглядит код так: HTML Это язык разметки гипертекста Браузер Это программа для просмотра гипертекста в интернете Категория Списки Dt Тег и необязательный парный ему Тег (Definition Term) является определением списка определений Пример Это определение Описание определения А выглядит код так: Это определение Описание определения Категория Списки Выделите часть текста Выделите часть текста и перетащите его в другое текстовое поле Отслеживаем событие Выделите часть текста и перетащите его в другое текстовое поле Отслеживаем событие Выделите часть текста и перетащите его в другое текстовое поле Отслеживаем событие Выделите часть текста и перетащите его в другое текстовое поле Отслеживаем событие Выделите часть текста и перетащите его в другое текстовое поле Отслеживаем событие Щелкни сюда. Пример для заголовка без скрипта Пример для кнопки с применением скрипта И сюда Sub clickme() MsgBox "Теперь вы крутой веб-мастер!", 48, "HTML в примерах" End Sub Событие ONCLICK Событие ONCLICK возникает при щелчке левой кнопкой мыши Синтаксис Пример Событие ONCOPY Событие ONCOPY возникает при копировании в буфер обмена. Кстати, если присвоить данному событие значение ="return false", то выделенный текст не попадет в буфер обмена. Если вы добавите эту строчку в тег BODY, то обеспечите себе небольшую защиту своего текста Синтаксис Пример Событие ONDRAG Событие ONDRAG возникает сразу же после события ONDRAGSTART и постоянно присутствует при процессе операции перетаскивания Синтаксис Пример Событие ONDRAGEND Событие ONDRAGEND возникает, если пользователь закончил перетаскивать объект, независимо от того, где закончилась операция перетаскивания Синтаксис Событие ONDRAGENTER Событие ONDRAGENTER возникает, когда пользователь перетаскивает объект к доступному объекту-приемнику Синтаксис Событие ONDRAGLEAVE Событие ONDRAGLEAVE возникает, если пользователь не сбросил объект на доступный объект-приемник, а увел курсор мыши в другое место Синтаксис Событие ONDRAGOVER Событие ONDRAGOVER возникает сразу же после события ONDRAGENTER и присутствует постоянно, пока объект находится над доступным объектом-приемником Синтаксис Событие ONDRAGSTART Событие ONDRAGSTART возникает на объекте-источнике, когда пользователь начинает перетаскивать выделенный текст или выделенный объект Синтаксис Пример Событие ONDROP Событие ONDROP возникает перед событием ONDRAGEND при отпускании кнопки мыши во время операции перетаскивания Синтаксис Событие ONMOUSEOUT Событие ONMOUSEOUT возникает при выходе указателя мыши из-за границ объекта. С помощью данного события можно изменить стили объекта для достижения различных эффектов. Например, при наведении курсора на картинку изображение сменится на другую картинку Синтаксис Пример Поместите указатель мыши над этим текстом а затем уведите мышь в другое место и вы увидите изменение цвета текста при наступлении события ONMOUSEOUT Аналогично, при попадании указателя мыши на картинку происходит замена картинки на другое изображение. Для этого присвойте имя исходной картинке (напр. name="cat1") и прописываете необходимые данные Событие ONMOUSEOVER Событие ONMOUSEOVER возникает при попадании указателя мыши на объект. С помощью данного события можно изменить стили объекта для достижения различных эффектов. Например, при наведении курсора на картинку изображение сменится на другую картинку Синтаксис Пример Поместите указатель мыши над этим текстом и вы увидите изменение цвета текста при наступлении события ONMOUSEOVER Аналогично, при попадании указателя мыши на картинку происходит замена картинки на другое изображение. Для этого присвойте имя исходной картинке (напр. name="cat1") и прописываете необходимые данные Событие ONSELECTSTART Событие ONSELECTSTART возникает при выделении объекта или текста. Кстати, если присвоить данному событие значение ="return false", то выделения не произойдет. Если вы добавите эту строчку в тег BODY, то обеспечите себе небольшую защиту своего текста Синтаксис Пример Чтобы посмотреть код для примеров, Чтобы посмотреть код для примеров, щелкните правой кнопкой мыши и выберите "В виде HTML" Выдели часть красного текста, щелкни правой кнопкой и выбери Копировать Выдели любой участок зеленого текста и скопируй его. Затем попробуй вставить скопированный текст куда-нибудь, и увидишь, что на самом деле ты ничего не скопировал! Выдели часть текста и попробуй его перетащить. Выдели часть текста и попробуй его перетащить Выдели часть текста и попробуй его перетащить Выдели часть зеленого текста и попробуй его перетащить. Пример для кнопки с применением скрипта И сюда Sub clickme() MsgBox "Теперь вы крутой веб-мастер!", 48, "HTML в примерах" End Sub Выдели меня и сработает событие ONSELECTSTART Попробуй выделить меня! Что не получилось? Бедненький, мне тебя жалко! Справочник тегов Событие ONCLICK Щелкни сюда. Пример для заголовка без скрипта Внимание Событие ONCOPY Выдели часть красного текста, щелкни правой кнопкой и выбери Копировать Событие ONDRAG Выдели часть текста и попробуй его перетащить. Событие ONDRAGEND Пример Событие ONDRAGENTER Событие ONDRAGLEAVE Событие ONDRAGOVER Событие ONDRAGSTART Выдели часть зеленого текста и попробуй его перетащить. Событие ONDROP Событие ONMOUSEOUT Событие ONMOUSEOVER Событие ONSELECTSTART Выдели меня и сработает событие ONSELECTSTART Стратегический менеджмент Я представляю себе эту деятельность примерно так - в компании заводится отдел (или по модному департамент) который начинает разыскивать пути ведущие к сиящим вершинам несметного богатсва. Периодически с них спрашивают результат деятельности. Но стратегия штука длинная, отмазок можно выкатить хоть два мешка. А вдруг чего и зайдет... Стратег. менеджмент - Антикризис Изменения стратегии Инновации в стратег. менеджменте Корпоративный менеджмент Стратегический менеджмент Управление в стратег. менеджменте Методы стратег. менеджмента Планирование стратег. менеджмента Проект стратег. менеджмента Разведка для стратег. менеджмента Экономика стратег. менеджмента База знаний стратег. менеджмента Целеполагание менеджмента Развитие стратег. менеджмента Решения стратег. менеджмента Спрос на стратег. менеджмент Стратегии стратег. менеджмента Теория стратег. менеджмента Антипаттерны стратег. менеджмента     Бизнес в интернете: Сайты - Софт - Языки - Дизайн Киберсантинг Киберсантинг как бизнес Виды Киберсантинга Создание игр Дизайн как бизнес Dreamweaver PHP Homesite Frontpage Studio MX Сайтостроительство Citrix MetaFrame Стили сайта ActiveX на сайте HTML как основа сайта Adobe GoLive Что такое WEB Мобильные WAP сайты 3D графика на сайтах 3DS MAX графические решения Графика в 3D Studio MAX и на сайте Em Тег и обязательный парный ему Тег используется для выделения, подчеркивания важных фрагментов текста курсивом (наклонный текст). Происходит от слова emphasis - акцент. Аналогичен тегу I Пример Это обычный текст А это уже текст с использованием тега Категория Теги логического форматирования текста Тег Тег рисует рамку вокруг текста и других объектов, содержащихся в контейнере. Закрывающий тег требуется Атрибуты Примеры Группа кнопочек Два текстовых поля Категория Элементы управления Тег Тег определяет выводимый шрифт, его цвет и размер. Закрывающий тег требуется Атрибуты colorУстанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя константы цвета,например для зеленого цвета faceОпределяет гарнитуру шрифта sizeРазмер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3 Примечание: Атрибуты можно объединять Пример Это обычный текст А это уже текст с использованием тега Текст с использованием шрифта семейства courier Используем тег Категория Теги форматирования текста Тег Тег FORM является контейнером для элементов управления и предоставляет возможность вводить информацию и отправлять ее на сервер. Создание вложенных форм не допускается. Закрывающий тег требуется Атрибуты actionУказывает адрес, по которому выполняется обработка формы methodСпособ пересылки формы на серве. Возможны два значения - GET и POST nameИмя формы для доступа к ее элементам из скриптовых языков Пример Категория Другие теги Тег Тег служит для описания фрейма. Закрывающий тег не требуется Атрибуты srcАдрес объекта (страницы) Пример Простейший пример фреймов Категория Теги форматирования текста Тег служит для описания одного фрейма (его вид и содержание). Закрывающий тег не требуется Атрибуты nameНазначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках srcОпределяет исходный документ, содержащийся в фрейме noresizeЕсли этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя Пример Простейший пример фреймов Категория Теги форматирования текста Alpha Фильтр Alpha устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента Синтаксис: STYLE="filter:alpha(Opacity, FinishOpacity, Style, StartX, StartY, FinishX, FinishY)" Параметры OpacityЗначение прозрачности. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно FinishOpacityНеобязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style Style0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент StartXНачальные координаты градиента по горизонтали StartYНачальные координаты градиента по вертикали FinishXКонечные координаты градиента по горизонтали FinishYКонечные координаты градиента по вертикали Пример Образец Фильтр Код для примера Blur Фильтр Blur размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра Синтаксис: STYLE="filter:blur(Add, Direction, Strength)" Параметры AddОбъект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец DirectionНаправление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов) StrengthСтепень размытия Пример Образец Фильтр Код для примера Chroma Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным Синтаксис: STYLE="filter:chroma(Color)" Параметры ColorЦвет, который будет прозрачным Пример Образец Фильтр Код для примера DropShadow Фильтр DropShadow рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень Синтаксис: STYLE="filter:dropshadow(Color=значение, OffX=значение,OffY=значение,positive=эначение)" Параметры ColorЦвет тени OffXСмещеение тени относительно текста по оси X OffYСмещеение тени относительно текста по оси Y positiveХарактер освещения (0 или 1) Пример Пример фильтра dropshadow Код для примера STYLE=filter:dropshadow(color=silver,offx=3,offy=3,positive=0)>Пример фильтра shadow FlipH Фильтр FlipH переворачивает объект горизонтально Синтаксис: STYLE="filter:FlipH" Пример Образец Фильтр Код для примера FlipV Фильтр FlipV переворачивает объект вертикально Синтаксис: STYLE="filter:FlipV" Пример Образец Фильтр Код для примера Справочник тегов Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта Синтаксис: STYLE="filter:Glow(Strength=значение,Color=значение)" Параметры StregthСила свечения в диапазоне 0-100 ColorЦвет свечения Пример Пример фильтра glow Код для примера STYLE=filter:glow(strength=5,color=red)>Пример фильтра glow Справочник тегов Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах Синтаксис: STYLE="filter:gray" Пример Образец Фильтр Код для примера STYLE=filter:gray()> Invert Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные Синтаксис: STYLE="filter:invert" Пример Образец Фильтр Код для примера STYLE=filter:invert()> Mask Фильтр Mask отображает текст так, как будто он выделен мышью Синтаксис: STYLE="filter:mask(Color=значение)" Параметры ColorЦвет, окружающий текст Пример Пример фильтра Mask Код для примера STYLE=filter:mask(color=darkblue)>Пример фильтра shadow Shadow Фильтр Shadow создает эффект тени Синтаксис: STYLE="filter:shadow(Color=значение, Direction=значение)" Параметры ColorЦвет тени DirectionНаправление тени в градусах Пример Пример фильтра shadow Код для примера STYLE=filter:shadow(color=green,direction=45)>Пример фильтра shadow Wave Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси Синтаксис: STYLE="filter:Wave(add=оригинал, freq=частота, lightStrength=величина, phase=начальная фаза, strength=величина)" Параметры addБулево значение, определяющее использование оригинала (0 или 1). По умолчанию 0 freqКоличество волн lightStrengthвеличина подсветки phaseначальная фаза. По умолчанию - 0, изменяется от 0 до 100 strengthвеличина смещения Пример Пример фильтра Wave Код для примера STYLE=filter:wave(add=0,freq=2,lightstrength=10,phase=1,strength=3)> Пример фильтра shadow Xray Фильтр XRay отображает объект в черно-белом варианте, как на рентгеновском снимке Синтаксис: STYLE="filter:xray()" Пример Образец Фильтр Код для примера Справочник тегов Alpha Blur Chroma FlipH FlipV Glow Gray Invert Mask DropShadow Shadow Wave Xray Стратегический менеджмент Я представляю себе эту деятельность примерно так - в компании заводится отдел (или по модному департамент) который начинает разыскивать пути ведущие к сиящим вершинам несметного богатсва. Периодически с них спрашивают результат деятельности. Но стратегия штука длинная, отмазок можно выкатить хоть два мешка. А вдруг чего и зайдет... Стратег. менеджмент - Антикризис Изменения стратегии Инновации в стратег. менеджменте Корпоративный менеджмент Стратегический менеджмент Управление в стратег. менеджменте Методы стратег. менеджмента Планирование стратег. менеджмента Проект стратег. менеджмента Разведка для стратег. менеджмента Экономика стратег. менеджмента База знаний стратег. менеджмента Целеполагание менеджмента Развитие стратег. менеджмента Решения стратег. менеджмента Спрос на стратег. менеджмент Стратегии стратег. менеджмента Теория стратег. менеджмента Антипаттерны стратег. менеджмента     Бизнес в интернете: Сайты - Софт - Языки - Дизайн Киберсантинг Киберсантинг как бизнес Виды Киберсантинга Создание игр Дизайн как бизнес Dreamweaver PHP Homesite Frontpage Studio MX Сайтостроительство Citrix MetaFrame Стили сайта ActiveX на сайте HTML как основа сайта Adobe GoLive Что такое WEB Мобильные WAP сайты 3D графика на сайтах 3DS MAX графические решения Графика в 3D Studio MAX и на сайте Head Тег и парный ему Тег определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин Категория Теги форматирования документа Hr Тег . Закрывающий тег не требуется Тег добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка Атрибуты sizeУстанавливает высоту(толщину) линии widthУстанавливает ширину линии в пикселах или процентах Создает линию без тени colorЗадает линии определенный цвет Пример Это обычная линия Это линия потолще и красная Категория Теги форматирования текста Html Тег и парный ему Тег указывает программе просмотра страниц что это HTML документ Категория Теги форматирования документа i Тег и обязательный парный ему Тег создает наклонный текст Пример Это обычный текст А это уже наклонный текст с использованием тега Категория Теги физического форматирования текста Тег