Теория урока

14. Описание стилей CSS в HTML-документе

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

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

Примечание (10.2024)

CSS (Cascading Style Sheets) - язык описания внешнего вида документа. Благодаря CSS вы можете визуально оформить веб-страницу.

С языком CSS мы будем разбираться позднее, когда закончим курс по HTML. В этом уроке лишь познакомимся с тегом <style>.

Описание стилей CSS

Стили можно описать тремя способами: подключить файл, описать в HTML документе (в контейнере <head>) или перечислить в универсальном атрибуте style.

Подключение файла, мы рассмотрим в следующем уроке, про атрибут style будет позднее, а сейчас поговорим об описании в документе.

Описание стилей происходит в контейнере <style>. Например, в блоке <style> я написал для класса userclass свойство font-size (в последующих курсах вы узнаете многое о CSS и свойствах, пока не будем вдаваться в подробности).

Пример (html)

<!DOCTYPE html>
<html>
	<head>
		<title>codebra</title>
		<style type="text/css">
			.myclass {
				font-size: 30px;
				text-align: right;
			}
			.userclass {
				width: calc(100% - 20px - 4px);
				text-align: center;
				font-size: 40px;
				color: #39D1B4;
				border: 2px solid #39D1B4;
				margin: 0 0 20px 0;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<p class = "myclass">Я тег с классом myclass</p>
	</body>
</html>

Свойство font-size изменяет размер текста, в данном примере, в пикселях (px). Чтобы применить данный класс к какому-либо тегу, мы пишем атрибут class и в значение указываем имя нашего класса.

В CSS класс начинается с «.» (точка), а id с «#» (решетка, sharp). Пример использования класса userclass:

Пример (html)

<p class = "userclass">привет</p>

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

14. Описание стилей CSS в HTML-документе

Описание стилей CSS

Похожие уроки Codebra