Эксперименты со стилями css

Рассмотрим пример работы свойств css, направленных на улучшение визуализации.

Выбор определенных строк и ячеек таблицы

Для задания стиля определенной строки можно использовать следующие конструкции:

  • tr:first-child — первая строка;
  • tr:last-child — последняя строка;
  • tr:nth-last-child() — предпоследняя строка;
  • tr:nth-child(even) — каждая четная строка;
  • tr:nth-child(odd) — каждая нечетная строка;
  • tr:nth-child(2n+3) td:nth-child(even) — каждая вторая ячейка в нечетной строке, начиная с 4-й;
  • tr:nth-child(3n+2) — положение строки задается формулой.

Визуальные эффекты css

Также использованы следующие визуальные эффекты:

  • border-radius:10px — создает закругление элементов, в данном примере закругление сделано как для всей таблицы, так и для каждой ячейки;
  • background: linear-gradient(to top, #fefcea, #f1da36) — линейный градиент;
    вместо «to top» можно указать угол, например, 135deg;
  • box-shadow:5px 5px 5px #d10f88 — тень, первый параметр — смещение по
    горизонтали, второй — по вертикали, третий — радиус размывки, четвертый — цвет;
  • background-color: rgb(255,0,0) — позволяет сделать прозрачный фон;
  • background-color: rgba(255,0,0,0.95) — в дополнение к предыдущему
    четвертый параметр задает прозрачность — если 0, то цвета нет вообще, изменяется от 0 до 1.

Пример с использованием предложенных выше свойств

<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Таблица со строками разного цвета</title>
<style>
   table, td{border-radius:10px}
   td{padding:5px}
   tr:first-child{background:#00aaaa}  /*Выделяем первую строку*/
   tr:nth-child(even){background:#aa00aa} /*Выделяем цветом каждую вторую строку строку*/
   tr:nth-child(2n+3) td:nth-child(even){background:#aa0000} /*Выделяем цветом каждую вторую ячейку в нечетной строке, начиная с 4-й*/
   tr:last-child{background:#00ccaa}
   #gr{width:200px;height:100px;
    background: #a0a0a0; /* Для старых браузров */
    background: linear-gradient(135deg, #fefcea, #f1da36);
    padding: 10px; margin:10px;
    border: 1px solid #333; border-radius:10px;
   h2{box-shadow:5px 5px 5px #d10f88}
</style>
</head>
<body >
<h2>Эксперименты со стилями css</h2>
Для задания стиля определенной строки можно использовать следующие конструкции:
<ul>
<li>tr:first-child - первая строка;
<li>tr:last-child - последняя строка;
<li>tr:nth-last-child() - предпоследняя строка;
<li>tr:nth-child(even) - каждая четная строка;
<li>tr:nth-child(odd) - каждая нечетная строка;
<li>tr:nth-child(2n+3) td:nth-child(even) - каждая вторая ячейка в нечетной строке, начиная с 4-й;
<li>tr:nth-child(3n+2) - положение строки задается формулой.
</ul>
Также использованы следующие <b>визуальные эффекты</b>:
<ul>
<li>border-radius:10px - создает закругление элементов, в данном примере закругление сделано как для всей таблицы, так и для каждой ячейки;
<li>    background: linear-gradient(to top, #fefcea, #f1da36) - линейный градиент;
вместо "to top" можно указать угол, например, 135deg;
<li> box-shadow:5px 5px 5px  #d10f88 - тень, первый параметр - смещение по 
горизонтали, второй - по вертикали, третий - радиус размывки, четвертый - цвет;
<li>background-color: rgb(255,0,0) - позволяет сделать прозрачный фон;
<li>background-color: rgba(255,0,0,0.95) - в дополнение к предыдущему 
четвертый параметр задает прозрачность - если 0, то цвета нет вообще, изменяется от 0 до 1.
</ul>
<table border="1">
<tr><td>ФИО</td><td>Отдел</td><td>Должность</td><td>Оклад</td></tr>
<tr><td>Иванов И.И.</td><td>Бухгалтерия</td><td>Главный бухгалтер</td><td>30000</td></tr>
<tr><td>Иванов П.И.</td><td>Бухгалтерия</td><td>Бухгалтер</td><td>20000</td></tr>
<tr><td>Иванова Д.И.</td><td>Бухгалтерия</td><td>Бухгалтер</td><td>25000</td></tr>
<tr><td>Сидоров С.С.</td><td>Отдел кадров</td><td>Начальник</td><td>30000</td></tr>
<tr><td>Сидорова Н.Н.</td><td>Отдел кадров</td><td>Ведущий специалист</td><td>20000</td></tr>
<tr><td colspan="3">Итого</td><td>????</td></tr>
</table>
<div id="gr">
Градиент
</div>
</body>

В результате таблица должна принять вид, показанный на рисунке ниже.

css_table

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru