1. Начало
  2. Уеб сайт
  3. Уеб разработка
  4. CSS
  5. Начини за прилагане на CSS стил в HTML документа

Начини за прилагане на CSS стил в HTML документа

Добавянето на CSS стил в една HTML страница може да се извърши по няколко начина. Всеки от начините е с различен приоритет при прилагането им след това от уеб браузъра. Когато в един документ се използват и трите начина за налагане на CSS стил – с най-висок приоритет е стилът на Inline Style (вътрешните за HTML таговете стилове), след тях на по приоритет са Internal Style Sheet (стиловете от секцията head на HTML документа) и последни по приоритет са External Style Sheet, т.е. стиловете, декларирани във външен CSS файл.

Вграден CSS стил в HTML (Inline Styles)

Вградените стилове, които се разполагат в HTML таговете, представляват елементи, които се вграждат директно в даден HTML таг чрез използване на атрибута style=““. Стилът се прилага само за дадения таг.

Чрез използването на вътрешни стилове този код ще изглежда така:

<p>
Текст на параграфа.
</p>

В този случай не се налага да се пише код в секцията head на HTML страницата. В случая ефектът от вътрешния стил се простира само в рамките на параграфа, за който е зададен.

Със същия успех за постигане на подобен ефект можете да използвате например и тага div:

<div>
<p>
Текст на параграфа.
</p>
</div>

В някои случаи чрез използване на Inline Styles се пише повече код, отколкото ако се ползват другите начини за прилагане на CSS стил. Освен това тези ефекти не могат да бъдат контролирани от външен CSS файл или от CSS код в секцията head на HTML документа. Затова вътрешните стилове, задавани в HTML тагове, се използват рядко и пестеливо, обикновено само ако се налага да се зададе на някакъв елемент индивидуален стил, различен от стила, дефиниран за всички страници във външния CSS файл или в head на документа.

Вътрешен за HTML документа CSS стил (Internal Style Sheet)

Обикновено вътрешните за един HTML документ стилове се използват, когато на дадена HTML страница трябва да се зададе отделен стил от този на останалите HTML документи. Вътрешните за HTML страницата стилове се дефинират в секцията head на страницата, като се затварят между таговете <style type=“text/css“> и </style>.

Стандартният синтаксис на вътрешните за HTML документа стилове е:

<head>

<style type="text/css">
селектор {свойство: стойност;}
...
...
</style>

</head>

Пример:

<!DOCTYPE html>
<html>
<head>
<title>
Вътрешни за HTML документа стилове (Internal Style Sheet)
</title>
<style type="text/css">
body {background-color: #cccccc;}
h1 {color: #ff0000; font-size: 38px;}
</style>
</head>
<body>
<h1>Червено заглавие върху сив фон на страницата</h1>
</body>
</html>

Външен за HTML документа CSS стил (External Style Sheet)

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

След като CSS файлът е готов, във всяка от HTML страниците, за които са предназначени декларираните стилове, се поставя в секцията head връзка към този файл посредством тага 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, 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;}
p {color: #222222;font-size: 12px;font-family: arial, verdana, sans-serif;
padding-left: 5px;padding-right: 5px;padding-top: 20px;padding-bottom: 20px;}

Сега съхранете файла с разширение .css, например mycss.css.

Създайте един html файл и поставете в него:

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link rel=stylesheet type="text/css" href="mycss.css" />
</head>
<body>
Това е текст в секцията body, извън параграф, с шрифт Times New Roman.
<h1>Това е центрирано червено заглавие с шрифт Impact</h1>
<p>Това е текст с <a href="https://superhosting.bg">Връзка към SuperHosting.bg</a>,
който е с по-голям размер на шрифта и има следните ефекти: цвета е тъмносин,
без подчертаване, при слагане на курсора върху линка цветът се променя на червен и
се появява долна черта.</p>
<p>Това отново е текст</p>
</body>
</html>

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

Във файла mycss.css има декларирани 4 селектора, които отговарят на съответните HTML тагове – body, h1, a и p. Селекторите в този пример са 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.

Чрез селектора p е зададен за текста в параграфите тъмносив цвят, големина 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).

Вижте още:

🔗 Какво е CSS и как се използва в HTML? | Help

Обновена: 17.03.2022

Беше ли Ви полезна тази статия?

Вижте още