КАТЕГОРИИ:
Архитектура-(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)
Замечание. Обратите внимание, что в данном примере мы воспользовались третьим (Inline) способом задания стиля
|
|
|
|
Обратите внимание, что в данном примере мы воспользовались третьим (Inline) способом задания стиля.
Свойства текста
Свойства отображения текстовых блоков в Web-странице, определяемые посредством использования каскадных таблиц стилей, собраны в табл. 6.3.
Таблица 6.3. Описание свойств текста
| Название свойства | Возможные значения | Описание значений |
| letter-spacing | 10 px 1 cm | Задает расстояние между символами в пикселах или сантиметрах |
| text-decoration | underline | Подчеркивание текста |
| line-through | Перечеркивание текста | |
| none | Отсутствие этих свойств | |
| vertical-align | baseline, sub, top, text-top,. | Вертикальное выравнивание относительно других элементов |
| bottom, text-bottom 160% | Используются ключевые слова или проценты | |
| text-transform | capitalize | Преобразование символов к заглавным |
| uppercase | Преобразование символов к верхнему регистру | |
| lovercase | Преобразование символов к нижнему регистру | |
| text-align | left | Выравнивание по левому краю |
| right | Выравнивание по правому краю | |
| center | Выравнивание по центру | |
| justify | Выравнивание по ширине | |
| text- indent | 10 px, 10 cm, 20% | Расстояние перед первой строкой текста |
| line-height | 10 px, 10 cm, 20% | Междустрочный интервал |
Свойства цвета и фона
Для определения цветов и параметров фона можно обратиться к параметрам, которые представлены в табл. 6.4.
Таблица 6.4. Свойства цвета и фона
| Название свойства | Возможные значения | Описание значений |
| color | black | Установка значений цвета в: черный |
| silver | серебряный | |
| gray | серый | |
| white | белый | |
| maroon | коричневый | |
| red | красный | |
| purple | пурпурный | |
| fuchsia | фуксия | |
| green | зеленый | |
| lime | лимонный | |
| olive | оливковый | |
| yellow | желтый | |
| navy | синий | |
| blue- | голубой | |
| teal | коричнево-серый | |
| aqua | бирюзовый | |
| #OFOFOF | шестнадцатеричное представление цвета в виде набора трех интенсив-ностей красного, зеленого и голубого. Каждый компонент изменяется от 00 до FF (в десятичном представлении от 0 до 255) | |
| background-color | red #OFOFOF | Установка цвета фрагмента документа в одно из допустимых значений |
| transparent | Прозрачный | |
| background- image | bg.gif | Адрес к файлу, содержащему фоновое изображение |
| background- repeat | repeat | Устанавливает повтор фонового изображения для данного участка страницы |
| repeat-x | Устанавливает повтор по высоте | |
| repeat-y | Устанавливает повтор по ширине | |
| no- repeat | Запрещает повтор | |
| background- attachment | Scroll | Прокрутка фонового изображения вместе со страницей |
| fixed | Запрет на прокрутку | |
| background-position | 20 px, 40 px | Отступ от верхнего левого угла фонового изображения по горизонтали и вертикали соответственно в пикселах |
| top, middle, bottom | Вертикальное расположение фона | |
| left, center, right | Горизонтальное расположение фона | |
| 10%, 30% | Смещение отображаемой области фонового изображения, относительно его размеров | |
| background | Любое из перечисленных выше свойств | Позволяет устанавливать одно значение из вышеуказанных свойств |
Применим указание цветовых характеристик для всей страницы, вписав соответствующие свойства стиля в тег <BODY> (листинг 6.31).
Листинг 6.31. Изменение цветовых свойств документа
<HTML>
<BODY style="BACKGROUND-POSITION: 20px 50px; BACKGROUND-IMAGE:
url(d:\fon.jpg); BACKGROUND-REPEAT: repeat-x; BACKGROUND-COLOR: #f0ff00">
<P style="COLOR: black">3To пример использования фонового изображениям</Р>
</BODY>
</HTML>
Обратите внимание, как приведенный код будет отображен в браузере (рис. 6.16).
Рис. 6.16. Пример изменения фонового цвета, изображения, режима повтора,, отступов
Мы видим, что фоновая картинка появляется не в самом верху, а с отступом в 50 пикселов. Горизонтальный отступ тоже есть, но он заполняется участком изображения, поскольку установлено дублирование фона по горизонтали. Также следует заметить, что та часть страницы, на которой нет фона, заполнена цветом заднего плана.
Свойства стилевых блоков
Стилевые характеристики, задаваемые в масштабах целого блока, описаны в табл. 6.5.
Таблица 6.5. Свойства стилевых блоков
| Название свойства | Возможные значения | Описание значений |
| margin-top | 12 рх | Задает отступ верхней границы блока |
| margin-bottom | 1 cm | Задает отступ нижней границы блока |
| margin-right | 17% | Задает отступ правой границы блока |
| margin-left | auto | Задает отступ левой границы блока |
| Margin | 100 px, 140 px, 12 px, 13 px | Последовательно задаются отступы: сверху, справа, слева, снизу, т. е. установлены сразу все значения отступов |
| 10 px, 15 px, 20 px | Если задано одно значение, то все отступы одинаковы, если два, то первое расстояние соответствует верхнему и нижнему, а второе — правому и левому отступам | |
| padding-top | 12 px | Отступ содержимого блока от его верхней границы |
| padding-bottom | 1 cm | Отступ содержимого блока от его нижней границы |
| padding-right | 17% | Отступ содержимого блока от его правой границы |
| padding- left | auto | Отступ содержимого блока от его левой границы |
| Padding | 100 px, 140 px, 12 px, 13 px | Задает все поля внутри блока сразу |
| 10 px, 15 px, 20 px | Два или одно значение имеет тот же смысл, что в аналогичных случаях элемента margin | |
| border-top-width | 4 px | Ширина верхней границы блока |
| border-bottom-width | thin (тонкая линия) | Ширина нижней границы блока |
| border-right-width | medium (средняя линия) | Ширина правой границы блока |
| border-left-width | thick (толстая линия) | Ширина левой границы блока |
| border-width | 1 px, 2 px, 3 px, 4 px | Задается толщина линий по принципу, аналогично отступам |
| border-color | Значения, аналогичные свойству color Black, Silver и т.д. | Определяет цвет границ блока |
| border-style | Формат линии границ: | |
| solid | Одинарная линия | |
| double | Двойная линия |
| groove, ridge, inset, outset | Различные типы декоративных цветовых решений | |
| none | Линия отсутствует | |
| border-top | 4 px, gray ridge | Задает сразу все значения стиля для верхней границы. Для остальных границ можно задавать все значения аналогично |
| Border | gray, 10 px outset | Устанавливает сразу все характеристики границ |
| Width | 8 cm | Устанавливает ширину блока |
| Height | 300 px | Устанавливает высоту блока |
| Float | left right none | Определяет сторону, которая будет обтекаться другими элементами документа |
| Clear | left right none both | Определяет сторону, с которой запрещено обтекание другими элементами |
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 444; Нарушение авторских прав?; Мы поможем в написании вашей работы!