Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Создайте абзац с классом
userclass, после существующего абзаца.
В предыдущем уроке научились указывать правильную кодировку для веб-документа. В этом уроке познакомимся с описанием стилей CSS в HTML-документе.
CSS (Cascading Style Sheets) - язык описания внешнего вида документа. Благодаря CSS вы можете визуально оформить веб-страницу.
С языком CSS мы будем разбираться позднее, когда закончим курс по HTML. В этом уроке лишь познакомимся с тегом <style>.
Описание стилей CSS
Стили можно описать тремя способами: подключить файл, описать в HTML документе (в контейнере <head>) или перечислить в универсальном атрибуте style.
Подключение файла, мы рассмотрим в следующем уроке, про атрибут style будет позднее, а сейчас поговорим об описании в документе.
Описание стилей происходит в контейнере <style>. Например, в блоке <style> я написал для класса userclass свойство font-size (в последующих курсах вы узнаете многое о CSS и свойствах, пока не будем вдаваться в подробности).
<!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:
<p class = "userclass">привет</p>В этом уроке мы познакомились с тегом <style>, в котором можно описывать стили CSS для нашей веб-страницы. Мы пока не изучали CSS, но в дальнейшем нам эти знания пригодятся. В следующем уроке научимся подключать внешний файл со стилями CSS. Такой вариант использования стилей предпочтительнее.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
