[©design mishap2000] |
CSSCSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл- описывается стиль всего документа или сайта в целом, либо отдельных его элементов.Т.е. можно каждому элименту,в смысле тегу,можно один раз определить цвет, размер, шрифт, запах, а не прописывать для каждого. Бывает три вида абстракции для таблиц стилей (первая - максимальная):
<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: Стиль рамки. Может иметь следующие значения:
Можно определить каждую сторону рамки отдельно. 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"> Изменение курсора: 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 - стрелка |