КАТЕГОРИИ:
Архитектура-(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; Просмотров: 420; Нарушение авторских прав?; Мы поможем в написании вашей работы!