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