16:23
Александр
Существует 4 способа задания CSS стиля ради тегов HTML.
1) Inline-манера.
2) Внедрённый стиль
3) Импортированный манера.
4) Манера из файла.
И в этой статье все мы разберём все 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 дозволено чтить в этой же категории.
0 коментарі:
Отправить комментарий