Базовые концепции CSS

Last updated: 9 мая 2025 г.

Как уже говорилось, html нужен только чтобы задать определенную структуру странице и добавлять на нее некоторые элементы.

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

Разделение CSS и HTML – это попытка разделить код, которым выполняется дизайн страницы и код, которым выполняется придание ей структуры.

CSS. Базовые концепции

Весь css код обычно пишется в отдельном файле, обычно с именем style.css. Как видим, css код пишется в файле со своим собственным особым форматом – css.

В отдельном файле css код пишется, чтобы его потом можно было применить ко многим html страницам. То есть можно задавать дизайн сразу многим страницам в одном файлике style.css.

Давайте создадим css файл со стилями и html файл страницы в папке HTML.

Стили из файла style.css будут применены к файлу pageWithCSS.html.

Дизайн(стили) придается конкретным html тегам с помощью свойств.

Чтобы придать конкретному html тегу страницы некоторые свойства, в css файле указывается тег, которому мы хотим придать их, а потом в фигурных скобочках эти свойства.

1/*Комментарии в css как в Java*/
2
3/*Можно задавать группу свойств сразу нескольким 
4тегам страницы. Тогда пишем их через запятую*/
5h1, h2 {
6    /*указываем жирность шрифта тегов h1 и h2 равной 600*/
7    font-weight: 600;
8    /*указываем шрифт "Inter" для тегов h1 и h2*/
9    font-family: ‘Brush Script MT’, cursive;
10}
11
12/*а можно по отдельности. Придем свойства только тегу h3*/
13h3 {
14    font-weight: 600;
15    font-family: ‘Courier New’, monospace;
16}
17
18/*Придем свойства только тегу img*/
19img {
20    /*тип рамки у картинки*/
21    border-style: dashed;
22    /*цвет рамки у картинки*/
23    border-color: red;
24    /*размер рамки у картинки*/
25    border-radius: 15px;
26}

Теперь как же придать только что заданные свойства нашей pageWithCSS.html странице?

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5
6    <!-- В теге link в аттребуте href нужно указать путь к css файлу. 
7         С помощью link могут подключаться не только стили но и разные другие файлы, 
8         поэтому с помощью rel="stylesheet" мы указываем что подключается именно css файл. 
9         Теперь все стили, которые мы определили в style.css будут применены к этой html странице. -->
10    <link rel="stylesheet" href="C:\HTML\style.css" />
11</head>
12<body>
13    <h1 align="center">Большой заголовок</h1>
14    <h2 align="center">Заголовок поменьше</h2>
15    <h3 align="center">Ваше маленький заголовок жесть</h3>
16
17    <center>
18        <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png" />
19    </center>
20</body>
21</html>

Тестируем написанный HTML+CSS код

Давайте откроем только что написанную страницу в браузере.

Как видим, свойства определенные в файле style.css были успешно применены к тегам на странице pageStructure.html.

Текст тегов h1, h2 стал жирным и принял шрифт Brush Script MT. Тег h3 стал жирным и принял шрифт ‘Courier New’, monospace. У картинки же появились закругления и рамка красного цвета. То есть всё, как мы писали в css файле.