აბაშის ხმა
Скрипты-სკრიპტები
მთავარი » 2012 მაისი 22 » Таблицы стилей или CSS02:31 Таблицы стилей или CSS | |||||||||||||||||||||||||||||||
Внутренние стилиОпределяются атрибутом непосредственно в элементе. Мало отличается от традиционного 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 LET US READ AND LEARN Связанные стилиОпределяются во внешнем файле. Позволяют всем страницам, принадлежащим одному серверу выглядеть единообразно. Для связи с файлом, на котором описана таблица стилей, используется тэг <LINK> с атрибутом REL="stylesheet". Другие атрибутыПример<LINK TITLE="mystyle" REL="stylesheet" HREF="style.htm" TYPE="text/css"> Каскадные таблицы стилей (CSS)Каскадные таблицы стили CSS (Cascading Style Sheets) - первый стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тэгами от внешних. CSS - это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами. Здесь можно найти самые разнообразные свойства стилей. Однако, пока еще броузеры не поддерживают все возможности CSS. Можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться. Наиболее популярные свойства стилей ).
Примеры использования 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Пример<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>
РЕЗУЛЬТАТ:
Использование атрибутов 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>
РЕЗУЛЬТАТ: SeasonsLesson Seventy-NineLET US LEARNLearn 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>
РЕЗУЛЬТАТ: SeasonsLesson Seventy-NineLET US LEARN1. 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>
| |||||||||||||||||||||||||||||||
|
|
| სულ კომენტარები: 0 | |
სექციის კატეგორიები | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
ძებნა |
|---|
შესვლის ფორმა |
|---|
კალენდარი |
|---|
ჩანაწერების არქივი |
|---|
მინი-ჩეთი |
|---|
საიტის მეგობრები |
|---|
სტატისტიკა |
|---|
სულ ონლაინში: 74 სტუმარი: 74 მომხმარებელი: 0 |
