Способы привязки стилей css к странице сайта

Способы привязки стилей 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. Если разместить рядом текст, то он будет обтекать картинку с правой стороны.

Еще раз повторюсь: этот способ не приветствуется валидаторами веб-сайтов, но бить вас за это никто не станет.

На этом пока все! Удачи!

Похожие записи:

Оставить комментарий: