Css: Урок 3. CSS текст | Форматируем текст

Понедельник, 06 Декабря 2010 г. 18:04 + в цитатник

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

Рубрики:

Полезное
Уроки CSS

Метки: css уроки css

Процитировано 9 раз

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

BARGUZIN обратиться по имени Понедельник, 06 Декабря 2010 г. 20:46 (ссылка)

Спасибо !

Ответить С цитатой В цитатник

Net-man обратиться по имени Понедельник, 06 Декабря 2010 г. 21:49 (ссылка)

Не за что! Рад всегда видеть!

Ответить С цитатой В цитатник

Prettyke обратиться по имени Среда, 08 Декабря 2010 г. 00:05 (ссылка)

Спасибо за уроки!

Ответить С цитатой В цитатник

Среда, 08 Декабря 2010 г. 12:52ссылка

Net-man

Prettyke,, не за что. С css удобно, когда нужно создать несколько страниц по одной схеме - создаёшь css-документ, прописываешь там все нужные параметры и присоединяешь каждый html-документ к этому файлу css.

Ответить С цитатой В цитатник Обратиться по имени