Способи підключення css

CSS ( / siːɛsɛs / англ. Cascading Style Sheets - каскадні таблиці стилів ) - формальна мова опису зовнішнього вигляду документа ( веб-сторінки ), написаного з використанням мови розмітки (найчастіше HTML або XHTML ).

1. Стилі описані в середині документа, включені в елемент

<style>...</style>, описаний в розділі <head>. Приклад:

<!DOCTYPE html>

<html>

<head>

.....

<style>

body {

color: red;

}

</style>

</head>

<body>

.....

</body>

</html>

2. Опис стилів знаходиться в окремому файлі і підключається за допомогою тега <link>, вкюченого в розділ<head>. Приклад:

<!DOCTYPE html>

<html>

<head>

.....

<link rel="stylesheet" href="style.css">

</head>

<body>

.....

</body>

</html>

3. Безпосередньо в тілі документа. Приклад:

<!DOCTYPE>

<html>

<head>

.....

</head>

<body>

.....

</p>

</body>

</html>

4. Якщо файл стилів розміщуєтья окремо, він може бути підключений за допомогою інструкції @import в елементі <style> . Приклад:

<!DOCTYPE html>

<html>

<head>

.....

<style media="all">

@import url(style.css);

</style>

</head>

</html>

Докладніше

5. Спосіб, що будемо використовувати на уроках.

Файл style.css (з розширенням css) знаходиться у папці css, що розташована в тій же папці, що і файл index.html, що викликає style.css .

Файл index.html має вигляд

Файл css\style.css має вигляд

Результат відкриття браузером файла index.html має вигляд

Завдання 1

Відтворіть фали, зображені у прикладі 5. Переконайтесь у правильності відображеної сторінки.

Завдання 2

За допомогою css-файла створіть веб-сторінку наступного змісту

<h1> Це заголовок розміром 50 пунктів на блакитному тлі</h1>

<h2>Це заголовок синього кольору</h2>

<p>Цей абзац вирівняно по центру, шрифт sans-serif </p>

Google Sites

Report abuse