Посмотрим на результат в браузере (см. Рис. 3.5)
Рис. 3.5
Вспомним!!!После внесения изменений в проект – выполняйте сохранение! Для просмотра результатов в браузере – необходимо обновить страницу в браузере клавишей F5.
Тег spanвыделил текст "CSS" в единый фрагмент(т.к. он записан между открывающим и закрывающим тегом). К тегу spanдобавлен атрибут style.
Style –это специальный атрибут, который позволяет подключить стили (свойства) CSS к данному тегу. Егоможно подключать и к другим тегам. Значение style –это список свойств CSS, которые подключаются к данному тегу.
Вспомним: в конце каждого свойства необходимо ставить точку с запятой (;)!
В данном случае мы подключили два свойства: colorи font-size. font-size –это размер шрифта. После имени свойства, через двоеточие (:) указывается значение свойства. Для свойства color –это цвет, для font-size –размер шрифта в пикселях.
Добавим еще одно свойство: background-color: blue; -для цвета фона. Пусть наш фон будет синим. Программный код будет выглядеть так:
<html>
<body>
<span style="color: green; font-size: 50px; background-color: blue;">CSS</span>
</body>
</html>
Посмотрим в браузере, мы видим, что надпись теперь на синем фоне
Обратите внимание, что программный код можно переносить на другую строку, это допускается!
<span style="color: green; font-size: 50px; background-color: blue;">CSS</span>
Мы рассмотрели первый вариант подключения 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!!!