Как и в случае с «Руководством по HTML для начинающих», «Руководство по CSS для начинающих» основано на предположении, что ваше знание CSS не больше того, что вам известно о влиянии морских отливов на химические процессы мозга головоногих моллюсков. Назначение этого руководства состоит в том, чтобы научить основам. Промежуточное и Продвинутое руководства по CSS содержат более подробные сведения о каскадных таблицах стилей.
CSS, или каскадные таблицы стилей, – это то, как HTML представлен. Точно также как HTML описывает контент, таблицы стилей определяют, как документ выглядит.
Стили не напоминают структуру HTML. Они используют формат «свойство: значение» и большая часть свойств может использоваться для большинства HTML-тегов.
Содержание
- Применение CSS – Как применить CSS к HTML.
- Селекторы, Свойства и значения – Элементы CSS.
- Цвета – Использование цвета.
- Текст – Манипуляция с размером и формой текста.
- Margins и Padding – Расставляем вещи по местам.
- Границы
- Кладем все вместе – Готовим острое блюдо из этих ингридиентов.
Неодобрение большинства элементов форматирования HTML, которые использовались в HTML 4.0, означает, что даже если браузеры по-прежнему поддерживают их, согласно рекомендации Консорциума W3C они не должны больше использоваться. Веб-дизайнерам рекомендуется использовать CSS (Cascading Style Sheets — каскадные таблицы стилей).
Главные преимущества CSS:
- Более чистый код
- Этот код легче поддерживать
- Он быстрее загружается
- Он лучше оптимизирован для поисковых систем
- Модульный код
- Правила стиля могут применяться ко множеству страниц
- Единообразный дизайн
- Код легче поддерживать
- Сила дизайна
- Точность контроля (позиционирование, размер, поля и др.)
- Разделение труда
- Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн
- Лучше доступность
- Теги больше не используются не по назначению (например,
<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-правил и применяют их к чему-то конкретному.
Читать далее →
Вы можете использовать границы (рамки), применяя их к большинству элементов 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 элемента, близость к пользователю также увеличивается.
Читать далее →
