<!--
.krasota {text-indent: 20px; background-color: aqua; color: purple;}
-->
</style>
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
<P CLASS="krasota">
И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением .css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD) и имеет такой вид:
<LINK REL=stylesheet HREF="stili.css" TYPE="text/css">
Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!
Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например, <P STYLE= ".......">), то к данному тэгу будет применяться второй стиль.
Урок 12
Тема: фреймы.
Объяснить, что такое фреймы и для чего они нужны, лучше всего на примере. Страница, которую вы сейчас читаете, состоит из двух фреймов: левого, в нем перечислены все уроки, и правого с собственно самими уроками. Вы можете прокручивать содержимое правого фрейма, в то время как левый остается неподвижным. Это позволяет вам в любой момент легко перейти на любой урок, не разыскивая ссылку внизу или вверху страницы. Словом, разумное использование фреймов позволяет существенно упростить навигацию по сайту и улучшить его дизайн.
Суть фреймов в принципе проста: страница делится на несколько окон, в каждое из которых загружается своя страничка (или картинка), со своим собственным адресом. К примеру, в левом окне - "vasja.html", а в правом - "pupkin.html" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега - <FRAMESET> и <FRAME>. Чтобы их объяснить, рассмотрим пример:
Во-первых, создадим два файла - vasja.html и pupkin.html: <html>
<head>
<title>фрейм</title>
</head>
<body>
Меня зовут Вася!
</body>
</html>
<html>
<head>
<title>фрейм</title>
</head>
<body>
А фамилия моя Пупкин. Это звучит круто!
</body>
</html>
Теперь делаем третий файл, назовем его index.html (назвать можно и по другому):
<html>
<head>
<title>Страницасфреймами!</title>
</head>
<frameset cols="50%,50%">
<frame src="vasja.html">
<frame src="pupkin.html">
</frameset>
</html>
Вот его-то мы и рассмотрим подробнее. Во-первых, в нем отсутствуют теги <body> и </body>. Можно сказать, их роль выполняет тег <frameset>, хотя это не совсем верно. Тег <frameset> (переводится как "набор фреймов") с аттрибутом cols="50%,50%" указывает браузеру, что страница должна быть поделена на два окна (фрейма), каждый шириной в 50% от ширины страницы. Тег <frame> определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего тега). В данном случае указано, что содержимым первого фрейма является файл vasja.html, второго - файл pupkin.html (фреймы считаются слева направо и сверху вниз. Здесь - этот пример в действии (откроется в новом окне). Все просто! Еще несколько примеров: 20% 30% 50%
Три фрейма разной ширины.
<frameset cols="20%,30%,50%">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
25%
75%
Фреймы можно расположить рядами так же легко, как и столбцами. Просто меняем аттрибут cols на rows:
<frameset rows="25%,75%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
Значения аттрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это все оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и все будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звездочку". 200 * 100
Пример:
<frameset cols="200,*,100">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
150 * 2*
Можно устанавливать пропорции для окон. В этом примере левый фрейм будет шириной в 150 пикселов, а остальную часть страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет в 2 раза шире первого.
<frameset cols="150,*,2*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
*
15%
3*
То же, но для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3.
<frameset rows="*,15%,3*">
<frame src="page1.html">
<frame src="page2.html">
<frame src="page3.html">
</frameset>
Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные конструкции страниц. Рассмотрим несколько примеров: 40% 60%
*
<frameset rows="25%,*">
<frameset cols="40%,60%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
<frame src="page3.html">
</frameset>
В этом примере окно разбито на два фрейма: верхний занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов.
Еще один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее: Logo Text
Menu
Banner
<frameset cols="200,*">
<frameset rows="150,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frameset rows="*,70">
<frame src="text.html">
<frame src="banner.html">
</frameset>
</frameset>
Рассмотриматтрибутытегов <frameset> и <frame>. Первый из них, <frameset> - парный тег, т.е. он обязательно должен иметь закрывающий тег. Может включать следующие аттрибуты:
cols и rows - применение и возможные значения этих аттрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т.е. в некоторых браузерах конструкция <frameset cols="50%,50%" rows="30%,70%"> может привести к непредсказуемым результатам;
border="x" - толщина рамок фреймов в пикселах;
frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить;
bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т.д.);
Тег <frame> может включать следующие аттрибуты:
src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм;
name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее в следующем абзаце);
marginwidth="x" - величина отступа содержимого фрейма (текста, графики и т.п.) от границ по горизонтали. Выражается в пикселах, минимальное значение 1;
marginheight="y" - величина отступа по вертикали. Минимальное значение также 1;
scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения аттрибута:
yes - полосы прокрутки присутствуют обязательно;
no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет;
auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;
noresize - наличие этого аттрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой).
Как указывалось выше, аттрибут name тега <frame> позволяет присвоить каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из другого (т.е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере: Меню Урок 1
В левом фрейме у нас меню, а в правом - урок первый:
<frameset cols="200,*">
<frame src="menu.html">
<frame src="urok1.html" name="content">
</frameset>
Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма:
<html>
<head>
<title>menu</title>
</head>
<body>
<a href="urok1.html" target="content">Урок 1</a>
<br>
<a href="urok2.html" target="content">Урок 2</a>
<br>
<a href="urok3.html" target="content">Урок 3</a>
<br>
<a href="urok4.html" target="content">Урок 4</a>
<br>
</body>
</html>
Теперь клик по ссылке "Урок 2" вызовет загрузку страницы "urok2.html" в фрейме с именем "content" (т.е. в правом фрейме). При отсутствии аттрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот аттрибут в данном примере можно указать только один раз - как аттрибут тега <base>, т.е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так: