- •Лекция №22. Виды подключения каскадных таблиц стилей
- •Вынос таблиц css стилей в отдельный файл с помощью Link
- •Границы элемента
- •Стиль границы.
- •Толщина границы.
- •Цвет границы.
- •Границы справа слева сверху и снизу отдельно.
- •Границы таблицы.
- •Лекция №23. Слои
- •Абсолютное позиционирование
- •Относительное позиционирование
- •Универсальный подход
Границы таблицы.
Свойство CSS border-collapse определяет стиль отображения границ таблицы.
По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.
Внешний вид границ таблицы может принимать следующий вид:
separate - ячейки таблицы отделены друг от друга (по умолчанию).
collapse - ячейки таблицы не имеют промежутков между собой.
inherit - свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)
Пример:
<html><head><title>Стиль таблицы</title></head>
<body>
<table cellpadding="5" border="5">
<caption>Таблица с бордюром по умолчанию</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table>
<hr>
<table cellpadding="5" border="5" style="border-collapse: collapse">
<caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
<tr>
<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>
</tr>
</table> </body></html>
Лекция №23. Слои
Код слоя:
<div id="имя слоя" style="position:absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>
id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.
left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top - расстояние от верха.
ну, ширина и высота вам уже известны, их не упоминаю.
z-index - значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
Дополнительные возможные теги:
background-color: цвет фона
layer-background-color: цвет слоя
border: 1px none - если убрать "ноне", то вокруг слоя появится бордюрчик 1 пиксель толщиной.
Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.
Существует несколько способов создания наложения. Самый простой из них, но при этом и менее гибкий — использование абсолютного позиционирования.