CSS Част 6

nma трудност:

видян: 4165

Пример за външни стилове беше даден още в 1-ва страница "Какво е CSS...". Това са стиловете, които се декларират във външен за HTML документа файл. Файла може да се напише на обикновен текстов редактор, например Notepad след което трябва да се съхрани с разширение .css, например file.css, styles.css или нещо подобно. В CSS файла не трябва да се пишат никакви HTML тагове с ъглови скоби, т.е. във формат <body> и пр.

След като CSS файла е готов, във всяка от HTML страниците, за които са предназначени декларираните стилове, се поставя в секцията head връзка към CSS файла посредством тага link с атрибути rel, type и href:

<link rel="stylesheet" type="text/css" href="file.css" />

В CSS файла могат да бъдат декларирани практически всички HTML тагове, които се използват в HTML страниците, като им бъдат зададени атрибути със съответните стойности. По този начин може лесно да се контролират неограничено число HTML страници, като промяната във всички тях се извършва само чрез редакция на един файл - CSS файла. Очевидно това спестява много труд и време, затова е силно препоръчително, особено при изработка на големи сайтове с множество страници, винаги да се използват външни стилове.

ПРИМЕР

Отворете Notepad и сложете в него следното съдържание:

body {
margin-top: 5px;
margin-left: 0px;
margin-right: 0px;
background-color: #efefef;
font-family: times new roman, timoku;
font-size: 18px;
color: #000000
}

h1 {
font-family: impact;
font-size: 32px;
color: #bb0000;
text-align: center
}

a {
color: #0000aa;
font-size: 16px;
font-family: arial, helvetica, verdana, sans-serif;
font-weight: bold
}
a:link {
text-decoration: none
}
a:visited {
text-decoration: none;
color: #5500ff
}
a:hover {
text-decoration: underline;
color: #aa0000
}
a:active {
text-decoration: none;
color: #77aaCC
}

td {
color: #222222;
font-size: 12px;
font-family: arial, helvetica, verdana, sans-serif;
padding-left: 5px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 20px
}

Сега съхранете файла с разширение .css, например mycss.css
Отворете нов Notepad и сложете в него следния примерен код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS Example</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<link rel=stylesheet type="text/css" href="mycss.css" />
</head>
<body>

Това е текст в секцията body, извън таблицата, със шрифт Times new roman.
<h1>Това е центрирано червено заглавие със шрифт Impact</h1>

<table width="100%" border="1">
<tr>
<td>
Това е текст в 1-ва клетка със шрифт Arial
</td>
</tr>
<tr>
<td>
Това е текст във 2-ра клетка, а това е <a href="http://www.uroci.com">Връзка към uroci.com</a>, която
е с по-голям размер на шрифта и има следните ефекти: цвета и е тъмносин, без подчертаване,
при слагане на курсора върху нея цвета се променя на червен и се появява долна черта.
</td>
</tr>
</table>
Това отново е текст извън таблицата.

</body>
</html>

Като резултат ще имате страница, с описаните в самата нея (по-горе) ефекти.

Във файла mycss.css има декларирани 4 селектора, които отговарят на съответните HTML тагове - body, h1, a, td. Селекторите в този пример са 4, но те могат да бъдат и много повече, в зависимост от страницата която изграждате. Препоръчително е всички HTML тагове, които използвате при изграждането на HTML документа, да бъдат декларирани в CSS файл за по-лесно управление на сайта.

В случая чрез селектора body е зададено съдържанието на страницата да има отстъп от 5 пиксела от горната част и да се прилепва плътно вляво и вдясно (margin-top: 5px; margin-left: 0px; margin-right: 0px;), зададено е също цвета на фона на страницата да бъде светлосив (background-color: #efefef;), а текста който се пише в body да бъде със шрифт Times new roman или timoku, с големина 18 пиксела и с черен цвят (font-family: times new roman, timoku; font-size: 18px; color: #000000;).

Чрез селектора h1 е зададено заглавие, което да бъде с червен цвят, центрирано, със шрифт impact и големина 32 пиксела (font-family: impact; font-size: 32px; color: #bb0000; text-align: center).

Чрез селектора a са зададени параметри на текста от хипервръзките (линковете). Зададени са тъмносин цвят на връзките, текста е удебелен, с размери 16 пиксела и шрифт Arial (color: #0000aa; font-size: 16px; font-family: arial, helvetica, verdana, sans-serif; font-weight: bold).
Зададени са и ефекти на хипервръзките при поставяне на курсора върху тях и кликане върху връзките. В случая например чрез

a:link {
text-decoration: none
}

е зададено връзките да нямат подчертаване, а чрез

a:hover {
text-decoration: underline;
color: #aa0000
}

е зададено при поставяне на курсора върху връзката тя да сменя цвета си на червен и да се появява долна черта. Зададени са и различни цветове за вече посетените и активните връзки чрез параметрите на a:visited и a:active.

Чрез селектора td е зададен за текста в клетките на таблицата тъмносив цвят, големина 12 пиксела и шрифт Arial (color: #222222; font-size: 12px; font-family: arial, verdana, helvetica, sans-serif;), зададено е и разстояние от съдържанието на клетките до стените им съответно по 5 пиксела за долу и горе и по 20 пиксела за ляво и дясно (padding-left: 5px; padding-right: 5px; padding-top: 20px; padding-bottom: 20px).

Регистрирайте се, за да добавите коментар

реклама