Цвет элемента color — цвет элемента в модели RGB или по стандартным названиям цветов.

Примеры:

hi {color: yellow;}

hi {color: yellow;}

.active {color: #FFFF00;}

2.  Цвет фона background- color — цвет фона элемента (фоно­вый цвет).

Пример :

hl.grayback {background-color: #CCCCCC;}

Отступы.

1.  Выравнивание text- align — выравнивание абзаца относи­тельно страницы или ячейки таблицы. Значения: по левому краю ( left), по центру ( center), по правому краю ( right), по шири­не ( justify).

Пример:

р {text-align: justify;}

2.  Отступ первой строки text- indent — отступ первой строки абзаца (красная строка). Значение задается в пикселах (рх) или в пунктах ( pt).

 

Пример:

р {text-indent: 50pt;}

3.  Межстрочные интервалы Hne - heighn — междустрочный ин­тервал абзаца. Значение задается в пикселах (рх), пунктах (pt) или в процентах от размера шрифта (%).

Пример:

р {line-height: 50%;} межстрочные интервалы.

4.  Отступы вокруг элемента margin — отступы вокруг элемен­та. Значение задается в пикселах (рх) или в пунтках (pt). Различ­ные типы этого параметра: одинаковый отступ со всех сторон (margin), отступ слева (margin-left), отсуп справа (margin-right), отступ сверху (margin-top), отступ снизу (margin-bottom).

Примеры:

р {margin: ЗОрх;}

img {margin-left: 20px;}

Рамка.

1.  Толщина рамки border- width — толщина границы. Различ­ные типы этого параметра: толщина левой границы { border- left- width), толщина верхней границы { border- top- width), толщина правой границы { border- right- width), толщина нижней границы { border- bottom- width). Значение задается в пикселах (рх).

Пример:

.lineTop {border-top-width: Зрх;}

2.   Цвет рамки border- color — цвет рамки (границы).
Пример :

.lineRed {border-color: #FF0000;}

3.   Стиль рамки border- style — стиль границы. Значения: гра­ницы нет {попе), сплошная линия { solid), пунктирная линия{ dotted), штриховая линия { dashed), двойная линия { double), объ­емная канавка { groove), объемный гребень { ridge), объемнаякнопка внутрь { inset), объемная кнопка наружу { outset).

Пример :

.lineSimple {border-style: outset;}

4. Обобщающий стиль рамки border — обобщающий стиль границы, объединяющий три параметра: толщину, стиль и цвет границы. Порядок записи параметров неважен:

border: ширина стиль цвет; border- tor: ширина стиль цвет; border- right: ширина стиль цвет; border- bottom: ширина стиль цвет; border- left: ширина стиль цвет;

Пример:

td.blueBorder {border: 4px dotted #003399}

Обобщающий стиль можно задавать для определенной сто­роны границы: слева (border-left), сверху (border-top), справа (border-right), снизу (border-bottom).

Пример :

td.red21ine {border-color: #FF0000;

border-left: 2px double;

}

Задание для практического занятия:

1.Отформатируйте страницу с помощью листа стилей, размещённого в теге <style>...</style> (см. пример) Сохраните страницу в личной папке в файл style1.html

 

2.Запишите исходный код таблицы стиля в отчет

Контрольные вопросы:

1.Что является компонентами страницы HTML?

2.Какие существуют способы управления настройками браузера?

3.В чем главная особенность каскадных таблиц стилей?

 

---

Дата добавления: 2019-03-09; просмотров: 111; Мы поможем в написании вашей работы!

Поделиться с друзьями:

---

---

Мы поможем в написании ваших работ!