Стильові властивості тексту в CSS

Категорії статей: CSS ; 16.04.2010

Познайомимося в цій статті з властивостями, що визначають зовнішній вигляд тексту на веб-сторінці. Почнемо з властивості text-align, яке управляє горизонтальним вирівнюванням тексту (а також і картинками) в елементі HTML-документа. Ця властивість може приймати наступні значения

  • left - вирівнює текст по лівому краю;
  • center- вирівнює текст по центру;
  • right - вирівнює текст по правому краю;
  • justify - вирівнює вміст абзацу по обох краях.
Наприклад

Код
<style type="text/css">
p { text-align:justify; }
</style>
...
<p> Текст абзацу </p>
<div style=" text-align:center; ">Текст блока</div>


Э один момент на якому варто зупинитися. За допомогою text-align браузер Internet Explorer управляє вирівнюванням не лише тексту і малюнків, але і блоків DIV та таблиць <table>, І це не відповідає правилам встановленим консорціумом W3C. На відміну від браузеру Internet Explorer, браузери Opera і Mozilla Firefox не порушують ці правила, що потрібно враховувати при створенні сайтів, які повинні однаково відображуватися у всіх браузерах.

Теперь перейдемо до розгляду дуже цікавої і потрібної властивості text-decoration, яке управляє спеціальним оформленням тексту і може приймати наступні значения

  • none - до тексту не застосовується ніяких спеціальних видів оформлення;
  • underline - всі рядки тексту підкреслюються;
  • overline - над кожним рядком тексту розташовується риска;
  • line-through - закреслює всі рядки тексту;
  • blink - текст мерехтить (стає то видимим, то невидимим), дане значення підтримується не всіма браузерами.
Властивість text-decoration найчастіше використовують для посилань - роблять текст посилання підкресленим або прибирають підкреслення залежно від поточного стану посилання. Наприклад

Код
...
a:link, a:visited { text-decoration:underline; }
a:hover { text-decoration:none; }
...

<a href="http://www.linedmk.com">www.linedmk.com</a>

Стилева властивість text-indent визначає абзацний відступ. Він може бути заданий в будь-яких одиницях, у тому числі у відсотках від ширини елементу. Наприклад

Код
p { text-indent: 2 em; }

Але потрібно мати на увазі, що дія властивості text-indent поширюються на перший рядок елементів p і div. Після тега <br> текст не відображуватиме з абзацним відступом.
Властивість letter-spacing визначає відстань між символами в тексті. Може набувати значень: normal (задає стандартну відстань для поточного шрифту) або значення у вигляді абсолютної величини, яке буде додано до стандартної відстані. Наприклад

Код
p { letter-spacing: 2 em; }

Властивість word-spacing визначає відстань між словами. Може набувати або значення normal (відображуватиме текст із стандартною відстанню між словами), або може бути задано абсолютною величиною, що додається до стандартної відстані. Наприклад

Код
div { word-spacing:10 px; }

Властивість white-space визначає, чи буде текст автоматично переноситися на нові рядки, якщо він не поміщається по ширині елементу. Властивість white-space може приймати наступні значения

  • normal - є значенням по замовчуванню, задає автоматичне перенесення довгих рядків, також переход на новий рядок можна здійснити тегом <br>;
  • nowrap - забороняє автоматичне перенесення рядків, і переход на новий рядок можна здійснити тегом <br>;
  • pre - відображуватиме текст, так, як він набраний в редакторові(всі пропуски і переходи рядків враховуються), але також враховується і тег <br> (підтримується не всіма браузерами).
Свойство text-transform управляє заголовними буквами в тексті елементу HTML -документа. Може приймати наступні значения
  • none - значення по замовчуванню, не змінює регістр символів;
  • capitalize - відображуватиме першу букву кожного слова тексту у верхньому регістрі;
  • uppercase - відображуватиме всі символи тексту у верхньому регістрі;
  • lowercase - відображуватиме всі символи тексту в нижньому регістрі.

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.54MB | 0.03Sec ad Google