WEB дизайн- Учебен курс

Работа с изображения
Стилови таблици
Форми за връзка с клиента
Преподавател: Евгения Христова
css

Употреба на стилови дефиниции

 Използуването на набори от стилове е съвременният начин да се придаде добър облик на даден сайт. Според мястото на прилагане на стиловите дефиниции се делят на три групи:
  1. В отварящия таг на даден елемент, намиращ се в тялото на документа.
    Например:
    <p style="font-family: verdana, arial; color: #000000;">
  2. В частта head на документа.
    Например:
    p{
    font-family: verdana, arial;
    color: #000000;
    }
  3. В отделен файл с разширение .css.

Първият пример се прилага само когато има нужда от по-различно оформление на дадения елемент. Разбира се, нищо не пречи всеки елемент да бъде стилизиран поотделно, но това затруднява разчитането на кода, а при осъвременяването на страницата работата ще бъде много повече.

Вторият вариант е подходящ за сравнително малки сайтове.

Когато искаме да придадем на сайта единен изглед, прилагаме третия начин и поставяме в главата на страницата линк към външната стилова таблица:
<link rel=stylesheet type="text/css" href="име_на_файла.css">

В стиловата таблица можем да дефинираме не само отделни елементи. Можем да групираме елементи, например да зададем еднакъв цвят на текста на всички заглавия. Можем да дефинираме отделни класове, например:
p.em{
font-family: verdana, arial;
color: #000000;
}
или изобщо да не упоменаваме за какъв елемент става дума, например:
.em{
font-family: verdana, arial;
color: #000000;
}.

В последните два случая използуваме class, за да присвоим стила, например:
<p class="em">

По подобен начин използуваме и друга двойка идентификатори:
#em{
font-family: verdana, arial;
color: #000000;
}
<p id="em">.

Редът при изписване е следния:

  1. Идентификатор;
  2. Отваряща фигурна скоба;
  3. Определител;
  4. Двоеточие;
  5. Спецификатор;
  6. Точка и запетая;
  7. Друг определител;
  8. Двоеточие;
  9. Спецификатор;
  10. Затваряща фигурна скоба;

Особено подходящ за употреба със стилови таблици е елементът <div>.

Стиловите таблици се наричат "каскадни", защото зададеният стил се унаследява. Ако в идентификатора body укажем определен шрифт, всички текстове ще бъдат с този шрифт, но ако няма други дефиниции. С най-голямо предимство се ползува стиловият формат, зададен в отварящия таг на елемента. След него е форматът, зададен в главата на страницата, и на последно място е външната стилова таблица.

Повече по темата може да се научи от
тази страница от сайта на организацията W3, сертифицираща стандартите за създаване на HTML документи.