Когато браузър чете таблица със стилове, той ще форматира HTML документа според информацията в таблицата със стилове.
Три начина за вмъкване на CSS
Има три начина за вмъкване на таблица със стилове:
- Външен CSS
- Вътрешен CSS
- Вграден CSS
Външен CSS
С външен лист със стилове можете да промените облика на цял уебсайт, като промените само един файл!
Всяка HTML страница трябва да включва препратка към външния файл със стилове в елемента <link>, вътре в секцията head.
Пример
Външните стилове са дефинирани в елемента <link>, в секцията <head> на HTML страница:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Външен лист със стилове може да бъде написан във всеки текстов редактор и трябва да бъде запазен с разширение .css.
Външният .css файл не трябва да съдържа никакви HTML тагове.
Ето как изглежда файлът "mystyle.css":
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}Забележка: Не добавяйте интервал между стойността на свойството и единицата (като например margin-left: 20 px;). Правилният начин е:margin-left: 20px;
Вътрешен CSS
Вътрешен лист със стилове може да се използва, ако една отделна HTML страница има уникален стил.
Вътрешният стил е дефиниран вътре в елемента <style>, вътре в секцията head.
Пример
Вътрешните стилове са дефинирани в елемента <style>, в секцията <head> на HTML страница:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Вграден CSS
Вграден стил може да се използва за прилагане на уникален стил за отделен елемент.
За да използвате вградени стилове, добавете атрибута style към съответния елемент. Атрибутът стил може да съдържа всяко свойство CSS.
Пример
Вградените стилове са дефинирани в атрибута "style" на съответния елемент:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Съвет: Вграденият стил губи много от предимствата на таблицата със стилове (чрез смесване на съдържание с презентация). Използвайте този метод пестеливо.
Таблици с няколко стила
Ако някои свойства са дефинирани за един и същ селектор (елемент) в различни стилови листове, ще се използва стойността от последния прочетен стилов лист.
Да приемем, че външен лист със стилове има следния стил за елемента <h1>:
h1 {
color: navy;
}След това приемете, че вътрешен лист със стилове също има следния стил за елемента <h1>:
h1 {
color: orange;
}Пример
Ако вътрешният стил е дефиниран след връзката към външния лист със стилове, елементите <h1> ще бъдат "оранжеви":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>Пример
Ако обаче вътрешният стил е дефиниран преди връзката към външния лист със стилове, елементите <h1> ще бъдат "флот":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Каскадна поръчка
Какъв стил ще се използва, когато има повече от един стил, посочен за HTML елемент?
Всички стилове в дадена страница ще се каскадират в нов „виртуален“ лист със стилове по следните правила, където номер едно има най-висок приоритет:
- Вграден стил (вътре в HTML елемент)
- Външни и вътрешни таблици със стилове (в главната секция)
- Браузър по подразбиране
Така че вграденият стил има най-висок приоритет и ще замени външните и вътрешните стилове и настройките по подразбиране на браузъра.
