Когато браузърът разчита CSS файла, той форматира документа в зависимост от информацията в стиловия файл.
Три начина да вмъкнете CSS
Има три начина за вмъкване на стилове в HTML документ:
Външен файл със стилове
Външният файл със стилове се използва, когато стилизирането се отнася за повече html страници. Чрез него може да промените вида на цял сайт, само чрез промяната на един файл. Това много улеснява работата и съкращава времето за стилизиране, особено за по-големи сайтове. Всяка html страница трябва да съдържа препратка към стиловия файл - препоръчително е това да е в head елемента - съдържащ стиловете:
Външният стилов файл може да се напише на който и да е редактор и файлът не трябва да съдържа HTML тагове. Той трябва да е написан на CSS. Пример: mystyle.css :
Не оставяйте празно място между стойността на свойството и мерната еденица(като margin-left: 20 PX ;), иначе стойността няма да бъде определена правилно. Правилният начин е: margin-left: 20px;
Вътрешен стил
Вътрешният стил се използва за документ, който има уникален стил. Декларира се чрез използването на тагът style в head секцията:
Inline стилове
Inline стиловете имат много недостатъци, в сравнение с останалите (като например смесване на съдържание с представяне). Като цяло е доста неудобно и объркващо за тези, които не познават кода ви. Избягвайте употребата на inline стилизиране. Най-добре ползвайте външен CSS файл за оформление. Използвайте този метод внимателно! За да използвате inline стилизиране, трябва да добавите атрибутът style към съответният html елемент. Примерът показва как да промените цвета и отстоянието отляво на параграф:
Множество стилове
Ако различни свойства са зададени за един и същ елемент, но в различни стилови файлове, стойността, която ще се присвои на елементът е тази, която е най-конкретно зададена. Например, ако във външен стилов файл се съдържат тези свойства за h3 :
и вътрешен стилов файл съдържа тези свойства за h3:
Ако страницата с вътрешният стил съдържа път към външният файл със стилове, свойствата които h3 ще приеме са:
Цветът е наследен от външния стилов файл, а останалите се присвояват от вътрешния. Като заключение - по-конкретните стилове винаги имат приоритет!
Йерархия в прилагането на стилове
Кой стил ще се използва при наличието на 2 различни за един и същи HTML елемент? Можем да кажем, че важността на стиловете зависи от следното:
- Стиловете от браузърът
- Външен стилов файл
- Вътрешен стил (в head секцията)
- Inline стил (в HTML елемент)
Така че, един inline стил (вътре в HTML елемент) има най-висок приоритет, което означава, че той ще замени стил дефиниран в head секцията, или във външен стилов файл и ще пренебрегне стойностите по подразбиране на браузъра. Това се получава, защото той е най-конкретно зададен.
Забележка: Ако връзката към външен стил лист е поставена след вътрешния стил в HTML файла, външните стилове ще заменят вътрешните!
