127 подписчиков

Как задать CSS стиль

24 мая 201924 мая 2019

1059

3 мин

Существует четыре способа задания 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 стиля - это импортированные стили. Они также, как и внедрённыезадаются в голове документа, но уже из файла. Вот пример: <hea

<style>

h1 {

color: red;

margin-top: 100px;

}

</style>

Существует четыре способа задания 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> в голове документа. Например, таким образом:

Данный способ очень похож на предыдущий способ, но здесь не используется тег <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 можно почитать в этой же категории.