Skip to content

Commit 37f2d06

Browse files
Mikey191Mikey191
committed
pravky
1 parent 814c9d6 commit 37f2d06

File tree

5 files changed

+302
-53
lines changed

5 files changed

+302
-53
lines changed

‎README.md

+22-20
Original file line numberDiff line numberDiff line change
@@ -1949,6 +1949,8 @@ body {
19491949

19501950
**Липкие элементы комбинируют черты относительного и фиксированного позиционирования**. **Элемент** находится в **потоке документа, пока не достигает определённой позиции**, после чего **"прилипает"** к экрану и ведёт себя как фиксированный элемент. Это особенно полезно для создания меню, которое остаётся на экране при прокрутке, но только после определённой точки.
19511951

1952+
Когда вы задаёте элементу `position: sticky`, его родитель автоматически становится **«липким»** контейнером! Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера.
1953+
19521954
**Пример липкого позиционирования**:
19531955

19541956
```css
@@ -2392,26 +2394,26 @@ h1 {
23922394

23932395
**Задания**:
23942396

2395-
1. Установить для всех заголовков `<h2>` размер шрифта 24px, сделать шрифт жирным, а внешнии отступы от текста сверху и снизу равными 15px.
2396-
2. Установить размер шрифта для всех параграфов 18px и внутренние отступы 10px.
2397-
3. Примените box-sizing: border-box ко всем элементам.
2398-
4. Установить фон #35424a для header и footer, а также цвет текста белый.
2399-
5. Установить размер шрифта 32px для заголовка первого уровня и отступы снизу 20px.
2400-
6. Стилизация текста: выравнивание текста по ширине justify и межстрочный интервал 1.6.
2401-
7. Примените внешнии отступы сверху и снизу 20px и внутреннии отступы 20px и границы 2px solid #dddddd к секциям.
2402-
8. Установить размер изображения: ширина 100% и максимальная ширина 300px, а так же внешний отступ сверху 15px.
2397+
1. Установить для всех заголовков `<h2>` размер шрифта 24px, сделать шрифт жирным, а внешнии отступы от текста сверху и снизу равными `15px`.
2398+
2. Установить размер шрифта для всех параграфов `18px` и внутренние отступы `10px`.
2399+
3. Примените `box-sizing: border-box` ко всем элементам.
2400+
4. Установить фон `#35424a` для `header` и `footer`, а также цвет текста белый.
2401+
5. Установить размер шрифта `32px` для заголовка первого уровня и отступы снизу `20px`.
2402+
6. Стилизация текста: выравнивание текста по ширине `justify` и межстрочный интервал `1.6`.
2403+
7. Примените внешнии отступы сверху и снизу `20px` и внутреннии отступы `20px` и границы `2px solid #dddddd` к секциям.
2404+
8. Установить размер изображения: ширина `100%` и максимальная ширина `300px`, а так же внешний отступ сверху `15px`.
24032405
9. Установить цвет ссылок внутри навигации белым и убрать подчеркивание.
2404-
10. Установить отступы между элементами списка навигации 10px слева и справа. Убирать стандартные маркеры (точки, кружки или квадраты) у элементов списка. Выравнить содержимое блока по центру.
2405-
11. Установить для всех разделов фон светло-серый #f9f9f9.
2406-
12. Установить для всех секций закругленные углы 5px.
2407-
13. Установить для всех изображений рамку в 1px сплошную черного цвета.
2408-
14. Установить для подвала верхний отступ 30px и текст по центру.
2409-
15. Установить для текста в подвале размер шрифта 14px и цвет серый.
2410-
16. Элементы в списке выставить в одну строку с помощью inline-block.
2411-
17. Для header и footer установить внутренние отступы 20px, а так же выравните текст по центу.
2406+
10. Установить отступы между элементами списка навигации `10px` слева и справа. Убирать стандартные маркеры (точки, кружки или квадраты) у элементов списка. Выравнить содержимое блока по центру.
2407+
11. Установить для всех разделов фон светло-серый `#f9f9f9`.
2408+
12. Установить для всех секций закругленные углы `5px`.
2409+
13. Установить для всех изображений рамку в `1px` сплошную черного цвета.
2410+
14. Установить для подвала верхний отступ `30px` и текст по центру.
2411+
15. Установить для текста в подвале размер шрифта `14px` и цвет серый.
2412+
16. Элементы в списке выставить в одну строку с помощью `inline-block`.
2413+
17. Для `header` и `footer` установить внутренние отступы `20px`, а так же выравните текст по центу.
24122414
18. Выставить все заголовки второго уровня по центру экрана.
2413-
19. Иконку `whatsapp` сделать `fixed` и установить в правый нижний угол экрана. Убрать черную рамку в этой картинки. Установить ширину ярлыка 70px.
2414-
20. У ссылки установить атрибут target так, что бы сайт открылся в новой вкладке браузера.
2415+
19. Иконку `whatsapp` сделать `fixed` и установить в правый нижний угол экрана. Убрать черную рамку в этой картинки. Установить ширину ярлыка `70px`.
2416+
20. У ссылки установить атрибут `target` так, что бы сайт открылся в новой вкладке браузера.
24152417
21. Картинки в третьей секции наложить друг на друга, как изображено на картинке.
24162418
<img src="img/lesson6section3.jpg" alt="21 task" width="300">
24172419

@@ -3928,8 +3930,8 @@ CSS:
39283930

39293931
**Задача**:
39303932

3931-
1. Примените цвет darkblue для всех заголовков `<h1>` и `<h2>` на странице. Используйте селектор по тегу.
3932-
2. Стилизуйте параграф `<p>`, который находится внутри секции .content, с помощью селектора дочерних элементов (`>`). Установите цвет текста `darkgreen`.
3933+
1. Примените цвет `darkblue` для всех заголовков `<h1>` и `<h2>` на странице. Используйте селектор по тегу.
3934+
2. Стилизуйте параграф `<p>`, который находится внутри секции `.content`, с помощью селектора дочерних элементов (`>`). Установите цвет текста `darkgreen`.
39333935
3. Примените фон `#f0f0f0` и полужирный шрифт (`font-weight: bold`) для первого параграфа в секции `.content`, используя псевдокласс `:first-of-type`.
39343936
4. Примените подчеркивание (`text-decoration: underline`) к параграфу, который непосредственно следует за заголовком `<h2>` в секции `.content`, используя соседний селектор (`+`).
39353937
5. Для второго параграфа в блоке `<aside class="sidebar">` установите цвет текста `#b22222`, используя псевдокласс `:nth-of-type(2)`.

‎img/lesson9/work_project.jpg

117 KB
Loading

‎index.html

+50-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,59 @@
11
<!DOCTYPE html>
2-
<html lang="ru">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Путеводитель по шрифтам</title>
6+
<title>Advanced CSS Selectors and Positioning</title>
77
<link rel="stylesheet" href="styles.css" />
88
</head>
99
<body>
10-
10+
<header>
11+
<h1>CSS Selectors and Positioning</h1>
12+
</header>
13+
14+
<main id="main-container">
15+
<section class="intro-section">
16+
<h2>Introduction</h2>
17+
<p>
18+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
19+
placerat ut purus sit amet dapibus.
20+
</p>
21+
<p>
22+
Phasellus hendrerit felis non libero fringilla, vitae consectetur orci
23+
scelerisque.
24+
</p>
25+
</section>
26+
27+
<section class="left-section content">
28+
<h2>Left Block</h2>
29+
<p>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
31+
vitae odio nec urna fermentum consequat.
32+
</p>
33+
<p><span>Special note:</span> Lorem ipsum dolor sit amet.</p>
34+
</section>
35+
36+
<aside class="sidebar">
37+
<h2>Right Block</h2>
38+
<p>
39+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
40+
lacinia odio vitae vestibulum vestibulum.
41+
</p>
42+
<p><span>Notice:</span> Aliquam tincidunt turpis.</p>
43+
</aside>
44+
45+
<section class="left-section content">
46+
<h2>Another Left Block</h2>
47+
<p>
48+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
49+
consectetur erat eu leo elementum, non varius sapien convallis.
50+
</p>
51+
<p><span>Info:</span> Sed tincidunt orci.</p>
52+
</section>
53+
</main>
54+
55+
<footer>
56+
<p>&copy; 2024 Web Design Tutorial</p>
57+
</footer>
1158
</body>
1259
</html>

‎styles.css

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* Общие стили */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #f9f9f9;
5+
margin: 0;
6+
padding: 0;
7+
line-height: 1.6;
8+
}
9+
10+
header {
11+
text-align: center;
12+
background-color: #5d8aa8;
13+
color: white;
14+
padding: 10px 0;
15+
}
16+
17+
h1 {
18+
margin: 0;
19+
}
20+
21+
main {
22+
display: block;
23+
margin: 20px;
24+
padding: 20px;
25+
background-color: #fafafa;
26+
}
27+
28+
footer {
29+
text-align: center;
30+
padding: 10px 0;
31+
background-color: #5d8aa8;
32+
color: white;
33+
}
34+
35+
/* Стили для секции Введение */
36+
.intro-section {
37+
background-color: #f1f1f1;
38+
padding: 15px;
39+
margin-bottom: 20px;
40+
}
41+
42+
/* Блок слева */
43+
.left-section {
44+
background-color: #e0f7fa;
45+
padding: 15px;
46+
margin: 20px 0;
47+
width: 45%;
48+
float: left;
49+
clear: both;
50+
position: relative;
51+
}
52+
53+
/* Блок справа (сайдбар) */
54+
.sidebar {
55+
background-color: #fff9c4;
56+
padding: 15px;
57+
width: 45%;
58+
float: right;
59+
margin: 20px 0;
60+
position: relative;
61+
}
62+
63+
/* Позиционирование синих квадратов в углу */
64+
.left-section::before,
65+
.left-section::after,
66+
.sidebar::before,
67+
.sidebar::after {
68+
content: "";
69+
width: 10px;
70+
height: 10px;
71+
background-color: blue;
72+
position: absolute;
73+
}
74+
75+
.left-section::before,
76+
.sidebar::before {
77+
top: 0;
78+
left: 0;
79+
}
80+
81+
.left-section::after,
82+
.sidebar::after {
83+
bottom: 0;
84+
right: 0;
85+
}
86+
87+
/* Стили текста */
88+
p {
89+
font-size: 16px;
90+
color: #333;
91+
}
92+
93+
h2 {
94+
color: #00796b;
95+
transition: color 0.3s ease;
96+
}
97+
98+
/* Изменение цвета заголовков при наведении */
99+
h2:hover {
100+
color: #ff5722;
101+
}
102+
103+
/* Выравнивание текста для каждого блока */
104+
.intro-section p {
105+
text-align: left;
106+
}
107+
108+
.sidebar p {
109+
text-align: right;
110+
}
111+
112+
.left-section p {
113+
text-align: left;
114+
}
115+
116+
/* Стили для параграфов внутри секций */
117+
.content p:nth-of-type(2) {
118+
color: #ff5722;
119+
}
120+
121+
footer {
122+
clear: both;
123+
}

0 commit comments

Comments
 (0)