Как вы помните, элементы могут быть блочными и строчными. По умолчанию для каждого элемента его вид определен, так элементы div и p являются блочными, а span
и a — строчными. Но иногда это необходимо изменить, для этого используется свойство display.
Это свойство может принимать одно из четырех значений. Рассмотрим все четыре на примерах.

display:block

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

<html>
<head>
<title>css display</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="menu">
<a href="index.html">Главная</a>
<a href="about_us.html">О нас</a>
<a href="contact.html">Контакты</a>
</div>
</body>
</html>

Зададим на странице style.css стиль для наших ссылок, причем только для ссылок, которые находятся в div-е с id=»menu» (тогда другие ссылки на странице, если они будут, останутся без изменения или им можно будет задать другой стиль):

#menu{
width:200px;
background:yellow;
}
#menu a{
color:#2b3845;
text-decoration:none;
}
#menu a:hover{
color:#92A9BF;
background:blue;
}

Сейчас наши ссылки выглядят так:

Элемент a является строчным, поэтому наши ссылки расположились в одну строку и их размер зависит от текста.
Но мы хотели сделать вертикальное меню, для этого мы и добавим нашим ссылкам свойство display:block:

#menu{
width:200px;
background:yellow;
}
#menu a{
color:#2b3845;
text-decoration:none;
display:block;
}
#menu a:hover{
color:#92A9BF;
background:blue;
}

Теперь наше меню выглядит так:

Обратите внимание, так как теперь наши ссылки стали блочными элементами, то и размер у них стал одинаковый, равный ширине родительского div-а.

display:inline

Это значение делает элемент строчным. Предположим, мы хотим разместить на странице параграф, который должен начинаться с заголовка. На html-странице мы напишем следующий код:

<html>
<head>
<title>css display</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h5>Заголовок.</h5> <p>Текст параграфа</p>
</body>
</html>

Сейчас наша страница выглядит так:

Добавим на страницу style.css стили для наших элементов:

h5, p{
display:inline;
}

Теперь наша страница выглядит так, как мы и хотели:

display:list-item

Это значение делает любой элемент частью списка. Используется он редко, да и поддерживается браузерами не в полной мере. Но давайте все-таки посмотрим пример. Пусть у нас есть три заголовка одного уровня, и мы хотим оформить их списком. Для этого на html-странице мы напишем:

<html>
<head>
<title>css display</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<h6>Заголовок</h6>
<h6>Заголовок</h6>
<h6>Заголовок</h6>
</ul>
</body>
</html>

Сейчас наши заголовки выглядят, как положено:

На странице стилей напишем всего одно свойство:

h6{
display:list-item;
}

В результате получим список из заголовков:

display:none

Это значение убирает элемент со страницы. Очень часто используется для формирования раскрывающихся меню сайтов, например, с помощью языка javascript. Вы, наверно, встречали такие меню, где при щелчке по пункту меню раскрывается список подпунктов.
Вот в таких меню и используется значение display:none.

Надо сказать, что в CSS есть еще одно свойство на первый взгляд похожее на display:none. Это свойство, отвечающее за видимость блока — visibility. Оно может принимать два значения: visible (отображать) и hidden (сделать невидимым).
Различия здесь следующее: display:none скрывает элемент, как будто его и не было, а
visibility:hidden делает элемент прозрачным. Понятнее будет на примере.
Пусть у нас есть пять параграфов:

<html>
<head>
<title>css display</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Параграф 1</p>
<p id="p2">Параграф 2</p>
<p>Параграф 3</p>
<p id="p4">Параграф 4</p>
<p>Параграф 5</p>
</body>
</html>

Сейчас наша страница выглядит так:

Давайте зададим для второго параграфа свойство display:none, а для четвертого — свойство visibility:hidden:

#p2{
display:none;
}
#p4{
visibility:hidden;
}

Посмотрим, что получилось:

Как видите, второй параграф отсутствует, а четвертый — невидим, но место под него оставлено. В этом и заключается разница.

Свойство visibility так же, как и свойство display, чаще всего применяется совместно с javascript.

Отображение содержимого блоков в разных браузерах

Как вы думаете, что будет, если блочному элементу задать меньшие размеры, чем его содержимое? Ваш ответ будет зависеть от того, в каком браузере вы работаете. Предположим мы задали блоку размер 200х100 пикселов и поместили в него текст, явно превышающий эти размеры. Ниже приведен рисунок, где отображено поведение различных браузеров в такой ситуации:

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

Конечно,лучшего всего контролировать размеры объектов, но это не всегда возможно. Как же быть тогда? Воспользоваться свойством overflow. Это свойство может принимать четыре значения:

visible — если содержимое превышает размеры блока, оно все-равно останется на экране. Результат будет такой же, как на рисунке выше.

hidden — браузер отрежет содержимое, которое превышает размер блока.

scroll — блок будет снабжен полосами прокрутки, причем как горизонтальной, так и вертикальной.

auto — блок будет снабжен только теми полосами прокрутки, которые необходимы.

Надо сказать, что на практике свойство overflow используется редко, но знать о его существовании все-таки стоит.

Псевдокласс :first-child

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>first-child</title>
  <style type="text/css">
    B:first-child {
     color: red; /* Красный цвет текста */
    }
  </style>
 </head>
 <body>
   <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> 
   adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</p>
   <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo 
   consequat</b>.</p>
 </body>
</html>

Выделение цветом первого дочернего элемента абзаца

Псевдокласс :last-child

Псевдокласс :last-child задает стилевое оформление последнего элемента своего родителя.

элемент:last-child { … }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>last-child</title>
  <style>
   .block {
    background: #7da7d9; /* Цвет фона */
    color: #fff; /* Цвет текста */
   }
   .block :first-child {
    padding: 10px; /*  Поля вокруг текста */
   }
   .block :last-child { 
    background: #dda458 url(images/line.png) repeat-x; /* Параметры фона */
    height: 5px; /* Высота блока */
   }
  </style>
 </head>
 <body>
  <div class="block">
   <div>
    При истечении возможности понимания вышеизложенной информации вы
    имеете объективную возможность подать официальный запрос главному 
    субординатору локальной виртуальной вселенной.
   </div>
   <div></div>
  </div>
 </body>
</html>

Псевдокласс :nth-child

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

элемент:nth-child(odd | even | <число> | <выражение>) {…}

Значения

odd: Все нечетные номера элементов.
even: Все четные номера элементов.
число: Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение: Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child.
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd.
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

<html>
 <head>
  <meta charset="utf-8">
  <title>nth-child</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячейками */
   }
   tr:nth-child(2n) {
    background: #f0f0f0; /* Цвет фона */
   } 
   tr:nth-child(1) {
    background: #666; /* Цвет фона */
    color: #fff; /* Цвет текста */
   } 
  </style>
 </head>
 <body>
  <table border="1">
   <tr> 
    <td>&nbsp;</td><td>2134</td><td>2135</td>
    <td>2136</td><td>2137</td><td>2138</td>
   </tr>
   <tr> 
    <td>Нефть</td><td>16</td><td>34</td>
    <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
    <td>Золото</td><td>4</td><td>69</td>
    <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
    <td>Дерево</td><td>7</td><td>73</td>
    <td>79</td><td>34</td><td>86</td>
   </tr>
   <tr>
    <td>Камни</td><td>23</td><td>34</td>
    <td>88</td><td>53</td><td>103</td>
   </tr>
  </table> 
 </body>
</html>

Псевдоэлемент :before

Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Для :before характерны следующие особенности.

При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline,none, list-item. Все остальные значения будут трактоваться как block.
При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.

<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li:before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

Псевдоэлемент :after

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

Для :after характерны следующие особенности.

При добавлении :after к блочному элементу, значение свойства display может быть только: block, inline, none,list-item. Все остальные значения будут трактоваться как block.
При добавлении :after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.

Синтаксис

элемент:after  { content: "текст"  }

<html>
 <head>
  <meta charset="utf-8">
  <title>after</title>
  <style>
    p.new:after {
      content: "Новьё!"; /* Добавляемый текст */ 
      color: #333; /* Цвет текста */ 
      background-color: #fc0; /* Цвет фона */ 
      font-size: 90%; /* Размер шрифта */ 
      padding: 2px; /* Поля вокруг текста */ 
    }
  </style>
 </head>
 <body>
  <h2>Истории</h2>
  <p class="new">История о том, как необходимо было сделать могилу, 
     ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <p>История о том, как возле столовой появились загадочные розовые
     следы с шестью пальцами, и почему это случилось.</p>
 </body>
</html>

HTML урок 10. Виды и свойства блоков. Псевдоклассы и псевдоэлементы