Ссылки и псевдоклассы active, link, visited и hover

Псевдоклассы, работающие с ссылками, применяются к тегу <a>.

В зависимости от используемого псевдокласса, действий пользователя и указанных свойств CSS меняется оформление ссылок.

- active – псевдокласс определяет стиль для активных ссылок. Ссылка является активной в момент нажатия на нее.

- link – псевдокласс определяет стиль для ссылок, которые еще не посещались.

- visited – псевдокласс определяет стиль для посещенных ссылок. Браузер запоминает, что ссылка посещалась, и какое-то время ссылка отображается в соответствии с заданным стилем.

- hover – псевдокласс определяет стиль, который применяется к ссылке в момент наведения на нее курсора.

Для оформления ссылок можно использовать любые свойства css (например, color, font-family, background-color). Отличаются ссылки от простого текста тем, что у них есть различные состояния и можно задавать стили отдельно для каждого состояния.

a:link – обычная не посещённая ссылка a:visited – ссылка, по которой уже был осуществлён переход a:hover – ссылка при наведённой на неё мыши a:active – ссылка в момент нажатия

Что такое приоритетность в CSS?

У одного и того же элемента может быть несколько родителей. Если рассмотреть наш случай то в некоторых элементах так и есть. Например элемент li. У него есть родитель ul и их общий родитель тег body. В результате может сложиться такая ситуация что тег body передает к примеру цвет и для ul тоже. Давайте для примера, пропишем правило, которое будет передавать цвет для всех элементов внутри этого тега.

16. Создание таблицы и её стилизация. Как выровнять содержимое ячеек по середине, по правому и левому краю? Как раскрасить ячейки в разные цвета? Как объединять ячейки?

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

Код таблицы:

<table border="1" width="200px">

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

Такое оформление подходит не всегда. Допустим, нам необходима таблица с зелеными границами ячеек. Попробуем указать стиль border для таблицы и ее ячеек:

<style>

#ourtable, #ourtable td {border: 1px solid #070}

</style>

<table border="1" width="200px" id="ourtable">

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

в результате таблица примет следующий вид:

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

<style>

#ourtable, #ourtable td {border: 1px solid #070}

</style>

<table border="1" width="200px" id="ourtable" cellspacing="0">

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

то зазоры между ячейками пропадут:

но границы ячеек станут толще в два раза, так как зазор между ячейками мы убрали и границы примкнули друг к другу. Поэтому для устранения зазоров между ячейками и двойных границ лучше воспользоваться стилем border-collapse для таблицы. По-умолчанию значение этого стиля равно separate, что означает, что у каждой ячейки свои собственные границы. Значение collapse указывает браузеру объединить границы соседних ячеек, что нам и нужно:

<style>

#ourtable {border-collapse: collapse}

#ourtable, #ourtable td {border: 1px solid #070}

</style>

<table border="1" width="200px" id="ourtable">

<tr><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr>

</table>

Иногда для большой таблицы с данными задают чередующиеся цвета строк таблицы для более удобного просмотра. Существует специальный модификатор :odd, но он работает не во всех браузерах, поэтому мы пойдем старым проверенным способом: каждой нечетной строке зададим определенный класс и укажем в стилях более темный цвет для этого класса:

<style>

#ourtable {border-collapse: collapse; background: #cfc}

#ourtable, #ourtable td {border: 1px solid #070}

#ourtable tr.odd {background: #beb}

</style>

<table border="1" width="60%" id="ourtable">

<tr class="odd"><td> </td><td> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td><td> </td></tr>

<tr class="odd"><td> </td><td> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td><td> </td></tr>

<tr class="odd"><td> </td><td> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td><td> </td></tr>

</table>

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

<style>

* {font-family: tahoma; font-size: 12px}

#ourtable {border-collapse: collapse; background: #cfc}

#ourtable, #ourtable td {border: 1px solid #070}

#ourtable td {padding: 2px 5px}

#ourtable tr.odd {background: #beb}

</style>

<table border="1" width="60%" id="ourtable">

<tr class="odd"><td>1:1</td><td>1:2</td><td>1:3</td><td>1:4</td></tr>

<tr><td>2:1</td><td>2:2</td><td>2:3</td><td>2:4</td></tr>

<tr class="odd"><td>3:1</td><td>3:2</td><td>3:3</td><td>3:4</td></tr>

<tr><td>4:1</td><td>4:2</td><td>4:3</td><td>4:4</td></tr>

<tr class="odd"><td>5:1</td><td>5:2</td><td>5:3</td><td>5:4</td></tr>

<tr><td>6:1</td><td>6:2</td><td>6:3</td><td>6:4</td></tr>

</table>

1:1	1:2	1:3	1:4
2:1	2:2	2:3	2:4
3:1	3:2	3:3	3:4
4:1	4:2	4:3	4:4
5:1	5:2	5:3	5:4
6:1	6:2	6:3	6:4

И напоследок создадим выделяющуюся шапку таблицы. Для этого выберим более темный цвет фона, белый цвет текста и выравнивание текста по центру:

<style>

* {font-family: tahoma; font-size: 12px}

#ourtable {border-collapse: collapse; background: #cfc}

#ourtable, #ourtable td {border: 1px solid #070}

#ourtable td {padding: 2px 5px}

#ourtable tr.odd {background: #beb}

#ourtable tr.top td {background: #070; color: white; text-align: center}

</style>

<table border="1" width="60%" id="ourtable">

<tr class="top"><td>Столбец 1</td><td>Столбец 2</td><td>Столбец 3</td><td>Столбец 4</td></tr>

<tr class="odd"><td>1:1</td><td>1:2</td><td>1:3</td><td>1:4</td></tr>

<tr><td>2:1</td><td>2:2</td><td>2:3</td><td>2:4</td></tr>

<tr class="odd"><td>3:1</td><td>3:2</td><td>3:3</td><td>3:4</td></tr>

<tr><td>4:1</td><td>4:2</td><td>4:3</td><td>4:4</td></tr>

<tr class="odd"><td>5:1</td><td>5:2</td><td>5:3</td><td>5:4</td></tr>

<tr><td>6:1</td><td>6:2</td><td>6:3</td><td>6:4</td></tr>

</table>

Столбец 1	Столбец 2	Столбец 3	Столбец 4
1:1	1:2	1:3	1:4
2:1	2:2	2:3	2:4
3:1	3:2	3:3	3:4
4:1	4:2	4:3	4:4
5:1	5:2	5:3	5:4
6:1	6:2	6:3	6:4

Цвет фона у ячеек

Назначить нужный цвет фона у ячеек и всей таблицы можно при помощи атрибута bgcolor или стиля background-color CSS.

<table cellpadding="5" cellspacing="8" bgcolor="silver">

<tr>

<td bgcolor="red"> Ячейка 1 </td>

<td bgcolor="green"> Ячейка 2 </td>

</tr>

<tr bgcolor="blue">

<td> Ячейка 3 </td>

<td bgcolor="yellow"> Ячейка 4 </td>

</tr>

</table>

В этом примере таблице назначен серый цвет (он перекрывается цветом ячеек там где они есть), а цвет, назначенный ячейке td, перекрывает цвет, назначенный строке (tr).

Вместо атрибута bgcolor можно с тем же результатом использовать стиль CSS background-color:

<table cellpadding="5" cellspacing="8" style="background-color: silver;" >

<tr>

<td style="background-color: red;"> Ячейка 1 </td>

<td style="background-color: green;"> Ячейка 2 </td>

</tr>

<tr style="background-color: blue;">

<td> Ячейка 3 </td>

<td style="background-color: yellow;"> Ячейка 4 </td>

</tr>

</table>

Этот пример правильно отрабатывается движком MediaWiki и ЖЖ, и выглядит так:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

В викидвижке предыдущий пример с bgcolor не показывает серого цвета для фона таблицы.