1ПИ / Учебник HTML / 214
.htmlУчeбник HTML,CSS.Слои.Уровни.Свойства.Атрибуты.Позиционирование.Примеры. guide
<dimas>
help On-line учебник HTML с примерами,
справочник по созданию Web-сайтов. guide
<dimas>
help Главная Учебник HTML Учебник CSS Web- mastering Раскрутка Полезности FAQ Е- mailer Взять banner bookmark Контакты Отослать ссылку
Учебник CSS >>Слои Концепция слоя или уровня была разработана и впервые предложена компанией Netscape, их тэги <LAYER и <ILAYER> были во многом похожи на <FRAME> и <IFRAME>. Однако со временем им на замену пришло и практически полностью вытеснило оригинальное решение от Microsoft. Было предложено рассматривать отдельные блоки текста, в тэгах <SPAN> или <DIV> как слои, организовав управление ими при помощи их свойств.
Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства, хотя на самом деле это лишь плоские слои с заданным порядком перекрытия, как в колоде карт. При помощи таблиц стилей CSS мы можем задавать различные свойства слоям и позиционировать их. Это открывает перед web-мастером массу возможностей, позволяет создавать страницы более похожими на типографские и позволяет, в большинстве случаев, отказаться от нежелательного использования таблиц для позиционирования содержимого.
Абсолютное позиционирование Горизонтальное позиционирование Вертикальное позиционирование Задание высоты слоя Задание ширины слоя Позиционирование в глубину Управление видимостью Понятие прозрачности слоя Наложение слоев Примеры работы со слоями Абсолютное позиционирование Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.
Синтаксис: {position: absolute}
Оно может принимать следующие значения: position:absolute означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы. position:relative означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента. position:static означает, что позиционирование слоя будет происходить относительно фона.
Горизонтальное позиционирование Позиционирование по горизонтали задается свойством left,путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {left: значение}
задается: n px n % auto
Вертикальное позиционирование Позиционирование по вертикали задается свойством top, атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position
Синтаксис: {top: значение}
задается: n px n % auto
Задание высоты слоя height, это свойство позволяет задать высоту слоя в окне браузера:
Синтаксис: {height: значение}
задается: n px n % auto
Задание ширины слоя width, это свойство позволяет задать ширину слоя в окне браузера:
Синтаксис: {width: значение}
задается: n px n % auto
Позиционирование в глубину z-index,это свойство позволяет задать порядок перекрытия слоями друг друга, при этом слой с более высоким индексом будет располагаться над слоем с низким индексом. В случае, если атрибут не задан специально, браузер присваивает более высокий индекс слою, который в исходном коде описан позже:
Синтаксис: {z-index: 2}
auto порядковый номер
Управление видимостью visibility,это свойство позволяет задать видимость слоя, присвоив ему одно из значений:
Синтаксис: {visibility: inherit}
inherit hidden visible
display,это свойство позволяет задать видимость слоя, визуально отличается от visibility тем, что сдвигает предыдущий и последующий слои вместе:
Синтаксис: {display: none}
inline list-item none block
При кажущемся сходстве свойств слоя visibility и display работают они по разному.
Пример: | убрать | поставить | или | скрыть | показать | слой
overflow,это свойство позволяет задать, как выглядит текст, переполнивший границы слоя, присвоив ему одно из значений:
Синтаксис: {overflow: none}
none clip scroll
Понятие прозрачности слоя Поскольку слой на самом деле представляет собой блок содержимого, заключенный в тэгах <SPAN> или <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили включенным тэгам. Тогда, если слой не будет иметь фоновый цвет или рисунок мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован, подобного можно достичь, вставив рисунок .gif, у которого один из цветов прозрачный. Используя данное свойство легко можно добиться интересных эффектов, недоступных другими способами, что в целом улучшает внешний вид и эстетическое восприятие содержимого.
Наложение слоев Одно из самых интересных способов применений свойств слоя, является одновременное оперирование позиционированием сразу для двух слоев и более. Задав в каждом слое свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.
Примеры работы со слоями Наложение прозрачного слоя, эффект тени <html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 30pt; font-weight: bold;}
.d1 { position: absolute; color: silver; top: 10%; left: 10%; }
.d2 { position: absolute; color: navy; top: 9%; left: 9%; }
</style>
</head>
<body>
<div class="d1">Учебник HTML</div>
<div class="d2">Учебник HTML</div>
</body>
</html>
Пример Позиционирование без таблицы
<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 100%; color: navy;}
.d1 { position: absolute; top: 5%; left: 5%; }
.d2 { position: absolute; top: 5%; left: 45%; }
.d3 { position: absolute; top: 5%; left: 85%; }
.d4 { position: absolute; top: 45%; left: 5%; }
.d5 { position: absolute; top: 45%; left: 45%; }
.d6 { position: absolute; top: 45%; left: 85%; }
.d7 { position: absolute; top: 85%; left: 5%; }
.d8 { position: absolute; top: 85%; left: 45%; }
.d9 { position: absolute; top: 85%; left: 85%; }
</style>
</head>
<body>
<div class="d1">Ячейка1</div>
<div class="d2">Ячейка2</div>
<div class="d3">Ячейка3</div>
<div class="d4">Ячейка4</div>
<div class="d5">Ячейка5</div>
<div class="d6">Ячейка6</div>
<div class="d7">Ячейка7</div>
<div class="d8">Ячейка8</div>
<div class="d9">Ячейка9</div>
</body>
</html>
Пример Декоративное оформление страницы
<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 100%; font-weight: bold;}
.d1 { position: absolute;
font-size: 1000%;
color: #ffccff;
top: 10%;
left: 10%;
width: 70%;}
.d2 { position: absolute;
font-size:450%;
color: #ccffff;
top:150;
left: 20%;
width: 60%;}
.d3 { position: absolute;
font-size: 100%;
color: navy;
top: 10%;
left: 25%;
width: 35%;}
b { font-size: 100%; color: #0088bb}
i {color: #0088bb }
</style>
</head>
<body>
<div class="d1">HTML</div>
<div class="d2">Учебник</div>
<div class="d3">
<p>Данный <b>учебник HTML</b> и <b>CSS</b> поможет начинающему пользователю,
шаг за шагом, от начала и до конца создать свою собственную страницу в интернете,
<b>WEB-узел</b> или их локальную версию на <b>CD</b>, а также может послужить
<b>on-line</b> < справочником для более продвинутых <i>юзеров</i>.
Не стоит ждать от сайта абсолютно исчерпывающего объёма информации, однако
он будет <b>регулярно</b> обновляться и пополняться материалами.
</p>
</div>
</body>
</html>
Пример
Взять banner bookmark Контакты Отослать ссылку Раскрутка Полезности FAQ Е- mailer Главная Учебник HTML Учебник CSS Web- mastering guide
<dimas>
help u="u227.69.spylog.com";d=document;nv=navigator;na=nv.appName;t="";p=1; sz=" width=88 height=31 "; hl=history.length;d.cookie="b=b";c=0; bv=Math.round(parseFloat(nv.appVersion)*100); if (d.cookie) c=1;n=(na.substring(0,2)=="Mi")?0:1; if((n==0)||(bv >= 300)){rn=Math.random();t=(new Date()).getTimezoneOffset();} else {rn=0;} z="p="+p+"&rn="+rn+"&t="+t+"&c="+c+"&hl="+hl; if (self != top) { fr=1;} else { fr=0;} r=escape(d.referrer);r1=""; sl="1.0";h=0; pl="";sl="1.1"; if((n==1) && (bv >= 300)) { for(var i = 0; i < nv.plugins.length; i++) pl += nv.plugins[i].name+":"; } j = (navigator.javaEnabled() ? "Y" : "N"); sl="1.2";s=screen;wh=s.width+'x'+s.height; px=(n==0)?screen.colorDepth:screen.pixelDepth;z+="&wh="+wh+"&px="+px; sl="1.3" y=""; y+=""; y+=""; y+=""; d.write(y); On-line учебник HTML с примерами,
справочник по созданию Web-сайтов. guide
<dimas>
help