Основной способ подключения CSS

При изучении селекторов мы подключали CSS при помощи тега <style type="text/css"></style>. Этот способ удобен, но есть еще более оптимальный способ –размещение CSS в отдельном файле. В этом случае,CSS-файл подключается к файлу с HTML-кодом. В отличие от написания CSS-кода в верхней части –хранение CSS в отдельном файле не перегружает содержимое файла с HTML. Кроме того, внешний файл можно подключить сразу к нескольким файлам с HTML-кодом.

Рекомендуется использовать именно такой подход:расположение кодаCSS в отдельном файле!

Именно такой подход будет использоваться нами и в дальнейшем.Файл с кодом CSS имеет расширение: css.

Добавим к нашему проекту новый CSSфайл. Для этого необходимо выделить заголовок проекта мышью в списке проектов(см. рис. 3.8):

Рис. 3.8

Далее нажимаем правую кнопку мыши и в открывшемся в меню выбираем: New, CSS File. Откроется окно, в котором нужно указать имя файла: site.cssи нажать кнопку: Готово (см.рис. 3.9):

Рис. 3.9

В результате к проекту добавится новый файл: site.css. Имя файла может быть любым другим, а расширение именно:css. Далее нам понадобятся два открытых файла: index.php и site.css. Переключение между файлами происходит при помощи закладок сверху. Следующим шагом содержимое внутри тегов styleиз index.php перенесем в файлsite.css и вставим после единственной там строки: @CHARSET "UTF-8";

В результате в файле:site.css получится программный код:

@CHARSET "UTF-8";

span

{

font-size:50px;

color:green;

background-color: blue;

}

#span1

{

color:red;

}

.sp

{

font-size:100px;

}

Вернемся в файл index.php иудалим тег: <style type="text/css"> </style>.Получится код:

<html>

<head>

<title>PagePHP</title>

</head>

<body>

</body>

</html>

Теперь необходимо подключить файл: site.css к файлу: index.php. Для этого добавим специальный тегlink. Атрибутhref указывает имя подключаемого файла: site.css, атрибуты rel со значением stylesheet и type со значением text/css –указывают на формат подключаемого файла – CSS:

Код файла index.phpполучился следующим: