Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Пензенский Государственный Университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Экзамен / web / example1 / Введение в PHP.doc

Скачиваний:

101

Добавлен:

18.05.2015

Размер:

3 Mб

Скачать

☆

<<< < Предыдущая 54 55 56 57 58 59 60 61 62 63 64 65 6667 / 7867 68 69 70 71 72 73 74 75 76 77 78 > Следующая >>>

Селекторы идентификаторов (id-селекторы).

ID-селекторы используются для определения уникальных частей веб-страницы. При объявлении стиля перед ID-селектором ставится #:

#green {color: green;}

В HTML коде элементу, подлежащему форматированию, необходимо присвоить соответствующее значение атрибута id:

<p id=”green”>Text</p>.

Символы “#” и ”.” используются только при описании стилей в таблицах. При вставке имени идентификатора или класса в HTML-теги их указывать не нужно!

Чтобы решить, что использовать – классы или идентификаторы,– необходимо иметь ввиду следующее. Для стиля, используемого неоднократно, применяются классы. Идентификаторы используются, когда необходимо определить разделы страницы, которые встречаются один раз.

Свойства шрифтов.

Свойство	Описание
font	Свойство позволяет задать несколько характеристик шрифта. font: [font-style \|\| font-variant \|\| font-weight] font-size [/line-height] font-family \| inherit
font-family	Можно указывать до трех шрифтов, через запятую ( \|serif \| san-serif \|cursive \|fantasy \| monospace;).
font-style	Определяет способ начертания: normal (по умолчанию), italic (курсив), oblique (наклонный).
font-variant	Определяет варианты начертания: normal (по умолчанию), small-caps (все буквы заглавные).
font-weight	Определяет степень жирности шрифта: normal ( по умолчанию), bold, bolder(жирный), lighter(бледный).
font-size	Устанавливает размер шрифта как в относительных (проценты), так и в абсолютных (пикселы, сантиметры ) единицах xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large \| larger \| smaller \| {Абсолютный размер} \| {Относительный размер}%;

Пример:

<html>

<head>

<title>Установка шрифта с помощью стилей</title>

body {

font-family: “Times New Roman”, times, serif; /* Семейства шрифтов*/

font-size: 100%; /* Размер шрифта для основного текста */

}

th {

font-family: arial, sans-serif; /* Семейства шрифтов*/

font-size: 90%; /* Размер шрифта для заголовка таблицы */

font-weight: bold /* Полужирная насыщенность*/

}

h1, h2, h3 {

font-family: verdana, tahoma, arial, sans-serif /* Семейства шрифтов*/

}

</style>

</head>

<body>

…

</body>

</html>

Пример font-style

<html>

<head>

<title>Курсивное начертание</title>

#cursive { font-style: italic} /* Курсивный текст */

</style>

</head>

<body>

<div id=”cursive”>Курсивный текст</div>

</body>

</html>

Пример font-variant

p {font: italic small_caps bold large}

@font-face - указывает список семейств или названий шрифтов, а также электронный адрес, по которому будут загружаться шрифты, если их нет на компьютере пользователя.

Пример:

body {

@font-face: Myfont;

src: url(“http://www.atlant.ru/Myfont.eot”);

}

Свойства текста.

Свойство	Описание
text-decoration	none \| underline \| overline \| line-through \| blink none (по умолчанию), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание).
text-transform	Определяет регистр букв: none (по умолчанию), capitalize (Первая Буква Каждого Слова Преобразуется В Заглавную), uppercase (все буквы в заглавные), lowercase (все буквы в строчные).
text-align	Определяет горизонтальное выравнивание текста: left (по умолчанию, выравнивание по левому краю), right (выравнивание по правому краю), center (центрирование), justify (выравнивание по ширине колонки).
vertical-align	Устанавливает вертикальное положение базисной линии элемента: baseline –с базой родительского элемента, middle – выравнивает среднюю линию по уровню "база плюс половина высоты родительского элемента" , sub – делает элемент подстрочным, super – делает элемент надстрочным, text-top – выравнивает верх элемента по верху шрифта родительского элемента , text-bottom – выравнивает низ по низу шрифта родительского элемента, top – выравнивает вершину элемента по самому высокому элементу линии, bottom – выравнивает низ элемента по самому низкому элементу линии.
text-indent	text-ident: {Отступ}\|{Отступ}%; Устанавливает величину отступа в первой строке параграфа.
line-height	Задает вертикальное расстояние между строками текста. line-height: normal\|{Y}\|{Y}%; Высота может быть задана абсолютной величиной или процентом от высоты родителя.
word-spacing	Определяет дополнительное расстояние между словами в тексте. word-spacing: normal\|{Величина}; Значение атрибута может быть задано либо абсолютной величиной, либо предопределенным значением normal.
letter-spacing	Определяет расстояние между символами в тексте. letter-spacing: normal\|{Величина};
word-wrap	word-wrap: normal\|break-word; Устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам. normal – запрещает переносить строки по словам, break-word – разрешает.
white-space	Устанавливает, как отображать пробелы между словами. white-space: normal \| nowrap \| pre \| pre-line \| pre-wrap \| inherit normal –как обычно, nowrap – пробелы не учитываются, переносы игнорируются, текст отображается одной строкой; pre – текст показывается с учетом всех пробелов и переносов, как они были в коде HTML; pre-line – пробелы и переносы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область; pre-wrap – в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, текст автоматически переносится на следующую строку; inherit – Наследует значение родителя.

Форматирование текста играет особую роль при создании сайта. Пример text-indent - определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0.

<html>

<head>

p { text-indent: 3em }

</style>

</head>

<body>

<р>Создание отступа с помощью параметра text-indent.</р>

</body>

</html>

Пример text-align - выравнивает текст в блоке содержимого элемента.

<html>

<head>

p { text-align: justify }

</style>

</head>

<body>

<p>Выравнивание текста с помощью свойства text-align.</p>

</body></html>

Пример vertical-align

<html>

<head>

<title> Использование стилей для управления индексами </title>

.sup {

vertical-align: super; /* Сдвигаем текст вверх */

font-size: 70% /* Уменьшаем размер шрифта */

}

.sub {

vertical-align: sub; /* Сдвигаем текст вниз */

font-size: 70%

}

</style>

</head>

<body>

<div>

f(х) = a<span class=”sub”>0</span> + a<span class=”sub”>1</span> x + ... + a

<span class=”sub”>n-l</span> x<span class=”sup”>n-l</span> + a

</div>

</body>

</html>

Пример line-height - задает высоту строки.

<html>

<body>

<p>Полуторный интервал</p><bг>

Установка полуторного межстрочного интервала.

</body>

</html>

Пример text-decoration - определяет оформление текстового элемента в виде подчеркивания (underline), надчеркивания (overline) или перечеркивания текста (line_through). По умолчанию никакого оформления текста не производится (none).

Пример:

<html>

<head>

a {

text-decoration: none /* Отменяем подчеркивание у ссылки */

}

</style>

</head>

<body>

<a href=link.html>Ссылка без подчеркивания</а>

</body>

</html>

Пример letter-spacing - определяет расстояние между текстовыми символами. По умолчанию используется стандартный интервал для текущего шрифта. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.

<html>

<head>

<title> Изменение межбуквенного интервала в тексте</title>

</head>

<body>

<р>Интервал, установленный по умолчанию</р>

<р styles ="letter-spacing: 0.3em">Очень большой интервал</р>

<р style = "letter-spacing: 0.2em"> Большой интервал </p>

<р style = "letter-spacing: 0рх">Плотный интервал</р>

<р style = "letter-spacing: -1рх">Очень плотный интервал</р>

</body>

</html>

Пример word-spacing - указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию.

<html>

<head>

p { word-spacing: 1 em }

</style>

</head>

<body>

<р>Изменение пробелов с помощью свойства word-spacing</р>

</body>

</html>

Пример text-transform - управляет преобразованием регистра букв. По умолчанию регистр букв не преобразуется

<html>

<head>

<title> Использование свойства text-transform </title>

.upper { text-transform: uppercase }

.capital { text-transform: capitalize }

</style>

</head>

<body>

<div class=”upper”> Все буквы преобразуются в прописные </div>

<div class=”capital”> Первая буква каждого слова преобразуется в прописную </div>

</body>

</html>

Цвет и фон.

Свойство	Описание
Сolor	Определяет цвет элемента.
background	Задает свойства фона элемента страницы. background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
background-color	Задает фоновый цвет страницы или ее элемента. background-color: {Цвет}\|transparent; Предопределенное значение transparent задает "прозрачный" фон.
background-image	Задает фоновый рисунок Web-страницы или ее элемента. background-image: url({Интернет-адрес файла рисунка})\|none; Предопределенное значение none отключает фоновый рисунок.
background-attachment	позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым страницы. Применяется для тега <BODY>. background-attachment: scroll\|fixed; scroll – обычное фоновое изображение , fixed – фоновое изображение фиксируется на одном месте и не прокручивается.
background-repeat	Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе. background-repeat: repeat\|no-repeat\|repeat-x\|repeat-y; repeat – размножает фоновое изображение во всех направлениях (значение по умолчанию); no-repeat – запрещает изображению повторяться; repeat-x – размножает изображение только по горизонтали; repeat-y – размножает фоновое изображение только по вертикали.
background-position	Задает местонахождение фонового рисунка и заменяет атрибуты background-position-x и background-position-y. background-position: [{background-position-x}] [{background-position-y}]; Если задана только одна координата, она считается горизонтальной, а для вертикальной принимается значение 50%. Значение по умолчанию 0% 0%.
background-position-x	Задает горизонтальную координату фонового рисунка. background-position-x: {X}\|{X}%\|left\|center\|right; Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка по левому краю, по центру и по правому краю. Значение по умолчанию 0%.
background-position-y	Задает вертикальную координату фонового рисунка. background-position-y: {Y}\|{Y}%\|top\|center\|bottom; Координата может быть задана целым числом, процентом от соответствующего размера фонового рисунка или предопределенным значением. Доступны три предопределенных значения: top, center, bottom, которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно.

Пример color - указывает цвет текста элемента.

<html>

<head>

<title> Изменение цвета символов</title>

</head>

<body>

<p><span style="color: blue">Первое</sраn> слово в строке - синие.</р>

<р style="color: rgb(49, 151, 116)"><span style="color:#fе0">Желтое</sраn> слово в строке зеленого цвета.</р>

</body>

</html>

Пример background-color - определяет цвет фона элемента.

<html>

<head>

<title> Изменение цвета фона</title>

. inverse {

font-family: Verana; /* Шрифт Verdana */

font-weight: bold; /* Жирное начертание */

background-color: green; /* Зеленый фон */

color: white; /* Символы белого цвета */

}

</style>

</head>

<body>

<div class=”inverse”>Белые буквы на зеленом фоне</div>

</body>

</html>

background - одновременно устанавливает свойства background-color, background-image, background-repeat, background-attachment и background-position.

Пример:

<html>

<head>

body {

background:

white /* Цвет фона */

url(image.gif) /* Путь к файлу с рисунком фона */

left top /* Положение в левом верхнем углу */

no-repeat /* Не повторять рисунок */

fixed /* Зафиксировать фон */

}

</style> .

</head>

<body>

Использование стилей для добавление фонового рисунка на страницу

</body>

</html>

<<< < Предыдущая 54 55 56 57 58 59 60 61 62 63 64 65 6667 / 7867 68 69 70 71 72 73 74 75 76 77 78 > Следующая >>>

Соседние файлы в папке example1

#
18.05.20153.57 Кб50index.php
#
18.05.20153 Mб101Введение в PHP.doc

Селекторы идентификаторов (id-селекторы).

Комментарии

Свойства шрифтов.

Свойства текста.