Без заголовка

Среда, 18 Января 2012 г. 17:13 + в цитатник

Цитата сообщения Net-man

Прочитать целиком В свой цитатник или сообщество!

Css: Урок 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>CSS текст – примеры форматирования текста</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 определяет дополнительное расстояние между словами.

ab-w.net

Рубрики:

html уроки/css