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

15.03
2008

В своей книге о блочной верстке веб-сайта я показал лишь один из способов привязки листа стилей CSS к странице сайта. А именно посредством вот такой ссылки, расположенной в зоне тэга <head>:

Однако, существует еще несколько способов внедрения стилей, и о них мы сейчас поговорим.

Во-первых, указанная выше ссылка — это не единственный вариант «пристегивания» к странице внешнего листа стилей. Ее можно записать и в таком виде:

<!–– @import url( http: // www.websovet.com/style.css ); ––>

</style>

И это будет означать то же самое.

Во-вторых, не всегда имеет смысл пристегивать внешний файл, хотя это и противоречит принципу разделения Содержания и Представления. Рассмотрим такой пример: имеется сайт из 5-10 страниц с самой простейшей версткой и без сложного форматирования. Для отображения страницы, скажем, предусмотрено штук 5 простых правил. Спрашивается, имеет ли смысл выносить эти пять правил в отдельный файл? Наверное, нет. И вот почему: иногда бывает так, что по каким-то причинам (связь плохая или глюк какой) сервер не хочет отдавать лист стилей CSS. Тогда наша страничка отобразится так, как посчитает нужным сам браузер. А это, как сами понимаете, просто Ничто.

К тому же не все посетители сайта умеют правильно сохранять веб-страницы, чтобы посмотреть их потом в режиме оффлайн. Если страницу с внешним листом стилей сохранить как «только HTML» (что обычно и выставлено в настройках браузеров по-умолчанию), то соответственно только HTML и сохранится, без всякого листа стилей.

Поэтому в таких простых сайтах имеет смысл записать стили непосредственно в страницу. Делается это при помощи тэга <style> и выглядит так:

Вместо точек, соответственно, наборы правил. Данная конструкция также должна находиться между тэгами <head></head>.

В-третьих, существуют так называемые «местные стили», которые можно применить непосредственно к конкретному элементу. Например, нужно выделить какое-то слово другим цветом, и только одно это слово. Наверное, нет смысла прописывать для него отдельное правило в листе стилей. Хотя, валидатор обругает нас при этом распоследними словами.

На такой случай можно внедрить непосредственно в тексте вот такую конструкцию:

«… Ехал Вася на велосипеде и кушал <span style=”color: #f00;”>бублик с маком</span>. Едва не упал…»

Здесь словосочетание «бублик с маком» у нас будет ярко-красного цвета. То есть, мы просто взяли кусочек правил и пристегнули его непосредственно по месту.

Где это можно еще применить? Например, это удобно при оформлении расположения картинки в тексте. Вот как в этой статье, в самом верху. В шаблонах к ВордПрессу, в соответствующих CSS, для этого прописываются всевозможные правила, типо «прозапас». То есть, сразу вписываются class-ы для картинок с обтеканием слева, справа или вообще без оного. Только бери да вставляй нужный класс при написании статьи. Лично мне просто влом запоминать все эти классовые имена и гораздо проще непосредственно при добавлении картинки приписать к ней местный стиль. Примерно вот так:

На этом пока все!

Лирическое отступление:
Так как я просто физически не успеваю рулить на множестве своих ресурсов, то выставляю на продажу 11 доменов в зоне INFO. Домены на тему авто (Autovarious.info и к нему еще 10 по марками авто, типо autovariousaudi.info, autovariousbmw.info и т.д.). Все домены пристегнуты к хостингу — заливай контент и радуйся! На самом Autovarious.info установлен и настроен движок WordPress с оригинальным шаблоном (сам ваял). Остальные домены можно (и нужно) использовать как сателлиты. Кто в теме, тот поймет. За все удовольствие прошу 30WMZ, ибо это гораздо дешевле, чем регистрация новых доменов в данной зоне.
По вопросам приобретения стучать в асю (номер указан на бумажке справа).

Серега 15.03.2008 23:55

Спасибо за советы.
Kventor 18.03.2008 23:39

Всегда пожалуйста! Спасибо за комментарий!
Серега 23.03.2008 10:37

Здравствуйте! Статья полезная, но интереснее было если бы Вы описали правила для отображения в “нестандартных” устройствах…
Kventor 23.03.2008 12:26

Приветствую! Расшифруйте, пожалуйста, что вы имеете в виду под нестандартными устройствами? И зачем оно нужно?