50818

Каскадные листы стилей CSS

Лабораторная работа

Информатика, кибернетика и программирование

Значение 0 соответствует полной прозрачности элемента а 1 наоборот его непрозрачности.2 Oper 9 border позволяет одновременно установить толщину стиль и цвет рамки вокруг элемента.

Русский

2014-01-31

330.5 KB

7 чел.

Лабораторная работа №2

Каскадные листы стилей CSS

Цель работы: ознакомиться с основными свойствами css, синтаксисом, способами подключения, получить практические навыки создания листов стилей.

Основные понятия

Стиль — это набор параметров, задающий внешнее представление некоего объекта в той или иной среде.

В одном документе может встречаться множество различных элементов, каждый из которых может иметь свой стиль оформления, набор стилей для всех элементов одного документа называется таблицей стилей.

CSS используется создателями и посетителями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основное назначение, для которого технология CSS была разработана, это разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS).  

Синтаксис:

селектор1, селектор2 {свойство1: значение1; свойство2: значение2;}

Основные css-свойства

background - позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

background: background-attachment || background-color || background-image || background-position || background-repeat

background: #fc0 url(images/hand.png) repeat-y;

color - определяет цвет текста элемента.

color: RGB(49, 151, 116);

opacity - определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Кроссбраузерная прозрачность

  filter: alpha(opacity=50); /* IE 5.5+*/

  -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */

  -khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */

  opacity: 0.5; /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9+*/

border - позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.

примеры border-style:

border: 4px double black;

font - универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.

font: [font-style || font-variant || font-weight] font-size [/line-height] font-family

В качестве обязательных аргументов параметра font указывается размер шрифта и его семейство. Остальные аргументы являются опциональными и задаются при желании. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра отдельно.

font-family: имя шрифта [, имя шрифта[, ...]]

  •  serif — шрифты с засечками (антиквенные), типа Times;
  •  sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  •  cursive — курсивные шрифты;
  •  fantasy — декоративные шрифты;
  •  monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

font-style: normal | italic | oblique 

  •  normal - Обычное начертание текста.
  •  italic - Курсивное начертание.
  •  oblique - Наклонный шрифт. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.

font-variant: normal | small-caps

  •  normal - Оставляет регистр символов исходным, заданным по умолчанию.
  •  small-caps - Модифицирует все строчные символы как заглавные уменьшенного размера

font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное, bolder — жирное; lighter — светлое, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.

letter-spacing - определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

letter-spacing: значение | normal

line-height - устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.

line-height: normal | множитель | значение | проценты

text-align - определяет горизонтальное выравнивание текста в пределах элемента. Этот атрибут наследуется, поэтому может быть установлен для целого блока для воздействия на все вложенные в него элементы.

text-align: center | justify | left | right

text-decoration - добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-decoration: blink | line-through | overline | underline | none

  •  blink - Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте.
  •  line-through - Создает перечеркнутый текст.
  •  overline - Линия проходит над текстом.
  •  underline - Устанавливает подчеркнутый текст.
  •  none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

text-indent - устанавливает величину отступа первой строки блока текста. Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

text-transform - управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.

text-transform: capitalize | lowercase | uppercase | none

vertical-align - выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты

  •  baseline - Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
  •  bottom - Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
  •  middle - Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
  •  sub - Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
  •  super - Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
  •  text-bottom - Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
  •  text-top - Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
  •  top - Выравнивание верхнего края элемента по верху самого высокого элемента строки.

white-space - устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

white-space: normal | nowrap | pre

word-spacing - устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

word-spacing: значение | normal

list-style - атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра list-style-type, list-style-position и list-style-image отдельно.

list-style: list-style-type || list-style-position || list-style-image

list-style-position - Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

clear - параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

clear: both | left | none | right

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

clip: rect(Y1, X1, Y2, X2) | auto

display - многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.

display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Значение

Описание

IE6

IE7

IE8

Cr2

Cr8

Op9.2

Op10

Sa3.1

Sa5

Fx3

Fx4

block

Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

 

 

 

 

 

 

 

 

 

 

 

inline

Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и<p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.

 

 

 

 

 

 

 

 

 

 

 

inline-block

Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега<img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

 

 

 

 

 

 

 

 

 

 

 

inline-table

Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

 

 

 

 

 

 

 

 

 

 

 

list-item

Элемент выводится как блочный и добавляется маркер списка.

 

 

 

 

 

 

 

 

 

 

 

none

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

 

 

 

 

 

 

 

 

 

 

 

run-in

Устанавливает элемент как блочный или встроенный в зависимости от контекста.

 

 

  

 

  

  

  

 

 

 

  

table

Определяет, что элемент является блочной таблицей подобно использованию тега <table>.

 

 

 

 

 

 

 

 

 

 

 

table-caption

Задает заголовок таблицы подобно применению тега <caption>.

 

 

 

 

 

 

 

 

 

 

 

table-cell

Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).

 

 

 

 

 

 

 

 

 

 

 

table-column

Назначает элемент колонкой таблицы, словно был добавлен тег <col>.

 

 

 

 

 

 

 

 

 

 

 

table-column-group

Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.

 

 

 

 

 

 

 

 

 

 

 

table-footer-group

Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.

 

 

 

 

 

 

 

 

 

 

 

table-header-group

Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.

 

 

 

 

 

 

 

 

 

 

 

table-row

Элемент отображается как строка таблицы (тег<tr>).

 

 

 

 

 

 

 

 

 

 

 

table-row-group

Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

 

 

 

 

 

 

 

 

 

 

 

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

float: left | right | none

height - устанавливает высоту блочных или заменяемых элементов.

max-height - устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height

max-width - устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width

min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height

min-width - устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.

IE, не понимает эти свойства css. Хак для блока с id “wrapper” выглядит так:
А) Минимальная ширина 750px

#wrapper {

min-width: 750px;

width:expression(document.body.clientWidth < 750? "750px": "auto" );} 

Б) Максимальная ширина 1220px, минимальная 750px

#wrapper {

min-width: 750px;

max-width: 1220px;

width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");} 

Более удобный хак Min-height

selector {

min-height:500px;

height:auto !important;

height:500px;} 

Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width

overflow - управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

overflow: auto | hidden | scroll | visible

  •  visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  •  hidden - Отображается только область внутри элемента, остальное будет обрезано.
  •  scroll - Всегда добавляются полосы прокрутки.
  •  auto - Полосы прокрутки добавляются только при необходимости.

visibility - предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

visibility: visible | hidden | collapse

width - устанавливает ширину блочных или заменяемых элементов

position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

position: absolute | fixed | relative | static

  •  absolute - Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
  •  fixed - По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
  •  relative - Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
  •  static - Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

top, right, bottom, left - устанавливает положение верхнего, правого, нижнего, левого края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от края исходного положения элемента, а при абсолютном — относительно края окна документа.

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

z-index: число | auto

margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента/

Отступ от каждой границы можно устанавливать отдельно. Таким отступам соответствуют свойства margin-bottom, margin-left, margin-right, margin-top

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

Каждое поле можно устанавливать отдельно. Таким полям соответствуют свойства padding-bottom, padding -left, padding -right, padding -top

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

border-collapse: collapse | separate

border-spacing - задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.

caption-side - определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.

caption-side: top | bottom 

table-layout - определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.

table-layout: auto | fixed

cursor - устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait || url('путь к курсору')

Эмуляция псевдокласса first-child в IE6

Для того чтобы задать стиль первому дочернему элементу, например, списка, строки таблицы, и т.п. используется псевдокласс :first-child:

ul li:first-child { background: blue; };

Таким образом мы установим цвет фона синим и только первого элемента ненумерованного списка. Замечательно, однако в IE6 first-child не работает, поэтому придется идти в обход:

* HTML ul li {

background-color: expression(this.previousSibling==null ?'blue' :'');

}

Порядок создания страниц сайта при помощи CSS

  1.  Создать обычный текстовый файл и переименовать его в *.html (или *.htm). Главная страница сайта именуется index.html.
  2.  Открыть созданный файл любым текстовым редактором и сверстать структуру страницы, включающей теги <!DOCTYPE>, <html>, <head> и <body>.
  3.  Создать обычный текстовый файл для стилей и переименовать его в *.css. Подключить при помощи тега <link> файл стилей в файл *.html.
  4.  Применить вёрстку при помощи слоёв или табличную вёрстку для создания "каркаса" страницы, т.е. не используя контент (наполнение страницы смысловым содержимым), написать для тегов стили в текстовом редакторе.
  5.  Сохранить и протестировать страницу на кросс-браузерность. При различном отображении перейти к п.4 и исправить ошибки.
  6.  Добавить контент на страницу. Возможно использование визуального WYSIWYG-редактора, например Adobe Dreamweaver, при этом необходимо убрать "лишний" код.
  7.  Дописать стили для форматирования содержимого страницы. Возможно использование визуального WYSIWYG-редактора, например Adobe Dreamweaver, при этом необходимо убрать "лишний" код.
  8.  Сохранить и протестировать страницу на кросс-браузерность. При различном отображении перейти к п.4, либо п.6 и исправить ошибки.
  9.  По аналогии создать остальные страницы сайта, соединив их гиперссылками. Следует помнить, что на всех веб-страницах необходимо использовать одинаковый <!DOCTYPE> и "каркас", изменяя лишь контент, меню и другие элементы, зависящие от содержимого конкретной страницы. Файл стилей должен быть один для всех станиц сайта. Также там, где необходимо допускается использование инлайновых стилей.

Пример верстки с двумя колонками:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Пример</title>

<style type="text/css">

.leftColumn {

width: 200px;

float: left;

background: #eb0505;

}

.rightColumn {

margin-left: 220px;

background: #050feb;

}

.rightColumn .block1, .rightColumn .block2  {

float: left;

width: 300px;

margin-right: 20px;

background: #ebde05;

}

.rightColumn .block3 {

background: #eb8105;

clear: both;

}

.container {

width: 100%;

display: table;

}

* html .container {

margin-left: -3px;

}

</style>

</head>

<body>

<div class="main">

<div class="leftColumn">

Lorem ipsum dolor sit amet, consLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mlum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait null

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mlum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait null

</div>

<div class="rightColumn">

<div class="container">

 <p class="block1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mlum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait null

 </p>

 <p class="block2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostr

 </p>

 <div class="block3"> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>

 </div>

</div>

<div class="rasporka"></div>

</div>

</body>

</html>

 
Задание к лабораторной работе:

  1.  Изменить web-сайт, разработанный в лабораторной работе №1 применив в качестве оформления каскадные листы стилей к элементам HTML, идентификаторам и классам, составить сложные селекторы (более 3 уровней вложенности). Сайт должен содержать не менее 5 связанных через главное меню страниц.
  2.  Верстка страницы должна быть «резиновой» (фиксированные левая и/или правая колонки и растягивающийся по содержимому контейнер) и основана на элементах div (слоях).
  3.  Все созданные стили должны находиться во внешнем файле. Допускается применение стилей непосредственно в html-коде или инлайновых только там где это действительно необходимо.
  4.  Изменить цвета, шрифты, расположение элементов, применить форматирование текста, стили к спискам, отступы, поля и другое.
  5.  Минимизировать HTML-код, оставив только необходимые теги и атрибуты, убрав все устаревшие элементы и те, которые можно заменить при помощи технологии CSS.
  6.  Если понадобится, то применить CSS хаки.
  7.  Страницы должны быть кросс-браузерными.

Каждый отчет должен содержать:

  1.  Заголовок лабораторной работы (название и цель работы).
  2.  Фамилия, инициалы и группа студента.
  3.  Задание к лабораторной работе.
  4.  Краткие теоретические сведения.
  5.  Описание алгоритмов, функций, примененных решений.
  6.  Экранные формы разработанных страниц.
  7.  Основные тексты страниц.
  8.  Выводы по сделанной работе.


 

А также другие работы, которые могут Вас заинтересовать

18833. Валютний ринок і валютні системи 552 KB
  Тема 11: Валютний ринок і валютні системи. Сутність валюти та валютних відносин. Конвертованість валюти. Валютний ринок. Види операцій на валютному ринку. Валютний курс. Валютні системи та валютна політика. Платіжний баланс. Світова валютна система ...
18834. Міжнародні валютно-кредитні установи та форми їх співробітництва з Україною 141.5 KB
  ТЕМА 12 : Міжнародні валютнокредитні установи та форми їх співробітництва з Україною МВФ і його діяльність в Україні 2 Світовий банк 3 Регіональні міжнародні кредитнофінансові інституції 4.Європейськийбанк реконструкції та розвитку 5. Банк міжнарод...
18835. Расчет схемы по постоянному току 146.77 KB
  Расчет схемы по постоянному току. Режим работы схемы по постоянному току определяется элементами: RК RЭ EК EЭ и характеристиками транзистора VT. Запишем уравнения Кирхгофа для выходной цепи: Уравнение 1 представляет собой уравнение прямой которую называют наг...
18836. Расчет по переменному току 269.85 KB
  Расчет по переменному току. Принципиальная схема усилителя имеет вид приведенный на Рис. 3.4.. Рис. 3.4 принципиальная схема усилителя с ОБ. Разделительные конденсаторы СР1 и СР2 нужны для того чтобы: 1 источник входного сигнала и нагрузка не изменяли режим работы тр...
18837. Схема с общей базой 164.86 KB
  Схема с общей базой. При проектировании усилителей на биполярных транзисторах входной переход транзистора всегда включают в прямом направлении а выходной в обратном. На Рис. 3.1 приведена схема усилителя на биполярном транзисторе включенном с общей базой ОБ. Рис. 3...
18838. Расчет по постоянному току 192.58 KB
  Расчет по постоянному току. Режим работы усилителя по постоянному току определяется элементами EК RК RБ и параметрами транзистора VT. Критерии выбора транзистора следующие: по значению граничной частоты усилителя; по предельнодопустимым параметрам UКЭдоп PРас.до
18839. Расчет по переменному току 157.73 KB
  Расчет по переменному току. Для расчету по переменному току необходимо: 1 начало координат на характеристиках транзистора перенести в рабочую точку О по постоянному току. В рабочей точке определить для бесконечно малых приращений параметры транзистора. Наиболее ис
18840. Определение входного сопротивления 79.52 KB
  Определение входного сопротивления Опишем линейную модель усилителя системой уравнений в соответствии с 1 и 2 законами Кирхгофа: Из уравнения 2 определим: и подставим в уравнение 1. Отсюда находим входное сопротивление транзистора. При напряжении колл...
18841. Определение коэффициента усиления по напряжению 225.45 KB
  Определение коэффициента усиления по напряжению Для этого воспользуемся следующей методикой: Рис. 3.10 упрощенная схема замещения усилителя с ОЭ. Предположим что входное и выходное напряжения синфазны пусть по отношению к общей шине распложен как показано на Ри