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

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

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

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Создание CSS-правила с несколькими объявлениями

К одному правилу CSS можно добавить несколько объявлений. Попробуйте изменить правило <h1> в файле styles.css (если вы не выполняли предыдущие руководства серии, просто добавьте весь код в файл), внесите выделенные красным объявления:

h1 {
.   color: blue;
.   font-size: 100px;
.   font-family: Courier;
.   text-align: center;
.   }

Сохраните файл и перезагрузите HTML-документ в браузере.

Теперь ваш текст должен быть расположен в центре страницы и отображаться шрифтом Courier размером 100 пикселей:

A Sample Title

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

Создание других правил CSS для стилизации HTML-контента

В этом разделе мы научимся добавлять дополнительные CSS-правила.

Давайте сначала добавим еще немного текста в файл index.html с помощью элемента <p>. Потом мы поэкспериментируем с изменением его свойств, используя новый набор CSS-правил, который будет применяться только к тегам <p>.

В файл index.html добавьте строку <p>Some paragraph text</p> под строкой <h1>A sample title<h1> (если вы не выполняли мануал Основы создания правил CSS, скопируйте и вставьте в файл обе строки).

<h1>A sample title</h1>
<p>Some paragraph text</p>

Сохраните файл index.html и перезагрузите его в окне браузера, чтобы проверить, как отображается этот файл. Ваш браузер должен показать синий заголовок A sample title и под ним абзац без стиля Some paragraph text:

A Sample Title

Some paragraph text

Затем мы добавим CSS-правило для стилизации элемента <p>. Вернитесь в файл styles.css и добавьте следующий набор правил в конец файла:

. . .
p {
color: green;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

Сохраните файл и перезагрузите его в окне браузера, чтобы проверить, как он отображается. Теперь текст элемента <p> должен иметь стиль, объявленный в новом правиле CSS:

A Sample Title

Some paragraph text

Теперь у вас есть CSS-правила для элементов <h1> и <p>, и любой текст в HTML-документе, который вы помечаете этими тегами, будет принимать правила стиля, которые вы объявили для этих элементов в файле styles.css.

Дополнительные примеры

Если вы хотите еще немного поработать с правилами CSS, попробуйте создать наборы правил для других текстовых элементов HTML, – <h2>, <h3> и <h4>, – и использовать их для изменения текста в файле index.html. Например, вы можете скопировать следующий набор правил и добавить их в свой файл styles.css:

. . .
h2 {
color: red;
font-size: 40px;
}
h3 {
color: purple;
font-size: 50px;
}
h4 {
color: green;
font-size: 60px;
}

Сохраните файл, а затем добавьте следующий HTML-контент в файл index.html:

<h2> This is red text with a size of 40 pixels. </h2>
<h3> This is purple text with a size of 50 pixels. </h3>
<h4> This is green text with a size 60 pixels. </h4>

Сохраните файл и загрузите его в браузере. Вы получите такой результат:

This is red text with a size of 40 pixels.

This is purple text with a size of 50 pixels.

This is green text with a size 60 pixels.

Заключение

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