Войти
s-lub » Учебники » CSS » Как подключить CSS таблицу к HTML документу?

Как подключить CSS таблицу к HTML документу?

Как подключить CSS таблицу к HTML документу?

Как мы уже говорили, один файл CSS может оправлять сразу тысячами страниц одного сайта, но для этого этот отдельный CSS-файл нужно подключить к страницам сайта.

Для этого нужно его прописать в самом начале старницы сайта между тегами <head> и </head>.

Вот два варианта подключения CSS к сайту (можно использовать любой):

- <link href="/style.css" type="text/css" rel="stylesheet">

- <link rel="stylesheet" type="text/css" href="style.css">

Именно эта строка будет указывать браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
А вот пример всей верхней части страницы сайта:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="windows-1251">
<title>Учебник CSS</title>
<meta name="description" content="Учебник CSS">
<link href="/style.css" type="text/css" rel="stylesheet">
</head>

Как понимаете это вариант простейшей страницы…

Но можно и не выносить CSS стили в отдельный файл (в теории, на практике CSS файл будет из нескольких сотен строк и в самом HTML документе он будет выглядеть не суразно), но вот пример встроенного css свойства в сам HTML документ:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="windows-1251">
<title>Учебник CSS</title>
<meta name="description" content="Учебник CSS">
<style type="text/css">
h1{color:blue;font-size:14px}
</style>
</head>

В данном случае все теги «Н1» будут синего цвета и 14 резмера.

А вот пример изменения стилей непосредственно в самом HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Создаём сайт</title>
</head>
<body>
<h1 style="color:blue;font-size:14px">Этот текст будет синего цвета и 14 размера</h1>
</body>
</html>