menu
person



Ступенька 39-ая. 

Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.


   
<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</html> (посмотреть)


Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна. 

Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет. 

Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:


   
<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" noresize>
<frame src="menu.html" noresize>
</frameset>
<frame src="content.html" noresize>

</frameset>
</html> (посмотреть)


Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".


   
<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</html> (посмотреть)


Так уже лучше :). Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:


   
<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">

</frameset>
</html> (посмотреть)


Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).

Стоп, стоп, скажет мой читатель, вы же говорили об этих атрибутах, как о нестандартных. Да, конечно, но не стандартны они лишь при употреблении с тэгом <body>, т.к. этого спецификация не предусматривает, однако для тэга <frame>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены. 

Вот такие пироги:) Остальное будет на других ступеньках. 


Ступенька 40-ая. 

В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы. 

Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать? 

Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:


   
<html>
<head>
<title>Хождение по фреймам</title>
</head>
<frameset cols="100,*" border="0">

<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1">

</frameset>
</html>


Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html). 

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы. 

Введем атрибут target в документе со ссылками - menu.html.


   
<html>
<head>
<title>Документ с Меню</title>
</head>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Главная</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a> 
</center>
</body>
</html>


Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).


   
<html>
<head>
<title>Документ с Меню</title>
</head>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="tumki.html" target="window-1">Тумки</a>
<a href="bumki.html" target="window-1">Бумки</a>
<a href="tururumki.html" target="window-1">Турурумки</a>
<a href="tra-la-la.html" target="window-1">Траляля</a> 
</center>
</body>
</html> (посмотреть)


Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :) – наш фрейм-документ (index) и документ, содержащий ссылки (меню). 

Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top: 

<a href="project.html" target="_top">Мой проект о рыбках</a>

Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы). 


Ступенька 41-ая. 

Вот мы добрались и до последней главы о фреймах. Собственно, о фреймах мы закончили говорить в предыдущей главе, а на этой ступеньке мы поговорим об IFrame - "плавающем" фрейме. 

Итак, что такое Iframe, и чем он отличается от просто фреймов. IFrame - "плавающий" или встроенный фрейм. Вы, наверняка встречали его уже много раз на разных сайтах. Для Iframe нам не нужно создавать фрейм-документ, и прописывать в нем фреймовую структуру нашей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.

Как это выглядит:

 


Как вы видите, появляется форма заданного размера, в которой отображается нужный нам документ. Это очень удобно, вы уже наверняка встречались с "плавающим" фреймом, когда регистрировались на каких-либо сайтах, как правило соглашения с пользователем заключены для удобства в "плавающий фрейм", чтобы вы могли ознакомиться с соглашением, не переходя на другую страницу сайта, сразу. 

«Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <iframe></iframe>:

<IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>

В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме. 

Атрибуты height и width отвечают за ширину и высоту встроенного фрейма. 

Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна. 

Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать).

Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.

Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.

Какие подводные камни нас могут ожидать при использовании Iframe – он не поддерживается многими броузерами, в основном старыми версиями броузеров, поэтому стоит подумать прежде, чем включать этот элемент на страницы вашего сайта, так ли это уж необходимо.

На этом наш разговор о фреймах завершен, напоминаю о полезных ссылках в правой колонке, советую изучить, а после переходить к следующей ступеньке, на которой мы начнем новую тему поговорим об объектах и дополнительных средствах, которые облегчают нашу жизнь, делают html-документы динамичными, расширяют наши возможности при создании страниц. 


Ступенька 42-ая. 

Как вы уже могли понять, html не слишком функционален, его возможности весьма ограничены. Из-за этого ему уже много лет предрекают скорую смерть, как стандарту веб, однако, он до сих пор жив и будет жить, скорее всего, еще долго. В чем же причина: он очень прост в изучении и эксплуатации, любой человек может освоить html. Но куда же деваться от недостатков? Для этого разработчики стандарта ввели в html тэги, при помощи которых мы можем встраивать в наш html-документ различные объекты, а также можем привязывать к html-документу другие технологии (CSS, Javascript и т.д.), при помощи которых наш документ становится динамичным. Но обо всем по порядку. 

Итак, представьте себе елочку, которую вы принесли в свой дом под новый год. Html подобен такой елочке. Но елочку надо нарядить. Что мы для этого можем сделать – покрасить ветки, навесить мишуру – мы весьма ограничены без дополнительных средств для украшения нашей елки (html). 

Итак, я говорила, о том, что мы можем встраивать объекты в нашу страницу. Один тэг для вставки объекта в страницу мы уже знаем <img>, вводя его в код нашего документа, мы указываем броузеру подгрузить картинку на нашу страницу. Т.е. <img> позволяет нам повесить на нашу елку шарик. Но шарик не является частью елки, это посторонний объект. А тэг <img> в данном случае играет роль веревочки, при помощи которой мы присоединяем шарик (картинку, объект) к елочке (html). 

Вы должны понимать, что картинки, это не единственное, что мы можем повесить на нашу елочку. Кроме картинок мы можем включить в наш документ музыку, другой документ, flash-анимацию, апплеты, клипы и многие другие объекты. 

Какие объекты, кроме картинок, мы уже умеем включать в наш документ? Это другие документы, мы научились их внедрять в наш документ при помощи тэга <iframe>. 

Как же быть с остальными объектами, как же их вешать на нашу елочку, внедрять в наш документ? Для общего внедрения объектов в наш документ существует тэг <object>, этот тэг достаточно многофункционален, и обо всех тонкостях его применения и свойствах я вам рассказывать не буду, надеясь, что вы сами потом поближе познакомитесь с ним при помощи спецификации по HTML, однако, в приличном обществе принято представлять людей друг другу при первом знакомстве, поэтому позвольте вас немного ознакомить с тэгом <object>, полагаю, что вы не будете возражать :), но для начала немного вспомним пройденное ранее. 

Итак, вы уже знакомы с тэгом <img>. Напишем код для вставки картинки в наш документ:


   
<img src="sobaka.jpg" alt="тут был большой любитель сосисок">


Это вам все знакомо – src - указывает, где находится изображение, которым будет подменен тэг <img>, alt – альтернативное описание, на всякий случай, если картинка не загрузится, тогда мы увидим его.

То же самое мы можем сделать при помощи тэга <object>, подгрузить картинку в наш документ.


   
<object data="sobaka.jpg" type="image/jpeg">
тут был большой любитель сосисок
</object>


Теперь будем по обычаю разбираться, что к чему. 

Атрибут data указывает местоположение данных для объекта, в нашем случае он указывает на то, где лежит подгружаемая картинка. Атрибут type указывает тип содержимого для данных, указанных в data, т.е. он указывает броузеру с каким типом объекта он имеет дело, в нашем случае это image – изображение, картинка, jpeg – тип картинки (изображения). Текст, который мы заключили в тэг <object></object>, ваш посетитель увидит, если броузер не сможет отобразить ваш объект – картинку.

Что, если мы хотим подгрузить другой объект (не картинку, а допустим какой-либо видеоклип)? Наши действия аналогичны, указываем местоположение данных объекта, и тип данных:


   
<object data="film.mpeg" type="application/mpeg">
здесь была фильма
</object>


Как видите, все не так уж сложно. Но на этом возможности и функции тэга <object> не ограничиваются. С помощью него мы можем сделать альтернативную генерацию объектов: это, допустим, когда ваш фильм (клип) не загрузился, вы можете указать, чтобы вместо него подгрузился клип с другого адреса, можете указать, что если и другой клип не подгрузится, чтобы вместо него подгрузилась картинка, и т.д. И это далеко не все, что вы можете сделать при помощи тэга <object>, но, как я говорила, наше знакомство с ним в данном учебнике будет кратким и обзорным, более тесно и серьезно познакомиться с <object> вам поможет спецификация (официальная документация по HTML), где наиподробнейшим образом расписаны все возможности применения <object> в ваших документах. А пока что наш с вами путь лежит на следующую ступеньку, где мы продолжим наш разговор об объектах и их внедрении в наш документ. 


Ступенька 43-ая. 

Очень часто для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация и прочих подобных используется не тэг <object>, а тэг <embed>. Почему происходит так, и что это такое за тэг:

Тэг <embed> не фигурирует в спецификации HTML (ни в нынешней, ни в старых), однако, он появился по инициативе одного из производителей броузеров и используется очень давно, и поддерживается на данный момент почти всеми броузерами, возможно, его даже безопаснее использовать, чем тэг <object>, для внедрения объектов в ваш документ. Итак, давайте посмотрим, как он работает, допустим, нам нужно внедрить музыкальный файл в наш документ:


   
<embed src="music.mid" width="50" height="20" autostart="false" loop="true" play_loop="5" hidden="false">
</embed>


1 - src="music.mid" – путь к музыкальному файлу (для веб, используюся файлы в формате *.mid и *.wav)
2 - width="50" height="20" - ширина (width) и высота (heigth) пульта управления 
3 - autostart="false" - надо ли проигрывать снова ваш видео или музыкальный ролик (false - нет, true - да)
4 - loop="true" - повторять ролик с самого начала (false - нет, true - да) 
5 - play_loop="5" - если да, то сколько раз (вместо 5 поставьте кол-во раз) 
6 - hidden="false" - спрятать пульт ролика (false - нет, true - да) 

Как видите, достаточно много возможностей для управления объектом, который вы внедряете в документ, однако, не все атрибуты, которые мы рассмотрели с вами сейчас, поддерживаются всеми броузерами, поэтому использовать их надо аккуратно. 

Давайте поговорим о тех атрибутах тэга <embed>, которые по идее должны поддерживаться всеми броузерами, т.е. о безопасных. Часть этих атрибутов вы знаете: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали). 

Из незнакомых нам атрибутов: 

- pluginspage=”http://…” (путь к плагину, plug-in – небольшая программка, выполняющая какие-либо дополнительные функции в главной программе, так, например, чтобы проиграть flash-анимацию броузеру нужен плагин, в некоторых броузерах он есть, а в некоторых нет, для последних мы указываем путь к плагину, чтобы пользователь мог скачать плагин и просмотреть нашу flash-анимацию, мультик). 
- hidden=”true” (false) - отображать указанный объект (да/нет)
- type=” image/jpeg” – тип подгружаемого объекта

Давайте рассмотрим новые атрибуты (и парочку старых, известных нам) на примере вставки flash-анимации в наш документ:


   
<embed src="mult.swf" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="300">
</embed>


И снова ничего сложного не оказалось:)

Но что делать, если мы хотим подстраховаться, если мы боимся, что если, отдав предпочтение одному из тэгов <object> или <embed>, мы все же рискуем тем, что наш объект не отобразиться в броузере посетителя нашей страницы? Боязливые могут почитать рецепт здесь: http://flash-ripper.com/articles/

Вот, собственно, и все, что я хотела вам рассказать об объектах. Однако, прежде, чем мы перейдем на следующую ступеньку, мне хотелось бы вас, мой читатель, предупредить и образумить: я понимаю, что когда мы создаем наши первые страницы нам хочется наполнить их и музыкой, и анимационными картинками, и многим прочим, однако, помните, что вы делаете страницу не для себя, а для своих посетителей, вы прежде всего заинтересованы в них, а значит надо делать так, как им будет удобнее. Так, возможно, стоит отказаться от музыки на веб-сайте, ведь многие, сидя за компьютером, слушают музыку с него же, а значит музыка, которую вы установите на своем сайте, ворвется какофонией в наушники (колонки) вашего посетителя, и вызовет только раздражение. Но даже, если вы устанавливаете музыку на свой сайт – постарайтесь, чтобы это был качественный звук, чтобы была возможность выключить эту музыку, также можно предупредить вашего посетителя, что на вашем сайте будет играть музыка, и предложить ему возможность отказаться от музыки на вашем сайте заранее.

Конечно, это касается не только музыкального сопровождения к вашему сайту, чтобы мы не вводили на наш сайт, нам надо прежде подумать: а действительно ли оно нужно, будет ли удобно это нашему посетителю. Вот теперь моя совесть чиста, и вы можете переходить к следующей ступеньке, где вы узнаете много нового и интересного :) 


Ступенька 44-ая. 

В двух прошлых главах мы обсуждали с вами возможность вставки объектов в наш документ. Однако, вы должны понимать, что музыка, видеоклипы, flash и другие объекты – не единственное, чем мы можем оживить и сделать страницы нашего сайта интереснее. В этой и следующей главе мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб.

Первое, что нам следует понять – CSS отличный от HTML стандарт. Почему же мы говорим о нем в рамках учебника о HTML, потому что CSS – это стандарт, расширяющий возможности HTML. Как мы уже с вами знаем – используя только HTML, мы весьма ограничены в средствах. Вспомним пример с елкой – так вот, CSS зажигает на нашей елочке огоньки, заставляет нашу елку искриться, сверкать. Однако, чтобы гирлянда горела на елке, надо ее прежде повесить на елку, вкрутить все лампочки, куда надо, и воткнуть в розетку. 

Чтобы ввести CSS в наши HTML-документы, нам опять же, как и в случае с объектами, понадобятся связующие звенья – специальные тэги и их атрибуты. Но о них мы будем говорить в следующей главе, в этой же главе я вам дам представление о том, что такое CSS.

Давайте, подумаем, что вызывало у вас удивление, когда вы сталкивались с этим на других страницах, а потом хотели реализовать то же самое у себя на сайте, но не могли понять как. Это могли быть ссылки, которые изменяют цвет при наведении, ссылки у которых убрано подчеркивание, текст, который увеличивается в размере при наведении на него, ячейки таблицы, которые меняют цвет при наведении, картинки и текст, которые наслаиваются друг на друга – и многое другое. Теперь вы знаете, что такие и подобные трюки реализуются при помощи CSS.

Что же именно можно сделать при помощи CSS:

  • Использовать собственные расширения HTML (так, например, вы можете окрасить текст в синий цвет при помощи атрибута color тэга FONT, а можете использовать Таблицы Каскадных стилей, для того, чтобы сделать тоже самое, преимущество в этом, что стили могут быть вынесены в отдельный файл, и, чтобы потом поменять цвет указанных блоков текста во всех документах вашего сайта, достаточно изменить одну строку в одном файле, а так вам бы пришлось вручную менять код многих страниц).
  • Свободно управлять содержимым веб-страниц (позиционировать блоки текста, таблицы, картинки, как вам угодно, например, наложить текст и картинки друг на друга, в любом месте страницы).
  • Различные визуальные эффекты (прозрачность, смена цвета при наведении и прочее)
  • И так далее
Как вы сами теперь можете понять, CSS стоит того, чтобы вы его изучили, вы даже должны его изучить, если хотите создавать профессионально свои странички, в этом вам поможет спецификация по CSS, а также различные учебники и статьи, ссылки на которые вы по традиции найдете в правой колонке. А пока что мы с вами вернемся на землю, и продолжим осваивать HTML, ведь мы можем с вами перейти к изучению других, более сложных технологий не раньше, чем мы освоим с вами простейшие, но все-таки нужные, такие как HTML.

Итак, в этой главе у меня была цель ознакомить вас с CSS, что я и сделала, в следующей же главе мы поговорим с вами о том, как внедрять CSS в наш документ, поэтому шагаем на следующую ступеньку за новыми знаниями. 


Ступенька 45-ая. 

Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:


   
<head>
<link href="special.css" rel="stylesheet" type="text/css">
</head>


Итак, когда стили вынесены в отдельный файл – это называется внешние таблицы стилей. Их мы вводим в документ при помощи тэга <link>, который размещается внутри тэга <head></head>, а не <body>, как мы привыкли. 

Давайте ознакомимся с атрибутами тэга <link>:

1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.

Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.

Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):


   
P.special {
color : red;
}


Однако, в данном случае, таблица стилей указывает, что не все блоки текста, заключенные в параграфы (<p>текст</p>), будут выделены красным цветом, а только те блоки, которым мы это укажем.


   
<html>
<head>
<title>Документ с CSS</title>
<link href="special.css" rel="stylesheet" type="text/css">
</head>
<body>

<p class="special">В этом абзаце текст должен быть красным.</p>
<p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p>

</body>
</html>


Посмотрите на код нашего документа, при помощи атрибута class мы задали тэгу <p> имя класса. Затем, когда мы писали код таблицы стилей (в файле special.css), мы указали, что этот стиль будет применяться только к тем тэгам (атрибутам) <p>, для которых мы задали имя класса special. Вот теперь у нас все связано между собой.

Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):


   
<html>
<head>
<title>Документ с CSS</title>

<style type="text/css">
P.special {
color : red;

</style>

</head>
<body>

<p class="special">В этом абзаце текст должен быть красным.</p>
<p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p>

</body>
</html>


Обратите внимание, тэг <style>, как и тэг <link>, размещается внутри тэга <head></head>, а не <body>.

Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:


   
<html>
<head>
<title>Документ с CSS</title>
</head>
<body>

<p style="color: red">В этом абзаце текст должен быть красным.</p>
<p>А в этом абзаце нет, потому что мы не задали для него стиля.</p>

</body>
</html>


color: red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы ввели в наш документ при помощи атрибута style, естественно, что в атрибут style вы будете помещать уже свои, другие, таблицы стилей.

Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.