Використання таблиці стилів CSS
Змініть це:
<link rel="stylesheet" href="">
На це:
<link rel="stylesheet" href="https://w3schoolsua.github.io/w3css/4/w3.css">
Щоб використовувати таблицю стилів, ви повинні додати клас до елементів HTML, які ви хочете стилізувати:
<div class="w3-container w3-black">
<h1>Це заголовок</h1>
<p>Це параграф.</p>
<p>Це інший параграф.</p>
</div>
HTML / CSS Скелет
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Назва сторінки</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://w3schoolsua.github.io/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="../images/img_la.jpg" alt="LA" style="width:100%">
<div class="w3-container w3-black">
<h1>Це заголовок</h1>
<p>Це параграф.</p>
<p>Це інший параграф.</p>
</div>
</body>
</html>
Натисніть на кнопку "Спробуйте самі", щоб побачити, як це працює!
Спробуйте змінити колір фону контейнера з блакитного на чорний.
Чи вдалося?
Вітаємо!
Ви щойно навчилися основам використання таблиці стилів.
Продовжуйте вчитись далі!
Як зробити адаптивність на сайті?
HTML Код
<div class="w3-row">
<div class="w3-third">
<img src="../images/img_avatar.png" alt="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="../images/img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="../images/img_avatar.png" alt="Name3" style="width:100%">
</div>
</div>
Спробуйте самі »
Як створити картку
Готові до чогось дійсно просунутого?
Як щодо візитної картки в HTML?
Включно з зображенням і текстом.
Пограйте з наведеним нижче кодом деякий час, доки ви не подумаєте, що впоралися з ним.
Після цього ми почнемо кодувати дійсно фантастичні HTML-сторінки.
John Doe
Engineer
HTML Код
<div class="w3-card" style="width:200px">
<img src="../images/img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>
Спробуйте самі »
