CSS
CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы
стилей". Привет ,С помощью неё можно определить параметры любому тегу.
Например у вас на страничке несколько заголовков и вам надо что бы они
были определённого цвета наклонным шрифтом. Вам продёться для каждого
заголовка прописать <H3><I><FONT COLOR="">...</FONT></I></H>...<H3><I><FONT
COLOR="">...</FONT></I></H>....Это ведь не
удобно,а можно определить эти параметры один раз для <H>.
Бывает три вида абстракции для таблиц стилей (первая - максимальная):
- Внешние - таблица стилей находится в отдельном CSS-файле.
- Внутренние - таблица стилей располагается в заголовке документа
(тег STYLE).
- Встроенные - стиль описывается внутри тега (атрибут STYLE).
Внешние файлы CSS подключаются при помощи тега LINK:
<LINK REL=STYLESHEET HREF="default.css" TYPE="text/css">
Внутренние определяются в части HEAD:
<STYLE TYPE="text/css">
BODY {background: red;}
</STYLE>
Встроенные определяются при помощи атрибута STYLE, который определен для
большинства тегов:
<P STYLE="text-align: justify;">
Начнём.
Как я уже говорил для каждого элемента можно дать свои стили. Любому:
<H> <P> <A> и т.д. Так вот делается это так: для встроенных
таблиц стилей в <HEAD> добавляется метка <STYLE TYPE="text/css">...<.STYLE>а
в ней пишется описание.
Начнём с простого:с цвета.
color:
Цвет текста.
background-color:
Цвет фона под текстом.
Пример:
<STYLE TYPE="text/css">
A {color:#00FF00;background-color:#FFFF00;
}
</STYLE>
Все ссылки будут выводиться зелёного цвета на жёлтом фоне. Главная
страница:)
text-align:;
Выравнивание.
text-align: left;
Выровнять по левому краю.
text-align: right;
Выровнять по правому краю.
text-align: center;
Выровнять по центру.
text-align: justify;
Выровнять равномерно.
letter-spacing: 0px;
Расстояние между символами. Может быт в пикселях(px) или в точках (pt).
word-spacing: 0pt;
Расстояние между словами. Расстояние между символами. Может быт в пикселях(px)
или в точках (pt).
font-family:;
Шрифт.
Например:
<STYLE TYPE="text/css">
A {font-family: Arial;
}
</STYLE>
Font-size
Размер шрифта. Может указываться в точках (pt), пикселях (px).
Font-style: italic
Курсив (наклонный шрифт).
Font-weight: bold
Жирный шрифт. Значение может быть также числовым, только различные браузеры
реагируют на это по-разному.
Text-transform
Преобразование текста: допустимые значения: uppercase (все буквы
будут заглавные), lowercase (все буквы будут строчные), capitalize
(каждое слово будет начинаться с заглавной буквы) и none (т.е.
никаких действий).
Text-decoration
Выделение текста, допустимые значения: underline (подчеркнутый),
line-through (перечеркнутый), blink (мигающий) и none(ничего).
left: 1px;
Отступ слева. Может быт в пикселях(px) или в точках (pt).
top: 1px;
Отступ сверху. Может быт в пикселях(px) или в точках (pt).
width: 0px;
Ширина. Может быт в пикселях(px) или в точках (pt).
height: 0px;
Высота. Может быт в пикселях(px) или в точках (pt).
Рамки.
border-width:
Ширина рамки. Значение числовое (в пикселях или точках) или одно из зарезервированных
слов - thin (тонкая), medium (средняя), thick (толстая).
border-color:
Цвет рамки. Числовое или текстовое значение цвета. Также может принимать
значение transparent (прозрачная).
border-style:
Стиль рамки. Может иметь следующие значения:
| Значение |
Описание |
Вид рамки (в вашем браузере!) |
| dashed |
пунктирная - в виде черточек |
dashed
|
| dotted |
пунктирная - в виде точек |
dotted
|
| double |
двойная линия |
double
|
| inset |
с эффектом вдавленности |
inset
|
| outset |
с эффектом выпуклости |
outset
|
| ridge |
выпуклая рамка |
ridge
|
| groove |
врезанная рамка |
groove
|
| solid |
непрерывная линия |
solid
|
Можно определить каждую сторону рамки отдельно.
border-top-параметр
Параметр верхней стороны.
border-right-параметр
Параметр правой сторона.
border-bottom-параметр
Параметр нижней стороны.
border-left-параметр
Параметр левой стороны.
В место параметр можно поставить, например:color,background-color,width.Короче
все параметры border .
А если у вас, скажем, несколько ссылок определенных каким-то стилем но
вы хотите чтобы две или несколько ссылок были определены другим стилем,то
в <STYLE> добавить следующие(следите за мыслёй)
<STYLE TYPE="text/css">A {color: FFFFFF;} .css {color: #000000;}
</STYLE> Перед css стоит точка,она обязательна. А в ссылку которую
определяете прописываете след.:
<A HREF="" CLASS="css"></A>
Вместо css можно написать что душе угодно.
Если хотите внешнюю таблицу стилей то просто то же самое(кроме style)
пишете в отдельном файле меняете расширение на css. Потом в HEAD при помощи
LINK прописываем загрузку файла css:
<LINK REL=STYLESHEET HREF="default.css" TYPE="text/css">
Есть такая фишка:изменение курсора. С помощью это фишки можно дать другое
изображение курсора мышки.
cursor:
Пример:
A {cursor: auto}
Где auto может принимать след. значения.
crosshair - Крест
default - Курсор по умолчанию в системе
hand - Рука
text - I-образный курсор
e-resize - стрелка
ne-resize - стрелка
nw-resize - стрелка
n-resize - стрелка
se-resize - стрелка
sw-resize - стрелка
s-resize - стрелка
w-resize - стрелка
|
