Существует четыре способа задания CSS стиля для тегов HTML.
1) Inline-стиль.
2) Внедрённый стиль
3) Импортированный стиль.
4) Стиль из файла.
И в этой статье мы разберём все четыре способа.
Для начала первый способ - это inline-стиль. Данный стиль указывается непосредственно в самом теге. Например:
<p style = "font-size: 150%; text-align: center;">текст</p>
В данном случае мы задали, чтобы элемент "текст" будет размером в 150% и выравнен по центру. Это пример inline-стиля.
Второй способ - это внедрённый CSS стиль, то есть стиль, который задаётся в голове документа, в теге <head>. Например, так:
<head>
<style>
h1 {
color: red;
margin-top: 100px;
}
</style>
</head>
Здесь будет происходить следующее: для всех элементов внутри тега <h1> будет сделано следующее: их цвет будет красным и отступ сверху будет 100 пикселей.
Третий способ задания CSS стиля - это импортированные стили. Они также, как и внедрённыезадаются в голове документа, но уже из файла. Вот пример:
<head>
<style>
@import url("my.css");
</style>
</head>
Здесь ко всей странице будут применяться стили из файла "my.css".
И последние вид CSS стилей - это стили из файла. Данный способ является самым частым, и заключается он в подключении файла стиля через тег <link> в голове документа. Например, таким образом:
<head>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
Данный способ очень похож на предыдущий способ, но здесь не используется тег <style>, и есть ещё одно отличие. Причём, это отличие характерно для всех способов задания CSS стиля. И это отличие - приоритет.
Когда проявляется приоритет? А проявляется он при возникновении конфликтных ситуаций, связанных с попыткой одному и тому же элементу задать противоречивый стиль. Например, через inline-стиль пытаемся сделать цвет красным, а через импортированный стиль пытаемся сделать цвет этого элемента чёрным. Во избежание таких противоречивых ситуаций, необходимо расставить приоритеты: какой способ с самым высоким приоритетом, а какой, наоборот, с самым низким. Приоритеты в порядке возрастания следующие:
1) Стиль из файла.
2) Импортированный стиль.
3) Внедрённый стиль.
4) Inline-стиль.
Таким образом, inline-стиль имеет наибольший приоритет. И, пользуясь этим, можно сделать вывод, что в примере выше цвет элемента будет красным, а не чёрным.
Какие выводы можно сделать?
1) Общий стиль для всего сайта должен быть вынесен в отдельный файл и подключаться на каждой странице через тег <link>, ввиду того, что данный стиль является стилем с минимальным приоритетом, его в частных случаях можно будет изменить.
2) Импортированный стиль надо использовать, когда 2 и более страниц (но не все) имеют определённые особенности в стиле.
3) Внедрённый стиль надо использовать для задания уникальных CSS стилей для конкретной страницы. Эти стили уникальны для каждой страницы сайта.
4) Inline-стиль надо использовать, когда отдельный элемент на отдельной странице требует особенного вида.
Руководствуясь данными принципами, Вы никогда не запутаетесь в CSS-стилях.
Напоследок, хочется привести небольшой пример, как надо следовать этим принципам. Допустим, Вы хотите по-разному выводить элемент внутри тега <p>. Перед Вам стоят такие задачи:
1) Размер шрифта на всех страницах сайта должен быть 15pt, а цвет чёрным.
2) На всех страницах, кроме одной, цвет текста внутри этого элемента должен быть красным.
3) На каждой странице, отступы будут разными.
4) В отдельных случаях может быть изменён размер и цвет текста.
Я, думаю, что здесь всё прозрачно, но тем не менее, давайте поясню порядок действий:
1) В отдельный файл вынести стиль, где задаётся размер и цвет. Потом подключить данный стиль через тег <link>.
2) В отдельный файл вынести стиль, где задаётся красный цвет текста. Потом подключить его, как импортированный стиль к нужным страницам.
3) На каждой странице внутри тега <style> сделать разные отступы для тега <p>.
4) У нужных тегов <p> настроить должным образом размер и цвет текста.
Как видите, ничего сложного нет, а освоив это Вам будет гораздо проще создавать дизайн своего сайта, который необходим при создании сайтов с нуля. О других основах CSS можно почитать в этой же категории.
