Ваш первый Сайт С использованием РНР-скриптов
ЛИСТЫ СТИЛЕЙ
С помощью листов стилей можно форматировать текст, определять его шрифт, цвет, размер и многое другое. Задается стиль с помощью ключевого слова style. Для какого-либо отдельного элемента стиль отределястся так:
Style= "свойство: значение; свойство. значение; ...свойство: значение".
Style имеет свойства и значения этих свойств. Рассмотрим некоторые из этих свойств:
Color определяет цвет текста, а его значения - названия этих цветов или их шестнадцатеричные коды. Свойство от значения отделяется двоеточием (color:yellow или color:#ffff00). Пары свойства:значение отделяются друг от друга точкой с запятой;
Font-size задает размер шрифта, например font-size: 12pt задает шрифт размером в 12 пигов;
Font-family задает название шрифта, например font-family:serif
Font-style задает вид шрифта, например font-style:italic задает наклонный шрифт, a font-style: bold - жирный шрифт;
Background задает цвет фона, на котором будет находиться текст или другой объект. Например, background: peachpuff Задает светло-оранжевый цвет фона элемента;
Width задает ширину текста. Ее можно задать как в единицах длины, гак и в процентах от общей ширины браузера, например width:50%;
Text-align задает выравнивание текста, например text-align:left выравнивает текст по левому краю, text-align:right - по правому краю, text-align:justify - По ширине.
Другие свойства будут рассмотрены далее, в процессе строения сайта. Зададим стиль для текста в контейнере <div>, как показано в листинге 3.2.
Листинг 3.2 (файл Index. php) <Html> <Head>
<Ш1е>Главная страница</Ш1е> </head>
<body bgcolor="silver">
<h2 align=MCENTER"xI>4o6po Пожаловать на мой сайт</(></Ь2> <div style="coIor:red; font-family:Comic Sans MS; width:25%; font-size: 14pt; text-align:justify M>
Это учебный сайт. Он позволит быстро и наглядно изучить
Основные принципы программирования на РНР. Вы научитесь
Составлять скрипты для сайта любой сложности. Эти скрипты
Помогут вам автоматизировать добавление разнообразного материала на
Ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей
О вашем сайте при помощи гостевой книги или системы оценки материалов
</div>
</body>
</html>
Сохраните страницу и запустите браузер. Набранный текст отображен в виде столбика (контейнера) слева, занимающего 25 % от общей ширины браузера, так как мы задали свойству width значение 25 %. Цвет текста (свойство color) задан красным, размер шрифта 14pt, название шрифта задано Comic Sans MS. Если вы предпочитаете другой шрифт, например стандартный Times New Roman, то можете установить его. Свойству text-align (выравнивание текста) я присвоил одно из значений justify (выравнивание по ширине). Если вы поставите другое значение, например left, то текст будет выровнен по левому краю.
Теперь представьте, что у нас несколько текстовых разделов, каждый из которых заключен между парными тегами <div> и </div>. Причем формат, размер, цвет текста мы хотим оставить такими же. Нам нужно будет каждый раз расписывать стиль для каждого тега. Чтобы этого не делать, применим специальный контейнер или парный тег <style>. Он вставляется в заголовочную часть документа, например после закрывающего тега </title>, Но до закрывающего тега </head>. Посмотрите на листинг 3.3.
Листинг 3.3 (файл Index. php) <Html> <Head>
<Ш1е>Главная страница</Ш1е> <style type="text/css">
Div {color:red; font-famiIy:Comic Sans MS; font-size: 14pt; text-align:justify} body {background:silver} </style> </head>
<body>
<h2 align=MCENTER"><I>4o6po Пожаловать на мой сайт</1></Ь2> <div style="width:25%">
Это учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов </div>
</body> </html>
В теге <style type="text/ess "> значение text/ess атрибута type сообщает браузеру, что применяется текст на языке CSS. CSS - набор правил, которые задают форматирование документа. Далее дается указание браузеру, что все элементы <div> должны оформляться так, как указано в фигурных скобках. Как вы заметили далее, в основной части документа (после тега <body>), В теге <div style="width:25%"> в элементе style мы уже не указываем многих свойств, как в листинге 3.2, так как эти свойства уже указаны в головной части документа, в контейнере <style> </style>. Ширину же контейнера <div> Задаем индивидуально - width:25%, хотя, если вы хстите, чтобы все текстовые разделы в контейнерах <div> имели ширину в 25 % от ширины браузера, то и это свойство элемента style можно перенести в фигурную скобку.
Также мы указали браузеру, что для элемента <body> фоновый цвет документа silver. Обратите внимание, что задний фон в этом случае определяет свойство background.
Наш сайт будет состоять из многих страниц. ECjh вы хотите, чтобы все страницы сайта были оформлены однотипно, то удобнее установить стиль сразу для всех страниц, т. с. создать один внешний файл листа стилей. В папке, где у вас находится наша главная страница index.php, создайте текстовый файл и вставьте в него строки:
Div {color: red; font-family: Comic Sans MS; font-size: 14pt; text-align justify} body {background:silver}
Мы записали то, что находится у нас между тегами <style type="text/css"> И </style> (листинг 3.3). Сохраните этот файл как stil.css. Расширение ess показывает, что созданный файл является именно файлом внешнего листа стилей. Теперь удалите из кода страницы index.php (листинг 3.3) контейнер <style Jype="text/css">...</style> и все, что в нем находится. Вместо этого запишите <link type= "text/ess" rel="stylesheet" href="stil.css">, и теперь у вас код будет выглядеть так, как в листинге 3.4.
Листинг 3.4 (файл Index. php) <Html> <Head>
<*Ме>Главная страница</М1е>
<link type="text/css" rel=,'stylesheet" href=Mstil. cssM>
</head> <body>
<h2 align=MCENTER"xI>4o6po пожаловать на мой сайт</1х/Ь2> <div style=Mwidth:25%">
Это учебный сайт. Он позволит быстро и наглядно изучить основные принципы программирования на РНР. Вы научитесь составлять скрипты для сайта любой сложности. Эти скрипты помогут вам автоматизировать добавление разнообразного материала на ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение посетителей о вашем сайте при помощи гостевой книги или системы оценки материалов </div>
</body> </html>
При помощи одиночного тега <link> внешний лист стилей (файл stil.css) Подключается к нашему файлу index.php. Указанные атрибуты этого тега являются обязательными:
Type="text/css"- указываем браузеру, что применяем текст формата CSS.
Href="stil.css" - путь к файлу внешнего листа стилей. У нас этот файл находится в том же каталоге hdocs, что и index.php. Если каталог другой (например, вы решили сохранить лист стилей в подкаталоге stili каталога hdocs), То необходимо его указать (Href="stili/stil.css").
Rel="stylesheet" - указываем браузеру, что элемент <link> устанавливает связь с внешним листом стилей.
Теперь мы можем применить внешний лист стилей stil.css к любому числу страниц сайта. Достаточно в головную часть каждой страницы (между тегами <head> и </head>) вставить указанную выше строку: <link type— "text/ess" rel= "stylesheet" href= "st/l. ess ">.
Несмотря на то, что мы подключили внешний файл стилей, для каждого элемента (тега для оформления текста) на странице index.php (да и на других страницах сайта) можнэ установить свой индивидуальный стиль. Если мы в основной части документа (после тега <hody>) в тег <div style="width:25%"> Добавим, например, цвет yellow (<div style="width:25%; color:yellow">), То текст станет желтым. Это несмотря на то, что во внешнем листе стилей Stil.css цвет текста в теге <div> указан красным. Мы как бы «перебили» красный цвет желтым. Для каждого элемента, если это необходимо, можно задать свой индивидуальный стиль.
Итак, слева мы разместили текст, занимающий 25 % ширины браузера. Далее на 50% ширины разместим картинку, а на остальных 25 % будут располагаться ссылки на другие страницы нашего сайта.
