C, PHP, VB, .NET

Дневникът на Филип Петров


* Класове и идентификатори

Публикувано на 29 август 2009 в раздел ХHTML.

Досега показахме множество примери със т.нар. "inline" стилове. При тях стилът се променя на мястото където ни е нужно това. Това води до редица неудобства:

  1. Представете си страница с 10 параграфа, всеки от който трябва да е с тъмно сив фон и бели букви. Ясно е, че с досегашните знания ние ще променяме стиловете за фон и букви десет пъти;
  2. Не е хубаво да се смесват дизайн и съдържание. Би било много по-добре ако може да ги разделим максимално много.

Затова за щастие има възможност за "изнасяне" на CSS кода в заглавните тагове <head>. Ето един пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CSS стилове</title>
<style type="text/css">
   p {
      background-color: grey;
      color: white;
   }
   div {
      background-color: blue;
      color:white;
   }
</style>
</head>
<body>
   <p> Малко текст в първи параграф </p>
   <p> Малко текст във втори параграф </p>
   <div>Малко текст в друго поле</div>
</body>
</html>

Резултат:

CSS стилове

Сигурно веднага забелязахте удобството. Синтаксисът е изключително прост:

таг { стил1:стойност; стил2:стойност; ... }

Е, веднага се сблъскваме с едно неудобство. Забелязваме, че по този начин абсолютно всички параграфи стават сиви с бял текст и абсолютно всички полета div стават сини с бял текст. Какво правим ако желаем да създадем трети параграф, който е с черен фон?

Тук на помощ идват т.нар. "класове" от стилове. Ще демонстрираме директно с пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CSS стилове</title>
<style type="text/css">
 p.siv{
    background-color: grey;
    color: white;
 }
 p.cheren{
     background-color: black;
     color: white;
 }
 div {
      background-color: blue;
      color:white;
 }
</style>
</head>
<body>
   <p class="siv">Малко текст в първи параграф </p>
   <p class="siv">Малко текст във втори параграф </p>
   <div>Малко текст в друго поле</div>
   <p class="cheren">Ето един черен параграф</p>
   <p>Ето и един параграф без стил</p>
</body>
</html>

Резултат:

CSS стилове

Ето как бихме могли да дефинираме таблицата от края на миналата статия:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Форматиране на текст и картинки</title>
 <style type="text/css">
   table.students {
      border-width:1px;
      border-style:solid;
      border-color:black;
      width:100%;
      font-family:'Lucida Console', Monaco, monospace;font-size:12pt";
   }
   colgroup.numbers {
      background-color:wheat;
      width:25px;
   }
   colgroup.names {
      background-color:whitesmoke;
   }
   td.center {
      text-align:center;
   }
   thead.students {
      background-color:lightgrey;
      height:40px;
   }
</style>
</head>
<body>

<table rules="all" cellpadding="10" frame="box"
class="students">
<colgroup class="numbers"></colgroup>
<colgroup span="2" class="names"></colgroup>
<thead class="students">
<tr>
   <th>#</th>
   <th>Лично име</th>
   <th>Фамилно име</th>
</tr>
</thead>
<tbody>
<tr>
   <td class="center">1</td>
   <td>Анна</td>
   <td>Петрова</td>
</tr>
<tr>
   <td class="center">2</td>
   <td>Иван</td>
   <td>Захариев</td>
</tr>
<tr>
   <td class="center">3</td>
   <td>Димитър</td>
   <td>Михайлов</td>
</tr>
</tbody>
</table>

</body>
</html>

Има и още една възможност за създаване на стилове - чрез идентификатори. Ето един пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Идентификатори в CSS</title>
<style type="text/css">
   p#grey {
      background-color: grey;
      color: white;
   }
</style>
</head>
<body>
   <p>Нормален параграф</p>
   <p id="grey">Параграф с променен стил</p>
</body>
</html>

Резултат:

Идентификатори в CSS

Остава въпросът "каква е разликата между класове и идентификатори?". Отговорът е, че стил дефиниран като идентификатор може да бъде използван само един единствен път в документа! С други думи стойностите на атрибута id в таговете трябва да са уникални! При класовете това не е така - можем да имаме повече от един обект от даден клас.

Накрая ще споменем за още една функционалност - "изнасяне" на целия CSS код в отделен файл! Ето един пример - вземете целия код между <style> и </style> от примера с таблицата и го запишете в текстов файл с име styles.css.

Файл styles.css:

table.students {
	border:1px;
	border-style:solid;
	border-color:black;
	width:100%;
	font-family:'Lucida Console', Monaco, monospace;font-size:12pt";
}
colgroup.numbers {
	background-color:wheat;
	width:25px;
}
colgroup.names {
	background-color:whitesmoke;
}
td.center {
	text-align:center;
}
thead.students {
	background-color:lightgrey;
	height:40px;
}

XHTML файл:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Идентификатори в CSS</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>

<table rules="all" cellpadding="10" frame="box"	class="students">
<colgroup class="numbers"></colgroup>
<colgroup span="2" class="names"></colgroup>
<thead class="students">
<tr>
   <th>#</th>
   <th>Лично име</th>
<th>Фамилно име</th>
</tr>
</thead>
<tbody>
<tr>
   <td class="center">1</td>
   <td>Анна</td>
   <td>Петрова</td>
</tr>
<tr>
   <td class="center">2</td>
   <td>Иван</td>
   <td>Захариев</td>
</tr>
<tr>
   <td class="center">3</td>
   <td>Димитър</td>
   <td>Михайлов</td>
</tr>
</tbody>
</table>

</body>
</html>

Виждате, че така може няколко HTML файла да споделят едни и същи стилове. Това е и най-често употребяваната структура. В атрибут href на link може да давате както релативен път, така и URL.

 



Добави коментар

Адресът на електронната поща няма да се публикува


*