HTML, XHTML и CSS на 100%
Шрифт:
<input name="Reg_hobby[]" type="checkbox" value="drive" checked />Кататься на машине
<input name="Reg_hobby[]" type="checkbox" value="cook" />Готовить
<input name="Reg_hobby[]" type="checkbox" value="dance" />Танцевать
<input name="Reg_hobby[]" type="checkbox" value="read" checked /> Читать<br />
Добавьте свое фото: <input name="Reg_foto" type="file" size="55" /><br />
Расскажите немного о себе:<br />
<textarea cols="24" rows="10" name="about" wrap="off" >Я самый лучший, лучше меня нет никого.</textarea><br />
</fieldset>
<fieldset title="Информация о нас">
<legend title="Информация о нас" align="center">Информация о нас</legend>
Соглашение:<br />
<textarea cols="24" rows="3" name="about" readonly >Условия нашего соглашения</textarea><br />
</fieldset>
<input name="submit" type="image" src="Send.jpg" alt="Нажмите, чтобы отправить" align="left" border="5" /><input name="reset" type="image" src="Clear.jpg" alt="Нажмите для очистки формы" align="right" />
</form>
</body>
</html>
Фрагмент формы регистрации с объединением полей в группы показан на рис. 6.11.
Рис. 6.11. Фрагмент итоговой формы
На рис. 6.11 видно, что после объединения полей в группы форма стала намного удобнее и логичнее.
Резюме
Мы рассмотрели все возможности построения форм и создали достаточно большую форму регистрации. Возможности, которые предоставляют формы, очень велики. Это главный инструмент общения пользователей в Интернете. Использование форм на сайте позволяет иметь обратную связь с посетителями, а также расширить функциональность сайта.
Глава 7
Введение в таблицы стилей и язык CSS
7.1. Встраивание CSS в HTML
7.2. Синтаксис CSS
7.3. Селекторы
7.4. Псевдоэлементы и псевдоклассы
7.5. Правило @media
7.6. Правила!important
7.7. Правило @impor
В этой главе вы изучите основы языка CSS. Вы увидите, насколько легко разрабатываются таблицы стилей. Для этого достаточно лишь иметь общие представления о языке HTML, который мы подробно разобрали в предыдущих главах. Язык CSS в настоящее время считается основным средством оформления веб-страниц, пришедшим на смену тегов и атрибутов форматирования. Язык HTML 4 пока еще поддерживает эти средства, но они относятся к числу устаревших и нежелательных. В языке же XHTML оформление веб-страниц допускается только средствами CSS, поэтому если вы хотите, чтобы ваш сайт служил долгие годы, с самого начала создавайте его средствами CSS.
7.1. Встраивание CSS в HTML
Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).
<html>
<head>
<title>Моя домашняя страница</title>
</head>
<body>
<h1>Моя домашняя страница</h1>
На этой странице вы найдете информацию обо мне и моих друзьях.
</body>
</html>
Чтобы сделать текст из элемента H1 синим, вместо обычного атрибута color элемента FONT нужно использовать следующее CSS-правило:
h1 { color: blue }
Собственно правило в CSS состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue. В последующих разделах мы подробно разберем, что такое селектор, и, двигаясь дальше, узнаем, какие бывают свойства CSS и их значения.
В спецификации языка HTML 4 описано два правила описания таблиц стилей для HTML-документов. Первый – это вставка CSS-кода непосредственно внутрь HTML-документа. Второй – это запись таблицы стилей во внешнем файле и установка ссылки на этот файл в HTML-документе.
Чтобы добавить CSS непосредственно внутрь HTML, используется элемент STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD. В листинге 7.2 приведен пример простой HTML-страницы с записанной таблицей стилей внутри документа.
<html>
<head>
<title>Моя домашняя страница</title>
<style type="text/css">
h1 { color: blue }
</style>
</head>
<body>
<h1>Моя домашняя страница</h1>
На этой странице вы найдете информацию обо мне и моих друзьях.
</body>
</html>
Для максимальной гибкости имеется возможность создавать внешние таблицы стилей. Если код таблицы стилей находится во внешнем файле, то вы имеете возможность использовать его во всех страницах сайта. Представьте, что ваш сайт насчитывает более 1000 страниц. Если вы захотите внести какие-то изменения, то вам придется изменять код на каждой странице. Используя внешние таблицы стилей, вы лишь один раз внесете изменения в CSS-файл таблицы стилей.
Для соединения HTML-документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE, рассмотренный выше, должен располагаться в заголовке документа внутри элемента HEAD. Код страницы со ссылкой на внешний файл таблицы стилей представлен в листинге 7.3.
<html>
<head>
<title>Моя домашняя страница</title>
<link rel="stylesheet" href="#" type="text/css">
</head>
<body>
<h1>Моя домашняя страница</h1>
На этой странице вы найдете информацию обо мне и моих друзьях.
</body>
</html>
Как вы заметили, элемент LINK имеет несколько атрибутов. Рассмотрим их названия и подробное описание:
• rel – тип соединения, который для таблиц стилей задается как stylesheet;
• href – местонахождение таблицы стилей, то есть адрес и имя файла. В нашем примере в листинге 7.3 это my_style.css;