Руководство по CSS для начинающих

Как и в случае с «Руководством по HTML для начинающих», «Руководство по CSS для начинающих» основано на предположении, что ваше знание CSS не больше того, что вам известно о влиянии морских отливов на химические процессы мозга головоногих моллюсков. Назначение этого руководства состоит в том, чтобы научить основам. Промежуточное и Продвинутое руководства по CSS содержат более подробные сведения о каскадных таблицах стилей.

CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит.

Стили не напоминают структуру HTML. Они используют формат «свойство: значение» и большая часть свойств может использоваться для большинства HTML-тегов.

Содержание

  • Применение CSS – Как применить CSS к HTML.
  • Селекторы, Свойства и значения – Элементы CSS.
  • Цвета – Использование цвета.
  • Текст – Манипуляция с размером и формой текста.
  • Margins и Padding – Расставляем вещи по местам.
  • Границы
  • Кладем все вместе – Готовим острое блюдо из этих ингридиентов.

Преимущества каскадных таблиц стилей (CSS)

Неодобрение большинства элементов форматирования HTML, которые использовались в HTML 4.0, означает, что даже если браузеры по-прежнему поддерживают их, согласно рекомендации Консорциума W3C они не должны больше использоваться. Веб-дизайнерам рекомендуется использовать CSS (Cascading Style Sheets — каскадные таблицы стилей).

Главные преимущества CSS:

  1. Более чистый код
    • Этот код легче поддерживать
    • Он быстрее загружается
    • Он лучше оптимизирован для поисковых систем
  2. Модульный код
    • Правила стиля могут применяться ко множеству страниц
    • Единообразный дизайн
    • Код легче поддерживать
  3. Сила дизайна
    • Точность контроля (позиционирование, размер, поля и др.)
  4. Разделение труда
    • Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн
  5. Лучше доступность
    • Теги больше не используются не по назначению (например, <blockquote> для форматирования)
    • Нет необходимости в позиционировании невидимых картинок
    • Пользователи могут переписывать стилевые таблицы автора

Читать далее

Специфика

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

Это может показаться не таким уж и важным, и в большинстве случаев такие конфликты никак не проявляются. Но по мере того, как CSS файлы растут в размере и сложности, вы начнете работать с несколькими отдельными CSS-файлами. И тогда риск появления конфликтов увеличивается значительно.
Читать далее

Фоновые изображения

Предусмотрено несколько свойств, которые используются для манипуляции фоновыми изображениями. К счастью свойство background используется со всеми ими.


body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Читать далее

Классы и идентификаторы

В Руководстве по CSS для новичков мы анализировали только селекторы HTML — те, что представляют HTML-тег. Вы можете также задавать свои собственные селекторы, которые могут принимать форму классов и идентификаторов.

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

Эт-правила CSS

Прим. переводчика: в английском языке знак «@» произносят как «Эт». Эт-правила CSS начинаются со знака «@» и потому так называются

Эт-правила содержат внутри себя набор CSS-правил и применяют их к чему-то конкретному.
Читать далее

CSS границы

Вы можете использовать границы (рамки), применяя их к большинству элементов HTML в пределах страницы. Все, что вам требуется, чтобы сделать границу вокруг элемента — это border-style. Возможные значения, которые можно применять: solid (тонкая граница), dotted (граница состоит из точек, пунктир), dashed (граница состоит из коротких отрезков), double (двойная), groove (эффект углубления), ridge (эффект кромки), inset (эффект врезки) и outset (эффект возвышения).
Читать далее

Как это работает вместе

Большинство из вас должны быть готовы к HTML, подобному тому, что я сделал в конце моего руководства по HTML для новичков. Лишь строка кода с ссылкой на CSS-файл должна быть добавлена в ваш HTML-документ.

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

Встроенные, внутренние и внешние стили

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

Встроенные стили прикрепляются напрямую к HTML-тегам значением атрибута style.

Они напоминают следующий код:

<p style="color: red">text</p>

В результате применения этого стиля, параграф будет показан красного цвета.
Читать далее

Z-index

Свойство Z-index описывает уровень стека представления элемента на странице относительно остающихся в потоке элементов. Его значением является число. Вместе с увеличением z-index элемента, близость к пользователю также увеличивается.
Читать далее