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

Таблицы стилей

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

К свойствам текста можно отнести следующие инструменты CSS; text-align и word-spacing которые предназначены для выравнивания текста, text-decoration и text-shadow свойства изменения стиля текста.

Синтаксис	Значения	Пример написания
text-align - Выравнивание текста	left - выравнивание по левому краю. center - выравнивание по центру. right - выравнивание по правому краю. justify - выравнивание по обоим краям.	p{text-align: center;}
text-indent - служит для определения отступа первой строки блока, может принимать любое стандартное значение длины или процентное соотношение.	—	p{text-indent: 20px;}
text-decoration - Служит для оформления текста	overline - линия над текстом. underline - подчеркивание текста. line-through - перечеркивание текста. blink - мерцание. none - нет элементов оформления (значение по умолчанию).	p{text-decoration: overline;}
text-transform - Переводит буквы в верхний или нижний регистр	none - отсутствие изменения регистра значение по умолчанию. capitalize - переводит первую букву каждого слова в верхний регистр. uppercase - переводит все буквы в верхний регистр. lowercase - переводит все буквы в нижний регистр.	p{text-transform: capitalize;}
text-shadow - Придает эффект тени текста. Может иметь несколько значений, которые нужно прописать друг за другом через запятые. В каждом отдельном значении эффектов тени обязательно должно быть значение смещения. Кроме этого можно определить значения такие, как радиус и резкость цвета. К сожалению данный эффект поддерживают не все браузеры: Safari - поддеживается, но без размытия Opera 9.5 - полная поддержка Firefox 2,3 - нет Firefox 3.1 - полная поддержка Konqueror - полная поддержка IE 7,8 - нет	none - нет эффекта (значение по умолчанию). color - цвет тени текста. первое числовое значение - расстояние по горизонтали вправо от текста. Отрицательное значение - расстояние влево от текста. второе числовое значение - расстояние по вертикали вниз от текста. Отрицательное значение - расстояние вверх от текста. третье числовое значение - радиус не резкости тени текста.	`<h1 style="text-shadow: blue 5px 5px 3px;">Текст</h1>` Если ваш браузер поддерживает данный эффект, вы в полной мере сможете его оценить в ниже приведенной записи. CSS
letter-spacing - Задает интервал между символами.	none - Обычный интервал для используемого шрифта (значение по умолчанию). Можно задать любой стандартный интервал.	p { letter-spacing: 3px }
word-spacing - Изменяет интервал между словами.	none - Обычный интервал для используемого шрифта (значение по умолчанию). Длина соответствующая стандарту.	p{word-spacing: 5px}

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

Первое правило применяем для первого абзаца текста, в котором указываем, что текст должен быть прижат к левому краю text-align: left; отступ первой строки должен быть 10 пикселей text-indent: 10px; также задаем свойство шрифта font-family: "Times New Roman", Times, serif; font-size: 12pt; color: gray;

Второе правило задаем для второго абзаца, он должен быть выровнен по обеим сторонам равномерно text-align: justify; и первая строка будет отступать на 20 пикселей text-indent: 20px; и аналогично первому абзацу задаем свойство шрифта font-family: "Times New Roman", Times, serif; font-size: 12pt; color: gray;

Третье правило задаем для заголовка страницы, в котором укажем, что заголовок должен располагаться по центру text-align: center; и для того чтобы заголовок был выделен другим шрифтом и цветом, просто необходимо к нему применить свойство шрифта (о свойствах шрифта мы поговорим немного позже) font-family: Arial, Helvetica, sans-serif; font-style: italic; color: orange; применив данное правило, заголовок страницы будет иметь шрифт Arial, курсивного вида font-style: italic; и оранжевый цвет color: orange;

Четвертое правило применяем для всех ссылок на странице, в котором скажем браузеру, что все ссылки не должны быть подчеркнуты TEXT-DECORATION: none; и должны быть окрашены в синий цвет COLOR: blue;.

Пятым правилом указываем браузеру, как нужно отображать подпись автора в конце текста, то-есть прижать его к правому краю text-align: right;, и применив свойства шрифта сделать подпись жирного начертания font-weight: bolder;, курсивного вида font-style: italic;, шрифтом Arial размером 12 пунктов font-family: Arial, Helvetica, sans-serif; font-size: 12pt; черного цвета color: black;. Объединяем теперь все правила в одну запись и получаем некую таблицу стилей:

.Top1 { font-family: "Times New Roman", Times, serif; font-size: 12pt; color: gray; text-align: left; text-indent: 10px; } .Top2 { font-family: "Times New Roman", Times, serif; font-size: 12pt; color: gray; text-indent: 20px; text-align: justify; } .Top3 { font-family: Arial, Helvetica, sans-serif; font-style: italic; color: orange; text-align: center; } .Top4 A { FONT-WEIGHT: normal; COLOR: blue; TEXT-DECORATION: none; } .Top5 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bolder; text-align: right; color: black; }

Далее вставляем нашу таблицу стиля непосредственно в страницу и связываем созданные правила при помощи селектора класса. На примере это будет выглядеть следующим образом:

<html>
<head>
<title>Моя первая страничка с использованием CSS</title>
<style></style>
</head>
<body>
<h2 CLASS="Top3">Моя первая страничка с использованием CSS</h2>
<table border="0" width="100%" align="center" cellpadding="5">
<tr>
<td colspan="3" align="center">
<table width="100%" border="0" bgcolor="#CCCC99" CLASS="Top4">
<tr>
<td><a href="#">меню 1</a></td>
<td><a href="#">меню 2</a></td>
<td><a href="#">меню 3</a></td>
<td><a href="#">меню 4</a></td>
<td><a href="#">меню 5</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">
<table border="0" width="160" CLASS="Top4">
<tr>
<td><a href="#">подменю 1</a></td>
</tr>
<tr>
<td><a href="#">подменю 2</a></td>
</tr>
<tr>
<td><a href="#">подменю 3</a></td>
</tr>
<tr>
<td><a href="#">подменю 4</a></td>
</tr>
<tr>
<td><a href="#">подменю 5</a></td>
</tr>
</table>
</td>
<td rowspan="2">
<h2 CLASS="Top7">Название статьи</h2>
<div CLASS="Top1">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность.
</div>
<div CLASS="Top2">
Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
</div>
<div CLASS="Top5">Борис АКУНИН</div>
<hr size="1" noshade color="#000000" width="350">
</td>
<td bgcolor="#CCCCFF">сюда можно поместить какие-нибудь новости
<br>
или рекламу</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCFF"><img src="css_selektor_looc1.files/1.jpg" width="180" height="135"></td>
<td align="center" bgcolor="#CCCCFF"><img src="css_selektor_looc1.files/2.jpg" width="180" height="135"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFCCCC"><font color="#666666">Здесь можно разместить контактную информацию, баннеры, счетчики и т.д</font></td>
</tr>
</table>
</body>
</html> посмотреть

Хочу обратить Ваше внимание, что селектор Тор4 в примере был применен для таблиц в целом <table CLASS="Top4">. Таким образом правила заданные для таблицы в целом будет распространяться на все, содержимое вложенное в эту таблицу.

Вернуться на предыдущую страницу	Перейти к следующей странице

2009 - 2012г.

andron09_73@mail.ru

www.rabota-33.ru

Таблицы стилей

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

CSS