Стилизация текста

Оцените материал
(0 голосов)

Здравствуйте! Продолжаем разбираться с CSS стилями. Мы уже разобралтсь со стилями шрифтов и высотой шрифта, а сегодня мы разберем стили для текста.

 

text-transform

Свойство text-transform изменяет регистр текста. Оно может принимать следующие значения:

  • capitalize: делает первую букву слова заглавной

  • uppercase: все слово переводится в верхний регистр

  • lowercase: все слово переводится в нижний регистр

  • none: регистр символов слова никак не изменяется

 

 Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            p.lowercase {text-transform: lowercase;}
            p.uppercase {text-transform: uppercase;}
            p.capitalize { text-transform: capitalize;}
        </style>
    </head>
    <body>
    <div>
        <p class="capitalize">Текст использует значение capitalize</p>
        <p class="lowercase">Текст использует значение lowercase</p>
        <p class="uppercase">Текст использует значение uppercase</p>
    </div>
    </body>
</html>

Просмотреть  пример

 Свойство text-decoration

Свойство text-decoration позволяет добавить к тексту некоторые дополнительные эффекты. Это свойство может принимать следующие значения:

  • underline: подчеркивает текст

  • overline: надчеркивает текст, проводит верхнюю линию

  • line-through: зачеркивает текст

  • none: к тексту не применяется декорирование

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            p.under {
                text-decoration: underline;
            }
            p.over {
                text-decoration: overline;
            }
            p.line {
                text-decoration: line-through;
            }
            p.mixed {
                text-decoration: underline line-through;
            }
            a.none {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
    <div>
        <p class="under">Это подчеркнутый текст.</p>
        <p class="over">Это надчеркнутый текст</p>
        <p class="line">Это зачеркнутый текст</p>
        <p class="mixed">Это подчеркнутый и зачеркнутый текст</p>
        <p>Не подчеркнутая <a href="/index.php" class="none">ссылка<a></p>
    </div>
    </body>
</html>

Просмотреть  пример

При необходимости мы можем комбинировать значения. Так, в предпоследнем случае применялся стиль:

p.mixed { text-decoration: underline line-through; }

Межсимвольный интервал

Два свойства CSS позволяют управлять интервалом между символами и словами текста. Для межсимвольного интервала применяется атрибут letter-spacing, а для интервала между словами - word-spacing:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            p.smallLetterSpace {
                letter-spacing: -1px;
            }
            p.bigLetterSpace {
                letter-spacing: 1px;
            }
            p.smallWordSpace{
                word-spacing: -1px;
            }
            p.bidWordSpace{
                word-spacing: 1px;
            }
        </style>
    </head>
    <body>
    <div>
        <h3>Обычный текст</h3>
        <p>Над ним не было ничего уже, кроме неба...</p>
        <h3>letter-spacing: -1px;</h3>
        <p class="smallLetterSpace">Над ним не было ничего уже, кроме неба...</p>
        <h3>letter-spacing: 1px;</h3>
        <p class="bigLetterSpace">Над ним не было ничего уже, кроме неба...</p>
        <h3>word-spacing: -1px</h3>
        <p class="smallWordSpace">Над ним не было ничего уже, кроме неба...</p>
        <h3>word-spacing: 1px</h3>
        <p class="bigWordSpace">Над ним не было ничего уже, кроме неба...</p>
    </div>
    </body>
</html>

Просмотреть  пример

text-shadow

С помощью свойства text-shadow можно создать тени для текста. Для этого свойства необходимо задать четыре значения: горизонтальное смещение тени относительно текста, вертикальное смещение тени относительно текста, степень размытости тени и цвет отбрасываемой тени. Например:

h1{
    text-shadow: 5px 4px 3px #999;
}

В данном случае горизонтальное смещение тени относительно букв составляет 5 пикселей, а вертикальное смещение вниз - 4 пикселя. Степень размытости - 3 пикселя, и для тени используется цвет #999.

Если нам надо было бы создать горизонтальное смещение влево, а не в право, как умолчанию, то в этом случае надо было бы использовать отрицательное значение. Аналогично для создания вертикального смещения вверх также надо использовать отрицательное значение. Например:

h1{
    text-shadow: -5px -4px 3px #999;
}


Прочитано 1510 раз Последнее изменение Суббота, 02 июля 2016 15:08
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+