Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Web(л.р HTML) / Лабораторная работа 2 / Лабораторная работа 2.doc
Скачиваний:
26
Добавлен:
11.03.2015
Размер:
338.43 Кб
Скачать

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> и "каркас", изменяя лишь контент, меню и другие элементы, зависящие от содержимого конкретной страницы. Файл стилей должен быть один для всех станиц сайта. Также там, где необходимо допускается использование инлайновых стилей.

Соседние файлы в папке Лабораторная работа 2