Школа №24

Каскадные таблицы стилей (CSS)

Основными особенностями CSS2 являются следующие:

CSS2 — это язык, который позволяет присоединять стили к любым структурированным документам. На сегодня таковыми являются HTML-документы и XML-приложения.
CSS2 распространил понятие стиля отображения на печатающие устройства, синтезаторы речи и другие устройства отображения документов.

Таблицы стилей объявляются с помощью тега <style></style>, которые находятся сразу после тега </title>.

Два вида объявления таблиц стилей:

1. <HTML>
    <HEAD>
    <TITLE></TITLE>
    <STYLE type="text/css"></STYLE>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>

2. <HTML>
    <HEAD>
    <TITLE></TITLE>
    <LINK rel="stylesheet" href="style.css" type="text/css">
    </HEAD>
    <BODY>
    </BODY>
    </HTML>

Второй способ используется, если один и тот же стиль надо использовать на нескольких страницах. В принципе второй способ более удобен, т.к. все стили будут храниться в отдельном документе style.css, и изменяться они будут там же.

Объявление стилей в документе style.css:

тег1 { параметр1:значение; параметр2:значение; параметр3:значение и т.д } тег1 { параметр1:значение; параметр2:значение; параметр3:значение и т.д }

Пример:

H1 { font: 14pt Verdana, Arial, Helvetica, sans-serif; COLOR: #FFCC00; font-weight: bold }

Это значит, что заголовки первого уровня будут отображаться размером в 12 точек, шрифтами Verdana, Arial, Helvetica, sans-serif (точнее каким то одним, всё зависит от броузера пользователя), что цвет текста будет #FFCC00 и что шрифт будет жирным.

Параметры для различных тегов

Scrollbar

scrollbar-face-color - задаёт основной цвет скроллбара, а так же цвет двух завершающих кнопочек со стрелочками.

scrollbar-highlight-color - устанавливает яркий цвет подсветки, создающий эффект объёмности, то есть цвет, для освещённой части скролл-бара и кнопочек. Этим цветом отображается левый верхний угол самого скролл-бара и двух кнопочек, когда они не нажаты.

scrollbar-3dlight-color - определяет цвет падающего цвета для создания трехмерности скролл-бара. На практике это выражается в цвете тоненькой кромки, находящейся в левых верхних углах, ближе к краю нежели scrollbar-highlight-color.

scrollbar-darkshadow-color - определяет цвет откинутого цвета для создания трехмерности скролл-бара. На практике это выражается в цвете тоненькой кромки, находящейся в правых нижних углах, ближе к краю нежели scrollbar-shadow-color.

scrollbar-shadow-color - устанавливает темный цвет подсветки, создающий эффект объёмности, то есть цвет, для теневой части скролл-бара и кнопочек (цвет тени). Этим цветом отображается правый нижний угол самого скролл-бара и двух кнопочек, когда они не нажаты.

scrollbar-arrow-color - определяет цвет двух маленьких стрелочек, находящихся на кнопочках крайних позиций скролл-бара.

scrollbar-track-color - задает цвет трека, то есть дорожки прокрутки, по которой собственно и перемещается сам скролл-бар.

Пример:
body { scrollbar-face-color: #000000;
          scrollbar-highlight-color: #999999;
          scrollbar-shadow-color: #666666;
          scrollbar-3dlight-color: #666666;
          scrollbar-arrow-color: #FFFFFF;
          scrollbar-track-color: #333333;
          scrollbar-darkshadow-color: #666666;
         }

H1...4...n

font-weight: bold - жирность шрифта
font-size: 12pt - размер шрифта
font-family: Helvetica - название шрифта
font-variant: normal - вариант шрифта
font-style: normal - стиль шрифта

Пример:
H1 {
font-weight: bold;
font-size: 12pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}

Системные цвета CSS

activeborder	Цвет рамки активного окна	inactivecaptiontext	Цвет текста заголовка неактивного окна
activecaption	Цвет фона заголовка активного окна	infobackground	Цвет фона подсказок (tooltips)
appworkspace	Цвет фона многооконной программы	infotext	Цвет текста подсказок (tooltips)
background	Цвет фона системной подложки (desktop)	menu	Цвет фона меню
buttonface	Цвет трехмерных кнопок	menutext	Цвет текста меню
buttonhighlight	Цвет выделенных трехмерных кнопок	scrollbar	Цвет фона полос прокрутки
buttonshadow	Цвет тени трехмерных кнопок	threeddarkshadow	Темная тень трехмерных элементов
buttontext	Цвет текста трехмерных кнопок	threedface	Цвет трехмерных элементов
captiontext	Цвет текста заголовков	threedhighlight	Цвет выделенных трехмерных элементов
graytext	Серый цвет (для запрещенных элементов)	threedlightshadow	Светлая тень трехмерных элементов
highlight	Цвет фона выделенных элементов	threedshadow	Тень трехмерных элементов
highlighttext	Цвет текста выделенных элементов	window	Цвет фона окон
inactiveborder	Цвет рамки неактивного окна	windowframe	Цвет фрейма окон
inactivecaption	Цвет фона заголовка неактивного окна	windowtext	Цвет текста в окнах

A:link - непосещенные ссылки
A:visited - посещенные ссылки
A:hover - ссылки под курсором мыши
A:active - активные ссылки

Пример:

A:link    { color: red }
A:visited { color: blue }  
A:hover   { color: yellow } 
A:active  { color: lime }

Автор: NeO

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