Способы привязки стилей css к странице сайта
Существует как минимум три способа привязки стилей css к странице веб-сайта. В статье подробно описываются эти способы привязки и даются исчерпывающие пояснения.
Для начала следует пояснить, для чего вообще что-то привязывать к странице веб-сайта, и почему стили css вынесены в отдельный файл.
Со времен появления наборов стилей оформления содержимого веб-страницы (css) в среде веб-разработчиков постулировалось очень полезное правило «разделяй содержимое и его представление!».
То есть, веб-страница содержит чистый html код, а все оформление выносится в отдельные наборы правил css и желательно за пределами этой веб-страницы. Этим убивалось сразу два зайца.
Во-первых, html код оставался чистым. Он содержал только контент и разметку. Что существенно облегчало вес страницы.
А, во-вторых, такое разделение позволяло более эффективно редактировать стили оформления, не затрагивая саму веб-страницу.
Существовали даже целые галереи с примерами сайтов, где достаточно было просто заменить один файл стилей css на другой, как сайт мгновенно полностью преображался в плане дизайна и структуры размещения блоков.
1 вариант привязки стилей css к странице веб-сайта
В своих уроках о верстке сайта я показал лишь один из способов привязки файла стилей CSS к странице сайта. А именно посредством вот такой ссылки, расположенной в зоне тэга <head>:
<link rel="stylesheet" href="style.css" type="text/css" />
Однако, существует еще несколько способов внедрения стилей, и о них мы сейчас поговорим.
2 вариант привязки стилей css к странице веб-сайта
Во-первых, указанная выше ссылка — это не единственный вариант «пристегивания» к странице внешнего листа стилей. Ее можно записать и в ином виде.
<style type="text/css">
<!–– @import url( http: // www.websovet.com/style.css ); ––>
</style>
И это будет означать то же самое.
3 вариант привязки стилей css к странице веб-сайта
Во-вторых, не всегда имеет смысл пристегивать внешний файл, хотя это и противоречит принципу разделения Содержания и Представления.
Рассмотрим такой пример: имеется сайт из 5 — 10 страниц с самой простейшей версткой и без сложного форматирования. Для отображения страницы, скажем, предусмотрено штук 10 — 20 простых правил. Спрашивается, имеет ли смысл выносить эти пять правил в отдельный файл? Наверное, нет.
И вот почему: иногда бывает так, что по каким-то причинам (связь плохая или глюк какой) сервер не хочет отдавать лист стилей CSS. Тогда наша страничка отобразится так, как посчитает нужным сам браузер. А это, как сами понимаете, просто Ничто.
К тому же не все посетители сайта умеют правильно сохранять веб-страницы, чтобы посмотреть их потом в режиме оффлайн. Если страницу с внешним листом стилей сохранить как «только HTML» (что обычно и выставлено в настройках браузеров по-умолчанию), то соответственно только HTML и сохранится, без всякого листа стилей.
Поэтому в таких простых сайтах имеет смысл записать стили непосредственно в страницу. Делается это при помощи тэга <style>.
<style type="text/css">
……
……
……
</style>
Вместо точек, соответственно, наборы правил. Данная конструкция также должна находиться между тэгами <head></head>.
4 вариант привязки стилей css к странице веб-сайта
В-третьих, существуют так называемые «местные стили», которые можно применить непосредственно к конкретному элементу.
Например, нужно выделить какое-то слово другим цветом, и только одно это слово. Наверное, нет смысла прописывать для него отдельное правило в листе стилей. Хотя, валидатор обругает нас при этом распоследними словами.
На такой случай можно внедрить непосредственно в тексте веб-страницы вот такую конструкцию:
« …Ехал Вася на велосипеде и кушал <span style="color: #f00;">бублик с маком</span>. Едва не упал… »
Здесь словосочетание «бублик с маком» у нас будет ярко-красного цвета. То есть, мы просто взяли кусочек правил и пристегнули его непосредственно по месту.
Где это можно еще применить? Например, это удобно при оформлении расположения картинки в тексте. Иногда гораздо проще непосредственно при добавлении картинки приписать к ней местный стиль. Примерно вот так:
<img style="float: left; margin: 0 10px 10px 0;" src="тут-адрес-картинки" alt="" />
Данный код делает картинку обтекаемой float. Если разместить рядом текст, то он будет обтекать картинку с правой стороны.
Еще раз повторюсь: этот способ не приветствуется валидаторами веб-сайтов, но бить вас за это никто не станет.
На этом пока все! Удачи!
