Работа с CSS: основы

Эта статья призвана облегчить жизнь как начинающему верстальщику, так и программисту, которому пришлось что-нибудь заверстать.

CSS (Cascading Style Sheets — каскадные таблицы стилей) - это технология, практически язык, описания стиля(вида, внешней структуры) документа написанного на каком-нибудь ML(markup language - язык разметки), будь то HTML, xHTML, XML.

До начала поддержки браузерами стандартов CSS, верстка и оформление html-документов производилась исключительно с помощью атрибутов тегов и специальных тегов. Однако после принятия "рекомендаций" технологии CSS1 в 1996 году, а затем и CSS2 в 1998, появилось гораздо больше возможностей html-верстки и описания разметки. Преимущество этого способа описания документов очевидно - можно менять стиль, не исправляя и никак не взаимодействуя с HTML, иначе - "разделение содержимого и представления".

Итак - различают несколько способов подключения CSS-файлов (****.css) к файлу содержимого:

Внешние таблицы стилей

Подключаются внешним файлом, обычно в теге <head>:
<link rel="stylesheet" href="****.css" type="text/css" />
или
<style type="text/css" media="all">@import "****.css";</style>

Встроенные стили

Описание стилей внутри документа (в виде блоков):
<style type="text/css">
   ...some styles...
</style>

Inline-указание стилей

Запись стилей для единичного элемента html в значении атрибута style:
<div style="font-size:12px;color:red;">...</div>

Также различают несколько видов стилей:

Авторские стили

Стили, указываемые автором документа. То, что приведено выше.

Пользовательские стили

Например, стили, которые указываются в настройках браузера. Имеют больший приоритет, чем авторские и переопределяют их.

Стили браузера

Дефолтные css-стили браузеров, используемые для отображения страниц без определенных авторских стилей.

Запись стилей схематически представить как набор правил. Набор правил (также называемый правилом) состоит из селектора и следующего за ним блока объявлений. Блок объявлений начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". Между ними должен находиться, список объявлений (он может быть пустым), отделенных друг от друга точкой с запятой ";".

Объявление может быть пустым или включать свойство и следующие за ним двоеточие ":" и значение этого свойства. Вокруг каждого из этих трех элементов может находиться произвольное количество пробелов.

Таким образом CSS-правило можно представить в виде блока:

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

Например, чтобы указать для заголовка <h1>header</h1> отображение шрифтом Tahoma, размером 16 пикселей, нежирным курсивом, синим цветом, достаточно написать такое правило:

h1 {
   font-family: Tahoma;
   font-size: 16px;
   font-weight: normal;
   font-style: italic;
   color: blue
}

Несколько слов о поддержке стандартов CSS разными браузерами:

В силу некоторой "маркетинговой модели развития" самый распространеннный браузер, Internet Explorer 6 (а в скором будущем таковым станет IE 7) поддерживает спецификацию CSS (на данный момент CSS2) не в полном обьеме. Да и, что греха таить, с явными ошибками. В отличие него Mozilla Firefox, Opera и Safari, следующие по числу почитателей браузеры, обрабатывают листы стилей довольно хорошо.

В сети много споров о качестве поддержки CSS мозиллой и оперой, однако лично я склоняюсь к опере. В одной из следующих статей я приведу ошибки, неоднозначности и необрабатываемые обьявления для разных браузеров.

Фреймворки:

Талантливый человек должен быть ленивым. В хорошем смысле этого слова. Если стоит задача что-то сверстать, стоит подумать что может помочь в этом деле. Конечно фреймворк. Фреймворков для css существует много, но суть у них одна - они нивелируют нативные различия между браузерами, устанавливают свои базовые стили по-умолчанию и наконец, предоставляют классы для удобной быстрой верстки. При этом обязательным условием является наличие документации и примеров использования.

Каждый фреймворк имеет свои особенности, как то ориентированность больше на верстку под мобильные устройства, предоставление апи для нарезки страницы на области, апи для типографики и так далее. Выбирать стоит не по отзывам, а попробовав большинство самых популярных css-фреймворков.

Для затравки советую попробовать такие css-фреймворки:

Продолжение следует...

Теги: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки