Главная » Все про CSS » Как подключить CSS. Методы и способы подключений.

Как подключить CSS. Методы и способы подключений.

2013-02-05 / Вр:13:47 / просмотров: 11866

Здравствуйте, мои уважаемые читатели блога bloggood.ru. В сегодняшней статье пойдет речь о методах или способах подключения таблицы стилей CSS. Я вам расскажу, как можно подключить CSS к html сайту четырьмя способами. Эти четыре способа подключения вам в дальнейшем пригодятся, так как бывают случаи, когда необходимо использовать на сайте эти все методы подключения. Для тех, кто не знает, что такое таблицы стилей CSS, прочитайте эту статью.

Приступим... :idea:

Как подключить CSS. Методы и способы подключений.

Таблицы связанных стилей.

Способ подключения CSS - №1

Способ №1 - самый удобный способ определения стилей для сайта. Все стили для сайта хранятся в одном отдельном файле и используются для любых веб-страниц. Для подключения или для связки таблицы CSS к html странице используется тег LINK в заголовке страницы.

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

или

<link rel="stylesheet" type="text/css" href="http://ВАШ САЙТ/style.css">

Пример подключение таблицы CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

Плюсы данного способа:

1. Использование одного файла стилей CSS для всех веб-страниц веб-сайта;

2. Можно изменять вид сайта через таблицу стилей без редактирования веб-страниц;

3. При изменении стиля в одном файле style.css, стиль автоматически применяется ко всем страницам, где только есть на CSS файл подключение. Это очень удобно;

4. При первой загрузке веб-сайта, файл с CSS стилем помещается в кэш на локальном компьютере пользователя, отдельно от веб-страниц, по этой причине загрузка сайта происходит намного быстрее.

Таблицы глобальных стилей.

Способ подключения CSS - №2

Способ №2 не так эффективен и удобен как способ №1, но бывают моменты, что и этот способ подключения CSS необходим.
Этот стиль подключается и прописывается в самом документе и размещается в заголовке веб-страницы между тегами <head></head>. Подключается стиль тегом <STYLE>.

<style type="text/css"></style>

Пример подключение таблицы CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<style type="text/css">
H2
{
font-size: 90px; /* Размер шрифта */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Шрифт */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2>Заголовок</H2>
</body>
</html>

В этом примере я показал изменение стиля заголовка <H2>. Теперь на этой веб-странице достаточно только указать тег <H2> и стили добавятся к нему автоматически.

Внутренние стили.

Способ подключения CSS - №3

Способ №3 используется в редких случаях. Внутренний стиль служит для изменения одиночного тега на веб-странице. Для подключения стиля используется параметр style.

Пример подключение таблицы CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
</head>
<body>
<H2 style="font-size: 50px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #cc0000">Заголовок</H2>
</body>
</html>

Комбинированный метод подключения стилей.

Способ подключения CSS - №4

В этом способе используется сразу несколько стилей, которые мы использовали выше (способ №1 - №3).

Пример подключение таблицы CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<style type="text/css">
H2
{
font-size: 90px; /* Размер шрифта */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Шрифт */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<H2 style="font-size: 50px; font-family: Verdana, Arial, Helvetica, sans-serif; color: green;">Заголовок</H2>
<H2>Заголовок</H2>
</body>
</html>

В итоге по примеру у нас получится первый заголовок красного цвета с размером 50 пикселей, а следующий — зеленым цветом и с размером 90 пикселей.

Повторюсь, что все описанные методы использования CSS могут применяться самостоятельно, а могут совмещаться друг с другом. Это можно увидеть в способе№4.