Руководство по 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:
- Более чистый код
- Код легче поддерживать
- Он быстрее загружается
- Он лучше оптимизирован для поисковых систем
- Модульный код
- Единообразный дизайн
- Сила дизайна
- Разделение труда
- Лучшая доступность
Специфика
В случаях, когда два и более правила CSS конфликтуют друг с другом относительно одного и того же элемента, браузер следует набору правил, которые позволяют определить приоритет CSS правила. Это может показаться не таким уж и важным, но с ростом сложности CSS риск конфликтов увеличивается.
Фоновые изображения
Предусмотрено несколько свойств, которые используются для манипуляции фоновыми изображениями. К счастью свойство background используется со всеми ими.
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}Классы и идентификаторы
Вы можете задавать свои собственные селекторы в форме классов и идентификаторов. Преимущество такого подхода состоит в том, что один и тот же HTML-элемент может отображаться различными способами в зависимости от класса или идентификатора.
Эт-правила CSS
Эт-правила CSS начинаются со знака @ и применяют набор стилей к чему-то конкретному.
CSS границы
Вы можете использовать границы (рамки), применяя их к большинству элементов HTML. Для этого используется свойство border-style с различными значениями (solid, dotted, dashed и др.).
Как это работает вместе
Заключительный пример объединяет все CSS-техники, описанные ранее. Сохраните код в файле стилей и проверьте, как именно работают все свойства.
Встроенные, внутренние и внешние стили
Встроенные стили прикрепляются напрямую к HTML-тегам с помощью атрибута style. Например:
<p style="color: red">text</p>Z-index
Свойство Z-index описывает уровень стека отображения элемента на странице относительно других элементов. Чем выше значение, тем ближе элемент к пользователю.