Эта статья будет открывать цикл публикаций о вёрстке в блоге.
Цель данных публикаций показать красоту и гибкость каскадных таблиц стилей (далее CSS) в верстке веб-страниц. Полагаю все уже давно знакомы с понятием CSS, зачем они и как с ними работать, я же покажу нетривиальное использование стилей, для «облегчения» страниц от javascript-ов. Я давно уже придерживаюсь javascript-less написания страниц, и вам советую. Нужно взять за правило, что JS встраивать в страницу нужно только тогда, когда в этом есть действительно необходимость, и по-другому никак не обойтись. Можно долго спорить об этой строчке, начинать holy-war, и всё такое, но это моё мнение и я постараюсь вам его аргументировать.
Начнём с самых простых вещей — подсветка элементов за указателем мыши.
Все, наверное, неоднократно наблюдали на сайтах этот занимательный эффект, ни для кого не секрет, что он добивается встраиванием JS в страницы. Наша задача будет добиться того же, только при помощи CSS-only. И так, приступим.
Предположим у нас есть до боли стандартная таблица:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>"CSS : Неизвестное об известном", часть 1, подсветка</title>
</head>
<body>
<table class="grid">
<thead>
<tr>
<th>#</th><th>Data</th><th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Расстрелять нельзя помиловать</td><td>135</td>
</tr>
<tr>
<td>2</td><td>Военный долг</td><td>889</td>
</tr>
<tr>
<td>3</td><td>А может быть</td><td>356</td>
</tr>
<tr>
<td>4</td><td>Здание сохранения здоровья</td><td>231</td>
</tr>
<tr>
<td>5</td><td>Самосвала</td><td>058</td>
</tr>
</tbody>
</table>
</body>
</html>
Я сразу задал таблице класс grid, сейчас мы его и поднастроим так, что бы табличка была красивой.
table.grid, td, th
{
font-family: sans-serif;
border-collapse: collapse;
border: 1px solid #A4BED4;
}
table.grid th
{
background-color: #A4BED4;
}
table.grid tr
{
background-color: #F0F8FF;
}
Маленький фокус:
table.grid tr:hover
{
background-color: #E3EFFF;
}
Теперь можно наслаждаться красивой подсветкой строк за курсором в таблице.
Если захочется «ховерить» ячейки — достаточно поменять строку на table.grid td.hover.
Это было очень просто, я предупреждал.
Настоятельно рекомендую почитать статью: w3.org: Selectors.
и на закуску w3schools: CSS :hover pseudo-class, w3schools: CSS Pseudo-classes.
Написано специально для RedItLab.com © Jin.
Комментариев нет:
Отправить комментарий