Если задать атрибут width, текст начинает пе- реноситься по словам

URL задаются конструкцией url(…). Например, следующий CSS-код добав- ляет фоновое изображение для страницы:

BODY {background-image: url(images/bg.jpg);}

Шрифты

Шрифт – набор начертаний букв и знаков. В компьютере шрифт представля- ет собой файл, в котором описано, как должны отображаться на мониторе или принтере различные символы: буквы, цифры, знаки пунктуации и др. Часто шрифты содержат только начертания для латинского алфавита и не имеют, например, поддержки кириллицы. Существуют Unicode-шрифты, ко- торые содержат символы для всех языков. Основные форматы файлов шриф- тов: TTF – TrueType и его расширение OTF – OpenType.

Типы шрифтов:

serif– шрифты с засечками (антиквенные), например: Times New Roman,

Georgia.

sans-serif– рубленные шрифты (шрифты без засечек или гротески), типич- ные представители – Arial, Impact, Tahoma, Verdana;

cursive– курсивные шрифты: Comic Sans MS;

fantasy– декоративные шрифты, например: Curlz MT.

monospace– моноширинные шрифты, ширина каждого символа одинакова. Примеры: Courier New, Lucida Console.

Засечками называют элементы на концах штрихов букв. Сравним букву шрифта Times New Roman и букву шрифта Arial.

М М

Рисунок 3.1. Сравнение буквы М антиквенного и рубленного шрифта.

Пунктирными линиями обведены засечки.

Использование шрифтов с засечками облегчает чтение текста с бумаги, по- этому такие шрифты обычно используют для набора основного текста в кни- гах. Для web-сайтов основной текст чаще набирают шрифтом без засечек: Arial, Tahoma, Trebuchet MS, Verdana.

Текст

CSS позволяет управлять свойствами шрифта и текста.

font-family– задает начертание шрифта. Можно указать несколько значе- ний через запятую. Браузер проверит первый шрифт из списка: если шрифт установлен на компьютере пользователя, то браузер применит его, если нет – перейдет ко второму шрифту и т.д. Последним в списке обычно указывается общий тип шрифта serif, sans-serif, cursive, fantasy или monospace. Пример:

font-family: Georgia, 'Times New Roman', serif

Если на компьютере пользователя установлен шрифт Georgia, то будет ис- пользоваться он, если нет – то Times New Roman. Если же и Times New Roman отсутствует, то браузер будет использовать шрифт с засечками, кото- рый установлен на компьютере.

Еще в CSS2 была реализована поддержка метода @font-face для загрузки недостающих шрифтов с сервера, но до недавнего времени не все браузе- ры поддерживали эту возможность. Сейчас @font-face работает в послед- них версиях FireFox, Opera, Safari. Inernet Explorer реализует @font-face с

4 версии, но поддерживает только шрифты в формате EOT (Embedded OpenType), которые могут быть получены из TrueType и OpenType про- граммой-конвертером.

font-size– размер шрифта. Может задаваться абсолютным значением в пунктах (pt) или пикселях (px) или относительным – в процентах (%) или в em. Пример:

font-size: 12pt

или

font-size: 150%

font-style– задает начертание текста: normal (обычное), italic (курсив- ное) или oblique (наклонное). Курсивное начертание является специальной измененной версией шрифта, имитирующей рукописный текст с наклоном вправо. Наклонное начертание получается из обычного наклоном букв. Раз- личие видно на примере:

Рисунок 3.2. Нормальное, курсивное и наклонное начертание.

Обычно браузер не может отобразить наклонное начертание и заменяет его курсивным.

font-weight– позволяет изменить уровень жирности текста: normal (обыч-

ная), bold (полужирная). Действие аналогично тегу <b>.

color– задает цвет текста (см. пункт «Цвета» этой лекции). Например, зада- дим красный цвет для всех заголовков:

H1, H2, H3, H4, H5, H6 {color: #ff0000}

или

H1, H2, H3, H4, H5, H6 {color: red}

line-height– межстрочный интервал (интерлиньяж), указывает расстояние между строками текста. Может задаваться числом как множитель от текуще- го размера шрифта, в процентах, а также в пунктах (pt), пикселях (px) и дру- гих единицах измерения CSS. Пример:

line-height: 1.5; /* полуторный интервал */

В программировании принято отделять целую часть числа от дробной точкой, как в английском языке. В русском языке используется запятая.

text-decoration– задает оформление текста. Варианты: line-through (перечеркнутый), overline (линия над текстом), underline (подчеркива- ние), none (отключение эффектов). Например, отключим подчеркивание у ссылок:

A {text-decoration: none}

text-align– выравнивание текста в блоке: left (по левому краю), center

(по центру), right (по правому краю) или justify (по ширине). Пример:

P {text-align: justify}

text-indent– отступ первой строки («красная строка»). Длина отступа мо- жет задаваться в процентах (%) от ширины текстового блока, пикселях (px), пунктах (pt) и др. Пример:

P {text-indent: 1.25cm}

font: font-style font-weight font-size/line-height font-family

Значения font-size и font-family являются обязательными, остальные можно не указывать, например:

H1 {font: bold 14pt/1.5 sans-serif}

Ресурсы в Интернете

· Единицы измерения. http://www.htmlbook.ru/content/?id=60

· Основы CSS. Текст: http://htmlbook.ru/content/?id=55

· Оформление текста с помощью CSS. http://www.intuit.ru/department/internet/operawebst/29/

· Общие шрифты для всех версий Windows и их эквиваленты для Macin- tosh. http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

o Антиквенные шрифты*. http://paratype.ru/help/class/default.asp?ClassCode=10000

o Шрифт с засечками*. http://www.webimg.ru/node/166

o Читабельность*. http://designformasters.info/posts/readability/#serif

o Как выбрать шрифт для веб-сайта*. http://seleckis.lv/journal/shrifty/kak- vyibrat-shrift-dlya-web-sayta

o Тенденции мировой типографики*. http://habrahabr.ru/blogs/typography/67671/

o CSS Font-Size: em vs. px vs. pt vs. percent*. http://habrahabr.ru/blogs/webdev/42151/

o @font-face или назад в будущее*. http://lovtsevich.com/2009/10/26/font- face-ili-nazad-v-budushhee/

а) Создайте новую страницу. Поместите на нее текст произвольного содер- жания. С помощью CSS задайте следующие параметры для заголовка: размер шрифта – 16 pt, полужирный, выравнивание по центру. Для текста – размер шрифта 12 pt, межстрочный интервал – полуторный, красная строка – 1,5 см. Подберите подходящий шрифт для заголовка и текста. б*) Добавьте на страницу пиктограммы с помощью шрифта Wingdings.

Лекция 3.3. CSS-свойства:поля,заполнение,границы

В CSS каждый элемент располагается в блоке, которому можно задать значе- ния полей (margin), заполнения (padding) и границы (border). Поле является отступом элемента от соседних, а заполнение – пустой областью между гра- ницей и содержимым (см. рис. 3.3.).

margin

border

padding

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali- qua. Ut enim ad minim veniam, quis2

Рисунок 3.3 Бокс (box) элемента.

1 Здесь и далее в примерах используется «рыба». Подробнее: «Ководство» §

67. Lorem ipsum: http://www.artlebedev.ru/kovodstvo/sections/67/

Ширина полей и заполнения задается следующими CSS свойствами:

margin-top, margin-right, margin-bottom, margin-left– для верх- ней, правой, нижней, левой стороны поля.

margin– сокращенная запись. Задает значение сразу для всех сторон. При- мер:

P {margin: 10px} аналогично записи P {

margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

}

padding-top, padding-right, padding-bottom, padding-left– ус- танавливают ширину заполнения1 сверху, справа, снизу и слева от содержи- мого соответственно.

padding– устанавливает значение сразу для всех сторон.

Для margin и padding можно задавать значение auto. В этом случае браузер сам автоматически рассчитает величину полей и заполнения.

1 - В литературе встречаются различные переводы термина padding: заполне- ние, набивка, поле. Чтобы избежать путаницы, на занятиях рекомендуется использовать английское название.

Для границ можно задать толщину, цвет и стиль:

border-width– толщина границы;

border-color– цвет границы (по умолчанию – черный);

border-style– стиль границы. Может принимать значения solid (по умолчанию), dotted, dashed, double, groove, ridge, inset или outset. На рис. 3.4 представлены все виды границ, border-width установлен в 5 пикселей.

Рисунок 3.4. Виды границ.

Существует сокращенная запись: свойство borderзадает одновременно толщину, цвет и стиль. Значения указываются через пробел в любом порядке. Например:

<P style="border: solid 1px green">Текст</P>

Можно задавать стили отдельно для верхней, правой, нижней и левой грани- цы, но это редко используется на практике. Например:

HTML-код:

<html>

<head>

<title>Пример</title>

<style> H3 {

border-top: 2px dashed black; border-bottom: 2px dashed black; border-left: 0;

border-right: 0;

}

</style>

<body>

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

</body>

</html>

В браузере:

Рисунок 3.5 Задание свойств границ по отдельности

В предыдущем примере граница растянулась по всей ширине окна браузера. Это произошло потому, что многие HTML элементы по умолчанию занима- ют 100% ширины элемента, в которые они вложены. Для определения разме- ра в CSS существуют свойства width и height. Чаще всего ширину и высоту задают в пикселях (px) или в процентах (%) от ширины родительского эле- мента. Рассмотрим пример:

HTML-код:

<html>

<head>

<title>Пример</title>

<style>

P {font-size: 10pt}

#text1 {

border: 1px solid black;

}

#text2 {

border: 1px solid black; width: 300px;

}

#text3 {

border: 1px solid black; width: 50%;

}

</style>

<body>

<p id="text1">Quo usque tandem abutere, Catilina, pa- tientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit au- dacia?</p>

<p id="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p id="text3">Ut enim ad minim veniam, quis nostrud ex- ercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</body>

</html>

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

Если ширина или высота не заданы, они автоматически вычисляются браузе- ром, исходя из размеров содержимого: для первого абзаца браузер установил ширину, равную ширине окна (100%). Во втором и третьем абзаце ширина задана, но не задана высота, поэтому браузер сам подобрал ее так, чтобы весь текст поместился в элемент.

Рисунок 3.6. Отображение примера в браузере

Теперь, если пользователь изменит размер окна, пропорционально изменится ширина тех элементов, где она была задана в процентах.

Уменьшим размер окна браузера. У первого и третьего абзаца уменьшится ширина, а высота увеличится, чтобы вместить весь текст. Размеры второго абзаца останутся неизменными, появятся полосы прокрутки.

Рисунок 3.7. Отображение примера в браузере при уменьшении ширины окна

Общие размеры элемента складываются так:

Ширина = width + padding + border + margin

Высота = height + padding + border + margin

Т.е. width и height задают только размеры содержимого, не включая поля, заполнение и границу! См. рис. 3.8.

margin

border

padding

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali- qua. Ut enim ad minim veniam, quis

width

Рисунок 3.8. Бокс элемента и размеры содержимого

Ресурсы в Интернете

· Модель компоновки CSS – боксы, границы, поля, заполнение. http://www.intuit.ru/department/internet/operawebst/30/

· Справочник htmlbook.ru. Границы, поля, отступы. http://htmlbook.ru/css/

Задания:

а) Реализуйте пример с рис. 3.6. Текст абзацев вставьте свой. Отключите поля и заполнение для всех элементов на странице (*). Проанализируйте резуль- тат. Добавьте заголовок тегом H1. Установите поля и отступы для тегов BODY, H1 и P. Для каждого абзаца установите разный вид и толщину гра- ниц.

б) Создайте параграф размерами 300×100 пикселей. Поместите туда большой текст. Сравните поведение страницы в Internet Explorer и Firefox. в*) Задайте для второго параграфа отрицательное верхнее поле. Оцените ре- зультат.

Лекция 3.4. CSS-свойства:фон,оформление таблиц

Фон

Как и в языке HTML, в CSS фоном служит заливка цветом или изображение. Фоновое изображение может быть повторяющимся.

background-color– устанавливает цвет фона. Пример:

TD.head {background-color: #ffff00}

background-image– устанавливает в качестве фона изображение:

BODY {background-image: url(images/bg.jpg)}

background-attachment– задает поведение фонового изображения при прокрутке. По умолчанию задается значение scroll – фон прокручивается вместе с содержимым. Значение fixed делает фон неподвижным.

background-position– начальное положение фонового изображения по горизонтали (left, center, right) и вертикали (top, center, bottom). Вместо клю- чевых слов можно указывать расстояние в пикселях или процентах.

background-repeat– указывает, в каком направлении должно размножать- ся фоновое изображение:

repeat – по горизонтали и вертикали (по умолчанию);

repeat-x – только по горизонтали;

repeat-y – только по вертикали;

no-repeat – отключить повторение. Пример:

Используя изображение одного вагона, составим в фоне поезд.

Рисунок 3.9. Фоновое изображение.

CSS код:

BODY {

background-image: url('coach.png'); background-repeat: repeat-x; background-position: 80px 100px;

}

В браузере:

Рисунок 3.10. Фоновое изображение на странице.

Таблицы

Свойства CSS могут применяться к таблицам, их строкам и ячейкам для за- дания свойств текста и шрифта, управления фоном, полями, границами, раз- мерами и т.п.

Создадим таблицу и применим к ней CSS-стили. В таблицу внесем данные о популярности различных браузеров1. Для заголовка таблицы используем тег <th>…</th>.

HTML-код:

<html>

<head>

<title>Популярность браузеров в мире</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<th>Год\Браузер</th>

<th>IE</th>

<th>Firefox</th>

<th>Safari</th>

<th>Opera</th>

<td>2010</td>

<td>61.43%</td>

<td>24.40%</td>

<td>4.55%</td>

<td>2.37%</td>

<td>2009</td>

<td>69.13%</td>

<td>22.67%</td>

<td>3.58%</td>

<td>2.18%</td>

1- По данным Net Applications для первого квартала года.

<tr>

</tr>

<tr>

</tr>

<td>2008</td>

<td>77.83%</td>

<td>16.86%</td>

<td>2.65%</td>

<td>1.84%</td>

<td>2007</td>

<td>79.38%</td>

<td>14.35%</td>

<td>4.70%</td>

<td>0.50%</td>

</table>

</body>

</html>

Без CSS-оформления таблица будет выглядеть так:

Рисунок 3.11. Отображение таблицы по умолчанию

По умолчанию содержимое заголовочных ячеек отображается жирным шрифтом с выравниванием по центру.

Добавим в тег <head>…</head> тег <style>…</style>, а к тегу

<table>…</table> атрибут id="browser_stats". Запишем CSS-правила для таблицы. Для заголовочных ячеек установим серый фон и отступ содер- жимого от границ (padding) в половину высоты строки, для ячеек с данными

– выравнивание по правому краю и padding три десятых от высоты строки.

Вокруг таблицы зададим двойную рамку, а для ячеек – обычную одинарную.

Код:

<style>

/* стиль таблицы */ TABLE#browser_stats {

border: 3px double black;

}

/* стиль заголовочных ячеек */ TABLE#browser_stats TH{

border: 1px solid black; background-color: gray; padding: 0.5em;

}

/* стиль ячеек с данными */ TABLE#browser_stats TD{

border: 1px solid black; padding: 0.3em;

text-align: right;

}

</style>

В браузере:

Рисунок 3.12. Отображение таблицы с заданными CSS-стилями

Виден существенный недостаток: у каждой ячейки появилась собственная рамка. Чтобы этого не происходило, необходимо указать в правилах для таб- лицы свойство border-collapseсо значением collapse. Результат:

Рисунок 3.13. Эффект слияния границ соседних ячеек

Теперь применим к той же таблице другое форматирование. Разделим табли- цу двумя линиями на 3 части: названия браузеров, годы и процентные дан- ные. Названия браузеров и процентные доли выровняем по центру, годы – по правому краю. Зададим одинаковую ширину для столбцов с информацией по браузерам.

Рисунок 3.14. Оформление таблицы с двумя разделительными линиями

Чтобы применить правила CSS к левой колонке (годы), нам придется задать новый класс lc и прописать атрибут class="lc" во все ячейки левой колон- ки.

Горизонтальная линия создается путем указания свойства border-bottom

для ячеек TH, вертикальная – border-left для ячеек класса lc.

Код-страницы:

<html>

<head>

<title>Популярность браузеров в мире</title>

<style> TABLE#browser_stats { border-collapse: collapse;

}

TABLE#browser_stats TH{

border-bottom: 1px solid black;

}

TABLE#browser_stats TD{ padding: 0.3em;

text-align: center; width: 70px;

}

TABLE#browser_stats .lc{ text-align: right;

border-right: 1px solid black; width: 100px;

}

</style>

</head>

<body>

<table id="browser_stats">

<tr>

</tr>

<tr>

<th class="lc">Год\Браузер</th>

<th>IE</th>

<th>Firefox</th>

<th>Safari</th>

<th>Opera</th>

<td class="lc">2010</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<td>61.43%</td>

<td>24.40%</td>

<td>4.55%</td>

<td>2.37%</td>

<td class="lc">2009</td>

<td>69.13%</td>

<td>22.67%</td>

<td>3.58%</td>

<td>2.18%</td>

<td class="lc">2008</td>

<td>77.83%</td>

<td>16.86%</td>

<td>2.65%</td>

<td>1.84%</td>

<td class="lc">2007</td>

<td>79.38%</td>

<td>14.35%</td>

<td>4.70%</td>

<td>0.50%</td>

</table>

</body>

</html>

Ресурсы в Интернете

· Оформление таблиц. http://htmlbook.ru/content/?pid=13

· Тег TH. http://htmlbook.ru/html/th.html

· Стилевое свойство border-collapse. http://htmlbook.ru/css/border- collapse.html

o Оформление таблиц. http://www.intuit.ru/department/internet/operawebst/33/

а) Реализуйте примеры таблиц из лекции (рис. 3.13. и рис. 3.14.).

б) Измените форматирование таблицы на следующий вариант:

Рисунок. 3.15. Задание 3.3.б.

в) Измените форматирование: задайте одинаковую высоту строк и установи- те чередование фона («зебра»).

У к а з а н и е: используйте разные классы стилей для четных и нечетных строк таблицы.

Рисунок. 3.16. Задание 3.3.в.

г*) Модифицируйте таблицу из задания «в». Чередование цвета фона у строк замените чередованием цвета фона у колонок. д*) Отключите фон у ячеек таблицы. Добавьте фоновое изображение для таблицы.

Лекция 3.5.Теги DIVи SPAN,псевдоклассы

Теги DIV и SPAN