Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
6
Добавлен:
01.04.2025
Размер:
7.81 Mб
Скачать

Теги div , span и link

Элементы <span> и <div> используются для структурирования до­кумента совместно с атрибутами class и id. В сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдель­ным блокам текста. Пример

<p>Если ты умный, почему не богатый </p>

<p> Если ты очень умный, то <span сlass="benefit">

здоровый</span>, и<span class="benefit">богатый</span> </p>

span.benefit {

color:red;

}

Тег <div>, в отличие от <span>, делает до и после себя отбивку ( как и <p>). В то время как <span> используется в элементах уровня блока, <div> применяется для группирования блок-элементов. Тег <div> является универсальным контейнером для элементов разметки, удобным для форматирования и стилизации.

Тег link используется для установки связи между HTML документом и внешней таблицей стилей из CSS файла, например:

<link rel="stylesheet" href="/s.css" type="text/css" media="all" />

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

Свойство шрифтов font позволяет задать характеристики шрифта: font-family| font-style | font-variant | font-weight| font-size

Свойство

Описание значения

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>pr3css-Установка шрифта с помощью стилей</title>

<style type="text/css">

body {

font-family: “Times New Roman”, times, serif;/* шрифты*/

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

font-style: oblique;}

th {

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

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

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

}

h1, h2, h3 {

font-family: verdana, tahoma, arial, sans-serif /*шрифты*/

}

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

</style>

</head>

<body>

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

<h1>Заголовок1</h1>

<h2>Заголовок2</h2>

<h3>Заголовок3</h3>

<table>

<th>Таблица</th>

</table>

</html>

Результат:

Курсивный текст

Заголовок1 Заголовок2 Заголовок3

Порядок свойств, установленных в font следующий: font-style|font-variant| font-weight|font-size|font-family. Используя сокращенную запись font, можно указывать все свойства шрифта в одном стилевом правиле:

p {font: italic normal bold 30px arial, sans-serif;}

В свойстве font-family обычно указывается несколько шрифтов, через запятые, чтобы выбрать из них тот шрифт, который установлен на компьютере клиента. Кроме названия может указываться гарнитура (семейство) шрифтов: serif, sans – serif, monospace.

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

body {

@font-face: Myfont;

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

}