Краткое введение в CSS для начинающих

Development | Amber | Комментировать запись

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

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

Как появился CSS

CSS был впервые представлен Хоконом Ли в 1994 году, когда он работал в Европейской организации ядерных исследований (CERN) вместе с Тимом Бернерс-Ли, изобретателем Всемирной паутины. В то время веб-страницы создавались исключительно с помощью HTML, языка гипертекстовой разметки, который Бернерс-Ли разработал в 1990-х годах. Однако HTML был разработан для описания семантики компонентов веб-документа (заголовков, абзацев и т.п.) и не был предназначен для определения стилей. Со временем HTML все чаще стали использовать для стилизации веб-страниц, что делало код неудобным и громоздким. Тогда ввели CSS – более эффективный метод стилизации отображения и макетов сайтов.

Как CSS работает с HTML

Веб-сайты, созданные с помощью HTML и CSS, обычно включают файл HTML, в котором хранятся текст, ссылки на изображения и теги HTML, и файл CSS, который содержит правила стиля, применяемые к контенту HTML. Например, файл HTML может содержать текст заголовка (отмеченный HTML тегом <h1>) и текст абзаца (отмеченный тегом <p>). Соответствующий файл CSS может включать правила, при прочтении которых браузер сделает заголовок размером 20 пикселей, а весь текст абзаца выделит синим. Эти правила стиля CSS затем будут применяться ко всем заголовкам и абзацам, где бы они ни появлялись в документе HTML – и вам не нужно каждый раз добавлять инструкции по стилю в документ HTML.

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

Заключение

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