Unlimited HostingFree Drupal ThemesFree Drupal Themes

PostHeaderIcon Как подключить Cascading Style Sheets

Наверное, каждому пятому человеку, который часто пользуется Интернетом, приходит на ум вполне логичный вопрос – как создаются сайты. Однако в данной статье разговор пойдёт о таком виде, как Cascading Style Sheets или сокращённо CSS, что в переводе означает каскадные стили таблицы.

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

Итак, CSS должна быть использована при внешнем виде оформления веб-страницы, которая, в свою очередь, написана при помощи HTML. То есть, чтобы иметь возможность структурирования содержимого вашего сайта, вывести документ в необходимых вам стилях и методах, или, говоря иначе, чтобы намного точнее и удобнее расположить логическую структуру веб-страницы или веб-страниц в одном-единственном месте. Сам по себе CSS имеет вид обычного текстового файла, а таблица стилей уже может находиться либо внутри этого файла, либо в отдельном документе.

Существует четыре способа подключения таблицы стилей, а именно:

  • если каскадная таблица стилей расположена в отдельном, как говорилось выше, документе, то к вашей веб-страницы она подключается при помощи тега <link>, который, в свою очередь, располагается посредине тегов <head> - </head>.
  • если таблица также в отдельном файле находится, подключаться в этом случае она будет из директивы @import, так же отдельной. Располагаться эта директива будет между тегами <style> - </style>.
  • если каскадная стилей таблица располагается внутри файла CSS, то находиться она будет между тегами, описанными выше, то есть <style> - </style>.
  • если таблица стилей располагается внутри одного из тегов.

К правилам построения CSS относятся две составляющих части – это блок объявлений и селектор.

Селектор всегда располагают с левой стороны правила, и он должен определять, распространяется ли это правило на некоторые части и на какие. А справа – блок объявлений, который должен помещаться внутри фигурных скобок и сочетать в себе значение и свойства CSS. Пример:

селектор {свойство: значение;
                   свойство: значение;
                  }

Поиск
Rambler's Top100 Яндекс.Метрика