MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Эта первая статья руководства по CSS для начинающих кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.

Информация: Что такое CSS

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

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

А представление документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.

Примеры

  • Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (HyperText Markup Language — Язык ГиперТекстовой Разметки)
  • Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (XML User Interface Language — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.

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

Подробнее

Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.

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

Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:

HTML о веб-страницах
XML о структуре документов в общем
SVG о графике
XUL о пользовательских интерфейсах в Mozilla

Во второй части данного руководства вы встретите примеры этих языков разметки.

Подробнее

В терминах CSS программа, которая выводит документ пользователю, так называемому user agent (UA). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.

Прочие определения и термины, имеющие отношение к CSS, вы можете найти в Определениях спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.

К действию: Создание документа

  1. Создайте новую папку на вашем компьютере для упражнений.
  2. Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.
  3. Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем doc1.html.
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      </head>
    
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>

    Посмотреть демо

  4. Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.

    Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:

    Cascading Style Sheets

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

Что дальше?

В документе, который вы создали, CSS пока что не использовался. В следующем разделе вы научитесь использовать CSS для стилизации документа.

Метки документа и участники

 Внесли вклад в эту страницу: gleb-svitelskiy, BychekRU, Aleksej, frontgirl
 Обновлялась последний раз: gleb-svitelskiy,