Оживи свою страничку
Спецвыпуск хакер, номер #002, стр. 002-014-2
<style type="text/css">
<!--
h1 { color: 00FF00}
-->
</style>
вставив вышестоящий текст в заголовке HTML файла (между тегами <head> и </head>), мы переопределим цвет тега <h1>. И теперь написав:
<h1>Тут был Вася</h1>
мы увидим зеленый текст. Если ты думаешь, что на этом приколы кончаются, то ты круто обламываешься! Но сначала разберемся с синтаксисом. Тег
<style type="text/css">
означает то, что дальше идет описание стилей, браузеры четвертого (и выше) поколения понимают этот тег, а вот старые браузеры его не понимают, и специально для них идет следующая строчка:
<!--
Увидев ее, старые браузеры пропускают весь следующий текст до "-->". Между этими двумя тегами располагаются описания различных характеристик тегов. Для переопределения тега (в нашем случае <h1>) мы пишем имя тега, затем открываем фигурную скобку "{" и в ней описываем сами характеристики, разделяя их ";". Описание тега заканчивается также фигурной скобкой "}". Мы можем переопределить свойства сразу нескольких тегов, для этого пишем:
h1,h2,h3 {color: 00FF00}
и все заголовки первого, второго и третьего уровней станут зелеными. Описание стилей заканчивается тегами:
--> </style>
Кроме переопределения тегов ты можешь создавать свои классы и идентификаторы. Ведь количество тегов ограничено, а создав свой класс или идентификатор, ты получаешь неограниченные возможности по переопределению, форматированию и украшению своей странички. Создание класса и идентификатора похоже на переопределение тега, но вместо имени тега ты пишешь имя класса, которое должно начинаться с точки:
.vasia { color: 00FF00}
Так мы создаем класс vasia. Или имя идентификатора, которое начинается со знака "#";
#vasia {color: 00FF00}
Теперь для использования класса необходимо в тексте документа вставить следующее:
<div class=vasia>Тут был Вася<div>
а для идентификатора
<div id=vasia>Тут был Вася<div>
Давай сделаем что-нибудь посложнее, ОК?
<html><head><title> Домашняя страничка Васи</title>
<style type="text/css">
<!--
.vasia {
color: 00FF00;
margin-top: 10px;
font-size: 250px;
font-family: Courier;
font-weight: 900 ;
}
.layer1{
color: black;
margin-top: -185px;
font-size: 120px;
font-family: Courier;
}
-->
</style>
</head>
<body><center>
<div class=vasia>ВАСЯ</div>
<div class=layer1>был здесь</div>
</center></body>
</html>
Как ты видишь, получилось неплохо. С помощью тега <div> мы создали несколько слоев и, установив свойство "margin-top", наложили их друг на друга. Давай разберемся с остальными свойствами. Приведу описание нескольких свойств тегов,
относящихся к шрифту, в следующей таблице:
Характеристика Величина Комментарии
Color шестнадцатиричное число устанавливает цвет текста
font-family название шрифта устанавливает шрифт, которым будет выведен текст
font-size размер шрифта в пикселях (px), сантиметрах (cm), миллиметрах (mm) и т.д.
