Онлайн підручник https://www.w3schools.com/css
Три способи вставки CSS
Існує три способи вставлення таблиці стилів:
- Зовнішній CSS
- Внутрішній CSS
- Вбудований CSS
Опис зовнішнього CSS:
1. Створити файл у папці сайту з назвою Style.css(назва Style може бути будь-яка)
2. Підключити файл Style.css до файлу нашої веб-сторінки
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф.</p>
</body>
</html>
3. Вигляд файлу "Style.css"
body {
background-color: green;
}
h1 {
color: brown;
margin-left: 20px;
}
Внутрішній CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;}
h1 {
color: brown;
margin-left: 20px;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Вбудований CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;text-align:center;">This is a heading</h1>
<p style="color:white;">This is a paragraph.</p>
</body>
</html>
База зразків http://www.csszengarden.com/
Внутрішній CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;}
h1 {
color: brown;
margin-left: 20px;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Вбудований CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;text-align:center;">This is a heading</h1>
<p style="color:white;">This is a paragraph.</p>
</body>
</html>
База зразків http://www.csszengarden.com/
Немає коментарів:
Дописати коментар