Введение в CSS

CSS означает каскадные таблицы стилей (Cascading Style Sheets). CSS - это стандартный язык таблиц стилей, используемый для описания представления веб-страниц (т.е. макета и форматирования).

До CSS几乎所有表示 формальные свойства документов HTML содержались в HTML-маркерах (особенно в HTML-тегах). Все шрифты, цвета фона, стили элементов, рамки и размеры должны быть明确规定 в HTML.

Такой подход привел к тому, что стилистическая информация была повторно добавлена к каждой странице сайта, что сделало разработку крупных сайтов долгим и дорогим процессом, а также увеличило затраты на поддержку.

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

CSS3 - это最新版本的 CSS-стандарта. CSS3 добавляет новые стилистические функции и улучшения, чтобы улучшить функциональность веб-демонстраций.

Что может сделать CSS

CSS может сделать еще многое.

• Вы можете легко применить одинаковые стили к нескольким элементам.

• Вы можете использовать один стиль для управления отображением нескольких страниц сайта.

• Вы можете отображать одну и ту же страницу по-разному на различных устройствах.

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

• Вы можете изменить положение элементов на странице, не изменяя маркеров.

• Вы можете изменить отображение существующих элементов HTML.

• Вы можете трансформировать элементы, масштабировать, вращать и наклонять их в 2D или 3D пространстве.

• Вы можете создать анимации и эффекты перехода, не используя никакой JavaScript.

• Вы можете создать версию веб-страницы, удобную для печати.

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

Преимущества использования CSS

Основное преимущество CSS в том, что он позволяет отделить стиль и макет от содержимого документа. Есть и другие преимущества, почему стоит выбирать CSS?

• CSS экономит много времени -CSS предоставляет много гибкости для настройки стилистических свойств элементов. Вы можете написать один раз CSS. Затем это же код можно применить к группе элементов HTML, а также повторно использовать его на нескольких страницах HTML.

• Легко поддерживать — CSS предоставляет удобный способ обновлять формат документа и поддерживать его一致性 между несколькими документами. Это можно сделать, используя один или несколько стилей, чтобы контролировать все содержимое веб-страницы.

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

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

• Многообразие совместимости с устройствами -CSS также позволяет оптимизировать веб-страницы для различных типов устройств или медиа. Используя CSS, можно представить один и тот же HTML-документ с различным видом для различных устройств (например, компьютеры, телефоны и т.д.).

Содержание этого руководства

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

После знакомства с основами вы перейдете на следующий уровень, где будет介绍 настройку размеров и выравнивания элементов, методы размещения элементов на веб-странице с использованием спрайтов изображений, а также концепции относительного и связанного. Абсолютные единицы, визуальная модель формата, отображение и видимость, слои, псевдоклассы и элементы, стили, связанные с медиа и т.д.

В конце вы сможете изучить некоторые продвинутые функции CSS3, такие как градиентные цвета, эффекты тени, 2D и 3D преобразования, альфа-прозрачность, а также методы создания переходов и анимаций, гибридная компоновка, эффекты фильтров, медиа-запросы и многое другое.