- •Лабораторная работа №2 Каскадные листы стилей css
- •Основные понятия
- •Основные css-свойства
- •Font - универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
- •Height - устанавливает высоту блочных или заменяемых элементов.
- •Max-height - устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
- •Max-width - устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
- •Min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
- •Width - устанавливает ширину блочных или заменяемых элементов
- •Margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента/
- •Пример верстки с двумя колонками:
- •Каждый отчет должен содержать:
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
Создать обычный текстовый файл и переименовать его в *.html (или *.htm). Главная страница сайта именуется index.html.
Открыть созданный файл любым текстовым редактором и сверстать структуру страницы, включающей теги <!DOCTYPE>, <html>, <head> и <body>.
Создать обычный текстовый файл для стилей и переименовать его в *.css. Подключить при помощи тега <link> файл стилей в файл *.html.
Применить вёрстку при помощи слоёв или табличную вёрстку для создания "каркаса" страницы, т.е. не используя контент (наполнение страницы смысловым содержимым), написать для тегов стили в текстовом редакторе.
Сохранить и протестировать страницу на кросс-браузерность. При различном отображении перейти к п.4 и исправить ошибки.
Добавить контент на страницу. Возможно использование визуального WYSIWYG-редактора, например Adobe Dreamweaver, при этом необходимо убрать "лишний" код.
Дописать стили для форматирования содержимого страницы. Возможно использование визуального WYSIWYG-редактора, например Adobe Dreamweaver, при этом необходимо убрать "лишний" код.
Сохранить и протестировать страницу на кросс-браузерность. При различном отображении перейти к п.4, либо п.6 и исправить ошибки.
По аналогии создать остальные страницы сайта, соединив их гиперссылками. Следует помнить, что на всех веб-страницах необходимо использовать одинаковый <!DOCTYPE> и "каркас", изменяя лишь контент, меню и другие элементы, зависящие от содержимого конкретной страницы. Файл стилей должен быть один для всех станиц сайта. Также там, где необходимо допускается использование инлайновых стилей.