Якорем называется закладка с уникальным именем на определённом месте веб-страницы, предназначенная для перехода к ней по ссылке. Якоря удобно применять в документах большого объёма, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей уникальное имя при помощи атрибута id (пример 1). В имени допустимо писать русские, латинские буквы и символы, нельзя только пробел. В качестве значения href для перехода к этому якорю используется значение id с символом решётки (#) впереди.
Пример 1. Создание якоря
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Быстрый переход внутри документа</title>
</head>
<body>
<p id="top"></p>
<p>...</p>
<p><a href="#top">Наверх</a></p>
</body>
</html>Имя ссылки на якорь начинается с решётки (#), после чего идёт имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов id и href совпадали (символ решётки не в счёт).
При щелчке по такой ссылке произойдёт переход к элементу в окне браузера.
С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.
Ссылку также можно сделать на якорь на другой веб-странице и даже на другом сайте. Для этого в атрибуте href элемента <a> надо указать полный адрес документа и в конце добавить символ решётки и имя якоря
Пустые ссылки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#</title>
</head>
<body>
<p><a href="#">О нас</a>
<a href="#">Проекты</a>
<a href="#">Вакансии</a></p>
</body>
</html>Такого рода ссылки по своему виду ничем не отличаются от обычных ссылок — по ним можно щёлкать и они становятся при этом посещаемыми. Естественно, перехода на другую страницу при этом нет, но происходит переход к верхней части страницы, что особенно заметно при длинном тексте.
Знаете ли вы селекторы?
CSS3-селекторы – фундаментально полезная вещь.
Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.
Поэтому эти селекторы необходимо знать.
Основные виды селекторов
Основных видов селекторов всего несколько:
*– любые элементы.div– элементы с таким тегом.#id– элемент с даннымid..class– элементы с таким классом.[name="value"]– селекторы на атрибут (см. далее).:visited– «псевдоклассы», остальные разные условия на элемент (см. далее).
Селекторы можно комбинировать, записывая последовательно, без пробела:
.c1.c2– элементы одновременно с двумя классамиc1иc2a#id.c1.c2:visited– элементaс даннымid, классамиc1иc2, и псевдоклассомvisited
Отношения
В CSS3 предусмотрено четыре вида отношений между элементами.
Самые известные вы наверняка знаете:
div p– элементыp, являющиеся потомкамиdiv.div > p– только непосредственные потомки
Есть и два более редких:
div ~ p– правые соседи: всеpна том же уровне вложенности, которые идут послеdiv.div + p– первый правый сосед:pна том же уровне вложенности, который идёт сразу послеdiv(если есть).