GVMproject.info-бесплатные программы, скрипты, шаблоны
учебник вебмастеру

Стили (CSS)

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

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

Описания стилей находятся в тегах < STYLE > < /STYLE > и размешаются между тегами < HEAD > < /HEAD > . Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :

Описываем стили под именем Example :
< STYLE > < !--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
-- > < /STYLE >

Здесь вызываем описания стилей :
< div class="Example" > Пример < /div >

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

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

Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся теги < STYLE > < /STYLE > . Например:

У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
< !--
   A { text-decoration: none; }
   A:hover { color: #FF0000; text-decoration: underline; }
-- >

Ссылка на него в HTML документе будет выглядить так:
< LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css" >

Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.

< H3 STYLE="font-family:Verdana; font-size:150%; color:red" > Пример < /H3 >

В таблице приведены некоторые свойства элементов, управляемых с помощью 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 или % проценты
__________________________
Страниц : # « 3 4 5 6 7 8 9 10 11 » #
TEXT +   TEXT -   Печать Опубликовано : 09.01.10 | Просмотров : 62418 | Ваша оценка

Введите слово для поиска :
Популярные файлы
- скрипт форума phpBB2
- Скрипт MLM пирамиды
- Nvu 1.0 визуальный редактор
- Java скрипты
- auto URL submit программа для регистрации сайта в каталогах
- PHP скрипт обменного пункта
 
Популярные статьи
- учебник вебмастеру
- Руководство по html
- Cascading Style Sheets (Таблицы Каскадных Стилей)
- Клоакинг
- Дорвеи и поисковые системы.
 
Реклама

##
##
##
 
Услуги
 
статистика
Поздравления с Новым годом

Яндекс.Метрика
 
RSS

 
В начало страницы © 2018 www.gvmproject.info CMS Danneo (некоммерческий продукт) - это бесплатная, c открытым исходным кодом система управления сайтами. Разработана на языке программирования PHP и может работать почти на любой платформе(хостинг площадке), используя в качестве базы данных MySQL. Поддерживает SEO-frendly, RSS 2.0 - каналы и Yandex-news, Google SiteMap, экспорт контента с помощью JavaScript и многое другое. А базовая комплектация позволяет построить сайт почти любой сложности и дизайна и эффективно им управлять.Распространяется в соответствии с GNU General Public 2