Создание web-страниц c помощью каскадных таблиц стилей CSS
Определение основных преимуществ каскадных таблиц стилей - средств форматирования web-страниц. Ознакомление с методами подключения внешних файлов. Определение размеров краев рабочей области браузера. Анализ изменения абсолютного позиционирования блока.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | контрольная работа |
| Язык | русский |
| Дата добавления | 16.07.2017 |
| Размер файла | 31,5 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Создание web-страниц c помощью каскадных таблиц стилей CSS
1. Подключение таблиц стилей
CSS (Cascading Style Sheets) - каскадные таблицы стилей - мощное средство форматирования Web-страниц. С помощью таблиц стилей автор может определить начертание и размер шрифта, цвет фона и переднего плана, фоновое изображение, размеры границ и другие характеристики HTML-элементов. Таблицы стилей не только позволяют управлять отображением стандартных элементов, но и дают возможность определять новые элементы и накладывать ограничения на их характеристики. Правила форматирования имеют иерархическую, или "каскадную", структуру и позволяют сочетать установки браузера, используемые по умолчанию, с непосредственными инструкциями, задаваемыми автором документа и пользователем, работающим с Web-страницей. Изменив содержимое одного файла с листами стилей, можно изменять внешний вид целого набора документов.
CSS - это совокупность параметров, объединенных в правила (rule), при помощи которых форматируется (оформляется и отображается) текст. Каждое из правил может применяться в указанном разработчиком месте к заданным элементам. В правиле задается объект, к которому стиль применяется, а затем следует собственно описание составляющих стиль компонентов: цвет и размер шрифта, выравнивание и т.п.
Где размещать информацию о стилях, решает разработчик. Если стилей немного, и они применяются к большому числу страниц, то имеет смысл вынести стили в отдельный файл. В этом случае стили называются внешними. Для стилей CSS файл имеет расширение *.css. Информация о внешних файлах располагается в документе в элементе <meta> или <link>.
Если каждая страница индивидуальна, то стили располагают в специализированном элементе <style>, который размещается в начале документа в разделе <head>. Такие таблицы иногда называют глобальными, подразумевая, что они относятся ко всему документу.
Когда необходимо отформатировать отдельный элемент, описание стиля можно расположить непосредственно внутри элемента при помощи уже специализированного атрибута style. Такие стили называют встроенными (inline), или внедренными.
Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при решении вопроса о выборе конечного правила оформления.
1.1 Встроенные стили
Встроенные стили организуются при помощи атрибута style, которым обладают все оформляемые элементы HTML.
Синтаксис записи самого тега HTML при использовании атрибута style сохраняется, например: <div style="...">
Значением атрибута style является строка, в которой содержится описание правила стиля. Описание стиля осуществляется в соответствии с собственным синтаксисом языка CSS путем перечисления параметров и их значений в виде: style= "свойство_стиля_1: значение_1; свойство_стиля_2: значение_2;" и т.д. web файл браузер
Параметры в CSS называют свойствами. Значение свойств записывается после двоеточия, а друг от друга свойства отделяются точкой с запятой. Например: style="color: brown; text-align: right;"
Некоторые свойства могут иметь общее групповое название. Например, font-family, font-size, font-style, font-weight имеют общее групповое имя font. В этом случае для сокращения название каждого свойства можно не указывать, а заменить общим групповым именем. Значения, соответствующие разным параметрам, следуют в таком случае подряд, без точки с запятой, разделяемые только пробелом. Например, равносильны будут записи style="font-family: 'Times New Roman'; font-size; 12pt; font-style: italic; font-weight: 400;"
style="font: 'Times New Roman' 12pt italic 400;"
Сохраняется правило, касающееся вложенных кавычек - они должны быть разными. Если значения в таком правиле указываются через запятую, то они относятся к одному свойству и порядок их задания означает приоритет использования. Если не может быть найдено первое значение, то используется второе и т.д. Прежде всего, это относится к font-family, которое задает гарнитуру (тип) шрифтов.
1.2 Глобальные таблицы стилей
Если одинаковые стили используются в файле в нескольких местах, то удобнее использовать глобальные стили. В этом случае они располагаются в специальном элементе HTML <style>. Элемент представляет контейнер, который размещается в разделе заголовков <head>. Поскольку ранние версии браузеров могут не поддерживать стили, то рекомендуется скрывать содержимое <style> в комментариях. Например:
<style type-"text/css">
<!-- описание стиля -->
</style>
Описание стиля производится следующим образом:
selector_1 {свойство_стиля: значение; свойство_стиля: значение; ...}
selector_2 {свойство_стиля: значение; свойство_стиля: значение; ...} и т.д.,
где селектор (selector) указывает на элемент или группу элементов, к которым применяется задаваемое правило. Само правило размещается в фигурных скобках, причем до двоеточия располагается свойство, после - его значение.
Преимущества глобальных стилей проявляются при применении правила к группе элементов. Например, если правило надо применить ко всем параграфам, то оно запишется так: р{ font: 'Times New Roman' 12pt italic 400;}
Если таким же образом оформлять и другие элементы, то их наименование в разделе селектора достаточно указать через запятую, а не записывать одно и то же правило для каждого элемента: р, div, h1, a{ font: 'Times New Roman' 12pt italic 400;}
Селектор работает с понятием class. Такой атрибут имеется практически у всех элементов HTML. Класс элементов может выделять подмножество как одноименных, так и различных элементов, которые будут иметь одинаковые способы форматирования.
Описание класса задается в виде имени класса после точки, затем следует стандартное правило форматирования, заключенное в {...}.
Например: p.myFont { font: 'Times New Roman' 12pt italic 400;}
В этом примере задан класс элементов <р>, называемый myFont, Такое правило применяется к элементам <р>, но не ко всем, а толь ко к тем из них, у которых указан соответствующий атрибут class.
Например: <р class="myFonf">тeкст абзаца</р>
CSS позволяет задавать обобщенный класс, к которому можно присоединить любой элемент указанием соответствующего атрибута class="myFont" в теге элемента.
Например, можно использовать класс .myFont { font: 'Times New Roman' 12pt italic 400;}
в нескольких элементах: <h4 class="myFont">...</h4>
<p class="myFont">...</p>
К элементам, определенным без класса "myFont", вышеописанное правило применяться не будет.
В отличие от классов псевдоклассы определяют форматирование элемента не только в зависимости от его имени и положении в структуре страницы, но и от наличия некоторых определенных внешних условий.
В настоящее время псевдоклассы чаще всего и активно используются для выделения ссылок. Одни и те же ссылки в зависимости от условий (ссылка уже просматривалась ранее, на ссылку попал курсор и т.п.) могут отображаться по-разному. Имя псевдокласса в селекторе ставится после двоеточия.
a:link { color:blue } - непосещенные ссылки (браузер определяет, посещалась ли ссылка реньше, на основании списка предыстории). Чаще всего ссылки отличаются цветом.
a:visited { правило стиля } -посещенные;
a:active { правило стиля } - активные, определяет, как должна отображаться выбранная ссылка (ссылка считается выбранной до отпускания кнопки мыши).
a:hover { правило стиля } - ссылки, на которых находится курсор мыши (поддерживается только Internet Explorer).
Эти псевдокласссы относятся только к ссылкам, поэтому имя элемента a может быть опущено. Например, допустимо:
:hover { правило стиля }
Псевдоклассы могут объединяться с другими селекторами. Например, следующее правило применяется только к выбранной ссылке и только в том случае, если она входит в состав элемента указанного класса:
.bizarre :active { font-size: 300% }
1.3 Внешние таблицы стилей
Внешние таблицы стилей, называемые иногда связанными стилями, располагаются во внешних файлах. Особенности работы с такими стилями имеются в подключении внешнего файла. Его написание не отличается от рассмотренного выше описания глобальных стилей. Файл не содержит дополнительных сведений и начинается прямо с текста, аналогичного контенту элемента HTML <style>. Комментарии отмечаются подобно комментариям языка С и заключаются в /*…*/. Например:
/* Пример внешнего листа стилей */
H1 { text-align: center; font-family: Arial }
H2 { color: #440000; text-align: center; font-family: Arial }
Подключение внешних файлов командой CSS @import. В основном файле внутри элемента <style> может находиться команда @import, которая указывает URI подключаемого файла, Эта команда является командой языка CSS.
Например:
<style type ="text/css"><!--@import url(my_style.css); --></style>
Подключение внешних файлов элементом HTML <link>. Другой способ подключения внешнего файла заключается в использовании элемента HTML <link> в разделе <head>. Элемент является одиночным тегом. Атрибут rel должен иметь значение stylesheet, атрибут href определяет размещение файла, а атрибут type - его тип (text/css). Например:
<link rel ="stylesheet" href ="my_style.css" type="text/css">
Таблицы стилей поддерживают механизм наследования. Механизм наследования подразумевает наличие объектов-родителей (предков) и объектов-детей (потомков), тем или иным образом порожденных первыми. Потомки при этом наследуют некоторые или даже все свойства родителей. В случае с HTML внешние элементы и грают роль предков, а вложенные в них элементы играют роль потомков, и обычно наследуют свойства внешних, если эти свойства не указаны явно.
Использование наследования удобно для задания свойств всему документу. В этом случае форматирование применяется к самому внешнему элементу - <body>.
При возникновении противоречий конструкций из разных каскадов применяется правило приоритетов - из всех стилей выбирается тот, который ближе расположен к элементу. Если одно и то же свойство у элемента задается через атрибут и стиль, то приоритет принадлежит стилю.
2. Свойства каскадных таблиц стилей
2.1 Свойства шрифтов
Стили позволяют эффективно управлять шрифтами, задавая и модифицируя существующие или загружая по Сети уникальные. Для этого используются следующие свойства:
font-family - задает список шрифтов (в порядке уменьшения приоритета), которые должны использоваться для отображения элемента. Используется первый шрифт в списке. Если он не найден, браузер пытается найти второй и т.д. Названия шрифтов, состоящих более чем из одного слова, следует заключать в кавычки.
font-style - задает стиль написания шрифта - прямой (обычный), курсив и косой (сильно наклоненный).
font-variant - задает регистр шрифта.
font-weight - устанавливает толщину шрифта.
font-stretch - задает растянутость шрифта.
font-size - задает размер шрифта.
@font-face - команда CSS, загружающая шрифты по Сети. Если указанный шрифт на компьютере пользователя не обнаружен, то он загружается по Сети.
WEB-страница Camp Bear Claw
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HТМL>
<НЕAD>
<TIТLE>Camp Bear Claw</ТITLE>
</HЕАD>
<ВОDY>
<Н1>Camp Bear Claw</H1>
We have the following activities:
<H2>Archery</Н2>
<Н2>Arts and Crafts</H2>
<H2>Horseback Riding</Н2>
<Н2>Hiking</H2>
<H2>Campfire Song Times</H2>
<H2>C++ Programming</H2>
</ВОDY>
</HТМL>
Добавляя свойства font-family, документ можно отобразить совсем по-другому.
Модифицированный код WEB-страницы Camp Bear Claw
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HТМL>
<HЕАD>
<ТITLE>Camp Bear Claw</TIТLЕ>
<LINК RЕL=STYLESHEET HREF="CampBearClaw.css" TYРЕ="text/css">
</HEАD>
<BОDY>
<Н1>Camp Bear Claw</H1>
We have the following activities:
<H2 CLASS="archery">Archery</Н2>
<Н2 CLASS="arts">Arts and Crafts</H2>
<H2 CLASS="horseback">Horseback Riding</H2>
<H2 CLASS="hiking">Hiking</H2>
<Н2 CLASS="campfire">Campfire Song Times</H2>
<H2 CLASS="Java">Java Programming</Н2>
</ВОDY>
</НТML>
Файл таблиц стилей CampBearClaw.css
Н1 { tеxt-align: сеnter; font-family: Hermаn }
Н2.arсhery { font-fаmily: Shelman}
H2.arts { font-family: Alibi }
Н2.horsеback { fоnt-family: Casmira }
H2.hiking { font-family: Comic Sans MS }
Н2.cаmpfire { fоnt-fаmily: Courier }
H2.jаva { fоnt-fаmily: Terminal }
2.2 Управление фоном и передним планом
Таблицы стилей предоставляют удобные средства, позволяющие изменять цвет переднего плана, цвет фона и фоновые изображения для разделов текста.
Цвет элемента (переднего плана) задается свойством color. Значения свойства, обозначающего цвет, могут задаваться в нескольких системах:
- в системе RGB при помощи шестнадцатеричных чисел. Например:
<p>{color: #AAFF55} или то же самое в сокращенном варианте <p>{color: #af5}. Регистр значения не имеет. В HTML сокращенный вариант не поддерживается;
- в системе RGB при помощи целых десятичных чисел, которые могут изменяться от 0 до 255. Например:
<p>{color: rgb(0,33,255)}
- в системе RGB, когда цветовые составляющие задаются в процентах. Например:
<p>{color: rgb(100%,70%,20%)}
- при помощи ключевых слов. Например:
<p>{color: aquamarine}
Кроме того, браузер может получать и использовать цвета, такие же, как использует система для задания заголовков окон, цвета окон, цвета фона рабочего стола и других элементов.
Для работы с фоном предназначено целое семейство атрибутов:
background-attachment - определяет должно ли фоновое изображение прокручиваться вместе с содержимым документа либо оставаться неподвижным.
background-color - задает цвет сплошного фона.
background-image - задает URI фонового рисунка.
background-position - задает положение фоновой картинки относительно левого верхнего угла блока.
background-repeat - задает повторяемость фоновой картинки.
background - позволяет объединить все свойства фона в одной записи.
WEB-страница с фоном
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HТМL>
<HЕАD>
<TIТLE>Joe's Cabinets</ТITLE>
<LINК rel=STYLЕSHEET href="Cabinets.css" tyРЕ="text/css">
</HЕАD>
<BODY>
<CENТЕR>
<TАВLE heigНТ=199 width=360>
<TR><TD align="center" class="banner">Joe's Cabinets
</TABLE>
</CENТЕR>
<P>Welcome to Joe's Cabinets. We specialize in
<UL>
<LI>Custom Cabinets
<LI>Kitchen Remodeling
</UL>
</BОDY>
</HTМL>
Файл таблиц стилей Cabinets.css
.bаnner { bаckground: url( imаges/boards.jpg) repeat-x;
fоnt-size: 50pt;
fоnt-fаmily: Arial;
color: bluе }
2.3 Форматирование текста
Текстовые свойства применяются для форматирования текста (выравнивания, оформления, разрежения и т.д.). Позволяют изменять расстояние между буквами и словами, задавать высоту строк и величину отступа первой строки абзаца.
В качестве примера рассмотрим WEB-страницу, которая должна выглядеть как деловое письмо. Расстояние между абзацами уменьшено с помощью следующего выражения: P { margin-top: 5px }. Для даты, адреса получателя и отправителя определены классы абзацев, выровненные по правой (rhead) и левой (lhead) границам. Основное содержание документа выводится с отступом и выравниванием (justify). Кроме того, подпись (foot) отображается с отступом 60% и увеличенным расстоянием между строками.
WEB-страница с форматированным текстом
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HТМL>
<HЕAD>
<TIТLЕ>An Open Letter to the IRS</TITLE>
<LINК rel=STYLESHEET hrЕf="Bates.css" type="text/css">
</HEAD>
<BОDY background="imаges/bond-paper.jpg">
<Р class=rhead> April 1, 2001
<HR>
<Р clаss=rhead>William A. Bates<BR>Macrosoft Corporation<BR>Blumond, WA 12345
<P class=lhead>Internal Revenue Service<BR>Philadelphia, PA 67890
<P><ВR>Dear Sirs,
<P class=body>I am writing to inform you that, due to financial difficulties, I
will be unable to pay my taxes this year.
<P clаss=body>You see, my company has had reduced profits this year. In fact
gross revenues have now dropped below the GDP of <B>twelve</B> foreign
countries! Given this intolerable situation, I am sure you will understand.
<Р class=foot>Sincerely,<BR>William A. Bates
</BODY>
</HTML>
Файл таблиц стилей Bates.css
P { MАRGIN-TOP: 5px }
P.rhead { TЕXT-ALIGN: right;
MАRGIN-RIGHT: 0.5in;
FONT-FАMILY: sans-serif }
Р.lhead { FONT-FAMILY: sans-serif }
P.body { TЕХT-ALIGN: justify;
TEXT-INDENT: 0.5in }
P.foot { MАRGIN-LEFT: 60%;
LINE-HEIGHT: 300% }
2.4 Свойства блоков с обрамлением
Особое значение и удобство стили приобретают при работе с блочными элементами. Для блочного элемента вводят следующие понятия.
Содержимое (контент), чаще всего текст, располагается в самом внутреннем блоке и отделяется от границ блока отступами (padding). Далее следует граница (border), которая имеет свои размеры. Наконец, за границей располагается поле (margin), которое является самым внешним элементом блока. Поле прозрачное, поэтому сквозь него просвечивает фон родительского элемента, на котором расположен данный блок. Вместе эти части образуют блок форматирования. Все блочные элементы HTML располагаются в блоках форматирования.
Средства CSS позволяют гибко управлять размерами, расположением и цветом блочных элементов.
WEB-страница с блоком, содержащим обрамление
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HЕАD>
<TITLE>Bounding Box</TITLE>
<STYLE>H1 { TEXT-ALIGN: center }
P {MARGIN: 0.25in;
BORDER: 0.25in solid black;
РАDDING: 0.25in;
BАCKGROUND: url(imаges/bond-paper.jpg) }
BODY { BACKGROUND: url(images/bricks.jpg) }
</STYLE>
</HEAD>
<BODY>
<H1>CSS1 Bounding Box</H1>
<P>The <В>margin</B> is where the bricks show through. The <B>border</B> is the
solid black line. The <B>padding</В> is the space around the text in the
bond-paper background.
</BОDY>
</HTML>
2.5 Свойства списков
При отображении списков CSS позволяет управлять формой и изображением маркера для элементов списка.
Например, свойство list-style-type позволяет задавать маркер в виде квадрата, круга или окружности.
WEB-страница с различными маркерами списка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Список</TITLE>
</HEAD>
<BODY>
<UL STYLE="list-style-typе:square">
<LI>В виде маркера используем квадрат
</UL>
<UL STYLE="list-style-tyре:disk">
<LI>В виде маркера используем круг
</UL>
<UL SТYLE="list-style-tyрe:circle">
<LI>В виде маркера используем окружность
</UL>
</BОDY>
</HTML>
2.6 Позиционирование блоков. Слои
При отображении документа элементы HTML выводятся последовательно друг за другом по мере их следования в тексте документа. Детальное расположение элементов определяется самим браузером. Однако в CSS существуют и специализированные средства, позволяющие располагать элементы в произвольном месте страницы. До появления спецификации CSS-P, которая вошла в спецификацию CSS2, ничего подобного делать на HTML-страницах было нельзя. До появления CSS-P единственным средством относительно точного позиционирования были таблицы. Они позволяли точно расположить компоненты HTML-страницы относительно друг друга на плоскости. CSS-P позволяет точно разместить элемент разметки не только относительно других компонентов страницы, но и относительно границ страницы. Кроме того, CSS-P добавляет странице еще одно измерение -- элементы разметки могут "наезжать" друг на друга. При этом можно менять порядок "наезда" -- перекладывать слои.
2.6.1 Координаты и размеры
Стандарт CSS-P позволяет с точностью до пиксела разместить блочный элемент разметки в рабочем поле окна браузера. CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.
Абсолютные координаты. При использовании абсолютных координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно.
В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20 px), координата Y - атрибутом top (значение - 10 px). Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.
Абсолютное позиционирование блока
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HЕАD>
<TITLE>Абсолютное позиционирование</TITLE>
</HEAD>
<BODY>
<DIV style="BORDER: navy 2px solid;
PАDDING: 10px;
PОSITION:absоlute; TOP:10px; LЕFT:20px;">
Этот раздел позиционирован в абсолютной системе координат. Его верхний левый край расположен в точке (20px;10px).
</DIV>
</BОDY>
</HTML>
Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100 px (высота) на 200 px (ширина), достаточно позиционировать его следующим образом:
.example { position:absolute; top:-100px;left:-200px; width:200px;height:100px; }
Изменение абсолютного позиционирования блока
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HЕАD>
<TITLE>Абсолютное позиционирование</TITLE>
<SCRIPT>
functiоn up(){if(window.document.all.kuku.style.pixelTop>-100)
{window.document.all.kuku.style.pixelTop-=30;
setTimeout("up();",500);}}
</SCRIРТ>
</HEAD>
<BODY>
<DIV id=kuku
style="BОRDER:navy 2px solid;
PADDING:10px;
POSITION:absolute; LEFT:20px; TOP:10px; WIDTH:200px; HEIGHT:100px;">
<P>Этот раздел позиционирован в абсолютной системе координат.
</DIV>
<P style="MARGIN-TOP:120px; MARGIN-LEFT:40px;">
<BR>[<А href="javascript:up();void(0);">Поднять блок</A>]
<BR>[<A href="javascript:window.document.all.kuku.style.pixelTop=10;void(0);">
Вернуть блок</A>]
</BODY>
</HТML>
Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное расположение важно с точки зрения дизайна, например, для использования всплывающих меню.
Относительные координаты. Данная система координат позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества такой системы координат очевидны: она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках по умолчанию. В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y -- вертикально вниз.
Относительное позиционирование блока
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Относительное позиционирование</TITLE>
</HЕАD>
<BODY>
<DIV style="BORDER: 1px solid; WIDTH:100%; COLOR:black; HEIGHT:100px;">
<DIV stylе="BORDER: 1px solid; WIDTH:300px; COLOR:black;
POSITION:relative; LЕFT:0px; TOP:0px;">
Этот блок находится в точке отсчета относительных координат
</DIV>
<DIV style="BORDER:1px solid; WIDTH:300px; CОLOR:black;
РОSITION:rеlative; LEFT:50px; TOP:0px;">
А этот блок смещен вправо на 50px
</DIV>
</DIV>
</BODY>
</HTML>
Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что Netscape Navigator вообще непредсказуем в работе с относительными координатами, поэтому в нем следует их избегать.
В относительной системе координат можно пользоваться отрицательными смещениями. В данном примере слой, первоначально сдвинутый на 50 пикселов вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселов влево, получая отрицательную величину смещения по оси X (left:-50 px). После повторного нажатия на ссылку положение блока восстанавливается. Перемещение блока реализуется с помощью JavaScript-сценария. Подробно JavaScript-сценарии будут рассматриваться в следующей лабораторной работе.
Изменение относительного позиционирования блока
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Относительное позиционирование</TITLE>
<SCRIPT>flag=0;</SCRIPT>
</HEAD>
<BODY>
<DIV id=kuku style="BORDER:1px solid; WIDTH:200px;
PОSITION:relаtive; TOP:0px; LЕFT:50px;">
<А href="javascript:
if(flag==0)
{window.document.all.kuku.style.pixelLeft=-50; flag=1;}
else
{window.document.all.kuku.style.pixelLeft=50;flag=0;};
void(0);">
Сдвинуть слой
</A>
</DIV>
</BODY>
</HTML>
2.6.2 Управление видимостью
Одним из наиболее интересных атрибутов CSS-P является visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице. Данное свойство может использоваться при динамическом отображении элементов посредством JavaScript-сценариев. При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Microsoft Internet Explorer.
Изменение видимости слоя
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Управление видимостью</TITLE>
</HEAD>
<BODY>
<Р id=ht style="Z-INDEX:2;
CОLOR:black; TEXT-ALIGN:cеnter; BACKGROUND-COLOR:#d8d8d8;
PОSITION:relative; TOP:10px; LEFT:0px;
VISIBILITY:hidden;">
Этот текст был невидим.
<P style="COLOR:black; TEXT-ALIGN:center">
<А onclick="window.document.all.ht.style.visibility='visible';"
href="javascript:void(0);">Проявить текст</A>
<A onclick="window.document.all.ht.style.visibility='hidden';"
href="javascript:void(0);">Скрыть текст</А>
</BODY>
</HTML>
Абсолютное и относительное позиционирование блоков позволяет придать странице третье измерение. Координаты блока, а точнее, левого верхнего угла прямоугольника блока, и его линейные размеры определяют местоположение блока на плоскости. Поскольку блок не является абстрактной точкой, прямоугольники блоков перекрываются. Причем в определенном порядке, что позволяет говорить об их размещении в пространстве. Порядок наложения (перекрытия) блоков (слоев, в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой. Атрибут z-index может принимать и отрицательные значения.
При работе с этим атрибутом следует иметь в виду, что Netscape Navigator и Internet Explorer применяют разные модели описания "слойки". В Internet Explorer это просто числовой параметр, который закреплен за блоком и не влияет на значения данного параметра у других блоков. В Netscape Navigator изменение параметра z-index одного блока влияет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и получают новые номера.
Изменение порядка наложения слоев
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Изменение порядка слоев</TITLE>
</HEAD>
<BODY>
<Р id=first
style="FONT-SIZE:15px; WIDTH:300px; CОLOR:whitе; BACKGROUND-COLОR:black;
РОSITION:relative; TOP:10px; LEFT:10px;">
Первый слой, на который "наедем" другим слоем. </P>
<DIV id=second
style="PADDING:10px; FONT-SIZE:15px; LEFT:100px; WIDTH:280px; COLOR:black;
POSIТION:relative; TOP:-28px; HEIGHT:21px; BACKGROUND-COLOR:#d8d8d8">
Второй слой, который "наезжает" на первый.
</DIV>
<SCRIРТ>
window.document.all.first.style.zIndex=0;
window.document.all.second.style.zIndex=1;
function overlay()
{if(window.document.all.first.style.zIndex<window.document.all.second.style.zIndex)
{window.document.all.first.style.zIndex=1; window.document.all.second.style.zIndex=0;}
else{window.document.all.first.style.zIndex=0;window.document.all.second.style.zIndex=1;}}
</SCRIPT>
<DIV style="COLOR:darkred; TEXT-ALIGN:center">
<A onclick="javascript:overlay();return false;"
hrеf="http://www.intuit.ru/department/internet/css/5/">
Переложить слои
</A>
</DIV>
</BODY>
</HTML>
Размещено на Allbest.ru
Подобные документы
Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.
курсовая работа [2,5 M], добавлен 18.07.2014Выбор технологий и дизайнерских решений. Создание мультимедийного продукта. Проектирование содержания и среды представления приложения. Верстка страниц и таблиц стилей для форматирования. Функциональные элементы, реализованные на стороне клиента.
курсовая работа [1,3 M], добавлен 24.01.2016Методика и этапы проектирования ядра системы управления сайтом с помощью среды Zend Studio 8. Разработка обработчиков событий, для управления этой системой. Создание каскадных таблиц стилей для оформления панели администрирования с помощью Notepad++.
дипломная работа [4,6 M], добавлен 30.06.2011Рассмотрение особенностей выбора инструментов. Изучение архитектуры приложений Laravel. Характеристика модели использованной базы данных. Определение каскадных таблиц стилей. Постановка решаемых задач. Выставление билета на продажу и его покупка.
дипломная работа [746,9 K], добавлен 11.08.2017История возникновения и применение Каскадных таблиц стилей (CSS) в web-дизайне, их преимущества и отличие от HTML. Сравнительная характеристика табличной и блочной верстки. Практика дизайна сайта: создание бокового меню, всплывающего модального окна.
курсовая работа [1,2 M], добавлен 21.06.2011Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009Разработка приложения на базе скриптового языка программирования JavaScript, с использованием каскадных таблиц стилей CSS в среде программирования Bluefish Editor. Обоснование выбора инструментов. Применение клавиш управления памятью калькулятора.
курсовая работа [3,8 M], добавлен 22.06.2015Java Script как язык управления сценарием отображения документа. Отличие world wide web от остальных инструментов для работы с Internet. Использование каскадных таблиц стилей в рамках разработки спецификации HTML. Элементы программы Netscape Navigator.
контрольная работа [1,1 M], добавлен 02.12.2009Рассмотрение визуального HTML-редактор Dreamweaver. Определение структуры сайта ООО "Фаст Студия". Содержание страниц "Главная", "Портфолио", "Контакты". Теги форматирования текста и способы его оформления с использованием подключаемых таблиц CSS.
курсовая работа [1,4 M], добавлен 18.08.2013Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011
