Здравствуйте, мои уважаемые читатели блога bloggood.ru. В сегодняшней статье пойдет речь о методах или способах подключения таблицы стилей CSS. Я вам расскажу, как можно подключить CSS к html сайту четырьмя способами. Эти четыре способа подключения вам в дальнейшем пригодятся, так как бывают случаи, когда необходимо использовать на сайте эти все методы подключения. Для тех, кто не знает, что такое таблицы стилей CSS, прочитайте эту статью.
Приступим...
Как подключить 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.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222520 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187696 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Один ответ на комментарий - Как подключить CSS. Методы и способы подключений.
Добавить комментарий
Метки: css, для начинающих, основы
Здравствуйте! У меня стоит задача. добавить скрипт гороскопа на сайт. Добавил, но выглядит как-то не очень. Хочу вставить картинки знаков зодиака, но у меня не получается. Как фоновое изображение – меня не устраивает. Хочу добавить блок в таблицу и в него вставить картинку. Бьюсь уже 4 дня. Никак…Можете ли вы мне помочь?