Спонсоры

спорт телепрограмма . ищу няню петербург

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

К свойствам текста можно отнести следующие инструменты 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><!--
.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;
}

--></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 - 2018г. andron09_73@mail.ru