Урок 3. CSS текст, примеры форматирывания текста

CSS текст и примеры его форматирования

Атрибут со значением	Полученный результат
`font-family:Tahoma, sans-serif`	CSS текст – форматирование
`font-size:15px`	CSS текст – форматирование
`font-style:italic`	CSS текст – форматирование
`font-variant:small-caps`	CSS текст – форматирование
`font-weight:bold`	CSS текст – форматирование
`letter-spacing:2px`	CSS текст – форматирование
`word-spacing:7px`	CSS текст – форматирование
`color:#cc0033`	CSS текст – форматирование
`text-indent:40px`	CSS текст – форматирование
`text-decoration:underline`	CSS текст – форматирование
`text-decoration:overline`	CSS текст – форматирование
`text-decoration:line-through`	CSS текст – форматирование
`text-transform:capitalize`	CSS текст – форматирование
`text-transform:lowercase`	CSS текст – форматирование
`text-transform:uppercase`	CSS текст – форматирование
`vertical-align:super`	CSS текст – форматирование text
`vertical-align:sub`	CSS текст – форматирование text

Атрибуты и значения

font-family:Tahoma, sans-serif – определяет вид и семейство шрифта.
font-size:13px – устанавливает размер шрифта в пикселях или процентах.
font-style:italic – преобразует текст в наклонный (еще его называю курсивным).
font-variant:small-caps – капитель – большие буквы маленького размера.
font-weight:bold – определяет жирный текст.
letter-spacing:2px – дополнительное расстояние между символами в пикселях.
word-spacing:7px – создает дополнительное расстояние между словами в пикселях.
color:#cc0033 – определяет цвет текста.
text-indent:40px – устанавливает отступ строки в пикселях или процентах.
text-decoration:underline – выводит подчеркнутый текст.
text-decoration:overline – выводит надчеркнутый текст.
text-decoration:line-through – выводит перечеркнутый текст.
text-transform:capitalize – отображает каждое слово с заглавной буквы.
text-transform:lowercase – преобразует все буквы в маленькие.
text-transform:uppercase – преобразует все буквы в заглавные.
vertical-align:super – отображает текст в верхнем индексе.
vertical-align:sub – отображает текст в нижнем индексе.

Пример по форматированию текста:

                
                <title>Пример форматирования текста</title>

                 
                         
 <style type="text/css">
  
                 body {
  
					 color:#000066
  
				 }
  
				.primer {
  
				text-decoration:underline;
  
				text-align:right;
  
				letter-spacing:5px
  
                 }
 
                 #example {
 
					text-indent:50px;
 
					word-spacing:20px;

                    color:Green
 
				}
  
				 </style>

                 </head>

                 <body>

                 
                 <div class="primer">Подчеркнутый текст, с расстоянием между символами в пять пикселей, выровнен по правому краю,
                  темно-синий</div>
  
                  
                 <div>Текст темно-синего цвета</div>

                 <p id="example">Отступ строки слева, дополнительное расстояние между словами в 20 пикселей, текст зеленый</p>
                 
  
                 </body>

Результат: форматируем текст при помощи CSS

Селектору body задан color:#000066
– это значит, что весь текст страницы будет темно-синий, за исключением параграфа с идентификатором id="example", где цвет определен как зеленый. Атрибут со значением text-decoration:underline выводит подчеркнутый текст. letter-spacing:5px устанавливает пространство между символами в 5 пикселей. text-indent:50px определяет отступ строки слева величиной в 50 пикселей. Атрибут word-spacing:20px определяет дополнительное расстояние между словами.

Дата публикации: Октябрь 2009 | Обновление: Май 2012

Урок 2. CSS шрифт и его свойства CSS текст Урок 4. Подробно о тексте

Сохранить в сервисы и закладки