Урок №6. CSS – текст.

Вот и пришло время поговорить о возможностях форматировать текст в CSS.

В данном уроке мы рассмотрим такие свойства:

Text-decoration (оформление текста)
Text-align (выравнивание текста)
Text-indent (абзацные отступы в тексте)
Text-transform (видоизменение текста)
Text-shadow (тень в тексте)
Интервалы

 


 

В этом уроке нет ничего сложного, Вы увидите сходство между CSS свойствами и HTML тегами.

Несмотря на название, свойство text-decoration не отвечает за цвет или шрифт. Оно несет ответственность за оформление текста, а конкретно будет ли текст подчёркнутым или зачеркнутым и т.п.

Возможны значения:

         None – у текст нет оформления (стандартный). Используется по умолчанию.

          Underline – текст подчеркнут.

          Overline – линия находится над текстом, текст надчеркнут.

          Line-through – текст зачеркнутый.

          Blink – текст мигает(на данный момент это свойство не поддерживается в CSS).

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

Пример:

a{

  text-decoration:none;

}

a:hover{

  text-decoration:line-through;

}

 

Результат:

Пример свойства text-decoration

 

Из примера видно, что все ссылки на странице будут отображаться без линии подчеркивания, но в момент наведения мышкой на ссылку, текст зачеркнут.

 


 

Text-align (выравнивание текста)

Свойство text-align отвечает за выравнивание текст на странице.

Значения свойства:

          Left – выравнивание текста по левому краю. Используется по умолчанию.

          Center – выравнивание текста по центру.

          Right – выравнивание текста по правому краю.

          Justify – текст на странице распределяется равномерно (по ширине).

Пример:

p{

  text-align:right;

}

 

Пример свойства text-align

 


 

Text-indent (абзацные отступы в тексте)

Свойство text-indent отвечает за отступ перед началом каждого нового параграфа. Абзацные отступы задаются двумя способами, с помощью единиц измерения (px, em) и процентов (%).

Возьмем обычный документ с двумя параграфами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Заголовок документа</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p>Текст в параграфе, где первая строка будет с отступом.</p>

       <p id="zr">Текст в параграфе, где первая строка будет висячей.</p>

     </body>

   </html>

 

В таблицу стилей добавим свойства:

p{

  text-indent:1.4em;

}

p#zr{

  text-indent:-1.4em;

}

 

Результат:

Пример свойства text-indent

 

Как видно из примера, возможны даже минусовые значения. В таком случае параграф, к которому применен CSS идентификатор, будет «висеть в воздухе» (смещена в левую сторону), а уже следующие(без идентификатора) будут смещены на указанный промежуток в правую сторону.

В качестве указания промежутка можно использовать и пиксели, но единица em практичнее, с тех причин, что отступ будет пропорционален размеру шрифта, а не точкам на экране.

 


 

Text-transform (видоизменение текста)

Свойство text-transform отвечает за смену регистра букв. Вы уже сталкивались со сменой регистра в предыдущем уроке, но не так глобально.

Возможны значения:

          Capitalize – при данном значении происходит замена каждой первой буквы слова на заглавную.

          Uppercase – при данном значении происходит замена всех букв на заглавные.

          Lowercase – при данном значении все буквы заменяются на строчные.

          None – при данном значении никаких изменений не происходит. Используется по умолчанию.

На примере посмотрим на 3 значения:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Заголовок документа</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <p id="aa">Текст в параграфе со значением capitalize.</p>

       <p id="ab">Текст в параграфе со значением uppercase.</p>

       <p id="ac">Текст в параграфе со значением lowercase.</p>

     </body>

   </html>

 

В таблице стилей запишем идентификатор для каждого абзаца со своим значением свойства text-transform:

p#aa{

  text-transform:capitalize;

}

p#ab{

  text-transform:uppercase;

}

p#ac{

  text-transform:lowercase;

}

 

Результат:

Пример свойства text-transform

 


 

Text-shadow (тень в тексте)

text-shadow — добавляет тень к тексту на странице. А именно добаляет размер тени, направление и цвет тени.

Данное свойство преобразит вашу страничку в положительную сторону.

Пример:

h1{ text-shadow:4px 3px 2px blue; }

 

Немного о том, что там написано:

Первое значение (4px) – отвечает за смещение тени относительно текста по горизонтали, значение может быть отрицательным. Положительное значение смещает тень вправо, отрицательное значение в свою очередь наоборот – влево.

Второе значение (3px) – отвечает за смещение тени относительно текста по вертикали, значение может быть отрицательным. Положительное значение смещает тень вниз, отрицательное соответственно вверх.

Третье значение (2px) – отвечает за размытость тени, указывать это значение не обязательно.

Четвертое значение (blue) – отвечает за цвет тени. Можно указывать словами, шестнадцатеричными кодами, десятеричными кодами цвета в модели RGB. Если цвет не указывать, в качестве тени будет использован цвет шрифта.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Заголовок документа</title>

       <link rel="stylesheet" type="text/css" href="style.css">

     </head>

     <body>

       <h1 id="aa">Заголовок первого уровня с размытой тенью!</h1>

       <p id="ab">Параграф с тенью без указания цвета.</p>

     </body>

   </html>

 

В таблицу стилей запишем следующее:

h1#aa{

  text-shadow:6px 5px 3px blue;

}

p#ab{

  text-shadow:3px 2px;

}

 

Результат:

Пример свойства text-shadow

 

Экспериментируйте.

 


 

Интервалы

С помощью интервалов в CSS можно изменять расстояние между буквами, словами, строчками.

Возможны 3 свойства:

    Word-spacing – регулирует интервал между словами.

    Letter-spacing – регулирует интервал между буквами.

    Line-spacing – регулирует интервал между строками.

Значение этих свойств можно задавать с помощью единиц измерения и с помощью процентов.

Пример:

p#aa{

  word-spacing:15px;

}

p#ab{

  letter-spacing:3px;

}

 

Результат:

Пример свойств Word-spacing, Letter-spacing

 

Вот мы и рассмотрели с вами свойства текста в CSS. С помощью знаний, которые вы получили за 6 уроков изучения CSS, попробуйте сделать одну страничку сайта, в которой будут содержаться все правила. Это поможет вам закрепить знания.

До встречи на следующем уроке. Удачи.

 


 

Закрыть меню