Поиск по сайту

PHP Поиск

- Долговечные стиральные машины indesit для удобства.
- остров свободы - разработка стильного логотипа, создание фирменного стиля логотипов

Style Cursor
Style Font
Style Link

Таблицы стилей или CSS

Таблицы стилей (style sheets) представляют собой абстракцию, в которой стиль документа определяется отдельно от его содержания. Термин "таблицы стилей"прочно вошел в русскую речь, хотя в некоторых книгах вы можете встретить и более точный перевод - "листы стилей".

Общие сведения о таблицах стилей находятся здесь.
Сводная таблица стилей.

По методам добавления стилей в документ различают три вида стилей.

Внутренние стили

Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного HTML. Внешний вид документа трудно изменить.

Пример

<!-- каждому параграфу – свой цвет -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<P style="color:blue">LET US TALK</P>
<P style="color:red">LET US READ</P>
</html>

РЕЗУЛЬТАТ:

LET US TALK

LET US READ

Глобальные стили

Определяются тэгом STYLE с атрибутом TYPE="text/css" в контейнере <HEAD>...</HEAD>, являются универсальным средством, позволяющим не только оперативно изменять внешний вид страницы, но и и бороться с перегруженностью документа оформительскими тэгами.

Пример

<!-- все параграфы лилового цвета -->
<html>
<head>
<style type="text/css">
<!--
P {color:#FF00FF}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<P>LET US READ AND LEARN</P>
<P>LET US READ AND LEARN</P>
</html>

РЕЗУЛЬТАТ:

LET US READ AND LEARN

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

Связанные стили

Определяются во внешнем файле. Позволяют всем страницам, принадлежащим одному серверу выглядеть единообразно. Для связи с файлом, на котором описана таблица стилей, используется тэг <LINK> с атрибутом REL="stylesheet".

Другие атрибуты

TITLE. Задает заголовок страницы, на которой с помощью тэга <STYLE>, определена таблица стилей.

HREF. Ссылка на страницу с таблицей стилей или имя файла.

TYPE. Тип файла, с которым нужно установить связь.

Пример

<LINK TITLE="mystyle" REL="stylesheet" HREF="style.htm" TYPE="text/css">

Каскадные таблицы стилей (CSS)

Каскадные таблицы стили CSS (Cascading Style Sheets) - первый стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тэгами от внешних.

CSS - это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. Здесь можно найти самые разнообразные свойства стилей. Однако, пока еще броузеры не поддерживают все возможности CSS. Можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.

Наиболее популярные свойства стилей

BACKGROUND. Фон элемента. Задается одним или двумя цветами (т.е. их смесью) или именем графического файла. Возможные значения: red, black/white, fill2.gif (

BORDER. Рамка вокруг элемента. Возможные значения: solid 0.5mm (есть рамка шириной 0.5 миллиметра), none (нет рамки).

BORDER-COLOR. Цвет рамки. Возможные значения: blue, #993300.

COLOR. Цвет элемента.

CURSOR. Тип курсора. Возможные значения (их можно видеть, перемещая курсор по первому столбцу):

auto	Броузер определяет какой курсор показывать в зависимости от контекста
default	Курсор зависит от платформы. Обычно стрелка
crosshair	Обычно простой крестик
hand	Рука IE
pointer	Рука NS6/ IE6
move	Четырехсторонняя стрелка. Обычно используется при указании на перемещаемый объект
text	Изменяемый текст. Обычно I-вида
help	Стрелка с вопросом. Используется при указании на подсказку
wait	Курсор показывает, что программа busy и следует подождать. Обычно песочные часы
progress	Курсор показывает, что идет процесс обработки. Только IE6
not-allowed	Курсор показывает, что объект или действие недоступно. Только IE6
n-resize	Стрелка, указывающая в заданном направлении (north, north-west, west, south-west, ...)
nw-resize
w-resize
sw-resize
s-resize
se-resize
e-resize
ne-resize

Точный вид курсора зависит от того, какие курсоры установлены на машине пользователя.

Примеры использования Style Cursor

Пример 1:

<style type="text/css">
body{
cursor: url(mycursor.cur)
}
</style>

В этом примере для всей WEB страницы задан курсор из файла с именем mycursor.cur.

Пример 2:

<div style="cursor: move; width: 200px; height: 200px"></div>
<a href="help.htm" style="cursor: help;">Help</a>

В этом примере внутри DIV форма курсова "move", а на ссылке форма курсора "help".

Пример 3:

<TD onmouseover="this.style.cursor='wait'">se-resize</TD>

В этом примере при наведении на ячейку таблицы изменяется стиль курсора на "wait".

Пример 4:

<body onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">

Пример запрета выделения на странице. Если вы начнете выделять, то Курсор изменится на запрещающий и выделения не будет производиться

Изменение стиля шрифта с помощью Style Font

FONT-FAMILY. Тип шрифта. Возможные значения: Arial (без засечек), CourierNew (моноширинный), Times New Roman (с засечками).

FONT-SIZE. Размер шрифта. Возможные значения: 14pt, 120%. Единицами измерения для этого и других размерных свойств могут быть: pt (пункты), px (пикселы), mm (миллиметры), cm (сантиметры), in (дюймы), % (проценты).

FONT-WEIGHT. Толщина шрифта. Возможные значения: light (легкий), medium (средний), bold (жирный).

FONT-STYLE. Стиль шрифта. Возможные значения: italic (наклонный), normal (обычный).

FONT. Полная характеристика шрифта. Сочетание четырех предыдущих свойств.

LIST-STYLE-IMAGE. Символ маркера в маркированном списке. Задается как gif-файл. Может определяться как для всего списка, так и для его отдельных элементов.

Пример

<html>
<head>
<style type="text/css">
<!--
ul {list-style-image:URL(fill1.gif)}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<ul>DRINK
<li>milk</li>
<li>tea</li>
<li>juice</li>
<li>coffee</li>
</ul>
</html>

РЕЗУЛЬТАТ:

milk
tea
juice
coffee

LETTER-SPACING. Межбуквенный интервал. Возможные значения: 2px (интервал в 2 пиксела), -.4pt (интервал, уменьшенный на 0.4 пункта).

LINE-HEIGHT. Межстрочный интервал. Возможные значения: 14pt, 50%.

MARGIN-BOTTOM, MARGIN-LEFT, MARGIN-RIGHT, MARGIN-TOP. Отступы соответственно снизу, слева, справа, сверху элемента. На многие элементы не действуют. Действуют на DIV. Возможные значения: 150pt, 0.5in.

MARGIN. Отступы вокруг элемента.

PADDING-BOTTOM, PADDING-LEFT, PADDING-RIGHT, PADDING-TOP. Отступы от рамки соответственно снизу, слева, справа, сверху.

PADDING. Все отступы от рамки до элемента.

TEXT-ALIGN. Выравнивание текста по горизонтали. Возможные значения: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине).

TEXT-DECORATION. Оформление текста. Возможные значения: underline (подчеркивание), line through (перечеркивание), none (без оформления).

TEXT-INDENT. Отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. Возможные значения: 50pt, 1cm.

WIDTH. Ширина поля, предоставленного элементу. Возможные значения: 100pt, 5cm.

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

Стиль в CSS может быть задан для определенного элемента, класса или идентификатора.

Пример

<html>
<head>
<style type="text/css">
<!--
H1 {color:red;text-align:center}
.myclass {font-style:italic}
#myid {background:yellow}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<H1>Seasons</H1>
<H2 class="myclass">Lesson Seventy-Nine</H2>
<EM id="myid">LET US LEARN</EM>
<P class="myclass">Learn to pronounce and use the new words.</P>
</html>

РЕЗУЛЬТАТ:

Seasons

Lesson Seventy-Nine

LET US LEARN

Learn to pronounce and use the new words.

H1, .myclass, #myid называются простыми селекторами.

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

Примеры

<!-- все элементы EM внутри элемента P будут на желтом фоне -->
P EM {background:yellow}
<!-- все элементы класса pilot внутри элемента LI класса man,
которые находятся внутри элемента UL будут голубого цвета -->
UL LI.man .pilot {color:blue}

Если несколько элементов будут иметь общий стиль, то соответствующий им селекторы можно перечислить в таблице стилей через запятую.

Пример

<html>
<head>
<style type="text/css">
<!--
H1,H2,H3,H4 {color:red;text-align:center}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<H1>Seasons</H1>
<H2>Lesson Seventy-Nine</H2>
<H3>LET US LEARN</H3>
<H4>1. Learn to pronounce and use the new words.</H4>
</html>

РЕЗУЛЬТАТ:

Seasons

Lesson Seventy-Nine

LET US LEARN

1. Learn to pronounce and use the new words.

Оформление ссылок (Псевдоклассы)

Псевдоклассами называются элементы одного типа, удовлетворяющие определенному критерию. Например, посещенные элементы A (ссылки) составляют псевдокласс visited. В настоящее время поддерживаются только псевдоклассы ссылок. Но и это уже кое-что. С помощью таблицы стилей, где псевдокласс следует отделять двоеточием ( : ), можно изменить оформление активной (active), посещенной (visited), непосещенной (link) ссылки, а также ссылки, на которую наведена мышь (hover).

Пример

A:link {text-decoration:none}
A:visited {text-decoration:none}
A:active {text-decoration:none}
A:hover {text-decoration:underline}

Использование тэгов <SPAN> и <DIV>

Стиль можно установить почти для всех элементов HTML, но два тэга <SPAN> и <DIV> особенно удобны тем, что они не накладывают на стиль никакого собственного типа представления. При использовании атрибутов CLASS и ID эти тэги вместе с CSS практически неограничено расширяют HTML. <SPAN>...</SPAN> и <DIV>...</DIV> являются простыми контейнерами для HTML-элементов. Они позволяют применять атрибуты форматирования к конкретным частям документа. Друг от друга они отличаются лишь тем, что броузеры обычно помещают символ перевода строки до и после HTML-элементов, заключенных в контейнер <DIV>...</DIV>.

Пример

<html>
<head>
<style type="text/css">
<!--
.ital {font-size:120%;font-style:italic;color:blue}
.bold {font-size:120%;font-weight:bold;color:blue}
.end {font-weight:bold;color:blue}
-->
</style>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
</head>
<pre>
<span class=ital>Правильные</span> глаголы образуют прошедшее время
путем добавления окончания <span class=bold>-ed</span> или
<span class=bold>-d</span>,
которое читается как: 
[t](help<span class=end>ed</span>), [d](open<span class=end>ed</span>),
[id](want<span class=end>ed</span>).
</html>

РЕЗУЛЬТАТ:

Правильные глаголы образуют прошедшее время путем добавления окончания -ed или -d, которое читается как: [t](helped), [d](opened), [id](wanted).

В контейнер <DIV>...</DIV> можно включать другие тэги, исключая <HEAD>, <BODY> и тэги, связанные с фреймами (кроме <IFRAME>). Используя тэг <DIV>, Web-страницу можно разделить на части и каждой из них присвоить отдельный стиль.

Пример

<html>
<head>
<style type="text/css">
<!--
.title {text-align:center;font-size:150%;font-weight:bold;color:red}
.bold {font-size:120%;font-weight:bold;color:blue}
.end {font-weight:bold;color:blue}
-->
</style>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<div class=title>
Наречие<br>(The Abverb)
</div>
<p> Наречия часто образуются от прилагательных добавлением окончания
<span class=bold>-ly</span>: 
slow - slow<span class=end>ly</span>,
quick - quick<span class=end>ly</span>.
<html>

РЕЗУЛЬТАТ:

Наречие
(The Abverb)

Наречия часто образуются от прилагательных добавлением окончания -ly: slow - slowly, quick - quickly.

Для CSS существует он-лайн валидатор.

Читать дальше: Графика в HTML

Содержание:

Новое за неделю

Вся история

Сейчас на сайте: 390

Web-технологии

Таблицы стилей (CSS)

Поиск по сайту

PHP Поиск

Таблицы стилей или CSS

Внутренние стили

Пример

Глобальные стили

Пример

Связанные стили

Другие атрибуты

Пример

Каскадные таблицы стилей (CSS)

Наиболее популярные свойства стилей

Примеры использования Style Cursor

Изменение стиля шрифта с помощью Style Font

Пример

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

Пример

Seasons

Lesson Seventy-Nine

Примеры

Пример

Seasons

Lesson Seventy-Nine

LET US LEARN

1. Learn to pronounce and use the new words.

Оформление ссылок (Псевдоклассы)

Пример

Использование тэгов <SPAN> и <DIV>

Пример

Пример

Популярное:

Содержание:

Новое за неделю