Селектор по классу:
Использование идентификатора подразумевает задание свойств для одного тега. Когда необходимо применить группу свойств для группы тегов, используется селектор по классу.У каждого тега имеется атрибут под названием: class.
Атрибутclass и понятие класса селектора не имеет ничего общего с классом в Java!
При помощи атрибутаclass можно задать одно имя целой группе тегов. Добавим к двум вторым тегам span атрибут class со значением: sp, получим:
<span id="span1">1</span>
<span class="sp">2</span>
<span class="sp">3</span>
В отличие от идентификатора –значение атрибута classможет совпадать для нескольких тегов. После селектора по идентификатору добавим селектор по классу.Селектор по классу начинается с символа точка (.), затем идет имя класса:.sp. Далее в фигурных скобках перечисляются свойства CSS:
.sp
{
font-size:100px;
}
Пусть цифры 2 и 3 на нашей странице должны иметь размер шрифта 100px.Полностью программный код будет выглядеть так:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
span
{
font-size:50px;
color:green;
background-color: blue;
}
#span1
{
color:red;
}
.sp
{
font-size:100px;
}
</style>
</head>
<body>
<span id="span1">1</span>
<span class="sp">2</span>
<span class="sp">3</span>
</body>
</html>
Посмотрим в браузере,что у нас получилось. В селекторе по классу указано одно свойство: font-size, которое изменяет размер текста и делает его равным100 пикселей (100px). Это свойство применяется к тегам, у которых в атрибуте class указано имя: sp.
При помощи селекторов по тегу, идентификатору и классу можно эффективно настроить отображение элементов страницы.
Основной способ подключения 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>
<span id="span1">1</span>
<span class="sp">2</span>
<span class="sp">3</span>
</body>
</html>
Теперь необходимо подключить файл: site.css к файлу: index.php. Для этого добавим специальный тегlink. Атрибутhref указывает имя подключаемого файла: site.css, атрибуты rel со значением stylesheet и type со значением text/css –указывают на формат подключаемого файла – CSS:
<link href="site.css" rel="stylesheet" type="text/css" />
Код файла index.phpполучился следующим:
<html>
<head>
<title>PagePHP</title>
<link href="site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span id="span1">1</span>
<span class="sp">2</span>
<span class="sp">3</span>
</body>
</html>
Сохраним все файлы проекта. Обратите внимание, что кнопка:Сохранить всесохраняет сразу все измененные файлы в проекте. Посмотрим в браузере на то,что у нас получилось. Если результат не изменился –это значит, что теперь CSS-кодподключился из файла: site.css.