Мобильный LiveInternet CSS текст | Форматируем текст

Авторизация

Дневник Silvestr Лента друзей - Дневник - Полная версия

CSS текст | Форматируем текст 09-12-2010 16:29 к комментариям - к полной версии - понравилось!

Это цитата сообщения 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

вверх^ к полной версии понравилось! в evernote

Комментарии (12):

MIGDA 09-12-2010-19:41 удалить

[показать] Спасибо!!!!

Обратиться - Ответить - К полной версии

Silvestr 09-12-2010-19:45 удалить

Ответ на комментарий MIGDA #

Обратиться - Ответить - К полной версии

pro100sergacheva 09-12-2010-23:55 удалить

Спасибо! Ты - умелец! )))

[699x537]

Обратиться - Ответить - К полной версии

Silvestr 10-12-2010-00:40 удалить

Ответ на комментарий pro100sergacheva # А Вы - щедрый читатель)))

Обратиться - Ответить - К полной версии

pro100sergacheva 10-12-2010-00:53 удалить

Ответ на комментарий Silvestr # Спасибо! Я люблю читать все сообщения, но не успеваю, конечно, всё прочесть и прокомментировать. А люди старались, писали... )))