- •Синтаксис
- •Селектор класса (class)
- •Селектор идентификатора (id)
- •Комментарии css
- •Примеры использования css
- •Подключение таблицы стилей
- •Несколько таблиц стилей
- •Примеры
- •Параметры фона в css: подробное рассмотрение
- •Параметр 'background'
- •Параметр 'background-attachment'
- •Параметр 'background-color'
- •Параметр 'background-image'
- •Параметр 'background-position'
- •Параметр 'background-repeat'
- •Примеры
- •Параметр 'text-align'
- •Параметр 'text-decoration'
- •Параметр 'text-indent'
- •Параметр 'text-transform'
- •Параметр 'white-space'
- •Параметр 'word-spacing'
- •Параметры границы в css
- •Границы в css: подробное рассмотрение Параметр 'border'
- •Параметр 'border-bottom'
- •Параметр 'border-bottom-color'
- •Параметр 'border-bottom-style'
- •Параметр 'border-bottom-width'
- •Параметр 'border-color'
- •Параметр 'border-left'
- •Параметр 'border-left-color'
- •Параметр 'border-left-style'
- •Параметр 'border-left-width'
- •Параметр 'border-right'
- •Параметр 'border-right-color'
- •Параметр 'border-right-style'
- •Параметр 'border-right-width'
- •Параметр 'border-style'
- •Параметр 'border-top'
- •Параметр 'border-top-color'
- •Параметр 'border-top-style'
- •Параметр 'border-top-width'
- •Параметр 'border-width'
- •Примеры
- •Отступы в css
- •Отступы в css: подробное рассмотрение Параметр 'margin'
- •Параметр 'margin-bottom'
- •Параметр 'margin-left'
- •Параметр 'margin-right'
- •Параметр 'margin-top'
- •Примеры
- •Параметры полей в css
- •Поля в css: подробное рассмотрение Параметр 'padding'
- •Параметр 'padding-bottom'
- •Параметр 'padding-left'
- •Параметр 'padding-right'
- •Параметр 'padding-top'
- •Примеры:
- •Параметры списков в css
- •Списки в css: подробное рассмотрение Параметр 'list-style'
- •Параметр 'list-style-image'
- •Параметр 'list-style-position'
- •Параметр 'list-style-type'
- •Пример:
- •Параметры размеров элементов css
- •Размеры элементов в css: подробное рассмотрение Параметр 'height'
- •Параметр 'line-height'
- •Параметр 'max-height'
- •Параметр 'max-width'
- •Параметры форматирования в css: подробное рассмотрение Параметр 'clear'
- •Параметр 'cursor'
- •Параметр 'display'
- •Свойство 'float'
- •Параметр 'position'
- •Параметр 'visibility'
- •Примеры:
- •Параметры позиционирования в css
- •Параметры позиционирования в css: подробное рассмотрение Параметр 'bottom'
- •Параметр 'clip'
- •Параметр 'left'
- •Параметр 'overflow'
- •Параметр 'position'
- •Параметр 'right'
- •Параметр 'top'
- •Параметр 'vertical-align'
- •Параметр 'z-index'
Параметр 'background-color'
Этот параметр задает фоновый цвет элемента.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
color |
Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000) |
transparent |
Фоновый цвет является прозрачным |
Пример:
h1
{
background-color: gray;
font-family: arial
}
Параметр 'background-image'
Данный параметр задает изображение в качестве фона.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
url |
Путь доступа к изображению |
none |
Фонового изображения нет |
Пример:
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: repeat;
background-attachment: fixed
}
В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.
Параметр 'background-position'
Этот параметр задает начальное положение фонового изображения.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
top left top center top right center left center center center right bottom left bottom center bottom right |
Если определить только одно ключевое слово, то вторым значением подразумевается "center" |
x-% y-% |
Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%. |
x-pos y-pos |
Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты. |
Пример:
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-position: right top;
background-attachment: fixed
}
body
{
background-image: url(http://www.intuit.ru/speciality/image.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
background-attachment: fixed
}
Параметр 'background-repeat'
Этот параметр определяет, каким образом будет повторяться фоновое изображение.
Наследование: нет.
Может принимать следующие значения:
Значение |
Описание |
repeat |
Фоновое изображение будет повторяться по вертикали и по горизонтали |
repeat-x |
Фоновое изображение будет повторяться по горизонтали |
repeat-y |
Фоновое изображение будет повторяться по вертикали |
no-repeat |
Фоновое изображение будет выведено только один раз |
Пример:
body
{
background-image: url(http://www.intuit.ru/departament/image.gif);
background-repeat: repeat;
background-attachment: fixed
}
Лекция 4. Параметры текста в CSS
Параметры текста CSS позволяют управлять внешним видом текста. Можно изменять цвет текста, увеличивать или уменьшать интервал между символами, выравнивать текст, оформлять текст, делать отступ для первой строки текста и т.д.
Поддержка браузеров: Internet Explorer, Firefox, Netscape.
Параметр |
Описание |
Значения |
IE |
F |
N |
W3C |
color |
Задает цвет текста |
Color |
3 |
1 |
4 |
1 |
direction |
Задает направление текста |
ltr |
6 |
1 |
6 |
2 |
rtl |
||||||
letter-spacing |
Увеличивает или уменьшает интервал между символами |
normal |
4 |
1 |
6 |
1 |
length |
||||||
text-align |
Выравнивает текст в элементе |
left |
4 |
1 |
4 |
1 |
right |
||||||
center |
||||||
justify |
||||||
text-decoration |
Дополнительное оформление текста |
none |
4 |
1 |
4 |
1 |
underline |
||||||
overline |
||||||
line-through |
||||||
blink |
||||||
text-indent |
Делает отступ для первой строки текста элемента |
length |
4 |
1 |
4 |
1 |
% |
||||||
text-shadow |
|
none |
|
|
|
|
color |
||||||
length |
||||||
text-transform |
Управляет символами элемента |
none |
4 |
1 |
4 |
1 |
capitalize |
||||||
uppercase |
||||||
lowercase |
||||||
unicode-bidi |
|
unicode-bidi |
5 |
|
|
2 |
normal |
||||||
embed |
||||||
bidi-override |
||||||
white-space |
Задает способ обращения с пробелами внутри элемента |
normal |
5 |
1 |
4 |
1 |
pre |
||||||
nowrap |
||||||
word-spacing |
Увеличивает или уменьшает пробел между словами |
normal |
6 |
1 |
6 |
1 |
length |