Псевдоклассы по типу дочернего элемента

:nth­of­type() — выбирает элементы по аналогии с 

:nth­child(), при этом берет во внимание только тип элемента. 

:first­of­type — позволяет выбрать первый дочерний элемент. 

:last­of­type — выбирает последний тег конкретного типа. 

:nth­last­of­type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца. 

:only­of­type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

Пример использования псевдоклассов

HTML		CSS
<ul>  <li>​Первый элемент<​/li>  <li>​Второй элемент​</li>  <li>​Третий элемент​</li> </ul>	li:​first­child​{  ​font­size:​ ​24px;  ​ color:​ ​#F23401;  }

 

Для того, чтобы понять, как работает данный псевдокласс, рассмотрим простой пример. Задаём элементу списка <li> псевдокласс first­child, и у него прописываем определенный стиль. Как видно, маркированный список, состоит из трех элементов. Заданный стиль будет применен ТОЛЬКО к первому элементу данного списка. Это происходит потому, что первый элемент списка <li> будет именно первым дочерним у тега <ul>.

Комбинирование псевдоклассов

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

/* При наведении на не посещенную ссылку цвет текста будет зеленым */ a​:​link​:​hover { color​:​ ​#0F0;

}

 

/* При наведении на посещенную ссылку цвет текста будет красным*/ a​:​visited​:​hover {

color:​ ​#F00;​

}

 

Псевдоэлементы

Псевдоэлементы ­ практически то же самое, что и псевдоклассы, только они позволяют ввести несуществующие элементы в веб­документ, и придать им определенные стили. Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов. Cовременные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

С помощью свойства content, можно изменить внешний вид части элемента

 В CSS существует 4 псевдоэлемента:

:first­letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам. 

:first­line — выбирает первую строку текста элемента, применяется только к блочным элементам. 

:before — вставляет генерируемое содержимое перед элементом. 

:after — добавляет генерируемое содержимое после элемента.

Пример использования псевадоэлементов

HTML		CSS
<ul>  <li ​class​=​”new”​>​Первый элемент<​/li>  <li>​Второй элемент​</li>  <li>​Третий элемент​</li> </ul>	li:​after​{  ​content: ​“new”;  ​ color:​ ​#F00;  }

 

После элемента списка li с классом new появится текст new красного цвета.

Для чего нужны таблицы в HTML

Основное назначение таблиц в HTML ­ это представление табличных данных, таких как: просмотр информации о пользователях, просмотр заказанных товаров в интернет­магазине, просмотр отчётов о продажах и многое другое. Второе назначение таблиц в html таково, что при помощи их можно верстать веб­страницы. А верстать ­ это значит разбивать нашу страницу на элементы, т.е. формировать различные блоки нашего сайта, такие как: шапка, меню, контент, подвал и другие элементы. Табличный способ верстки в настоящее время считается неправильным и устаревшим, потому что таблицы используются не по назначению, но многие сайты либо уже сверстаны при помощи таблиц, либо продолжают верстаться этим способом. Поэтому разработчику сайтов важно уметь пользоваться как табличным способом верстки, так и версткой слоями. И оба способа верстки мы рассмотрим в данном курсе.

Структура таблицы в html

<table> <tr> <td>​Столбец 1​</td> <td>​Столбец 2​</td> <td>​Столбец 3<​/td> </tr> </table>

 

Любая таблица в html помещается в контейнер <table>, после чего в контейнер строки <tr> помещаются уже столбцы таблицы, которые помещаются в тег <td>. В данном примере таблица будет состоять из 3­х столбцов и одной строки, т.е. в таблице будет 3 ячейки. Для того, чтобы добавить еще одну строку в данную таблицу, нужно вложить в контейнер <table> еще один контейнер строки <tr>, и в него поместить то же количество столбцов <td>, т.е. 3 столбца.

 

<table> <tr> <td>​Столбец 1<​/td> <td>​Столбец 2​</td> <td>​Столбец 3​</td> </tr> <tr> <td>​Столбец 1​</td> <td>​Столбец 2​</td> <td>​Столбец 3​</td> </tr> </table>

 

Создание ячеек таблицы

Элемент <td> создает ячейки таблицы с данными, добавляя их в строку таблицы. Парные теги <td>…</td>, расположенные между тегами соответствующей строки, определяют количество ячеек в пределах одной строки. Количество пар ячеек таблицы должно быть равным количеству пар ячеек заголовка.

Элемент <th> создает заголовок — специальную ячейку, текст в которой выделяется полужирным шрифтом. Количество ячеек заголовка определяется количеством пар тегов <th>…</th>.

Теги группирования строк html таблицы

Для создания более сложных таблиц можно использовать теги: 

● <caption>...</caption> ­ обрамление заголовка таблицы (текст, размещенный между этими тегами, выравнивается по центру). В исходном коде тег <caption> ставится сразу после тега <table>; 

● <thead>...</thead> ­ обрамление шапки таблицы (в одной таблице допускается не более одного тега <thead>); 

● <tbody>...</tbody> ­ группирует строки таблицы в один табличный блок (таких блоков в таблице может быть несколько); 

● <tfoot>...</tfoot> ­ обрамление футера, т.е. нижней, завершающей части таблицы (в одной таблице допускается не более одного тега <tfoot>). В исходном коде тег <tfoot> ставится до тега <tbody>.