На прошлом занятии мы установили два справочника: по HTMLи CSS.Со справочником по HTML мы познакомились на прошлом занятии. На этом занятии нам понадобится второй справочник: css.chm.
CSS содержит в себе набор свойств или стилей, которые можно подключать к HTML-тегу для изменения его вида. С некоторыми свойствами мы уже познакомились на прошлом занятии:
Hello <span style="color:red;">HTML</span>
Напомним, свойствоcolor задает цвет текста HTMLвнутри тега span. Свойство (стиль)записываются в виде:
<название стиля>:<значение стиля>;
Сначала идет название стиля, далее двоеточие (:), значение стиля и в самом конце точка с запятой (;).Например,
color:red;
Стиль colorуказывает цвет, в данном случае красный. После применения такого свойства – текст обретает нужный цвет.
Важно!!!Не забывайте в конце стиля ставить точку с запятой (;)!!! В случае отсутствия точки с запятой (;) внешний вид страницы может отличаться от предполагаемого. Браузер в любом случае отобразит страницу! В отличие от программы на Java, программный код HTML/ CSS не контролируется перед запуском!
CSS содержит большое количество различных свойств. Но не все из них используются часто.Некоторые CSS свойства могут не поддерживаться различными видами браузеров!
Рассмотрим наиболее часто использующиеся свойства CSS1. Для этого откроем справочник поCSS–запустим файлcss.chm(см. рис. 1). В открывшемся справочнике найдем свойство color. Для этого слева выбираем закладку Содержание и разворачиваем раздел По алфавиту (см. рис. 3.2):
Рис. 3.2
Наше свойство начинается с буквы C –поэтому открываем раздел: C и в списке находим свойство color. На странице описания свойства находится информация о браузерах, которые его поддерживают, предназначение свойства,примеры его использования в программном коде. На начальном этапе использованияCSS будет достаточно пользоваться справочником по указанной схеме для просмотра нужного свойства. Поскольку технология CSS развивается, в справочнике можно увидеть таблицу, в которой указана версия CSS, поддерживающая данное свойство (см. рис. 3.3):
Рис. 3.3
"Галочка V" говорит о том,что свойство поддерживается в указанной версии CSS.
Примечание!!!В нашей работе мы будем использовать свойства, которые поддерживаются всеми версиями CSS.
Относительно версийCSS нужно знать следующее:
· Свойства CSS, которые поддерживаются ранними версиями – как правило, поддерживаются и более поздними.
· Чем современнее браузер –тем больше CSS версий он поддерживает.
· Если браузер не поддерживает свойство CSS, то страница отобразится без использования данного свойства.
Каждая новая версия CSSпозволяет использовать больше свойств и больше возможностей. Но свойства последней версии CSS не будут работать в старом браузере!!! - Об этом нужно помнить при разработке веб-страниц.
Приступим к написанию кода CSS на нашей странице. На этом занятии мы будем использовать проект предыдущих двух занятий: test_php.
Запустим Денвер перед запуском среды разработки. Кроме пакета Денвер запустим Eclipse для PHPи переходим к нашей странице:index.php (см. рис.3.4):
Рис. 3.4
Удалим HTML-код внутри тега body,получится следующее:
<html>
<body>
</body>
</html>
Сохраним изменения в проекте, свернем среду разработки. Откроем браузер и введем в адресной строке: http://test_php,нажмем клавишу Enter. Отобразится пустая страница. Отобразим на странице текст "CSS"размером 50 px. Цвет текста пусть будет зеленым. Для этого добавим тег span с атрибутом style, получится следующее:
Вспомним!!!После внесения изменений в проект – выполняйте сохранение! Для просмотра результатов в браузере – необходимо обновить страницу в браузере клавишей F5.
Тег spanвыделил текст "CSS" в единый фрагмент(т.к. он записан между открывающим и закрывающим тегом). К тегу spanдобавлен атрибут style.
Style –это специальный атрибут, который позволяет подключить стили (свойства) CSS к данному тегу. Егоможно подключать и к другим тегам. Значение style –это список свойств CSS, которые подключаются к данному тегу.
Вспомним: в конце каждого свойства необходимо ставить точку с запятой (;)!
В данном случае мы подключили два свойства: colorи font-size. font-size –это размер шрифта. После имени свойства, через двоеточие (:) указывается значение свойства. Для свойства color –это цвет, для font-size –размер шрифта в пикселях.
Добавим еще одно свойство: background-color: blue; -для цвета фона. Пусть наш фон будет синим. Программный код будет выглядеть так:
Мы рассмотрели первый вариант подключения CSSк HTML при помощи атрибута style, таким образом можно подключить CSS к любому тегу. Это первый способ подключения.
Второй способ подключения CSS более эффективен. Он заключается в подключении CSS в верхней части страницы. Удалим тегspan, вернем исходный вариант:
<html>
<body>
</body>
</html>
Для указания дополнительных настроек страницы существует тег: head. Он имеет отдельный закрывающий тег и записывается в виде: <head> </head> .В нем указывается такая информация, как заголовок страницы, список подключаемых внешних файлов к веб-странице и т.д. Содержимое тега headне выводится на саму страницу. Добавим его над тегом body:
<html>
<head>
</head>
<body>
</body>
</html>
Сразу добавим еще один тег: <title> </title>. Это заголовок страницы, который выводится сверху в браузере. Назовем страницу PagePHP.
<html>
<head>
<title>PagePHP</title>
</head>
<body>
</body>
</html>
Посмотрим в браузере,видим заголовок страницы (см. рис. 3.6):
Рис. 3.6
Внутри тега head можно подключить иCSS. Это делается при помощи тега: <style> < /style>:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
У тега styleтакже имеется атрибут type со значением text/css.Это означает, что внутри тега style будет находиться код CSS. Обратите внимание, что при вводе открывающей угловой (<)скобки –появляется окно подсветки, где можно выбрать тег style из списка (см. рис. 3.7):
Рис. 3.7
При выборе и нажатии клавиши Enter–тег вставляется автоматически с атрибутомtype.
Добавим тег spanс надписью Hello!!!внутри тегаbody,получим:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
</style>
</head>
<body>
<span>Hello!!!</span>
</body>
</html>
Посмотрим в браузере–мы увидим обычный текст: Hello!!!
