Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Добавления иллюстраций к фону элемента

Цвет фона текста

Цвет текста

Внешние отступы

Внешний отступ (margin) может отсчитываться по любому направлению относительно сторон блока:

margin-left: левый внешний отступ.

margin-right: правый внешний отступ.

margin-top: верхний внешний отступ.

margin-bottom: нижний внешний отступ.

margin: задает общий внешний отступ от всех сторон блока текста. Применяется в случае равноудаленности блока текста от всех границ.

Примеры использования описания стиля для параграфа

p {margin-left:50px;margin-right:5px;

margin-top:15px;margin-bottom:50px;

padding:0px;text-align:left;}

Если размер всех внешних отступов одинаковый, то можно просто воспользоваться атрибутом margin:

p {margin:5px;}

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

Управление цветом в каскадных таблицах стилей

Каскадные таблицы стилей (CSS) в первую очередь описывают свойсва текста. Это касается как текстовых блоков, так и строковых элементов разметки содержания страницы. В данном разделе речь пойдет об управлении отображением цвета текста (color) и цвета фона (background-color), на котором отображается текст.

Кроме цвета текста и цвета фона CSS позволяет определять цвет границы текстового блока (border-color).

Вообще говоря, атрибуты стилей, которые мы собираемся рассмотреть в этом разделе, относятся к группе атрибутов "Color and Background Properties", как это определено в спецификации Micrоsoft. В эту группу входят атрибуты, которые определяют свойства фона, его прозрачность, управления фоновой картинкой (координатами ее размещения и способами ее повторения).

Управлять цветом отображаемого текста в CSS можно атрибутом color. Например:

td {color:darkred;}

Этот атрибут можно применять как для блочных, так и для строчных элементов разметки.

 

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

Например.

<span style="background-color:#003366;

color:white;">

как строковые элементы разметки

</span>

Для работы с фоном элементов существует несколько атрибутов: background-image; background-repeat; background-attachment; background-position. Можно все свойства фона описать в атрибуте background:

 

background-image: url | none | inherit

Применяется: Ко всем элементам

Наследуется: Нет

Начальное значение: none

Свойство background-image является основным способом добавления иллюстраций к фону элемента. Для <body> действует как background.

Свойство background-image применяется к любому элементу, входящему в документ как на уровне блока, так и локально.

Например:

body { background-image: url(stripes.gif); }

p.higlight { background-image: url(dots.gif); }

 

Свойство background-image не наследуется.

Если свойство background-image используется вместе с background-color, изображение помещается поверх цвета.

 

<== предыдущая лекция | следующая лекция ==>
Внутренние отступы | Закрепление фона
Поделиться с друзьями:


Дата добавления: 2014-01-13; Просмотров: 253; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.008 сек.