Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS форматиране на текст

CSS текст

Цвят на текста


Свойството color се използва за задаване цвета на текста. Цвета може да се зададе по име, rgb или шестнадесетична стойност, както и за фоновия цвят по-горе. Общият цвят за текста на страницата се задава в селектора body.


Изравняване на текста


Хоризонталното изравняване на текста се задава с помощта на свойството text-align. Текста може да се центрира със стойност center, да се изравни в ляво left или дясно right, както и да се изравни и от двете страни justify.


Декориране на текста


Свойството text-decoration се използва за задаване или премахване на декорация на текста. Най често това свойство се използва за да се отстрани подчертаването на линковете, чието наименование се използва в сайта.Други декорации на текста са с черта от горе {text-decoration:overline;} , подчертан {text-decoration:line-through;}, зачертан {text-decoration:underline;} и мигащ {text-decoration:blink;} . Последната декорация не се поддържа от браузърите IE, Chrome и Safari.


Преобразуване на текста


Свойството text-transform се използва за определяне вида на символите в текста - главни uppercase или малки lowercase.


Нов ред


Нов ред се задава чрез свойството text-indent. По-долу е даден пример с всички изброени по-горе свойства за форматиране на текст (виж примера в браузъра):


<!DOCTYPE html>
  <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>CSS текст</title>
	 <style type="text/css">
         /*Цвят на текста*/
	   body {color: DarkSlateGray;}
	   p {color:#191970;}
	   p.add {color:rgb(0,0,255);}
	   h3 {color:DarkRed;}
         /*Изравняване на текста*/
	   h1 {text-align:center;}
	   p.date {text-align:right;}
	   p.just {text-align:justify;}
         /*Декориране на текста*/
	   a {text-decoration:none;}
         /*Преобразуване на текста*/
	   p.upp {text-transform:uppercase;}
	   p.low {text-transform:lowercase;}
	   p.cap {text-transform:capitalize;}
	     /*Нов ред*/
	   p {text-indent:50px;}
	 </style>
  </head>
  <body>
	   <h3>Цвят на текста</h3>
	   <h2>Това заглавие е в основния тъмно синьо-зелен цвят на страницата</h2>
	   <p>Това е обикновен абзац в зададения за елемента <p> тъмно син цвят. </p>
	   <p class="add">Синият цвят на текста в този абзац е зададен с class="add".</p>
	   <h3>Изравняване на текста</h3>
	   <h1>Изравняване в центъра със CSS форматиране </h1>
	   <p class="date">20 януари 2010 година</p>
	   <p class="just">Следва текст изравнен от двете страни с class="just"</p>
	   <h3>Декориране на текста</h3>
	   <p>Линка не е подчертан както обикновено: 
	   <a href="http://dimarini.net" target="_blank">CSS - кратко и ясно</a></p>
	   <h3> Преобразуване на текста </h3>
	   <p class="upp">В трите реда е записан един и същ текст. Тук се преобразува с class="upp".</p>
	   <p class="low"> В трите реда е записан един и същ текст. Тук се преобразува с class=" low ".</p>
	   <p class="cap"> В трите реда е записан един и същ текст. Тук се преобразува с class=" cap ".</p>
	   <h3> Нов ред </h3>
	   <p>Новият ред е зададен с помощта на CSS форматиране за елемента <p></p>
  </body>
</html>

Вертикално изравняване


Свойствата, които позваляват да се осъществи вертикално изравняване на символи и изображения в текста baseline; sub; super; top; text-top; middle; bottom и text-bottom са показани в долния пример (виж примера в браузъра):


<!DOCTYPE html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS текст</title>
    <style type="text/css">
    /*Изравняване на изображение в текст*/
      img.top {vertical-align:text-top;}
      img.sup {vertical-align:super;}
      img.mid {vertical-align:middle;}
      img.bas {vertical-align:baseline;}
    /*Степенен показател и индекс*/
      sp {vertical-align:super;}
      sb {vertical-align:sub;}
    /*Определяне рязстоянието между символите*/
      h1 {letter-spacing:5px;line-height:200%;word-spacing:30px;}
    /*Показване на форматиран в редактора текст*/
      p.adj {white-space:pre;}
    </style>
 </head>
 <body>
    <p>Това изображение <img src="/subsidiary/sign_mini.png" alt="Внимание" width="21" height="16" />
    е в абзац с начално вертикално изравняване.</p> 
    <p>Това изображение <img class="sup" src="/subsidiary/sign_mini.png" alt="Внимание" width="21" height="16" />
    е с вертикално изравняване в горната част на текста.</p> 
    <p>Това изображение <img class="mid" src="/subsidiary/sign_mini.png" alt="Внимание" width="21" height="16" />
    е с изравняване в средата на текста.</p>
    <p>Това изображение <img class="bas" src="/subsidiary/sign_mini.png" alt="Внимание" width="21" height="16" />
    е с изравняване по текста.</p>
    <h2> СИМВОЛ<sp>степен</sp><br />
    СИМВОЛ<sb>индекс</sb></h2>
    <h1>Този текст е с разстояние <br />между символите 5 пиксела, 
    <br />между думите 30 пиксела<br />
   и 200 % между редовете.</h1>
    <p class="adj">
      Този текст се показва по начина по който е записан в редактора!
      Този текст се показва по начина по който е записан в редактора!
      Този текст се показва по начина по който е записан в редактора!
      Този текст се показва по начина по който е записан в редактора!
    </p>
 </body>
</html> 

CSS шрифтове

Различните видове шрифтове в текста се задават със свойството font-family. В това свойство се включват няколко последователни имена на шрифтове. Когато браузъра не поддържа първият от зададените преминава към следващия. Шрифтове с обща употреба са Serif, Sans-serif и Monospace. Започнете с шрифта който желаете и завършете с шрифтовете за обща употреба за да може браузъра да избере заместител. Внимание: Когато наименованието на шрифта е с повече от една дума трябава да се поставя в кавички - например "Times New Roman". Свойството font-syle обикновено се използва за задаване на наклонен текст. Основните две стойности на това свойства са normal и italic. Размерът на символите се задава със свойството font-size. Обаче, с това форматиране не трябва да се представят абзаците като заглавия или заглавията като абзаци. Трябва да се използват винаги таговете <h1> до <h6> за заглавията и тага <p> за абзаци. Внимание Ако не се зададе размера на символите от браузъра се използва размер 16 px = 1 em. Когато се използват пиксели текста може да се настройва в браузърите Firefox, Chrome и Safari но не и в Internet Explorer. За да се избегне този проблем вместо px се използват em (em = px/16), а началния размер на символите се задава в % в сегмента body. Този начин на оразмеряване се препоръчва и от W3C, което позволява настройването на текста във всички браузъри. Освен това могат да се използват стойностите xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. Със свойството font-variant се определя дали текста да е написан с умалени главни букви. Стойностите на това свойство са normal и small-caps. Удебеляването на символите се определя от свойството font-weight. Стойностите, които могат да се присвояват са normal, bold, bolder, lighter и от 100 до 900 на цели стотици (виж примера в браузъра):


<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS шрифтове</title>
    <style type="text/css">
    /*Задаване на основен шрифт "Times New Roman"*/
      p.times{font-family:"Times New Roman",Times,serif;}
    /*Задаване на основен шрифт "Arial"*/
      p.arial{font-family:Arial,Helvetica,sans-serif;}
    /*Задаване на наклонен текст*/
      p.italic {font-style:italic;}
    /*Задаване размера на символите*/
      body {font-size:100%;}
      h1 {font-size:2.5em;}
      ps {font-size:1.25em;}
      pl {font-size:xx-large;}
    /*Задаване на умалени главни букви*/
      p.small {font-variant:small-caps;}
    /*Удебеляване на текста*/
      p.thick {font-weight:bolder;}
    </style>
 </head>
 <body>
    <p class="times">Този текст е изписан с шрифт Times New Roman.</p>
    <p class="ariel">Този текст е изписан с шрифт Arial.</p>
    <p class="italic">Този текст е изписан с наклонен шрифт.</p>
    <h1>Заглавие с размер на символите 40 пиксела</h1>
    <ps>Текста в този абзац е с размер на символите 20 пиксела.</ps><br />
    <pl>Текста в този абзац е с размер на символите xx-large.</pl>
    <p class="small">Този текст е преформатиран в малки главни букви.</p>
    <p class="thick">Този текст е с удебелени букви.</p>
 </body>
</html>