1. Подключение CSS и оформление текста

Рассмотрим пример оформления главной страницы портала университета.

HTML-код:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Портал университета</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Портал университета</h1>

<p>Добро пожаловать на учебный портал!</p>

</body>

</html>

CSS-код (файл style.css):

body {

font-family: Arial, sans-serif;

background-color: #f2f2f2;

}

h1 {

color: darkblue;

font-size: 28px;

}

p {

color: #333333;

font-size: 16px;

line-height: 1.5;

}

Объяснение:

<link> — подключает внешний CSS-файл.

font-family — определяет шрифт текста.

background-color — задаёт цвет фона.

color — устанавливает цвет текста.

font-size — определяет размер шрифта.

line-height — задаёт межстрочный интервал.

Результат: страница получает светло-серый фон, тёмно-синий заголовок и оформленный текст.

2. Использование CSS-селекторов

Рассмотрим пример оформления элементов с помощью классов и идентификаторов.

HTML-код:

<h1 id="title">Учебные курсы</h1>

<p class="description">

Выберите интересующую дисциплину.

</p>

<p class="description">

Все курсы доступны студентам.

</p>

CSS-код:

#title {

color: blue;

text-align: center;

}

.description {

color: green;

font-size: 18px;

}

Объяснение:

#title — селектор по идентификатору.

.description — селектор по классу.

color — изменяет цвет текста.

text-align — задаёт выравнивание текста.

font-size — определяет размер шрифта.

Один класс может применяться к нескольким элементам, а идентификатор должен быть уникальным в документе.

Результат: заголовок отображается синим цветом по центру, а оба абзаца — зелёным цветом.

3. Оформление блока с помощью блочной модели CSS

Создадим карточку учебного курса.

HTML-код:

<div class="card">

<h2>WEB-технологии</h2>

<p>Основы разработки веб-сайтов.</p>

</div>

CSS-код:

.card {

width: 300px;

padding: 20px;

margin: 15px;

border: 1px solid gray;

background-color: white;

box-sizing: border-box;

}

.card h2 {

color: darkblue;

}

Объяснение:

width — устанавливает ширину элемента.

padding — задаёт внутренние отступы.

margin — задаёт внешние отступы.

border — создаёт границу элемента.

background-color — определяет цвет фона.

box-sizing: border-box — включает внутренние отступы и границу в заданную ширину элемента.

.card h2 — выбирает заголовки h2 внутри элемента с классом card.

Результат: на странице появляется белая карточка с серой границей, отступами и тёмно-синим заголовком.