Мета тэги.
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов.
META-таги имеют два возможных атрибута
- <META HTTP-EQUIV="имя" CONTENT="содержимое">
- <META NAME="имя" CONTENT="содержимое">
Атрибуты:
NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.
HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.
CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).
Метаданные размещаются на странице между тэгами <HEAD> и </HEAD>.
Общий формат задания мета-тэгов в HTML-документе:
<HTML>
<HEAD>
<TITLE>...</TITLE>
<!-- HTTP-эквиваленты -->
<META HTTP-EQUIV="..." CONTENT="...">
<!-- другие теги группы HTTP-EQUIV -->
<!-- группа NAME -->
<META NAME="..." CONTENT="...">
<!-- другие теги группы NAME -->
</HEAD>
<BODY>
...
</BODY>
</HTML>
Описание мета-тэгов.
Группа HTTP-EQUIV
CONTENT-TYPE (Тип документа и его кодировка)Выбор кодовой страницы для правильного отображения символов браузером.
Пример: <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1251"> REFRESH Время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другой документ с заданным URL.
Формат: <ВРЕМЯ> или <ВРЕМЯ>; <URL>
Пример: <META HTTP-EQUIV="REFRESH" CONTENT="5; http://www. ">
Группа NAME
DESCRIPTION (описание документа)Один из наиболее важных тэгов. Информация, содержащаяся в нем влияет на результаты поиска поисковыми системами.
В общем случае вид результатов поиска как правило выглядит так:
а) URL документа
б) Название документа (содержимое <TITLE>...</TITLE>)
в) Описание документа, то есть DESCRIPTION или кусок начала документа, если DESCRIPTION отсутствует. В первом случае пользователь получает достаточно краткое и информативное описание документа, а во втором случае это может быть бессмысленный набор слов или несколько первых фраз.
г) Рейтинг (коэффициент соответствия документа запросу пользователя).
Пример: <META NAME="DESCRIPTION" CONTENT="Описание данного документа, до 100 символов"> KEYWORDS (ключевые слова)
Набор слов и фраз, наиболее полно характеризующих данный документ. Являются основным критерием поиска вашей странички поисковыми системами. В конечном счете эти слова учитываются при выдаче результатов поиска и способствуют повышению рейтинга.
Пример: <META NAME="KEYWORDS" CONTENT="Ключевые слова, разделенные запятой, до 1000 символов"> DOCUMENT-STATE (статус документа) Данный тэг управляет частотой индексации и может принимать два значения: STATIC (документ статичен, то есть не меняется, и, следовательно, индексировать его нужно только один раз) и DYNAMIC (для часто изменяющися документов, которые нужно реиндексировать)
Пример: <META NAME="DOCUMENT-STATE" CONTENT="STATIC"> ROBOTS (управление процессом индексации)
Возможные варианты:
a) INDEX - возможность индексирования данного документа (иначе NOINDEX)
б) FOLLOW - возможность индексирования всех документов, на которые есть ссылки в данном HTML файле (иначе NOFOLLOW)
в) ALL - одновременное выполнение условий INDEX и FOLLOW
г) NONE - одновременное выполнение условий NOINDEX и NOFOLLOW
Пример: <META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
Допустимо добавлять в мета тэги атрибут LANG, указывающий язык данных, но это не обязательно.
Пример: <META NAME="KEYWORDS" LANG="en" CONTENT="meta, tag">
Тэги, не несущие полезной информации для поисковых систем.
AUTHOR (информация об авторе данного документа)<meta name=”AUTHOR” content=”Design Studio Yarko!, Дизайн-студия Ярко!, http://*****/”>
COPYRIGHT (информация об авторских правах)<meta name=”Copyright” content=”Design Studio Yarko!, Дизайн-студия Ярко!, http://*****/”>
GENERATOR (программа, создавшая HTML-код).<meta content="Notpade" name=Generator>
4. AUTOR-EMAIL (адрес автора).
<meta name=”Autor-Email” content=”*****@***ru”>
Особенности индексации разными поисковыми системами.
Поисковые серверы Altavista, Excite и InfoSeek очень "любят" тэг DESCRIPTION и документы, имеющие этот тэг будут для этих поисковых систем приоритетнее.
Lycos довольствуется первыми предложениями и фразами.
Апорт и Яndex используют значительную часть документа (или даже весь документ) при индексации и индексируют значение тэга KEYWORDS, а также заголовок документа (<TITLE>...</TITLE>), комментарии, атрибуты ALT (у картинок) и HREF (у тега A).
!!!Правильное применение META тегов способствует повышению рейтинга вашего сайта в поисковых системах.
Как сделать страницу популярной?
Ваша задача - сделать так, чтобы поисковая система выдавала ссылки на вашу страницу на первой (в идеале) странице результатов поиска. В противном случае, каким бы не был интересным ваш сайт, к вам никто никогда не зайдет.
Не поленитесь придумать интересное описание вашего сайта в тэге <META NAME="Description" CONTENT="Подробное описание Вашего ресурса"> Продумайте ключевые слова в тэге <META NAME="Keywords" CONTENT="ключевые слова"> Если ваш документ часто изменяется, вставьте тэг <META NAME="Document-state" CONTENT="Dynamic">, и установите регулярность просмотра вашей странички поисковой системой тэгом <META NAME="revizit-after" CONTENT="5 days"> Если ресурс не изменяется впишите тэг <META NAME="Document-state" CONTENT="Static">Некоторые поисковые машины выполняют индексацию по словам, расположенным в заголовке страницы между тэгами <TITLE> и </TITLE> и не обращают внимание на метатэги Description и Keywords.
Значит нужно еще подобрать заглавие вашей страницы так, чтобы оно не содержало как можно больше ключевых слов, и в тоже время, чтобы поисковые машины не сочли. что их дурачат. То есть, они должны умещаться на верхней полоске браузера и в bookmarks.
Пример:
<META NAME="DESCRIPTION" CONTENT=" огромный музыкальный архив музыки в формате MP3">
<META NAME="KEYWORDS" CONTENT="humor, музыка, mp3 music, бесплатно, халява, юмор">
<TITLE>MP3 архив, юмор, - огромная коллекция</TITLE>
Каскадные таблицы стилей.
Пример1: Используя текстовые свойства заголовок и абзац можно описать так:
<style type="text/css" >
<!--
H1 {
font-family: Arial;
font-weight: bold;
font-size: 24px;
color: blue
}
P {
text-align: justify;
text-indent: 5pt;
}
-->
</style>
Пример2:
<p style="font-size: 20pt; text-align: center; color: blue"> jkasf
;lfkhgi s'ofig s'f usifhg wa;oeridgu ;iuf gpsiug ;oifu gpsf </p>
Пример 3:
H1.blue {color:blue}
H1.green {color:green}
H1.red {color:red}
Пример 4:
Что бы задействовать классы, нужно в тэге элемента <body> указать параметр “class” Например,
<h1 class=blue>Синий заголовок </h1>
<h1 class=green>Зеленый заголовок</h1>
Эти тэги можно применить только для класса h1.
Можно создавать классы, которые применяются к любому элементу раздела <body>. Запись такого селектора начинается с точки.
Пример5:
.dark {color:#ccccff} это в заголовок, а в <body>
<p class=dark> темный текст </p>
Селектор id.
Автоматически применяется ко всем элементам, имеющим данный идентификатор. Запись селектора id начинается с #.
Пример 5.
В заголовке #back {font-family: arial; background-color:#cccccc }
В теле <h3 id=back>заголовок на сером фоне </h3>
<p id=back>текст на фоне </p>.
Можно комбинировать свойства селектора класса и id.
Пример6:
<div class=dark id=back> комбинирование свойств </div>
Если несколько элементов должны иметь одинаковые свойства, то имена элементов перечисляют через запятую.
H1, h2, h3 {color:yellow}
Иногда, вместо того, что бы указывать набор отдельных свойств для селектора, удобнее перечислить набор значений для объединяющего свойства.
.D1 {border-color:blue; border-width: 1px; border-style: solid}
.D1 {border: blue 1px solid} этот второй вариант не всегда поддерживается браузерами.
Пример7.
Можно все, что мы прописывали в <style>, скопировать в блокнот на новую пустую страницу, без тэгов.
.dark {color:red}
H1.blue {color:blue}
H1.green {color:green}
H1.light {color:#ccccff}
#back {font-family: arial; background-color:#cccccc } и назвать этот файл main. css.
А в файле, из которого удалили стили, нужно создать связь с файлом таблицей стилей.
Для этого в заголовок впишем команду:
<link href="main. css" rel=stylesheet type="text/css">
Пример 8:
<Html>
<head>
<title> Пример2
</title>
<link href="main. css" rel=stylesheet type="text/css">
</head>
Пример 9:
<STYLE type="text/css">
@import url(stil. css);
</STYLE>
</HEAD>
<BODY >
<h2>aaijdfkaj fka; jfdakl;j klj ldsk;j lfkasj d;falk fakl jdf;aklskjfda; ksldj
a;kjd ;fakjfd a;jfda;lkjdf akjdf a;jfkl j
aljajkljf kajf;sl dkjf ;alkjdfkl ;alkjdf ;akljdf ;akljf </h2>
</BODY>
</html>
Краткое описание языка CSS
Свойства шрифта
• font-family
это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя
ПРИМЕР:font-family:Arial Black URL('arialblack. ttf')
• font-style
(normal, italic) Стиль элемента. Курсивный или обычный
ПРИМЕР:font-style:italic
• font-variant
(normal-нормальный, small-caps-заменяет все строчные буквы на заглавные)Варианты отображения шрифта. Нетскейп не поддерживает это свойство
ПРИМЕР:font-variant:small-caps
• font-weight
(normal-нормальный, bold-жирный, bolder-очень жирный, lighter-тонкий, точная установка)Выделение (жирность) элемента
ПРИМЕР:font-weight:bold
• font-size
(XX%, XXpt, XXpx)Размер шрифта
ПРИМЕР:font-size:30pt
• font
(family, style, variant, weight, size) Объединяет все вышеизложенные свойства.
ПРИМЕР:font: italic bolder Arial 12pt
Свойства текста.
• text-decoration
(none, underline-подчеркнутый, overline-надчеркнутый, line-through-перечеркнутый, blink-мигающий)Стиль текста
ПРИМЕР:text-decoration:line-through
• letter-spacing
(XX-число)Расстояние между буквами
ПРИМЕР:letter-spacing:10px
• text-transform
(Capitalize-каждое слово начинается с большой буквы, UPPERCASE - каждая буква текста становится заглавной, lowercase - каждая буква текста становится маленькой.
ПРИМЕР:text-transform:Capitalize
• text-align
(left, right, center, justify)Выравнивание текста.
ПРИМЕР:text-align:right
• text-indent
(ед. длины или процент)Отступ текста.
ПРИМЕР:text-indent:30em
• line-height
(ед. длины или процент)Отступ сверху
ПРИМЕР:line-height:100%
Свойства цвета.
• color
(#RRGGBB)Цвет элемента
ПРИМЕР:color:#f00000
• background-color
(#RRGGBB)Цвет фона элемента
ПРИМЕР:background-color:#f00000
• background-image
(URL)Фоновое изображение
ПРИМЕР:background-image:URL("img. gif")
• background-repeat
(repeat - размножает фоновое изображение во всех направлениях, repeat-x - размножает фоновое изображение горизонтально, repeat-y - размножает фоновое изображение вертикально, no-repeat - не повторяющиеся изображение)Повтор фонового изображения
ПРИМЕР:background-repeat:no-repeat
• background-attachment
(scroll-скроллинг фонового изображения вместе с документом, fixed-фиксация фонового изображения)Режим прокрутки фонового изображения.
ПРИМЕР:background-attachment:fixed
• background
(color, image, attachment, repeat)Объединяет все вышеизложенные свойства.
ПРИМЕР:background:no-repeat black fixed
Свойства списков
• list-style-type
(disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha)определяет вид маркера элемента списка.
ПРИМЕР:list-style-type:lower-alpha
• list-style-image
(URL)задает вид маркера элемента списка в виде картинки
ПРИМЕР:list-style-image:URL(cool. gif)
• list-style-position
(inside, outside)Определяет положение маркера в зависимости от элемента списка
ПРИМЕР:list-style-position:inside
• list-style
(type, position, image) Объединяет все вышеизложенные свойства.
ПРИМЕР:list-style:inside
Свойства границы
• border-width
(top-width, right-width, left-width, bottom-width) Объединяет все вышеизложенные свойства. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон
ПРИМЕР:border-width: 15pt
• border-color
(цвет)Цвет border'а.
ПРИМЕР:border-color:green
• border-style
Стиль border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре - то задаются индивидуальные стили для всех сторон
ПРИМЕР:border-style: dotted groove
Пример верстки с использованием css.
<HTML>
<HEAD>
<TITLE>
</TITLE>
<style>
#m {
border: 5px dotted red;
width: 100%;
height:500px;
}
#h{
background: blue;
color: yellow;
font-size: 30pt;
text-align: center;
}
#l{
background: yellow;
text-align: center;
padding: 3px;
}
#l a{
color: black;
font-weight: bold;
text-decoration: none;}
#l a:hover{
color: red;
}
#c {
background-image: url(back. gif);
color: blue;
text-align: center;
Height: 400px
}
#b {
background: blue;
text-align: center;
color: yellow;
font-weight: bold;}
</style>
</HEAD>
<BODY>
<div id=m>
<div id=h>Заголовок</div>
<div id=l>
<a href=urok1.html>Урок 1</a>   
<a href=urok2.html>Урок 2</a>   
<a href=urok3.html>Урок 3</a>
</div>
<div id=c>
<p>kjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hvkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj h
</p>
<p>kjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hvkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj hkjhbkuh jkug kjlh kjjmlkj lkhjb kjhybkj h
</p>
</div>
<div id=b>*****@***ru</div>
</div>
</BODY>
</HTML>
Блоки.
Строение блока:
Пример: блок имеет границу в 20 px, отступ в 30 px и ширину в 300 px.
Общая ширина блока, включая все границы и отступы, должна составлять 400px.
20+30+300+30+20 = 400
Свойства блоков.
margin - устанавливает ширину полей.
- margin-top - ширина верхнего поля. margin-right - ширина правого поля. margin-bottom - ширина нижнего поля. margin-left - ширина левого поля.
Значение задается в пикселях, процентах.
{margin: 20px 30px 5px }
padding -устанавливает ширину промежутка между содержимым элемента и определенным его участком его границы (соответственно верхнем, правым, нижним и левым).
· padding-top - ширина верхнего промежутка.
· padding-right - ширина правого промежутка.
· padding-bottom - ширина нижнего промежутка.
· padding-left - ширина левого промежутка.
Значение задается в пикселях, процентах.
p {padding-top: 20px}
h1{padding: 5px 5px 3px}
border-width - свойство для установки ширины рамки сразу для всех сторон элемента.
- border-top-width - толщина верхней стороны. border-right-width - толщина правой стороны. border-bottom-width - толщина нижней стороны. border-left-width - толщина левой стороны.
Значение задается в пикселях, thin (тонкая), medium(средняя), thick(толстая).
p{ border-width: 2px,2px,1px,1px}
p { border-top-width: 5px }
border-color - свойство для установки цвета рамки сразу для всех сторон элемента.
- border-top-color - цвет верхней стороны. border-right-color - цвет правой стороны. border-bottom-color - цвет нижней стороны. border-left-color - цвет левой стороны.
p{ border-color: red, blue, red, blue}
border-style - свойство для установки стиля рамки сразу для всех сторон элемента.
· border-top-style - стиль верхней стороны.
· border-right-style - стиль правой стороны.
· border-bottom-style - стиль нижней стороны.
· border-left-style - стиль левой стороны.
Эти свойства могут принимать следующие значения:
- none - линия отсутствует. hidden - линия тоже отсутствует, но для таблицы это значение действует по другому dotted - пунктирная линия. dashed - штрихпунктирная линия. solid - сплошная непрерывная линия. double - двойная сплошная линия. groove - трехмерная борозда. ridge - трехмерный гребень. inset - трехмерная вырезка. outset - трехмерный орнамент. inherit - применяется значение родительского элемента.
p{ border-top-style: double; }
p{ border-style: double, solid}
У всех выше перечисленных свойств может быть от одного до четырех значений. Если имеется только одно значение, то оно будет присвоено сразу ко всем полям. Если два значения, то первое из них присваивается верхнему и нижнему полю, а второе - левому и правому. Если же три, то первое значение присваивается верхнему полю, второе - левому и правому, а третье - нижнему.
width - определяет ширину элемента.
Ширина задается пикселях, процентах, аuto (ширина выбирается браузером).
p {width: 260px}
min-width, max-width - определяет соответственно минимальную или максимальную ширину элемента.
p {min-width: 100pх; max-width: 400px}
height - определяет высоту элемента.
Высота задается в пикселях, процентах, auto.
p {height: 260px}
min-height, max-height - определяет соответственно минимальную или максимальную высоту элемента.
p{min-height: 100pх; max-height: 400px}
display - определяет вид создаваемого элемента. Эти разные виды по-разному взаимодействуют друг с другом. Строчные элементы могут располагаться на одной строке. Примером строчного элемента могут быть ссылки, логические стили.
Блочные элементы не могут располагаться на одной строке. По умолчанию блочными элементами являются заголовки, таблицы. Если вид элемента изменить, то можно, например, расположить два заголовка в одной строке или две ссылки в разных строках.
· inline – строчный элемент (по умолчанию).
- block - блочный элемент, list-item - встроенный элемент пункта списка. None – отключается отображение блока
p {display: block}
float – определяет положении плавающего блока.
· none - элемент не перемещается и работает свойство position или нормальный поток.
- left - элемент передвинут влево, а остальные элементы обтекают его справа. right - элемент передвинут вправо, а остальные элементы обтекают его слева.
img {float: right}
clear – определяет какие стороны блока не могут соседствовать с другим перемещаемым блоком.
· none - обтекание доступно со всех сторон (по умолчанию).
- left - элементов не должно быть слева от данного элемента и будет размещен ниже всех левосторонних right - элементов не должно быть справа от данного элемента и будет расположен ниже всех правосторонних блоков. both - элементов не должно быть справа и слева от данного элемента, т. е. будет размещен ниже всех плавающих блоков.
img {clear: both}
overflow - определяет, как отображать элемент, когда он перекрывает другой элемент.
- visible - перекрываемый элемент виден полностью. hidden - перекрываемая часть не видна. Это не работает в Explorer. scroll – в блоке появляются две полосы прокрутки. auto – появляется одна полоса прокрутки.
img {overflow: visible}
visibility - определяет, является ли элемент видимым.
- visible - элемент видим. hidden - элемент не видим, но он все равно влияет на общую структуру страницы.
img {visibility: visible}
Позиционирование
CSS позволяет определить точное положения HTML-элементов.
С помощью CSS программист может размещать содержимое двумя способами:
1. абсолютное позиционирование позволяет указывать положение содержимого по отношению окна браузера.
2. относительное позиционирование по отношению к элементу, внутри которого это содержимое находится.
position - определяет используемый метод позиционирования.
· static - обычный элемент, использующий установленную по умолчанию HTML-структуру (по умолчанию). Все блоки отображаются сверху вниз в порядке, в котором они следуют в html-коде. Два структурных блока не располагаются на одной горизонтальной линии. Строчные идут по горизонтали друг за другом.
· relative - позиционирование элемента является смещением по отношению к его обычному положению в общей структуре страницы. Следующие блоки будут располагаться как будто исходные блок был в нормальном потоке.
· absolute - позиционирование элемента определяется смещением по отношению к положению содержащего его элемента, и они не влияют на общую структуру.
· fixed - позиционирование элемента является смещением, как и в случае со значением absolute, но сам элемент фиксируется в окне браузера и при прокрутке окна не перемещается. Это не работает в Internet Explorer.
Для fixed, absolute, relative величина смещения от определенного края (соответственно верхнего, правого, нижнего и левого) определяется с помощью: top, right, bottom, left.
Величину задают в процентах, пикселях.
|
Left: 20px;
Top: 50px }
Слои.
z-index указывает слой.
Чем выше номер, тем выше слой, т. е. ближе к пользователю.
Слои часто используют для создания меню.
img {z-index: 3}
Примеры использования Css.
Использование сss в списках.
Примеры.
1.В раздел <style> </style>заголовка пропишите стили:
ul {list-style-type: circle; }
ul. im {list-style-image: url("ball. gif")}
#List1 {list-style-type: square; list-style-position: inside;}
#List2 {list-style-type: upper-roman;}
#List3 {list-style-type: upper-alpha }
2. В разделе нужно создать списки, к которым применяется стиль.
Использование стилей, при создании таблиц.
<p> Маркированный список. </p>
<ul >
<li>один
<li>Два
<li>три
</ul>
<p> Маркированный список, к которому применяется класс im. </p>
<ul class=im >
<li>один
<li>Два
<li>три
</ul>
<p> Маркированный список, к которому применяется класс List1 . </p>
<ul id=list1 >
<li>один один один один один один один один один один один один один один один
один один один один один один один один один один один один один один один один
один один один один один один один один один
<li> Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два
Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два Два
Два Два Два Два Два Два Два Два Два Два Два
<li>три три три три три три три три три три три три три три три три три три три
три три три три три три три три три три три три три три три три три три три три
три три три три три три три три три три три
</ul>
<p> Список, к которому применен List2, List3. </p>
<ol id=list2>
<li>
<li id=list3>
<li>
</ol>
Работа с фоновым изображением.
Пример1.
1В разделе стилей напишите и посмотрите, как работает.
body {background-image: url(back. gif);}
В «теле» документа наберите:
<p> ak;df akdfj a;kdjf akdsjf akdjf a;lksdjf a;lskdjf a;kld fa;fj a;kdj fa;kdfj akd fjk dfjakdfj akf ja;lksjf akf aksdj fakdsj faksdjf akd fjakdfj a ;dfkja;dkfj a;kdjf a;skdjf a;sdfj a;sdfj a;sdfj a;klsdfj a;ksdfj a </p>
<p> ak;df akdfj a;kdjf akdsjf akdjf a;lksdjf a;lskdjf a;kld fa;fj a;kdj fa;kdfj akd fjk dfjakdfj akf ja;lksjf akf aksdj fakdsj faksdjf akd fjakdfj a ;dfkja;dkfj a;kdjf a;skdjf a;sdfj a;sdfj a;sdfj a;klsdfj a;ksdfj a </p>
<p> ak;df akdfj a;kdjf akdsjf akdjf a;lksdjf a;lskdjf a;kld fa;fj a;kdj fa;kdfj akd fjk dfjakdfj akf ja;lksjf akf aksdj fakdsj faksdjf akd fjakdfj a ;dfkja;dkfj a;kdjf a;skdjf a;sdfj a;sdfj a;sdfj a;klsdfj a;ksdfj a </p>
Обратите внимание, что в данном примере используется мозаичное заполнение для фонового рисунка.
2.Для того, чтобы рисунок не множился, нужно дописать: background-repeat: no-repeat
body {background-image: url(back. gif);background-repeat: no-repeat }
3.Для расположения рисунка внутри раздела используют background-position:
body {background-image: url(back. gif);background-repeat:
no-repeat ; background-position: center top; }
4.Если нужно размножить рисунок только в горизонтальном направлении, то вместо «no-repeat» пишут repeat-x, а если в вертикальном, то - repeat-y.
body {background-image: url(back. gif);background-repeat: repeat-y ;
background-position: right top;}
Пример2.
Создайте страницу и пропишите.
<body style= “background-image: ur1(back. gif); background-repeat: no-repeat; background-position: center; background-attachment: fixed”>
background-attachment: fixed в этом случае фоновое изображение не прокручивается. Если scroll, то прокручивается.
Пример3.
Создайте новый файл.
А разделе заголовка пропишите стиль:
<STYLE type=text/css>BODY {
BACKGROUND: url(back. gif) #cccccc fixed
}
</style>
А теперь создайте таблицу с размерами 760 на 1000, с рамкой, с выравниванием по центру, с 5 строками и 3 столбцами.
Переместитесь по полосе прокрутки. Фон останется на месте, а таблица перемещается.
Примеры использования css в ссылках.
1.В разделе стилей пропишите.
<style>
a {text-decoration: underline;
}
a:link {
color: pink;
}
a:visited {
color: yellow;
}
a:active {
color: red;}
a:hover {
color: green;
font-weight: bold}</style>
a:hover – здесь прописывается, как будет вести себя ссылка при наведении курсора мыши.
2. Создайте несколько ссылок и поработайте с ними.
Примеры использования css в формах.
1. В разделе стилей пропишите стили:
<style>
textarea {border:4px dotted blue; font-family:verdana; color:#663300;}
.m {color: #FF0066;
background-color: #FFFF99;
border-color:#CC6600;
border-width:4px;
}
.buttons {background-color:blue;
color: red;
border-color:yellow;
border-width:6px;
border-style: double;
font-weight: bold;
width:80px;
height:40px
}
textarea. sq {width:400px; height:200px;background-color:yellow}
#fff {border-width:3px;
border-style: double; border-color:red;}
#ff {background-color: blue;}
background-color: blue;
</style>
2. В разделе <BODY> нужно прописать элементы формы и применить к ним стили.
<BODY>
<form>
<input type=text name=t class=m size=40 value="просто текст">
<p>
<select name=s class=m>
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">15
</select>
</p>
<p>
<input type=submit class=buttons value="Вам сюда"></p>
<p>   </p>
<p>
<textarea name=tt> Текст</textarea> </p>
<p><textarea name=txt class=sq>текстище</textarea> </p>
<p><input type=radio name=r style=" background-color:red" value=один >один
<input type=radio name=r style=" background-color:red" value=два>два </p>
<input type=checkbox id=fff name=sds value=1>1
<input type=checkbox id=ff name=sds1 value=2>2
<input type=checkbox id=fff name=sds2 value=3> </form> </body>
Примеры использования css в таблицах.
Пример1.
1.В разделе <style>пропишите:
Table {color:red; font-family:arial; font-size:20px;
border-style:dotted; border-width:7px;
border-color:navy;
background-color:yellow
}
Tr. k {background-color:pink; text-align:center}
Td. a { border-style:dashed; border-width:5px;
border-color:navy;
background-color:blur}
</style>
2.В <body>нужно прописать:
<table width=400 height=300>
<tr>
<td class=a> A</td>
<td class=a> D</td>
<td> K</td>
</tr>
<tr class=k>
<td> aa</td>
<td> dd</td>
<td> kk</td>
</tr>
</table>
Пример 2.
1.В новом файле в разделе <style>пропишите:
Table { border-top-style:dashed; border-bottom-style:dotted; border-left-style:double; border-right-style:none;
}
</style>
2.В <body>нужно прописать:
<table width=300 height=200 border=6>
<tr>
<td > A</td>
<td > D</td>
</tr>
<tr class=k>
<td> aa</td>
<td> dd</td>
</tr>
</table>
