1. color:цвет – цвет текста

2. Font-family:шрифт

3. font-style:normal/italic

4. font-weight:lighter -облегченный (100) /normal - нормальный (400) /bold - полужирный (700) /border - жирный (900)

5. Font-size:размер текста

Единицы измерения:

px - пиксель

pt – полиграфический пункт pt~1/72,12дюйма

cm

mm

in – (инч) дюйм in~2,54cm

em – полиграфическая кегельная шпация.

1em равен размеру текста, установленному в браузере по умолчанию

% - процент

6. font-variant:normal/small-caps буквы нижнего регистра отображаются как буквы верхнего регистра, но размер их не меняется (Текст)

7. font: Verdana italic 12pt bold - совмещенный

II гр – стили текста

1. text-align:left горизонтальное выравнивание center right justify

2. vertical-align:top вертикальное выравнивание (для таблиц) middle bottom

3. text-indent:отступ красная строка

4. l etter-spacing:2px расстояние между соседними символами

5. line-height:25pt расстояние между базовыми линиями строк

6. text-decoration:none underline подчеркивание overlain линия сверху line-through перечеркивание

7. text-transform:none uppercase переворот в большие буквы lowercase в маленькие capitalize в каждом слове первая буква большая

III гр – стили фона

1. background-color:цвет цвет фона для элемента

2. background-image:url(URL) фон для элемента, в виде повторяющегося рисунка например: <p style=”background-image:url(./dacky.gif)”>

3. background-repeat:repeat - по умолчанию - повтор no-repeat без повтора (1 раз в левом верхнем углу) repeat-x -повтор только по горизонтали (1 строка) repeat-y - повтор только по вертикали (1 столбец)

4. background-attachment:scroll - фон прокручивается вместе с текстом fixed - фон на месте,текст прокручивается без фона

5. background-position:50% 50% - задает позицию фонового рисунка, относительно элемента по горизонтали и по вертикали, видно только при no-repeat

6. background: img.png no-repeat - совмещенный

рекомендуется всегда указывать цвет фона документа если задается фоновое изображение.

Ссылки (Links)

Линейный элемент <a>

<a href=”URL вызываемой страницы”

title=”Альтернативный текст”> Text </a> для текстовой ссылки

<a href=”URL вызываемой страницы ”> для графической ссылки

<img src=”URL изображения ”/>

</a>

Ссылки на закладки

Ссылка на закладку позволяет прокрутить страницу до элемента с заданным индентификатором.

< a href=”#z1”> текст ссылки </a> ссылка для перехода к закладке1

< a href=”#z1”> текст ссылки </a> ссылка для перехода к закладке2

Т екст….

…

Много текста

…

…..

…..текст

<p id=”z1”> элемент (может быть любой p,h,img) с индентификатором – закладка 1

Т екст….

…

Много текста

…

…..

…..текст

<p id=”z2”> закладка 2

Для нескольких документов:

<

первый файл first.htm

a href=”./second.htm#z1”>

Глава1

</a>

<h2 id=”z1”>

второй файл second.htm

Глава1

</h2>

<p> Текст главы1…..</p>

Карта ссылок

Позволяет на изображении определить несколько областей круглой, прямоугольной или многоугольной формы и связать их с html страницами. (Визуально не увидеть, поэтому может быть в любом элементе, обычно в body)

<map name=”имя карты”>

описание круглой области

<area shape=”circle”

coords=”x,y,r”

href=”URL вызываемой страницы”/>

<

описание прямоугольнойобласти

area shape=”rect”

coords=”x₁,y₁,x₂,y₂”

href=”URL вызываемой страницы”/>

<

описание многоугольнойобласти

area shape=”poly”

coords=”x₁,y₁,x₂,y₂,…,x_n,y_n”

href=”URL вызываемой страницы”/>

</map>

код….

<img src=”URL файла-изображения” usemap=”#имя карты”/>

usemap – атрибут, который подключает карту ссылок к изображению

Списки (List) (блочный)

Нумерованный (ordered list)

<ol>

<li>Значение1</li>

<li>Значение2</li>

</ol>

Атрибуты:

<ol type=”1” тип нумерации -цифры

a a,b,c,d….aa,ab,ac,ad…ba,bb,bc,…

A A,B,C,D…

i i,ii,iii,iv…

I I,II,III,IV,V…

start=”4” порядковый номер символа, с которого начинается нумерация

<li> Значение1</li>

<li value=”6”>Значение2</li> (в списке можно пропустить номера, например 4,6,7,8….)

</ol>

Маркиров анный (unordered list)

< ul type=”`disc”>

circle

square

<li>Значение1</li>

<li>Значение2</li>

</ul>

Список определений (definition list)

<dl>

<dt>Термин1</dt>

<dd>Описание1</dd>

<dt>Термин1</dt>

<dd>Описание1</dd>

</dl>

Вложенные списки

<ol type=”I”>

<li> Понедельник

<ol>

<li>HTML</li>

<li>HTML</li>

</ol>

</li>

<li> Вторник

<ol>

<li>C++</li>

<li>C++</li>

</ol>

</li>

</ol>

Стили списков

list-style-type:decimal тип маркера -арабские

lower-alpha латинские маленькие

upper-alpha латинские большие

lower-roman римские маленькие

upper-roman римские большие

disc

circle

square

list-style-position:inside размещение маркера относительно текста (внутри)

outside (снаружи)

list-style-image:url(URL) задание маркера в виде рисунка (8на8px)

5 -я группа стилей

1- margin - отступы

2-padding - поля

3- border -рамки

Отступы

margin:10px отступы со всех сторон по 10px

margin:10px 5px сверху, снизу по 10px, слева, справа по 5px

margjn:10px 0px 5px 0px верхнее 10, правое0, нижнее 5, левое0

margin-top:10px

margin-right:10px

margin-bottom:10px

margin-left:10px

Поля

padding:10px

padding:10px 5px

margjn:10px 0px 5px 0px

padding-top:10px

padding-right:10px

padding-bottom:10px

padding-left:10px

Границы

Толщина

border-width:2px

border-width:2px 1px

border-width:2px 1px 2px 1px

border-top-width:2px

border-right-width:2px

border-bottom-width:2px

border-left-width:2px

Цвет

border-color:red

border-color:red green

border-color:red green blue yellow

border-top-color:red

border-right-color:red

border-bottom-color:red

Стили границ

border-style:стиль

border-style:стиль стиль

border-style:стиль стиль стиль стиль

border-top-style:стиль

border-right-style:стиль

border-bottom-style:стиль

border-left-style:стиль

Значения стилей

solid сплошная

double двойная

dashed пунктирная

dotted точечная

outset выдавленная

inset вдавленная

ridge бордюр

groove бороздка

none нет границ (не практике обычно не используют, а ставят width=0)

Дополнительные стили рамок

border:3px #FF0000 inset

border-top:2px black solid

border-right:3px blue double

border-bottom:1px red dashed

border-left:5px orange dotted

Meta-данные

на экране не отображаются, содержат общую информацию о странице – кодировка, автор, ключевые слова.

<meta…/> элемент meta записывается в head, обычно после title

meta первым элементом может содержать один из атрибутов:

http-equiv используется если meta-данные предназначены для browsera

name - если данные предназначены для поисковой системы или пользователя

1. О бязательно

<meta http-equiv=”content-type” content=”text/html; charset=windows-1251”/>

Этот элемент meta задает кодировку для html-страницы

2. Редко

<meta http-equiv=”expires” content=”Tue, 31 Aug 2005 12:00:00 GMT”/>

Этот элемент meta указывает браузеру, когда страницу нужно считать устаревшей.

( это важно для новостей)

3. Ещё реже

<meta http-equiv=”refresh” content=”10; url=http://itstep.org”/>

Этот элемент meta через указанный промежуток времени перенаправляет браузер на новый адрес ( например, если страница переехала на другой адрес, или презентация)

name - если данные предназначены для поисковой системы или пользователя

<meta name=”keywords” content=”слово1,слово2,…”/>

Этот элемент meta содержит ключевые слова, по которым поисковые системы ищут страницу в Интернет (слов не > 40, символов не > 1000). Уровни поиска: название страницы, title, meta, текст страницы)

<meta name=”description” content=”Краткое описание страницы”/>

(5-6 слов)

<meta name=”Иванов И.И.”/> содержит имя разработчика данной страницы

<meta name=”copyright” content=”©КА ШАГ 2005”/>

Авторские права

CSS – каскадные таблицы стилей

CSS- можно написать один раз для всего сайта, пишется в элементе head или в отдельном файле.

Если CSS в head (используется в пределах страницы):

<head>

<style type=”text/css”>

css

</style>

</head>

Если CSS в отдельном файле:

Создать новый текстовый файл имя.css и в нем написать стили.

Подключение CSS-файла к html-странице(пишется в head):

<link rel=”stylesheet” type=”text/css” href=”URL-css файла”/>

Приоритет:

1. элемент самый высокий

2. head

3. CSS самый низкий