Оживи свою страничку

Спецвыпуск хакер, номер #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) и т.д.

Назад на стр. 002-014-1  Содержание  Вперед на стр. 002-014-3

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001