- •5. Каскадные таблицы стилей
- •1.Понятие таблицы стилей. Помещение таблицы стилей на страницу. Внутренние и внешние таблицы стилей.
- •2.Приоритет стилей. Атрибут style. Директивы @import и!important.
- •3.Единицы измерения в css.
- •4 Управление размером элементов с помощью css. Использование процентного размера.
- •5.Правила записи стилевых правил.
- •7. Форматирование шрифта с помощью css.
- •1.Форматирование абзацев с помощью css.
- •2.Управление цветом с помощью css.
- •3.Форматирование объектов с помощью css: отступы и границы.
- •4.Внешние и внутренние отступы в css.
- •5.Позиционирование с помощью css.
- •6.Управление видимостью объекта в css.
- •7.Графика с помощью css.
- •8.Оформление таблиц с помощью css.
- •9.Оформление списков с помощью css.
- •10.Плавающие элементы в css.
- •11.Построение навигационных меню с помощью css. Вертикальное меню.
- •12.Создание горизонтального навигационного меню с помощью css.
- •13.Разметка страницы с помощью css.
- •14.Сравнение табличной и блочной верстки.
- •15.Блочная фиксированная разметка с помощью css.
- •16.Блочная гибкая разметка с помощью css.
- •17.Применение абсолютного позиционирования на странице. Правило z-index.
- •18.Применение относительного позиционирования. Создание эффектов объема и тени.
- •19.Правило display. Его назначение и применение.
- •20.Управление стилями элементов htmLпо их атрибутам.
14.Сравнение табличной и блочной верстки.
Достоинства табличной верстки:
1.Удобство и простота работы с ячейками таблицы, используемыми в качестве элементов структуры электронного издания. С помощью таблицы можно достаточно просто создавать несложные структуры. В случае необходимости задания более сложной структуры мы потратим немного больше времени. Но при масштабировании окна браузера колонки сохранят свой исходный вид, а также взаимное расположение. К тому же, независимо от наполнения соседних ячеек, по высоте они останутся одинаковыми.
2.Использование табличной верстки хорошо подходит для создания так называемого «резинового» макета, в котором ширина зависит от ширины окна браузера.
3.В ячейках таблицы мы можем одновременно выравнивать по горизонтали и вертикали.
4.Меньше всего зависит от выбранного пользователем браузера.
Недостатки табличной верстки:
1.Для отображения страницы надо дождаться, пока браузер загрузит всю таблицу.
2.Более громоздкий и менее понятный код при создании таблиц, т.к. сложная иерархическая структура вложенных тегов.
3.Отсутствует разделение оформления и содержимого.
4.Плохая индексация. Раздробленность информации затрудняет правильное индексирование страницы поисковыми системами.
5.Отсутствие полосы прокрутки (при фреймовой верстве можно прокручивать части).
6.Верстка не соответствует стандартам html и css (таблицы должны быть только для табличных данных).
Достоинства блочной верстки:
1.Сильно уменьшен код html-страниц за счет использования элементов div.
2.Есть возможность нестандартного вложения блоков друг в друга – можно размещать элементы как хотим.
3.Блоки отображаются по мере своей загрузки, что ускоряет работу с электронными изданиями.
4.Лучшая индексация поисковыми системами.
5.Есть возможность расположения нескольких слоев друг над другом, что помогает улучшить индексацию.
6.Возможность использования полосы прокрутки отдельных блоков.
7.С точки зрения моды – данная верстка сейчас самая популярная
Недостатки блочной верстки:
1.При низком разрешении экрана у монитора пользователя блоки могут поменять свое взаимное расположение.
2.В разных браузерах (старых версий) верстка может выглядеть по-разному.
3.Эта верстка самая сложная.
15.Блочная фиксированная разметка с помощью css.
CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.
Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.
Существует четыре различных метода позиционирования.
Статическое позиционирование
HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.
Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.
Фиксированное Позиционирование
Элемент с фиксированным положением позиционирован относительно окна браузера.
Он не будет двигаться, даже если окно прокручивается:
Пример:
p.pos_fixed
{
position:fixed;
top:60px;
right:5px;
}
Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа !DOCTYPE.
Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.
Зафиксированные элементы могут перекрывать другие элементы.
Абсолютное Позиционирование
Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается <html>:
Пример:
h2
{
position:absolute;
left:100px;
top:150px;
}
Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.
Абсолютно расположенные элементы могут перекрывать другие элементы.