Skip to content

Commit d1d6a32

Browse files
committed
Стилизует страницу
1 parent fbce775 commit d1d6a32

File tree

3 files changed

+142
-100
lines changed

3 files changed

+142
-100
lines changed

css/style.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ a:hover {
2323

2424
h1,
2525
h2,
26-
h4 {
26+
h3 {
2727
margin: 0;
2828

2929
font-weight: normal;
@@ -32,6 +32,7 @@ h4 {
3232
}
3333

3434
h2,
35+
h3,
3536
h4 {
3637
line-height: 1.2;
3738
}
@@ -45,7 +46,7 @@ h2 {
4546
font-size: 2.5rem;
4647
}
4748

48-
h4 {
49+
h3 {
4950
font-size: 1.75rem;
5051
}
5152

@@ -279,6 +280,10 @@ footer {
279280
padding: 3rem;
280281
}
281282

283+
.chapter-part-col--full-width {
284+
width: 100%;
285+
}
286+
282287
.chapter-part-col + .chapter-part-col {
283288
border-top: 0;
284289
}

html-css.html

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h1>Стиль кода Академии HTML</h1>
3333
<h2>Оглавление</h2>
3434
<article class="chapter-part">
3535
<div class="chapter-part-col">
36-
<h4>HTML</h4>
36+
<h3>HTML</h3>
3737
<ul>
3838
<li><a href="#html-syntax">Синтаксис</a></li>
3939
<li><a href="#html-validator">Валидность</a></li>
@@ -49,7 +49,7 @@ <h4>HTML</h4>
4949
</ul>
5050
</div>
5151
<div class="chapter-part-col">
52-
<h4>CSS</h4>
52+
<h3>CSS</h3>
5353
<ul>
5454
<li><a href="#css-syntax">Синтаксис</a></li>
5555
<li><a href="#css-order">Порядок свойств</a></li>
@@ -66,7 +66,7 @@ <h2>HTML</h2>
6666

6767
<article class="chapter-part">
6868
<div class="chapter-part-col">
69-
<h4 id="html-syntax">Синтаксис</h4>
69+
<h3 id="html-syntax">Синтаксис</h3>
7070
<ul>
7171
<li>Для отступов у&nbsp;вложенных элементов используются два пробела. Для правильного форматирования используйте файл <a href="https://github.com/htmlacademy/codeguide/blob/master/.editorconfig" target="_blank">.editorconfig</a> в&nbsp;вашем редакторе.</li>
7272
<li>Теги и&nbsp;их&nbsp;атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.</li>
@@ -99,7 +99,7 @@ <h4 id="html-syntax">Синтаксис</h4>
9999

100100
<article class="chapter-part">
101101
<div class="chapter-part-col">
102-
<h4 id="html-validator">Валидность</h4>
102+
<h3 id="html-validator">Валидность</h3>
103103
<p>
104104
Документ должен проходить проверку на&nbsp;валидность. Для проверки используется <a href="http://validator.w3.org/nu/" target="_blank">современный валидатор</a>.
105105
</p>
@@ -108,7 +108,7 @@ <h4 id="html-validator">Валидность</h4>
108108

109109
<article class="chapter-part">
110110
<div class="chapter-part-col">
111-
<h4 id="html-doctype">HTML-доктайп</h4>
111+
<h3 id="html-doctype">HTML-доктайп</h3>
112112
<p>
113113
В&nbsp;начале страницы обязательно должен быть указан актуальный <code>doctype</code>, чтобы браузер отображал её&nbsp;в&nbsp;режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во&nbsp;всех современных браузерах.
114114
</p>
@@ -126,7 +126,7 @@ <h4 id="html-doctype">HTML-доктайп</h4>
126126

127127
<article class="chapter-part">
128128
<div class="chapter-part-col">
129-
<h4 id="html-encoding">Кодировка символов</h4>
129+
<h3 id="html-encoding">Кодировка символов</h3>
130130
<p>
131131
Кодировка символов на&nbsp;странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка <code>utf-8</code> предпочтительна.
132132
</p>
@@ -143,7 +143,7 @@ <h4 id="html-encoding">Кодировка символов</h4>
143143

144144
<article class="chapter-part">
145145
<div class="chapter-part-col">
146-
<h4 id="html-style-includes">Подключение стилей</h4>
146+
<h3 id="html-style-includes">Подключение стилей</h3>
147147
<p>
148148
Стилевые файлы с&nbsp;помощью <code>&lt;link&gt;</code> подключаются внутри <code>&lt;head&gt;</code>. При этом атрибут <code>type</code> для тега <code>&lt;link&gt;</code> не&nbsp;указывается, так как его значение <code>text/css</code> устанавливается по&nbsp;умолчанию.
149149
</p>
@@ -173,7 +173,7 @@ <h4 id="html-style-includes">Подключение стилей</h4>
173173

174174
<article class="chapter-part">
175175
<div class="chapter-part-col">
176-
<h4 id="html-js-includes">Подключение скриптов</h4>
176+
<h3 id="html-js-includes">Подключение скриптов</h3>
177177
<p>
178178
Скрипты должны подключаться в&nbsp;самом низу страницы, чтобы при её&nbsp;загрузке не&nbsp;блокировать отображение содержимого.
179179
</p>
@@ -207,7 +207,7 @@ <h4 id="html-js-includes">Подключение скриптов</h4>
207207

208208
<article class="chapter-part">
209209
<div class="chapter-part-col">
210-
<h4 id="html-attribute-order">Порядок атрибутов</h4>
210+
<h3 id="html-attribute-order">Порядок атрибутов</h3>
211211
<p>
212212
Атрибут класса у&nbsp;HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и&nbsp;быстрее разбираться в&nbsp;назначении блоков по&nbsp;их&nbsp;классам.
213213
</p>
@@ -228,7 +228,7 @@ <h4 id="html-attribute-order">Порядок атрибутов</h4>
228228

229229
<article class="chapter-part">
230230
<div class="chapter-part-col">
231-
<h4 id="html-boolean">Логические атрибуты</h4>
231+
<h3 id="html-boolean">Логические атрибуты</h3>
232232
<p>
233233
Для логических атрибутов (например, <code>checked</code>, <code>disabled</code>, <code>required</code>) значение не&nbsp;указывается, а&nbsp;сами атрибуты указываются последними и&nbsp;в&nbsp;единообразной последовательности во&nbsp;всём документе.
234234
</p>
@@ -249,7 +249,7 @@ <h4 id="html-boolean">Логические атрибуты</h4>
249249

250250
<article class="chapter-part">
251251
<div class="chapter-part-col">
252-
<h4 id="html-form-labels">Подписи полей ввода</h4>
252+
<h3 id="html-form-labels">Подписи полей ввода</h3>
253253
<p>
254254
Для улучшения взаимодействия пользователя с&nbsp;элементами форм, при нажатии на&nbsp;подпись поля, оно должно активироваться. Для этого элемент формы связывается с&nbsp;его описанием с&nbsp;помощью идентификатора и&nbsp;атрибута <code>for</code> тега <code>&lt;label&gt;</code>.
255255
</p>
@@ -273,7 +273,7 @@ <h4 id="html-form-labels">Подписи полей ввода</h4>
273273

274274
<article class="chapter-part">
275275
<div class="chapter-part-col">
276-
<h4 id="html-img-sizes">Размеры картинок</h4>
276+
<h3 id="html-img-sizes">Размеры картинок</h3>
277277
<p>
278278
Изображениям <code>&lt;img&gt;</code> должны быть явно заданы с&nbsp;помощью атрибута размеры в&nbsp;пикселях. В&nbsp;случае пикселей размерность не&nbsp;нужна.
279279
</p>
@@ -303,7 +303,7 @@ <h4 id="html-img-sizes">Размеры картинок</h4>
303303

304304
<article class="chapter-part">
305305
<div class="chapter-part-col">
306-
<h4 id="html-language">Атрибут языка</h4>
306+
<h3 id="html-language">Атрибут языка</h3>
307307
<p>
308308
Для элемента <code>&lt;html&gt;</code> в&nbsp;атрибуте <code>lang</code> должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
309309
</p>
@@ -325,7 +325,7 @@ <h2>CSS</h2>
325325

326326
<article class="chapter-part">
327327
<div class="chapter-part-col">
328-
<h4 id="css-syntax">Синтаксис</h4>
328+
<h3 id="css-syntax">Синтаксис</h3>
329329
<ul>
330330
<li>После значения свойства обязательно ставится точка с&nbsp;запятой.</li>
331331
<li>Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл <a href="https://github.com/htmlacademy/codeguide/blob/master/.editorconfig" target="_blank">.editorconfig</a> в&nbsp;вашем редакторе.</li>
@@ -372,7 +372,7 @@ <h4 id="css-syntax">Синтаксис</h4>
372372

373373
<article class="chapter-part">
374374
<div class="chapter-part-col">
375-
<h4 id="css-order">Порядок свойств</h4>
375+
<h3 id="css-order">Порядок свойств</h3>
376376
<p>
377377
Объявления логически связанных свойств группируются в&nbsp;следующем порядке:
378378
</p>
@@ -443,7 +443,7 @@ <h4 id="css-order">Порядок свойств</h4>
443443

444444
<article class="chapter-part">
445445
<div class="chapter-part-col">
446-
<h4 id="css-class-names">Имена классов</h4>
446+
<h3 id="css-class-names">Имена классов</h3>
447447
<ul>
448448
<li>Имена классов пишутся строчными буквами, используется дефис (но&nbsp;не&nbsp;знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во&nbsp;взаимосвязанных классах (например, <code>.button</code> и <code>.button-danger</code>).</li>
449449
<li>Имена классов должны быть такими, чтобы по&nbsp;ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение&nbsp;&mdash; <code>.btn</code> для кнопок), но&nbsp;не&nbsp;делайте их&nbsp;слишком длинными (более трёх слов).</li>
@@ -469,7 +469,7 @@ <h4 id="css-class-names">Имена классов</h4>
469469

470470
<article class="chapter-part">
471471
<div class="chapter-part-col">
472-
<h4 id="css-import">Правило <code>@import</code></h4>
472+
<h3 id="css-import">Правило <code>@import</code></h3>
473473
<p>
474474
Правило <code>@import</code> работает медленнее, чем тег <code>&lt;link&gt;</code>. В&nbsp;стилях <code>@import</code> не&nbsp;должен использоваться.
475475
</p>
@@ -489,7 +489,7 @@ <h4 id="css-import">Правило <code>@import</code></h4>
489489

490490
<article class="chapter-part">
491491
<div class="chapter-part-col">
492-
<h4 id="css-font-variant">Варианты шрифта</h4>
492+
<h3 id="css-font-variant">Варианты шрифта</h3>
493493
<p>
494494
Альтернативные варианты шрифта и&nbsp;тип семейства указываются в&nbsp;конце перечисления <code>font-family</code>.
495495
</p>

0 commit comments

Comments
 (0)