* Класове и идентификатори
Публикувано на 29 август 2009 в раздел ХHTML.
Досега показахме множество примери със т.нар. "inline" стилове. При тях стилът се променя на мястото където ни е нужно това. Това води до редица неудобства:
- Представете си страница с 10 параграфа, всеки от който трябва да е с тъмно сив фон и бели букви. Ясно е, че с досегашните знания ние ще променяме стиловете за фон и букви десет пъти;
- Не е хубаво да се смесват дизайн и съдържание. Би било много по-добре ако може да ги разделим максимално много.
Затова за щастие има възможност за "изнасяне" на 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>
Резултат:
Сигурно веднага забелязахте удобството. Синтаксисът е изключително прост:
таг { стил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>
Резултат:
Ето как бихме могли да дефинираме таблицата от края на миналата статия:
<!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>
Резултат:
Остава въпросът "каква е разликата между класове и идентификатори?". Отговорът е, че стил дефиниран като идентификатор може да бъде използван само един единствен път в документа! С други думи стойностите на атрибута 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.
Добави коментар