Блочная верстка

Табличная верстка

Блочная верстка

Блочная верстка

- является блочным элементом и предназначен для выделения фрагмента

Display - Многоцелевое свойство, которое определяет, как элемент должен быть показан

Padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего

float
Left - Выравнивает элемент по левому краю, а все остальные элементы,

Пример

 float:left;

 нижняя граница предыдущего плавучего блока

А если высота первого пункта оказалась

Обтекание и очистка

position

Absolute - абсолютно позиционирован, при этом другие элементы отображаются на веб-странице

fixed

привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего

relative

Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента

static

Элементы отображаются как обычно. Использование свойств  left, top, right и bottom не приводит к каким-либо результатам.

inherit

Наследует

overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в

z-index: число | auto | inherit

Число - Чем больше значение, тем

Пример

Слой 1 наверху

Ссылка 1

Ссылка

Слой 4 наверху

#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }

#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Относительное позиционирование */

Пример

.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;

Шрифт

Текст

Цвет

2. Новые формы представления цвета

1) RGBA (Red Green Blue Alpha):
rgba(чер,

2) HSL (Hue, Saturation, Lightness):
hsl(тон, насыщенность, яркость);
тон задается

HTML:

CSS:

One

Two

Three

Four

.a1 { background-color: hsl(0, 100%, 100%);} .a2

3) HSLA (Hue, Saturation, Lightness, Alpha):
hsl(тон, насыщенность, яркость, прозрачность);

Списки

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента
border:

5. CSS свойства

1) Заокругленые концы тега
border-radius: зн;
border-radius: зн1 зн2;
border-radius: зн1 зн2

background: teal;
border-radius: 10px;

background: green;
border-radius: 10px 30px 60px;

border-radius: 10px 40px;
background: orange;

border-radius:

border-radius позволяет дополнительно через слеш задать от 1 до 4

div{ height: 100px; width: 200px; background: orangered; border-radius: 80px 10px/30px; }

Значення border-radius можна задавати у відсотках (відсотки обчислюються від ширини

2) Тень от тега

box-shadow: змX змY розм розт кол;

змХ –

div{ height: 100px; width: 100px; background: red; box-shadow: 20px 20px

div{ height: 100px; width: 100px; background: red; box-shadow: 20px 20px

Можна задавати кілька тіней, розділяючи їх комою:

div{ margin:40px; height: 100px; width:

3) Тінь від тексту

text-shadow: змX змY розм кол;

змХ – зміщення

Таблицы

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

empty-cells
Задает отображение границ и фона в ячейке, если она пустая.

Ссылки

Псевдоклассы при работе со ссылками

Размеры

height
Устанавливает высоту элементов.
max-height
Устанавливает максимальную высоту элемента.
max-width
Устанавливает максимальную ширину элемента.
min-height
Задает минимальную высоту

Мнемоники

Специальные символы отображаются в текстах в виде специальных слов (entities). Вот примеры

Приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. 

Стиль браузера.
Стиль автора.
Стиль

Специфичность

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более

Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные

Задание

Каким цветом будут пункты списка и почему?

1. В какой строке содержится ошибка?
1H1 { margin-left: 20px; }
2p {