Записи Друзья Комментарии
HTMLka
Аватар HTMLka

 -Подписка по e-mail

 

 -Поиск по дневнику

Поиск сообщений в HTMLka

 -Постоянные читатели

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 10.10.2007
Записей:
Комментариев:
Написано: 3


Урок 2.

Суббота, 13 Октября 2007 г. 09:32 + в цитатник
RainKage все записи автора Урок.2 Стили

Основное обучение я решила начать с изучения CSS ибо стили весчь важная.

CSS: Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.

Вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.

Описания стилей находятся в тэгах <STYLE></STYLE> и размешаются между тэгами <HEAD></HEAD>, а сами атрибуты отображаются в объединяющих скобках и разделяются ; (точкой с запятой) : {атрибут шрифта ; атрибут цвета ; атрибут размера ; и прочие атрибуты;}

Ну, например, вам нужен текст синего цвета, тогда вы пишете:

<STYLE> body { color: #blue; }</STYLE> и весь текст докумена по-умолчанию будет синим.

Если Вы распологаете стили в отдельном файле, тогда между тэгами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:



<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.













































Свойства шрифта:
font-family Используется для указания шрифта
или шрифтового семейства, которым будет отображаться элемент.

Пример:
P {font-family: Verdana, sans-serif;}
font-weightОпределяет степень жирности шрифта с помощью трех
параметров: lighter (обычный), bold (жирный), bolder (очень жирный)

Пример:
B {font-weight: bolder;}
font-sizeУстанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тэгов H1, H2, H3:

H1 {font-size: 200%;}

H2 {font-size: 150px;}

H3 {font-size: 400pt;}

Свойства текста:

text-decoration Устанавливает эффекты оформления шрифта, такие, как
подчеркивание или зачеркивание текста

Пример использования для тэга Н4:

H4 {text-decoration: underline;} (подчеркивание)

H4 {text-decoration: line-through;} (зачеркивание)
text-alignОпределяет выравнивание элемента.

Пример:

P {text-align: left} (выравнивание по левому краю)

P {text-align: right} (выравнивание по правому краю)

P {text-align: justify} (выравнивание по ширине)

P {text-align: center} (выравнивание по центру)
text-indentУстанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.

Пример использования для тэга H1:

H1 {text-indent: 60pt;}
line-heightУправляет интервалами между строками текста.

Пример:
P {line-height: 50 %}

Цвет элемента и фона:

color Определяет цвет элемента
I {color: yellow;}

Пример использования для тэга H3:

H3 {color: #0000FF;}
background-color Устанавливает цвет фона для элемента.

Пример использования для тэга H3:


<H3 style=”background-color:gold; color:brown;”> Пример </H3>

Пример


Свойства границ:

margin-left (слево)

margin-right (справо)

margin-top (сверху)

margin-bottom (снизу)		Устанавливают значения отступов вокруг элемента.

Пример использования для рисунка:

IMG { margin-left: 20pt}

IMG { margin-right: 20pt}

IMG { margin-top: 20pt}

IMG { margin-bottom: 20pt}
Единицы измерения:
px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты





Взято с http://lenininc.narod.ru/
(Copyright ©2002 by Vladimir Drigalkin, LENIN INC, Kiev)
Нравится

Комментировать — К дневнику — Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте