Спонсоры

тюнинг ваз 2102 фото . Гарантия качественного нанесения, логотип сувенирные ручки. . Металлоискатели в Москве металлоискатели Garrett, покупка металлоискателей kellyco.ru

Свойства шрифта

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

В таблице приведены основные инструменты управления шрифтами при помощи SCC:

Синтаксис Значения Пример написания

font-family
Определяет семейства шрифтов, используемого в тексте. Может быть задано несколько семейств, которые должны быть отделены друг от друга запятыми. Приоритет шрифтов браузер определит в порядке написания списка шрифтов. 		Имя семейства шрифта, применяемое для вывода текста.
Имена шрифтов, состоящие из нескольких слов, должны заключаться в кавычки. 		p {"Times New Roman", Arial, Helvetica, sans-serif;}

font-style
Укажет браузеру как надо показать шрифт, курсивом или с наклоном, то-есть определяет начертания шрифта. 		italic - курсивное начертание.
oblique - наклонное начертание. Это начертание экранного шрифта. И в отличие от курсива имеет меньший наклон.
p{font-style: italic; }

font-variant
Данное свойство определяет, вывести шрифт в виде малых прописных букв или нет. 		normal - обычное начертание шрифта (значение по умолчанию).
small-caps - выводит шрифт в виде малых прописных букв. 		p {font-variant: small-caps }
font-weight
Задает относительную жирность шрифта. 		normal - обычное начертание (значение по умолчанию).
bold - полужирное начертание.
bolder - жирный шрифт.
lighter - светлый шрифт. Данный инструмент просто не заменим, в случае когда требуется легкий и простой внешний вид страницы.
100-900 - числовое значение с шагом 100, указывающее толщину шрифта. 100 соответствует светлой толщине (lighter), 400-normal, 700- bold, 900- bolder. 		p {font-weight: bold;}

font-stretch
Определяет ширину шрифта. 		normal - обычная ширина (значение по умолчанию)
wider- увеличение текущей ширины.
narrower - уменьшает текущую ширину на единицу.
ultra-condensed - наименьшее значение ширины.
extra-condensed - значение большее, чем предыдущее.
condensed - значение большее, чем предыдущее.
semi-condensed - значение большее, чем предыдущее.
semi-expanded - значение большее, чем при обычной толщине.
expanded - значение большее, чем предыдущее.
extra-expanded - значение большее, чем предыдущее.
ultra-expanded - максимальное значение ширины. 		p {font-stretch: semi-condensed;}
font-size
Определяет высоту символов шрифта. 		Для выражения абсолютной высоты шрифта используются ключевые слова:
xx-small - крайне малый
small - малый
medium - средний (значение по умолчанию)
large - большой
x-large - очень большой
xx-large - крайне большой
Для выражения относительного размера используются ключевые слова:
larger - меньше
smaller - больше
Любое соответствующее стандарту числовое значение. Отрицательное значение не допускается. Любое соответствующее стандарту процентное значение. 		p{font-size: x-large;}
или
p{font-size: 12pt;}
font-size-adjust
Определяет соотношение ширины и высоты символов шрифта. Это дает возможность регулировать изменения высоты текста. 		none - значение по умолчанию.
любое соответствующее стандартам числовое значение, представляющее соотношение высоты и ширины символов. 		p {font-size-adjust: 0.30}
font
Свойство для установки сразу всех параметров шрифта. В случае если какие-то значения не были прописаны, то браузер будет использовать их значения по умолчанию. 		font-style - начертание.
font-variant - малые прописные буквы.
font-weight - толщина.
font-size - высота.
line-height - межстрочный интервал.
font-family - семейство шрифтов. 		p {font: bold; "Times New Roman", Arial, Helvetica, sans-serif; oblique 12pt;}

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

Для селектора .Top1 были созданы следующие правила:
Отображать текст шрифтом "Times New Roman" в случае отсутствия данного шрифта отображать шрифтом Times или семейством шрифта serif;
Для селектора .Top3 кроме отображения шрифтов было применено правило font-style: italic; отображать шрифт наклонным начертанием.
А для селектора .Top5 отображать наклонным и жирным начертанием
font-style: italic; font-weight: bolder;
Кроме тех правил которые уже присутствовали на странице можно добавить еще одно или несколько правил, например сделать шрифт для надписи (сюда можно поместить какие-нибудь новости или рекламу) светлый и наклонного начертания, font-weight: lighter; font-style: italic; и прописать для него шрифт Arial, а на случай отсутствия такого шрифта у посетителя страницы еще пропишем Helvetica, sans-serif. Соединим все в одну запись и получим следующее; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; font-style: italic; text-align: center; Данную запись помещаем на страницу для селектора .Top6 и смотрим, что у нас получилось.

  <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;
}
.Top6 {
font-family: Arial, Helvetica, sans-serif; font-weight: lighter; font-style: italic; text-align: center;
}
--></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"> <div CLASS="Top6">сюда можно поместить какие-нибудь новости</div>
<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>    посмотреть


Вернуться на предыдущую страницу  
2009 - 2012г. andron09_73@mail.ru