Функции с переменными числовыми аргументами 3 страница
Глобальные таблицы стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег <style type="text/css">. Он размещается в заголовке документа.
Например:
<html><head> <title> Пример Глобальных Таблиц Стилей </title></head><style type="text/css">h1{color:red; font-style:italic; font-size:32px}.blue{color:blue}#bold{font-weight:bold}</style><body><h1> Этот заголовок написан крупным красным курсивом </h1>Вот <font class="blue"> это </font> слово - синие, a <font id="bold"> это</font> - жирное.</body></html>В данном примере все элементы h1 будут написаны крупным красным курсивым, все элементы с указанным классом blue будут синими , а все элементы с идентификатором id="bold" станут жирными. Для простоты вместо <style type="text/css"> можно использовать просто тег <style>, что менее грамотно.
Связанные таблицы стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и хранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
Например:
Файл styles.css
<style type="text/css">body {background:black; font-size:9pt; color:red; font-family:Arial Black}.base{color:blue; font-style:italic}h1 {color:white}#bold {font-weight:bold}</style>В самих же HTML документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так: <link rel="stylesheet" type="text/css" href="путь до файла">
Например:
Файл Index.html
<html><head><title> Просто еще один пример </title></head><link rel="stylesheet" type="text/css" href="styles.css"><body>Содержание Документа</body></html>Свойства CSS
В CSS используется модель представления визуально отображаемых элементов документа в виде прямоугольных блоков, возможно, вложенных друг в друга.
Каждый такой блок имеет информационное содержимое (текст, изображения и т.д.), а также может иметь отступы (padding), границы (border) и поля (margin). Соответствующие свойства CSS позволяют оформить блок желаемым образом.
В таблице 13, приведенной ниже, содержатся полный список атрибутов [4].
Таблица 13. Список атрибутов CSS
| Название | Описание |
| Свойства цвета и фона | |
| color | Css-свойство color определяет базовый цвет элемента |
| background | Css-свойство background применяется для сокращенного задания свойств фона |
| background-attachment | Css-свойство background-attachment определяет, должно ли изображение фона быть зафиксированным |
| background-color | Css-свойство background-color устанавливает цвет фона или делает цвет фона прозрачным |
| background-image | Css-свойство background-image определяет графический ресурс, используемый в качестве фона |
| background-position | При помощи css-свойства background-position дизайнер может указать расположение фона |
| background-position-x | При помощи css-свойства background-position-x дизайнер может указать расположение фона по горизонтали. |
| background-position-y | При помощи css-свойства background-position-y дизайнер может указать расположение фона по вертикали |
| background-repeat | Css-свойство background-repeat определяет метод размещения фонового изображения |
| layer-background-color | Css-свойство layer-background-color используется только браузерами Netscape Navigator версий 4.x. |
| layer-background-image | Css-свойство layer-background-image используется только браузерами Netscape Navigator версий 4.x. |
| -moz-opacity | Css-свойство -moz-opacity позволяет указать прозрачность в браузерах Netscape Navigator версий 6.x и выше. |
| Свойства шрифтов | |
| font | Css-свойство font применяется для сокращенного задания свойств шрифта: font-style, font-variant, font-weight, font-size, line-height и font-family |
| font-family | Значением css-свойства font-family является список имен семейств шрифтов и групп шрифтов |
| font-size | Css-свойство font-size позволяет задать размер шрифта |
| font-size-adjust | Css-свойство font-size-adjust задает отношение высоты строчной буквы x к высоте шрифта |
| font-stretch | Css-свойство font-stretch позволяет задать расстояние между символами |
| font-style | Значением css-свойства font-style является список имен семейств шрифтов и групп шрифтов |
| font-variant | Css-свойство font-variant позволяет выводить текст малыми заглавными |
| font-weight | Css-свойство font-weight позволяет задать жирность шрифта |
| Свойства текста | |
| letter-spacing | Css-свойство letter-spacing указывает дополнительное расстояние между буквами |
| line-height | Css-свойство line-height задает высоту строки символов |
| text-align | Css-свойство text-align используется для указания, как будет выравниваться текст внутри элемента |
| text-align-last | Css-свойство text-align-last используется для указания выравниваться последней или единственной строка в блоке |
| text-decoration | Css-свойство text-decoration описывает эффекты, которые будут применены к текстовому содержимому элемента |
| text-indent | Css-свойство text-indent используется для формирования отступа красной строки |
| text-overflow | Css-свойство text-overflow используется для задания режима усечения текстовых строк |
| text-transform | Css-свойство text-transform позволяет взаимно преобразовывать строчные и заглавные буквы |
| vertical-align | Css-свойство vertical-align позволяет настроить выравнивание относительно высоты родительского элемента |
| white-space | Css-свойство white-space определяет алгоритм преобразования последовательностей пробельных символов |
| word-spacing | Css-свойство word-spacing указывает на дополнительное расстояние между словами |
| word-wrap | Css-свойство word-wrap определяет, будут ли разрываться слова для переноса или нет |
| writing-mode | Css-свойство writing-mode используется для указания алгоритма разметки |
| Свойства списков | |
| list-style | Css-свойство list-style применяется для сокращенного задания свойств list-style-type, list-style-image и list-style-position |
| list-style-image | Css-свойство list-style-image определяет графический элемент, который будет выступать в качестве маркера списка |
| list-style-position | Css-свойство list-style-position определяет расположение маркера по отношению к содержимому элемента |
| list-style-type | Css-свойство list-style-type определяет тип маркера списка |
| Свойства таблиц | |
| border-collapse | Css-свойство border-collapse позволяет выбрать используемую модель построения таблицы |
| border-spacing | Css-свойство border-spacing определяет расстояние между ячейками таблицы. |
| caption-side | Css-свойство caption-side определяет положение поля заголовка относительно поля таблицы. |
| empty-cells | Css-свойство empty-cell определяет метод отображения пустых ячеек таблицы в модели с раздельными границами ячеек. |
| table-layout | Css-свойство table-layout позволяет выбрать алгоритм отображения таблицы. |
| Свойства отступов | |
| margin | Css-свойство margin применяется для сокращенного задания свойств отступов |
| margin-bottom | Css-свойство margin-bottom определяет размер нижнего отступа элемента |
| margin-left | Css-свойство margin-left определяет размер левого отступа элемента |
| margin-right | Css-свойство margin-right определяет размер правого отступа элемента |
| margin-top | Css-свойство margin-top определяет размер верхнего отступа элемента |
| Свойства набивок | |
| padding | Css-свойство padding применяется для сокращенного задания свойств набивок |
| padding-bottom | Css-свойство padding-bottom определяет размер нижней набивки элемента |
| padding-left | Css-свойство padding-left определяет размер левой набивки элемента |
| padding-right | Css-свойство padding-right определяет размер правой набивки элемента |
| padding-top | Css-свойство padding-top определяет размер верхней набивки элемента |
| Свойства границ | |
| border | Css-свойство border используется, что бы установить одинаковые ширину, стиль и цвет бордюра для всех четырех сторон |
| border-bottom | Css-свойство border-bottom используется для задания в одном месте стиля, цвета и толщины нижней части бордюра |
| border-bottom-color | Css-свойство border-bottom-color используется для задания цвета нижней части бордюра |
| border-bottom-style | Css-свойство border-bottom-style используется для задания стиля нижней части бордюра |
| border-bottom-width | Css-свойство border-bottom-width определяет размер нижней части бордюра элемента |
| border-left | Css-свойство border-left используется для задания стиля, цвета и толщины левой части бордюра |
| border-left-color | Css-свойство border-left-color используется для задания цвета левой части бордюра |
| border-left-style | Css-свойство border-left-style используется для задания стиля левой части бордюра |
| border-left-width | Css-свойство border-left-width определяет размер левой части бордюра элемента |
| border-right | Css-свойство border-left используется для задания стиля, цвета и толщины правой части бордюра |
| border-right-color | Css-свойство border-right-color используется для задания цвета правой части бордюра |
| border-right-style | Css-свойство border-right-style используется для задания стиля правой части бордюра |
| border-right-width | Css-свойство border-right-width определяет размер правой части бордюра элемента |
| border-top | Css-свойство border-left используется для задания стиля, цвета и толщины верхней части бордюра |
| border-top-color | Css-свойство border-top-color используется для задания цвета верхней части бордюра |
| border-top-style | Css-свойство border-top-style используется для задания стиля верхней части бордюра |
| border-top-width | Css-свойство border-top-width определяет размер верхней части бордюра элемента |
| border-style | Css-свойство border-style применяется для сокращенного задания стиля бордюра |
| border-color | Css-свойство border-color применяется для сокращенного задания цветов четырех сторон |
| border-width | Css-свойство border-width применяется для сокращенного задания ширины бордюра |
| Свойства-квалификаторы | |
| clear | Css-свойство clear запрещает размещение плавающих (float) элементов справа и слева |
| float | Css-свойство float позволяет задать режим обтекание элемента |
| display | Css-свойство display используется что бы явно указать тип блока, порождаемого элементом |
| overflow | Css-свойство overflow определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры. |
| overflow-x | Css-свойство overflow-x определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры по ширине. |
| overflow-y | Css-свойство overflow-y определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры по высоте. |
| position | Css-свойство position используется для выбора одного из четырех алгоритмов, использующихся для вычисления положения блока элемента. |
| z-index | Css-свойство z-index определяет порядок перекрытия элементов. |
| Свойства позиционирования | |
| bottom | Css-свойство bottom определяет смещение нижней стороны блока элемента относительно нижней стороны контейнера данного элемента. |
| left | Css-свойство left определяет смещение левой стороны блока элемента относительно левой стороны контейнера данного элемента |
| right | Css-свойство right определяет смещение правой стороны блока элемента относительно правой стороны контейнера данного элемента. |
| top | Css-свойство top определяет смещение верхней стороны блока элемента относительно верхней стороны контейнера данного элемента |
| width | Css-свойство width определяет ширину элемента |
| height | Css-свойство height определяет высоту элемента |
| min-width | Css-свойство min-width определяет минимальную ширину элемента |
| max-width | Css-свойство man-width определяет максимальную ширину элемента |
| min-height | Css-свойство min-height определяет минимальную высоту элемента |
| max-height | Css-свойство man-height определяет максимальную высоту элемента |
| Свойства scrollbar | |
| scrollbar-3dlight-color | Css-свойство scrollbar-3dlight-color задает цвет для верхней и левой внешней границы бегунка полосы прокрутки и концевых кнопок. |
| scrollbar-arrow-color | Css-свойство scrollbar-arrow-color определяет цвет активных стрелок |
| scrollbar-base-color | Css-свойство scrollbar-base-color задает цвет, на основе которого строится цветовая схема для полосы прокрутки. |
| scrollbar-darkshadow-color | Css-свойство scrollbar-darkshadow-color задает цвет для нижней и правой внешней границы бегунка полосы прокрутки и концевых кнопок |
| scrollbar-face-color | Css-свойство scrollbar-face-color задает цвет фона для бегунка полосы прокрутки и концевых кнопок |
| scrollbar-highlight-color | Css-свойство scrollbar-highlight-color задает цвет для верхней и левой внутренней границы бегунка полосы прокрутки и концевых стрелок |
| scrollbar-shadow-color | Css-свойство scrollbar-shadow-color задает цвет для нижней и правой внутренней границы бегунка полосы прокрутки и концевых стрелок |
| scrollbar-track-color | Css-свойство scrollbar-track-color определяет цвет фона для полосы прокрутки |
| Разное | |
| behavior | Css-свойство behavior позволяет назначать dhtml-сценарий |
| cursor | Css-свойство cursor позволяет задать для элемента типа курсора, когда курсор находится над элементом |
| zoom | Css-свойство zoom применяется для задания коэффициента масштабирования элемента |
| accelerator | Css-свойство accelerator используется для выделения части текста, которая обозначает горячую клавишу |
Дополнения
Меры длины
Синтаксис: "+" (можно опустить) или "-" затем [число] плюс [единица измерения] (без пропусков)
Например:
-566ptЕдиницы длинны: ex - x-height, ширина буквы "x" используемого элементом шрифта
px - pixels, пикселы
in - inches, дюймы
cm - centimeters, сантиметры
mm - millimeters, миллиметры
pt - points, точка (1pt = 1/72in)
pc - picas (1pc = 12pt)
Процентные меры
Синтаксис: "+" или "-" затем [число] плюс "%" (без пропусков)
Например:
-566%Цвета
Синтаксис: [color]
Например:
magentaЗначением цвета может быть его название (red , lightgreen, coral и т.д.) или RGB значение
Способы выразить цвет в RGB (red green blue) :
· #rrggbb (например, #00cc00)
· rgb(x,x,x) -- где "х" число от 0 до 255 (например, rgb(0,204,0))
· #rgb (например, #0c0)
· rgb (x%,x%,x%) -- где "х%" число от 0.0 до 100.0 (например, 0%,80%,0%)
Все примеры отображают один и тот же цвет
Ссылки
Синтаксис: "URL" , потом в скобках приводится ссылка. Ссылку также можно, помимо скобок, заключить в одинарные или двойные кавычки (без пропусков)
Например:
URL('cool.gif')
Задание
Используя HTML-документ, созданный в лабораторной работе 2, создать стили, используя внутренние, глобальные и связанные таблицы стилей.
Варианты оформления текста указан в таблице 6 лабораторной работы 2.
Контрольные вопросы
1. Что такое стиль?
2. Как стиль создается?
3. Какие используют таблицы стилей?
4. Чем отличаются таблицы стили?
5. Как определяют цвет текста?
6. Основные элементы при создании стилей?
Лабораторная работа 8
Тема: Программирование на 11-76279.php" class="back_link" > ⇐ Назад