Введение в CSS

Необходимые базовые знания

Прежде чем продолжить, вам необходимо иметь базовые знания о следующем:

  • HTML
  • XHTML

Если вы хотите最先学习这些项目, пожалуйста, посетите Домашняя страница Посетите соответствующие учебники.

Обзор CSS

  • CSS - это каскадные таблицы стилей (Cascading Style Sheets)
  • Определение стиляКак отображается Элементы HTML
  • Стили обычно хранятся вТаблицы стилейВ
  • Добавление стилей в HTML 4.0 было сделано дляРешение проблемы разделения содержимого и его представления
  • Внешние таблицы стилейЭто может значительно повысить производительность
  • Внешние таблицы стилей обычно хранятся в Файлы CSSВ
  • Множественные определения стилей могутКаскадДля одного

Стиль решил общую проблему

Теги HTML были первоначально спроектированы для определения содержимого документа. Используя теги, такие как <h1>, <p>, <table>, HTML имел своей初衷 выразить информацию типа «Это заголовок», «Это абзац», «Это таблица». В то же время макет документа создавался браузером, не используя任何 теги форматирования.

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

Для решения этой проблемы Всемирная организация веб-стандартов (W3C), некоммерческий альянс по стандартизации, взял на себя миссию стандартизации HTML и создал стиль (Style) вне HTML 4.0.

Все основные браузеры поддерживают каскадные таблицы стилей.

Стильные таблицы大大提高了工作效率

Стильные таблицы определяют, как должны отображаться элементы HTML, как это делали теги шрифта и свойства цвета в HTML 3.2. Стили обычно хранятся во внешних файлах .css. Через редактирование одного простого документа CSS вы можете одновременно изменить макет и外观 всех страниц сайта.

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

Множественные стили будут перекрываться в один

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

Иерархия стилей

Что использовать, если один и тот же HTML-элемент определен несколькими стилями?

В общем, все стили будут перекрываться в новом виртуальном таблице стилей по следующим правилам, где цифра 4 имеет наивысшую приоритетность.

  1. Стандартные настройки браузера
  2. Внешние таблицы стилей
  3. Внутренние таблицы стилей (расположены внутри тега <head>)
  4. .inline-стили (внутри HTML-элемента)

Таким образом,.inline-стили (внутри HTML-элемента) имеют наивысшую приоритетность, что означает, что они будут приоритетными по сравнению со следующими声明ми стилей: стилями в теге <head>, стилями в внешних таблицах стилей или стилями в браузере (по умолчанию).