В избранное    Домой    Карта сайта          Adminka

Четверг,  29 Jun 2017 г., 06:00
Не люби спать, чтобы тебе не обеднеть; держи открытыми глаза твои, и будешь досыта есть хлеб. /Притчи/

 Логин:  

 Пароль: 




Анонсы:
=== Дата: 26/08/2010     Автор: design.originweb.info ===

Краткий справочник по CSS

Оглавление

  1. CSS. Каскадные таблицы стилей
  2. Подключения
  3. CSS. Общие правила
  4. CSS. Классы
  5. CSS. Шрифт
  6. CSS. Текст
  7. CSS. Фон и цвет
  8. CSS. Границы
  9. Фильтры

1. CSS. Каскадные таблицы стилей

 

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

Более тонкая настройка оформления и форматирования документа в CSS позволяет достигать результатов недостижимых в рамках обычного HTML. CSS имеет более богатый набор для работы со шрифтами, что позволяет уменьшить вес страницы, избавившись от графики.

К содержанию >>

2. Подключение каскадных таблиц стилей

Существует четыре способа подключения CSS к документу:

 

  1. Связывание - таблица стилей располагается в отдельном файле, который можно подключить к любому количеству HTML страниц.
  2. Внедрение - таблица стилей располагается непосредственно внутри HTML документа.
  3. Встраивание в теги документа - позволяет определить оформление отдельных элементов страницы.
  4. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Связывание

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

Первые два свойства указывают браузеру, что на страничке используется CSS. Значение последнего свойства - имя файла (с путем, абсолютным или относительным), в котором прописан стиль страницы.

Внедрение

Если Вам нужно задать стиль только для одной страницы, то описание стиля Вы можете внедрить в тело документа, в заголовке HEAD, между тегами .

Встраивание в теги документа

Вы можете задать стиль отдельно выбранного элемента в свойстве STYLE тега этого элемента, например:

Стоит отметить, что данный способ нарушает идеологию использования стилей (их универсальность), поэтому использование его не желательно (хотя, если редко и никому не говорить, то можно).

Импортирование

В теге
--> -->

Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, жирный шрифт "Comic Sans MS" размером 14 пикселей и выровненный по обоим краям с отступами со всех сторон 10 пикселей.

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

Группирование

Можно записывать селекторы через запятую, если им присваивается одинаковое определение; если селектор имеет несколько определений, то они записываются через точку с запятой.
H1 {font-family: Arial}
H2 {font-family: Arial} H1, H2 {font-family: Arial}
H1 {font-weight: bold}
H1 {font-size: 14pt} H1 {font-weight: bold; font-size: 14pt;}

Наследование

При определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента. Например, если в параграфе  

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

Внутри параграфа с красным цветом текста,  выделенный текст наследует цвет головного тега.

 

Внутри параграфа с красным цветом текста, выделенный текст наследует цвет головного тега.

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

К содержанию >>

4. CSS. Классы

Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде .имя_класса {свойства}. Для присвоения класса выбранному тегу используется свойство CLASS="имя_класса". Это можно продемонстрировать на следующем примере:

 

КодОтображение
<STYLE TYPE="text/css">
.font1 {color: yellow; background: red;}
.font2 {color: blue; background: yellow;}

</STYLE>
...
<SPAN CLASS="font1">Желтый текст на красном фоне</SPAN>
<SPAN CLASS="font2">Синий текст на зеленом фоне</SPAN>.
А здесь цвет фона и текста заданы по умолчанию.
Желтый текст на красном фоне
Синий текст на зеленом фоне.
А здесь цвет фона и текста заданы по умолчанию.

В примере прописаны два класса "font1" и "font2" задающие цвет фона и изображения. Эти классы были применены к тегу . Свойства, прописываемые классом, могут быть присвоены любому тегу (если он обладает свойствами, описанными в классе). Например, класс font1, определенный в предыдущем примере может быть применен к таблице:

 

КодОтображение


Это ячейка таблицы И это тоже
Это ячейка таблицы И это тоже

Для определения класса для определенного тега используется конструкция имя_тега.имя_класса {свойства}. Например, нам нужно часть текста выделить красным. Определим класс для тега :

КодОтображение

...
Здесь мы выделили часть текста.
Здесь мы выделили часть текста.

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

К содержанию >>

5. CSS. Шрифт

Свойства оформления шрифта представлены в таблице:

КодОтображение
font-family Определяет шрифт или семейство шрифта. Можно указывать до трех шрифтов, через запятую (если у клиента не будет установлен первый шрифт, то браузер перейдет к следующему в списке).
font-style Определяет способ начертания. Возможные значения: normal (нормальный, установлен по умолчанию), italic (курсив), oblique (наклонный).
font-variant Определяет варианты начертания шрифта. Возможные значения: normal (нормальный, установлен по умолчанию), small-caps (все буквы заглавные).
font-weight Определяет степень жирности шрифта. Возможные значения: normal(нормальный, установлен по умолчанию), bold, bolder, lighter. Значения bolder и lighter являются относительными, например, значение lighter для жирного текста делает его нормальным.
font-size Устанавливает размер шрифта. Можно указывать как в относительных единицах (проценты), так и в абсолютных (пикселы, сантиметры и т.д.)
К содержанию >>

6. CSS. Текст

Свойства текста представлены в таблице:

КодОписание
text-decoration Определяет оформление текста. Возможные свойства:
none (по умолчанию, стандартный текст),
underline (подчеркивание),
line-through (зачеркивание),
overline (надчеркивание).
text-transform Определяет оформление регистра букв текста. Возможные свойства:
none (по умолчанию, отменяет изменение регистра букв),
capitalize (первая буква каждого слова преобразуется в заглавную),
uppercase (все буквы преобразуется в заглавные),
lowercase (все буквы преобразуется в строчные).
text-align Определяет оформление выравнивания текста. Возможные свойства:

left (по умолчанию, выравнивание по левому краю),


right (выравнивание по правому краю),


center (центрирование),
justify (выравнивание по ширине колонки).
text-indent Устанавливает величину отступа в первой строке параграфа.
line-height Устанавливает межстрочный интервал.
word-spacing Устанавливает интервал между словами.
letter-spacing Устанавливает интервал между буквами.
vertical-align Устанавливает вертикальное положение базисной линии элемента. Возможные значения: baseline, middle, sub, super, text-top, text-bottom, top, bottom.
К содержанию >>

7. CSS. Фон и цвет

Свойства фона и цвета представлены в таблице:

КодОписание
color Определяет цвет элемента.
background-color Определяет цвет фона для элемента.
background-image Определяет поведение фонового изображения при скролинге. Возможные значения:
none (по умолчанию, отсутствие фонового рисунока),
url("name") (фоновый рисунок загружается из файла name, где name - абсолютный или относительный адрес графического файла).
background-attachment Определяет поведение фонового изображения при скролинге. Возможные значения:
scroll (по умолчанию, фоновый рисунок прокручивается вместе с элементом),
fixed (фоновый рисунок не прокручивается вместе с элементом).
К содержанию >>

8. CSS. Границы

Свойства границ представлены в таблице:

КодОписание
border-width Определяет ширину границы. Может быть задана в пикселях или с помощью значений:
thin (тонкая),
medium (средней толщины),
thick (толстая).
border-color Определяет цвет границы. Может принимать значение символьных цветов, числовым кодом цвета или определен как transparent для задания прозрачной (но имеющую ширину) границы.
border-style Определяет стиль отображения границы. Может принимать значения:
none (по умолчанию, нет ганицы),
hidden (спрятанная граница),
dotted (точки),
dashed (штрихи),
solid (сплошная линия),
double (двойная линия),
groove (вогнутая трехмерная окантовка),
ridge (выпуклая трехмерная окантовка),
inset (вогнутая площадь),
outset (выпуклая площадь).
border-collapse Определяет стиль разделения ячеек. Может принимать значения:
separate (ячейки отделены друг от друга),
collapse (ячейки не содержат промежутков между собой).

Пример для свойства border-style:


   none    hidden    dotted    dashed    solid    double

   groove    ridge    inset    outset
К содержанию >>

9. Фильтры

Фильтры позволяют изменить некоторые свойства изображений на веб странице и добиваться интересных графических эффектов.

Фильтры могут применяться не ко всем элементам HTML. К следующим элементам фильтры могут применяться всегда: BODY, BUTTON, IMG, INPUT, MARWUEE, TABLE, TD, TEXTAREA, TH. Фильтры можно применять к следующим тегам, только если заданы свойства ширины WIDTH и высоты HEIGHT или при абсолютном позиционировании элемента: DIV, SPAN. Фильтры нельзя применят к элементам: JAVA, IFRAME, SELECT, OPTION, P, EM, STRONG, H1, ..., H6.

Класс соответствующий определенному фильтру задается в виде:

.ClassName{filter:FilterName(Parameter1='Value', Parameter2='Value');}

Здесь ClassName - имя класса, FilterName - имя фильтра, Parameter='Value' - пары параметр=значение, настраивающие действие фильтра. У различных фильтров может быть разное число параметров, или не быть ни одного. Несколько параметров задаются через запятую. При применении нескольких фильтров к одному объекту список фильтров задается через пробел.

К содержанию >> "

Комментарии к статье (0)


<<назад

Погода в Рудне
(Волгоградcкая обл.)

Подробнее >>


Курс валют
на 29 Июн 2017 г.
DKK - 91,1117
USD - 59,5415

MainLink