CSS. Урок 5 (таблицы, колонки, курсоры, прозрачность, кавычки)



Таблицы

По умолчанию, при указании стиля, цвета и толщины границы, браузер рисует каждую ячейку с собственными границами. Получается не очень опрятно, все границы двойные. Для исправления ситуации применяется следующая конструкция:

.ClassName  {

                        border-collapse: collapse;

}

Границы становятся одиночными, таблица выглядит как полагается. Если все таки нужны двойные границы - указываем

border-collapse: separate

Какой же толщины будет пространство между границами ячеек? За это отвечает тег:

.ClassName  {

                        border-spacing: значение1 [значение2];

}

Если указали только одно значение, то оно будет применяться ко всем границам. Если два - то первое значение отвечает за горизонтальные отступы, а второе за вертикальные.

Если в таблице какая то ячейка не содержит текст, то браузер не до конца понимает, как ему отображать такую ячейку. Каждый браузер отображает ее по-своему. Чтобы определить строгое правило отображения используется конструкция:

.ClassName  {

                        empty-cells: show | hide;

}

show - Отображает границу вокруг ячейки и фон в ней. Если все ячейки в строке пустые, то строка все равно отображается.
hide - Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.
При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.
Иногда таблицы бывают очень большие и содержат много текста. Браузер может загружать ее постепенно и перерисовывать в соответствии с содержимым. В начале страницы ячейка содержит мало текста, а в конце - большой текст или картинку. В процессе загрузки таблица будет "скакать" в разные стороны, изменяя свои размеры и размеры ячеек, если они не жестко зафиксированы. Это не очень приятно выглядит. С другой стороны, большая таблица может быть отображена только после полной ее загрузки. При медленном соединении человек не дождется ее загрузки и просто покинет сайт. Это еще хуже. Поэтому необходимо самим определять, как и когда будет отображаться таблица.

.ClassName  {

                        table-layout: auto;

}

auto - Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed - Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.
Для некоторых специических дизайнов (стилизация под журнал или газету) требуется текст располагать в несколько колонок на листе. Параметры отображения можно указывать по-раздельности или одним универсальным свойством. Сначала рассмотрим раздельные свойства:

.ClassName  {

                        column-count: <число>;

}

Число указывает количество столбцов, на которые нужно разбить текст. Для автоматического вычисления количества столбцов указываем:
column-count: auto;
Расстояние между колонками указывается так:

.ClassName  {

                        column-gap: 15px;

}

Нужны или нет границы между столбцами текста? Толщину, тип линии и цвет границ мы можем указать с помощью тега:

.ClassName  {

                        column-rule: <border-width> || <border-style> || <цвет>

}

Возможные варианты стиля линии: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Ширину текстового столбца можно указать явно:

.ClassName  {

                        column-width: <значение>

}

Ширину и количество колонок одновременно можно указать с помощью универсального стиля:

.ClassName  {

                        columns: [column-width] || [column-count];

}

Теперь тег, за использование которого надо бить по рукам. Но иногда он реально выручает. Некоторые особо креативные долбо... веб-мастера считают, что стандартный курсор - не кошерно и не модно. Более адекватные меняют курсор на свою картинку. Если она хоть что то общее имеет с "родной стрелкой", то еще куда ни шло.

.ClassName  {

                        cursor: url('путь к курсору');

}

Самые долбанутые начинают заменять вид его на стандартные системные курсоры, применяемые системой при наступлении тех или иных событий. Тогда они указывают конкретный тип курсора

то еще куда ни шло.

.ClassName  {

                        cursor: crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait;

}

ВидЗначениеТестПример
default   P {cursor: default}
crosshair   P {cursor: crosshair}
help   P {cursor: help}
move   P {cursor: move}
pointer   P {cursor: pointer}
progress   P {cursor: progress}
text   P {cursor: text}
wait   P {cursor: wait}
n-resize   P {cursor: n-resize}
ne-resize   P {cursor: ne-resize}
e-resize   P {cursor :e-resize}
 / se-resize   P {cursor: se-resize}
s-resize   P {cursor: s-resize}
sw-resize   P {cursor: sw-resize}
w-resize   P {cursor: w-resize}
nw-resize   P {cursor :nw-resize}

Сейчас много разных интересных эффектов можно добиться с помощью прозрачности. Значение указывается от полной прозрачности - значение 0 до полной непрозрачности - значение 1. Указываем дробные числа и восхищаемся своей крутизной. Наложением блоков с различной прозрачностью, да еще со смещением друг относительно друга добиваются офигенных результатов.

.ClassName  {

                        opacity: 0.6;

}

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

.ClassName  {

                        quotes: "левая кавычка" "правая кавычка";

}

Виды кавычек перечислены ниже

 

ВидСпецкод HTMLЮникодОписание
" &#34; \0022 Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд.
' &#39; \0027 Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака (popalas' lisa).
« &#171; или &laquo; \00ab Открывающая двойная угловая кавычка.
» &#187; или &raquo; \00bb Закрывающая двойная угловая кавычка.
&#8216; \2018 Открывающая одинарная кавычка.
&#8217; \2019 Закрывающая одинарная кавычка.
&#8220; \201c Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
&#8221; \201d Закрывающая двойная кавычка в англоязычных текстах.
&#8222; \201e Открывающая двойная кавычка. Применяется в русском языке.