Ширина шрифта

Стилевое свойство font-weight определяет ширину шрифта, то есть насколько текст «толстый», или «жирный». Значение задается числом от 100 до 900 (с шагом 100), где каждый номер обозначает шрифт, который темнее своего предшественника, либ принимает значения, приведенные ниже.

• normal — текст отображается обычным шрифтом. В числовом выражении ( ответствует значению 4 00.

• bold — текст отображается более широким шрифтом, чем обычно. Числен^] но оно равно значению 7 00. Такая ширина называется «полужирным начер;- танием».

• bolder — определяет вес шрифта, который темнее, чем наследуемый. Если! наследуемое значение равно значению 90 0, то результат будет также равен] значению 900.

• Lighter — определяет вес шрифта, который светлее, чем наследуемый. Если наследуемое значение равно значению 10 0, то результат будет также равен значению 100.

Размер шрифта

Для указания размера используется свойство font-size. Размер шрифта задает­ся с помощью значения и единицы измерения выбранной в одной из двух групп: абсолютной и относительной.

Абсолютные единицы:

• in — дюйм - 2,5 см; .

• mm — миллиметр;

• cm — сантиметр;

• pt — пункт -1/7 дюйма,

• рс — пика (равна 12 пт)

Относительные единицы:

• em — высота шрифта

• ех — высота буквы х;

• рх — пиксел;

• % процентное соотношение

Группу относительных единиц удобно использовать, дабы сохранить первозданный вид документа на любом устройстве (экране и при печати).

Обычно размер шрифта текста задается равным 14 пт

P {

font-size: 14pt;

}

ФОРМАТИРОВАНИЕ ТЕКСТА

Мы рассмотрели основные возможности CSS по работе со шрифтами. Теперь при­ступим к изучению форматирования текста.

Отступы

HTML не предоставляет специальных средств для задания отступа абзаца. Их приходится делать с помощью пробелов, и это неудобно. Для решения этой про­блемы CSS предлагает вам замечательное свойство — text-indent. Размер от­ступа может задаваться как абсолютными, так и относительными единицами, в том числе и процентами. В качестве 100 % считается ширина страницы.

P {

text-indent: 25px;

}

Чтобы лучше разобраться в этом свойстве, вы можете поэкспериментировать с раз­ными значениями и единицами измерений.

Выравнивание текста

Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у тега <Р>:

- left — выравнивание текста влево;

- right-выравнивание текста вправо;

- center — выравнивание текста по центру;

- justify — выравнивание текста по формату.

Оформление

С помощью CSS можно добавлять или изменять декоративное оформление.

Для этого используется свойство text-decoration

Ниже приводятся все возможные значения данного свойства и их описания:

попе — не выполняет декоративное оформление;

underl ine — каждая строка текста подчеркивается;

overline — над каждой строкой текста отображается линия;

line-through — каждая строка текста отображается зачеркнутой;

blink — текст мигает.

ПРИМЕЧАНИЕ

Вы можете использовать одно значение или сразу несколько. Если вы применяете несколько значений, то между ними нужно ставить только пробел. Использование запятой недопустимо, поскольку браузер использует только те эффекты, которые записываются после последней запятой.

Свойство none на первый взгляд может показаться лишним: ведь если не задавать это свойство, то текст и так будет без декоративного оформления. Но его полезно использовать для ссылок. По умолчанию для ссылок браузер считает заданным значение этого свойства underline, то есть все ссылки на странице отображают­ся подчеркнутыми. Если вы захотите сделать ссылки такими же, как и основной текст (без подчеркивания), то в этом случае вам пригодится значение none. Не­редко это значение используется для обычных ссылок, a underline — для тех, на которые наведен указатель мыши:

text-decoration: none;

A:hover {

text-decoration: underline;

РАССТОЯНИЕ МЕЖДУ БУКВАМИ

Расстояние между буквами можно задать свойством letter-spacing. В качест­ве значения указывается необходимая величина и абсолютная единица измере­ния.

Для примера зададим расстояние между буквами в заголовке равным 6 пикселов:

H1 {

letter-spacing: 6px;

}

РАССТОЯНИЕ МЕЖДУ СЛОВАМИ

„ можете задать также расстояние между словами, используя свойство word-cing. В качестве значения можно указать желаемое значение либо значение ormal, чтобы использовать значение браузера по умолчанию.

Hi { word-spacing: 1em }

В данном примере расстояние между всеми словами тега <Н1> увеличивается

на lem.

Трансформация текста

Свойство text-transform управляет регистром символов.: Для данного свойст­ва возможно три значения:

- capitalize — пишет все слова с большой буквы;

- uppercase — меняет все символы в верхний регистр;

- lowercase — меняет все символы в нижний регистр.

Пустое место

CSS также позволяет задавать способ обработки браузером пустого пространства. Для этого используется свойство white-space. Значения, которые может прини­мать это свойство, и их описания приводятся ниже.

- normal. Браузер будет сжимать последовательное пустое пространство и раз­бивать строки для вмещения в них линейных блоков.

- рге. Браузер не может изменять последовательность символов пустого про­странства. Строки разбиваются только в местах начала новых строк, обозначен­ных в исходном тексте.

- nowrар. При сокращении пустого пространства это значение действует так же, как значение normal. Однако оно запрещает разрывать строки в тексте, за ис­ключением разрывов, определенных с помощью тега <BR>.

Рассмотрим следующий пример:

BODY { white-space: рге }

браузер покажет HTML-документ с такой же таблицей стилей, с какой он отображается в исходном виде, например в программе Блокнот.

Оформление документа CSS

Теперь рассмотрим возможности CSS по оформлению документа. Изучив этот материал, вы с легкостью сможете придать своим страницам эксклюзивный вид.

Фон

Выше мы уже говорили, как задать фон для текста (с помощью свойства background-color). Точно так же задается цвет для любых тегов — таблиц, слоев и т. д.

CSS также позволяет задать для тегов фоновое изображение.

Фон может принимать следующие свойства: background-color, background-image, background-repeat, background-attachment,background-position и background.

Свойство background-image задает графический объект, то есть картинку из файла, в качестве фона элемента. При указании фонового изображения рекомен­дуется задавать фон, который будет использоваться в случае, если изображение окажется недоступным. Если изображение доступно, то оно отображается поверх фонового цвета, который все же будет виден сквозь прозрачные фрагменты изо­бражения (если такие есть). В качестве значения этого свойства задается адрес картинки. Рассмотрим такой фрагмент таблицы стилей.

BODY { background-image: url("some_bgimage.gif") }

P { background-image: none }

В данном примере в качестве фона страницы используется изображение из файла some_bgimage. gif. Содержимое страницы внутри тега <Р> будет находиться на белом фоне либо на фоне, который задается в браузере по умолчанию.

Если вы задали фоновое изображение, то можете также использовать свойство background-repeat, которое определяет, будет ли изображение дублировать­ся, и если да, то каким образом. Данное свойство может принимать следующие значения:

repeat — изображение дублируется как по вертикали, так и по горизонтали;

repeat-x — изображение дублируется только по горизонтали;

repeat-y — изображение дублируется только по вертикали;

no-repeat — изображение не дублируется: отображается только одна копия изображения.

Рассмотрим такой пример:

body {

background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center;

}

В данном примере страница имеет белый цвет. Фоновое изображение будет верти­кально продублировано и расположено посередине страницы.

Если вы задали фоновое изображение, то можете задать свойство background-attachment, которое определяет, будет ли изображение фиксироваться относи­тельно окна просмотра (значение fixed) или перемещаться вместе с документом (значение scroll) при его прокрутке.

Вы также можете задать для фонового изображения начальное положение на стра­нице, используя свойство background-posit ion. Местоположение можно зада­вать, используя проценты от размера окна браузера.

Это значение можно задать, указав число и единицу длины. Например, если вы зададите пару «2cm 2cm», то верхний левый угол изображения сместится на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.

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

- top left и left top-«0% 0 %».

- top, top center и center top — «50 % 0 %».

- right top и top right-«100% 0 %».

- left, left center и center left —«0% 50%».

- center и center center - «50 % 50%».

- right, right center и center right — «100 % 50%».

- bottom left и left bottom-«0% 100%».

- bottom, bottom center и center bottom — «50 % 100 %».

- bottom right и right bottom-«100% 100%».

Для этих свойств можно использовать сокращенную запись используя свойство

background. Например: