- •Понятия и определения
- •Html - основа основ
- •Тэги html
- •Структура html-документа
- •Атрибуты тэгов
- •Гиперссылки и совершенствование внешнего вида текста
- •Картинки на страничке
- •Создание и оптимизация изображений для Web-сайта
- •Анимация изображений
- •Изображение и гиперссылки
- •Сложные таблицы
- •Изображения и таблицы
- •Стили и ссылки
- •Стили, классы, селекторы
- •Каскадные таблицы стилей
- •Группа параметров
- •Маркированные списки
- •Управление фреймами
- •Мета-тэги
- •Index - разрешена индексация индексных ( стартовых)страниц - обычно это - index.Html;
- •Заключение
Каскадные таблицы стилей
Итак, мы убедились, что задавая стиль (класс, селектор) для каждого элемента Вы можете достаточно оперативно менять стиль (дизайн) своего сайта. Причем все эти стили, как Вы успели заметить, причем эти оформления заносятся в однин перечень, одну таблицу и позволяют съэкономить на объеме страницы, увеличивая скорость загрузки. Менять дизайн, настройки страницы можно, изменяя дизайн элементов этой самой таблицы.
Но остался еще один недостаток. Необходимо прописывать стили в теле <head> каждого HTML-документа. Этот недостаток легко устраняется прописывая все оформления стилей в отдельном файле. Это файл с расширением *.css. CSS (Cascading Style Sheets) - означает каскадная таблица стилей. К примеру Вы можете создать файл styles.css и поместить в него все то, что Вы помещали в тело тэга <head>, но только сам тэг <style (как открывающий, так и закрывающий) там уже указывать не требуется.
В любом текстовом редакторе создаетм файл styles.css или с любым другим названием (не забыв при этом, что расширение должно быть *.css) с первой же строки сразу можно записывать оформления для элементов по уже привычной для нас схеме:
имя_тега {параметр_тега1: значение; ... }
имя_тега.класс {параметр_тега1: значение; ... }
.класс {параметр_тега1: значение; ... }
А как же включить этот отдельный файл в Вашу HTML-страничку? Да очень просто. Для этого достаточно в теле тэга <head> поместить следующий код:
<head>
<link rel="stylesheet" type=
"text/css" href="styles.css">
</head>
Этой единственной строчкой Вы подключите к своему HTML-документу энное количество стилей, классов и др. Причем все стили записаны в одном файле, а подключаться могут ко многим HTML-страницам. Таким образом, помимо экономии на объеме страниц, Вы создаете единый дизайн для всех страниц.
В случае же если Вы хотите для некоторых страниц применять несколько отличный дизайн, то Вы можете создать еще один *.css файл и подключить его. К одной и той же странице можно подключать несколько *.css файлов. Возможна и смешанная запись:
<head>
<LINK href="../styles.css"
type=text/css rel=stylesheet>
<style type="text/css">
TD { text-align: center }
TD.left { text-align: left }
P { text-align: left; color: black}
P.cursive { text-align: left; color:
black; font-style: italic; }
.myclass { text-align: left; color:
red; font-style: bold; }
#myid { position:relative; left:160px;
top:10px; width:350px; height:100px;}
</style>
</head>
В заключении приведем наиболее часть употребимые элементы стилей:
text-align |
Выравнивание текста по горизонтали |
color |
Цвет элемента текста |
background-color |
Цвет фона |
font-family |
Семейство шрифтов (Verdana, Geneva, Arial, Helvetica, sans-serif и др.) |
font-size |
Размер шрифта |
margin |
Отступ: (margin-bottom - снизу, margin-top - сверху, margin-left - слева, margin-right - справа) |
border |
Стиль рамки |
padding |
Заполняемость (применяется для получения эффекта, как в случае с заголовком этой страницы) |
Имеется неплохой визуальный редактор стилей - TopStyle - продукт компании Bradsoft, информацию о котором можно получить по адресу http://www.bradsoft.com/topstyle Источник: web-brodilka.ru
Тэг Fieldset
Язык HTML постоянно развивается и обогащается массой новых и интересных тэгов. Среди них и тэг <fieldset>. Здесь хочется сделать одно важное замечание. Этот тэг является нововведением и относится к версии HTML 4.0. Поэтому будет работать только в Internet Explorer 4.0 и выше. За его работоспособность в других броузерах ручаться нельзя. Но учитывая тот факт, что большинство пользователей в качестве интернет обозревателя используют Internet Explorer 5.0 и выше, полагаю, этот тэг заслуживает внимания.
Рассмотрим следующий пример: