Вывод элементов на экран

Повторение

Шаблон CSS

В рабочей папке уже заготовлен шаблон таблицы стилей для будущих веб-страниц. Но он пока пуст. Откройте его в редакторе и в первой строке запишите закомментированное название раздела: /* --- ОСНОВНЫЕ СВОЙСТВА СТРАНИЦЫ --- */

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

Конечно, в разных макетах ширина страницы может быть разной. Однако, учитывая размеры экранов современных мониторов, её стоит ограничить. Либо жёстко 960px, либо гибко, задавая остальным блокам гибкие размеры. Гибкие — ориентированные на изменяемую ширину родителя: по умолчанию (100%) или доли от неё в процентах.

Во втором случае нужно добавить свойство min-width, при котором должно прекратиться сжатие блоков, и включится горизонтальная полоса прокрутки. А с ним и max-width при котором прекратится расширение блоков и тексты абзацев не будут вытягиваться в одну «бесконечно» длинную строку.

В шаблон стоит добавить все три свойства — всегда проще нажать клавишу Delete , удалить ненужное, чем дописывать недостающее.

Уже известно, что по умолчанию браузер назначает BODY отступы по 8 пикселов со всех сторон. Но чаще всего это как минимум не нужно для проектируемой страницы, а иногда даже и мешает её разметке. Поэтому в четвёртой строке добавьте свойство margin. В его значении можно записать 0, чтобы страница заняла всю рабочую область или назначить разные размеры разным отступам, например, для центрирования по горизонтали слева и справа auto.

Предпочтения к просмотру сайтов у пользователей бывают разные. Браузеры это учитывают и позволяют владельцам настраивать цвета станиц и шрифта самостоятельно. Кто-то, например, в своём браузере назначит фону тёмный цвет, а на вашей странице именно этот цвет имеют буквы. Этот кто-то, просматривая вашу страницу, не сумеет прочесть ни одного слова.

Поэтому обязательно нужно добавить свойство цвет фона страницы background-color и цвет символов color.

У современных компьютерных браузеров по умолчанию размер шрифта равен 16px. Если не назначать размер шрифта в BODY, это и будет величиной 1em для всех элементов на странице.

Современные качественные мониторы имеют высокую плотность разрешения экрана (количество пикселов на 1 квадратный дюйм) и их пикселы имеют меньший размер. Для обычного текста размер в 16px, в этом случае, стоит принимать как минимальное значение. А если для улучшения читабельности текста планируется увеличить размер шрифта, то делается это одним из двух способов.

  1. Можно воспользоваться абсолютными значениями размера шрифта, заданными в таблице с ключевыми словами ?. Значение medium у компьютерных браузеров равно 16px. У браузеров планшетов и смартфонов оно может быть другим, но приемлемым для размеров их экранов.

    Чтобы увеличить базовый размер шрифта можно назначить следующее по величине ключевое слово: large. Размер 1em станет 18px.

  2. Можно не прибегать к ключевым словам и воспользоваться числовым увеличением. Если в браузере по умолчанию размер шрифта 16px, то 1.2em или 120% будет равно 19.2px. Для всех элементов на вашей странице 1em и будет равен этой величине.
 --- ОСНОВНЫЕ СВОЙСТВА СТРАНИЦЫ --- 
bodywidth960pxфиксированная ширина страницыmin-width960pxминимальная ширина масштабируемой страницыmax-width960pxмаксимальная ширина масштабируемой страницыmargin0 autobackground-color#FFFfont-size1.2emcolor#000
Образец кода CSS для стандартного шаблона таблиц стилей.

Далее в папке tack_04/css создайте копию файла sample.css и переименуйте его в display.css. Откройте файл в редакторе, удалите свойство для фиксированных размеров страницы, а значение минимальной ширины установите в 640px. Измените у BODY поля верхнее и нижнее по 10px. В строку после правила добавьте закомментированное название раздела: /* --- ЭКСПЕРИМЕНТАЛЬНЫЙ БЛОК --- */

В папке tack_04 создайте копию файла sample.htm, переименуйте её в display.htm. В файле измените название документа на Строки и блоки. CSS. И в ссылке на таблицу стилей измените имя файла на display.

Добавьте в документ текст — пару абзацев. Первый не размечайте тегами никакого элемента. А второй поместите в элемент P. Включите «Инструменты веб-разработчика» и перейдите на вкладку «Инспектор DOM и стилей». Теперь всё готово для работы.

Структура DOM

Треугольный маркер слева от элементов head и body позволяет раскрыть их содержимое для детального изучения. Раскройте все свёрнутые элементы. Это полная объектная модель документа, отображаемого в браузере в виде веб-страницы.

Проведите мышью над развёрнутой структурой. Обратите внимание, когда мышь в структуре находится над открывающим или закрывающим тегом элемента они подсвечиваются оба. В модели DOM это называется узел элемента или элементный узел.

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

В этом документе есть и тексты — пара абзацев, которые элементами не являются. Браузер подсвечивает и их. Наведите мышку на тег P или /P, а затем на текст между тегами. Обратите внимание на то, что ширина узла элемента не совпадает с шириной текста в нём. Браузер оценивает и текст как отдельный узел, но другого типа. Они так и называются текстовые узлы.

Откройте контекстное меню текстового узла. Задача: «пройтись» по его пунктам и оценить доступные команды по управлению этим узлом.

Браузер показывает, что не может никаких действий выполнять с текстовыми узлами, кроме как их Удалить. Чтобы изменить внешний вид текстового узла, то свойство CSS нужно применить к его родительскому элементному узлу. Поэтому так важно каждый отдельный текстовый фрагмент в коде HTML, размечать тегами элементов для гибкого управления внешним видом страницы.

Включите в инструментах «Редактор таблиц стилей». И в экспериментальном блоке создайте правило для элементов P. В него добавьте свойство гарнитура шрифта: font-family, а в его значении укажите, что шрифт будет без засечек: sans-serif.

Изменения на странице произошли сразу после записи свойства. Теперь каждый элемент P изменит внешний вид своих текстовых узлов. Но он на странице только один и изменения произошли только в одном абзаце.

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

Если нужно, например, символы только одного абзаца на странице оформить ярким оранжевым цветом, то правило можно создать для его родительского узла. В данном примере этот узел — BODY. В экспериментальной области создайте правило с селектором body и свойством цвет шрифта со значением яркий оранжевый #FF6800.

За счёт наследования изменённое значение цвета шрифта применилось ко всем элементным узлам потомкам BODY, а в них все текстовые узлы изменили свой цвет. На самом деле изменять цвет всего текста на странице совершенно не планировалось.

Чем детальнее выполнена HTML-разметка контента, тем проще управлять внешним видом страницы.

Обновите страницу, не сохраняя изменения в файле.

Редактор и структура кода HTML

Откройте контекстное меню у открывающего тега HTML и выберите в нём пункт Править как HTML. Открылся блок редактора кода.

В редакторе отображается уже не структура DOM, а привычная структура кода HTML, построенная в файле HTML разработчиком. В ней у элементов имеются структурные отступы, а текст, не являясь элементом, записан от левого края строки. Треугольный маркер слева у открывающих тегов позволяет сворачивать элемент, для удобного просмотра больших объёмов кода.

Соответствует ли в редакторе структруа, из блочных элементов, то есть в файле display.htm, с моделью DOM? С соблюдением своего места в структуре «ошибся» только открывающий тег head. А остальные?

Роботландские правила записи кода HTML очень похожи на те, по которым браузер, читая код, строит модель DOM. Ориентируясь на построенную модель вместе с CSS, он отображает объекты на странице.

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

И наоборот.

Понимая правила записи кода HTML, можно глядя на страницу представлять код которым описаны её объекты.

Закройте редактор, щёлкнув за пределами его блока, и откройте его у узла BODY.

Среднюю часть первого абзаца без P разметьте, тегами MARK и /MARK. Закройте редактор. Изменения отобразились на странице. Снова вернитесь в режим редактора Править как HTML.

Теперь написанные теги вместе с их содержимым браузер превратил в строчный элемент MARK. Следуя правилам записи кода, расположил его внутри текстовых строк абзаца.

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

Закройте редактор. В структуре DOM первый абзац оказался разделён на три текстовых узла. Первый и третий так и остались в BODY. Второй — внутри узла MARK. Теперь появилась возможность управлять вторым текстовым узлом, применив правило к его родительскому узлу. Что и сделал браузер, изменив цвет фона.

Браузер имеет редактор кода HTML, но с сохранением изменений в файле могут возникать проблемы. Поэтому удачно подобранное решение можно скопировать прямо из редактора, или из контекстного меню элементного узла. В пункте Копировать можно выбрать Внутренний код… или Внешний код HTML. Но сохранить изменённый код может не получиться. Проведите эксперимент с копированием самостоятельно, чтобы разобраться в отличии результатов их выполнения.

В DOM cверните структуру BODY и разверните её, удерживая нажатой клавишу Alt . В структуре DOM отображение строчных элементов HTML выглядит несколько иначе. И текстовые, и элементные блочные, и элементные строчные всё это узлы. Если узел-родитель у них общий, то отображаются они на одном уровне.

Особенности элементов

Строчные

В чём различие между элементами блочными и строчными? Уже известно, что на экране для объектов блочных элементов выделяется блок 100% родительской ширины. По умолчанию содержимое элемента стремится занять его полностью. А его высота определяется размером контента. Ширину и высоту можно увеличивать или уменьшать, задавая отдельно. Вместе с ними можно включать поля, рамку, отступы, увеличивая место занимаемое блоком на экране. Про строчные пока известно намного меньше.

Добавьте в файл display.htm ещё один абзац с большим объёмом текста. Разметьте произвольное слово или словосочетание тегами несемантического элемента SPAN.

Почему несемантического? Потому что такие элементы по умолчанию имеют значения неотличимые от стандартных. Текст в блоке SPAN ничем не отличается от окружающего текста. Поля, границы и отступы отсутствуют, то есть равны нулю. Для эксперимента это самое удобное решение, чего не скажешь об оформлении реального сайта.

Теперь собственно сам эксперимент. Чтобы не создавать контекстные стили и стили, встроенные в документ, сразу перейдите в Редактор таблиц стилей. В экспериментальном разделе создайте правило для SPAN. Значение цветов, для удобства наблюдения, в свойствах будем записывать с прозрачностью в формате RGBA.

В правило добавьте свойство цвет фона background-color со значением RGBA(100, 150, 34, .7). Максимально ярким каждый из трёх цветов задаётся числом 255. Четвёртое число (величина альфа-канала) обозначает прозрачность (непрозрачность) полученного цвета. Если оно равно 0, то цвет прозрачный и невидимый, 1 — насыщенный и непрозрачный, .5 — полупрозрачный.

Фон фрагмента оказался закрашенным, как и у элемента mark, но цветом темнее. Чёрные буквы на тёмном фоне плохо заметны. Добавьте ещё одно свойство: цвет символов color в другой цветовой модели с шестнадцатеричным значением белого цвета #FFFFFF.

Если в шестнадцатеричном числе все три пары чисел имеют попарно одинаковые цифры: красный FF, зелёный FF, синий FF, то запись можно сократить тремя одноцифровыми числами: #FFF. Браузер сумеет прочесть число правильно.

Сразу сохраните изменения в файле, так как правило будет только усложняться.

Известно, что высота строчного элемента зависит от размера шрифта font-size с учётом межстрочного интервала line-height.

Однако проверьте, что произойдёт с элементом, если увеличить значения его ширины и высоты. Добавьте свойства ширина width со значением, например 500px и высота height — 50px.

На странице ничего не изменилось ни высота, ни ширина подсвеченного фрагмента. Выходит, что у строчного элемента они могут принимать значения только auto.

Браузер игнорирует ширину и высоту строчных объектов произвольно назначенную разработчиком.

Теперь дело за полями. Добавьте свойство padding со значением со всех четырёх сторон по 25px.

Поля действительно влияют на размер занимаемый объектом на экране, но только на его ширину. Соседние объекты сверху и снизу игнорируют их и страдают от этого. Посмотрите внимательно на экран.

Веб-страница это не страница глянцевого журнала и даже не презентация. Её устройство намного сложнее и интереснее. Каждая строчка, как будто стоит на ступеньках спускающейся лестницы. Верхние строки находятся сзади текущей, а нижние перед ней. Если вы этого не заметили, то четвёртый параметр цвета фона (непрозрачность) установите в 1.

Браузер читает код построчно, элементы преобразует в визуальные объекты и так же построчно выводит их на экран. Сначала один блок, под ним другой и т. д. Поэтому каждая новая строка абзаца своими широкими полями закрывает предыдущую, а следующая отображается поверх её полей.

Теперь проверим, что станет с границами. Добавьте свойство border со сплошной линией, solid шириной 30px и цветом RGBA(255, 0, 71, .7)

С границами тоже, что и с полями. Они увеличивают размер объекта на экране, но только соседние элементы слева и справа учитывают это. Верхние также прячутся за объектом, а нижние отображаются поверх него.

Осталось проверить отступы. Добавьте свойство margin со значением 20px.

Объект оттолкнулся от соседних слов в строке левым и правым отступами. Они, как поля с границами, добавились и сверху и снизу. Но это не заметно — у них нет цвета.

Давайте в этом убедимся. В файле display.htm в строке между двумя P от левого края добавьте без пробела теги строчного элемента SPAN. Добавленный элемент будет пустым, так как в нём нет контента, но он подчинится созданному правилу с селектором span. Сохраните файл, обновите страницу и переключитесь в инструментах на вкладку Инспектор DOM и стилей.

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

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

Поэкспериментируйте самостоятельно. Попробуйте изменять размеры полей, границ, отступов, включать и выключать их по очереди. Проверьте, как абзацы относятся к вертикальным размерам строчного объекта.

У объектов строчных элементов поля, границы и отступы учитываются только справа и слева. Верхние и нижние игнорируются.

Теперь о строчных объектах мы знаем не меньше чем о блочных. Эти знания помогут разобраться с особенностями вывода элементов на экран, которые нужно учитывать и можно использовать в своих проектах.

Плаванье и позиции

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

Имеется два строчных элемента. Один пустой между двумя абзацами, а другой с текстом в строке абзаца. В эксперименте будем выводить их на экран необычными свойствами.

Из необычных свойств у нас имеются: float, разные значения position, и ранее нерассмотренное свойство display.

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

Для чистоты эксперимента отключите свойства отступов, границ и полей. Затем переключитесь в Редактор таблицы стилей, сохраните эти настройки и вернитесь в Инспектор DOM и стилей. В конечном итоге ваш браузер должен показать примерно следующую картину.

float

Щелчком справа от закрывающей фигурной скобки правила для элементов SPAN добавьте свойство float со значением, например, right.

Ширина обоих объектов стала равна 500px, а высота 50px. Попробуйте включать по отдельности и вместе отключённые свойства. Вы уже догадались, что произошло?

Свойство "float", удаляя любой элемент из потока, превращает его в блочный.

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

position: relative

Обновите страницу.

Двойным щелчком по имени свойства float откройте его редактирование и замените на position. А затем, нажав клавишу Enter , значение замените на relative.

С исследуемыми объектами ничего не изменилось. И не должно было. Значение relative лишь вынимает объект из потока и, оставляя без изменений, помещает его над исходным местом.

Понаблюдайте за элементом SPAN между абзацами. Он удалён из потока. Но как был пуст и с нулевой выстой не занимал места на странице, так и его тень, оставленная в потоке тоже не занимает места.

Чтобы убедиться в этом, переключите блок CSS на вкладку «Вычислено». Выбирайте в структуре DOM по очереди сам исследуемый блок и абзацы над ним и под ним. Каждый раз наблюдайте за расположением на экране отдельных частей элементов: полей, границ, отступов.

Затем, через контекстное меню исследуемого элемента SPAN, откройте редактор HTML. Добавьте в элемент какое-либо слово, например «Проверка», включайте поля, отступы, границы, пробуйте смещать элементы вправо, влево, вверх, вниз…

Проверяйте, как расположены и взаимодействуют между собой все три элемента. А так же, наблюдайте и за другим элементом SPAN.

Значение "relative" вынимает элемент из потока не меняя его тип: строчный или блочный. Другим элементам не позволено занимать освободившееся место.

Свойство positionrelative часто применяется в комплексе с псевдоэлементами именно для строчных. Но о них позже.

position: absolute

Обновите страницу.

Замените значение свойства position на absolute.

Строчные объекты снова удалены из потока и снова стали блочными. Можете убедиться в этом. Проведите те же эксперименты, что и со значением relative  т. п.

Значение fixed свойства position похоже на absolute. Поэтому рассмотрите его самостоятельно.

свойство display

Свойство display столь интересно, что для него выделена отдельная статья. У него много различных значений ?. Мы рассмотрим только три.

  1. Третье inline знакомое английское слово, обозначает встроенный. Мы уже знаем о встроенных стилях в документ, а теперь будем рассматривать элемент, преобразованный в строчный.
  2. Второе inline-block это сложное слово, обозначает строчно-блочный элемент. Уже интрига: элемент и строчный и блочный одновременно.
  3. Первое block блочный элемент.

В файле display.htm замените первый элемент span между двух абзацев на элемент заголовок, например, четвёртого уровня H4.

Это против всех правил. Для применения заголовка этого уровня на странице уже должны присутствовать её название H1, возможно отдельно название статьи, даже не одной, H2, название её разделов H3 и только тогда он. Но документ экспериментальный и поэтому позволены допущения.

В H4 запишите: «В подбор с текстом». Как его подбирать и зачем, с этим будем разбираться.

Чтобы заголовок подчинялся правилу, созданному для SPAN, селектор замените на групповой для элементов двух типов: span, h4. В этом правиле отключите свойства ширины и высоты, включите отступы установите им значение 0.

В правило для абзацев P добавьте бледно-золотистый #EEEEAA цвет фона. Так как в шестнадцатеричном числе три пары цифр попарно повторяются, то его запись можно сократить до трёх цифр: #EEA. И обязательно все изменения сохраните в файле.

Заголовок получил цвет фона и символов и потерял назначенные по умолчанию отступы. Оба абзаца имеют фоновую заливку. Теперь можно приступать к наблюдению за строчным и блочным элементами одновременно. Начнём с первого значения свойства.

display: block

Добавьте в групповое правило свойство display со значением block. Сохраните изменения в файле с таблицей стилей, оцените изменения и включайте отключённые свойства по очереди и вместе.

С заголовком ничего нового не произошло. Он как был блочным элементом, так им и остался. А вот строчный элемент… Во-первых он вытянулся на всю ширину абзаца, растолкав слова слева и справа. У него изменились ширина и высота. Поля и границы теперь увеличили высоту его строки и не наезжают на соседние. Строчный элемент SPAN приобрёл свойства блочного элемента.

Вроде всё отлично. Значение block превращает любой элемент в блочный. Но всё не так просто. Шрифт без засечек и фон верхней и нижней части абзаца подтверждают, что он не разорвался и продолжается. То есть, внутри абзаца оказался блочный элемент.

Это не по правилам. Обычный абзац — элемент P является младшим из числа абзацев разных ролей и других блочных элементов для группировки контента. По стандарту в нём не может быть других блочных элементов. Только текст и строчные.

Давайте проведём эксперимент. Для этого обновите страницу. В контекстном меню открывающего тега второго абзаца включите редактор кода — Править как HTML и замените имена тегов SPAN на H4.

Вот теперь действительно попытка вставить в абзац настоящий блочный элемент привела к тому, что он разделился на три части. Рассмотрите структуру DOM.

Первая часть — полноценный элементный узел P. Браузер достроил ему закрывающий тег /P. А если навести на него мышь, на экране увидим подсвеченный нижний отступ.

Следом за ним элементный узел заголовка H4. В стилевом правиле мы указали, что отступов у него нет. А за ним уже не элементный, а обычный текстовый узел. Он, как и первый абзац не размечен и является ребёнком BODY. У него и шрифт как у первого, и нет отступов, и выделяет его браузер не как блок, а как текст.

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

Выходит, что значение block свойства display не преобразует любой элемент в блочный. Оно наделяет его свойствами блочного и главным из них — занимать 100% строки выделенной родителем. Обновите странницу.

display: inline-block

Это значение свойства наделяет строчные элементы свойствами блочных, исключая значение по умолчанию «занимать всю строку целиком». У блочных элементов оно отбирает это же значение по умолчанию.

Поэкспериментируйте с отключёнными свойствами. Строчный элемент ведёт себя также как и элемент IMG с изображением. Чтобы проверить поведение блочного элемента, откройте редактор кода второго абзаца и замените теги элемента P на любые строчные, например на EM и /EM. И блочный элемент ведёт себя так же как IMG.

display: inline

Обновите страницу.

Последнее рассматриваемое значение — строчный. Строчный элемент будет вести себя как обычно, и всё внимание нужно уделить именно блочному заголовку.

Эксперименты можно проводить любые, но рассмотрите одно из полезных применений этого свойства. В структуре DOM захватите мышкой заголовок H4 и переместите его в промежуток между открывающим тегом P и первой строкой абзаца.

Блочный элемент с этим свойством ведёт себя как строчный, встраиваясь в первую строку. Подобное оформление используется в некоторых текстах произведений, в частности технических или научно-популярных. Бывает текст написан таким образом, что первая фраза подразделов в точности совпадает с их заголовком.

Чтобы не заставлять читателя повторять фразу дважды отдельный заголовок не пишут, а роль заголовка выполняет выделенная первая фраза первого абзаца. То есть заголовок, не оторван отступами от абзаца, а записан в подбор с текстом.

На экране выделенная фраза будет подчёркивать роль заголовка, а голосовой браузер прочитает текст в элементе H4, выделяя её интонацией заголовка.

Макет страницы

Структура кода HTML

Подгтовьте шаблон sample.htm для превращения в макет страницы.

  1. Скопируйте его из «рабочей папки» в task_04.
  2. Смените имя файла на menu.htm.
  3. Название документа замените на Размещение блоков в меню
  4. И измените имя файла CSS на mеnu.css
  5. Затем из «рабочей папки» скопируйте в папку task_04\css файл sample.css

У документа HTML будет общий заголовок — название страницы с подзаголовком и 4 части со своими заголовками и образцами меню. Части можно было бы пометить в Разделы, но семантически это не совсем верно. Ведь никаних смысловых разделов на странице не будет. Но чтобы на экране обособить части одну от другой добавим между ними Линейки. То есть структура DOM будет примерно такой.

└► Документ ├► Шапка │ ├► Заголовок с названием страницы │ └► Подзаголовок обычный абзац с основным текстом └► Раздел ├► Заголовок части 1 ├► Навигационная панель │ └► Маркированный список │ ├► пункт 1 │ │ └► ссылка │ ├► пункт 2 │ │ └► ссылка │ ├► пункт 3 │ │ └► ссылка │ └► пункт 4 │ └► ссылка ├► Линейка (горизонтальная линия) ├► Заголовок части 2 ├► Навигационная панель │ └► Маркированный список │ ├► пункт 1 │ │ └► ссылка ... ...

Первая, вторая и третья части должны выглеть одинаково. В четвёртой списка не будет. Будут обычные ссылки.

... ├► Линейка (горизонтальная линия) ├► Заголовок части 4 └► Навигационная панель ├► ссылка 1 ├► ссылка 2 ├► ссылка 3 └► ссылка 4

Название страницы: «Размещение блоков на примере меню».
И подзаголовок – «Ссылка на описание практической работы».

Навигационная панель в первой части.

  • Атрибут класса со значением: normal.
  • Название: Вертикальное меню.

Навигационная панель во второй части.

  • Атрибут класса со значением: float.
  • Название: Горизонтальное меню с плаваньем.

Навигационная панель в третьей части.

  • Атрибут класса со значением: position.
  • Название: Горизонтальное меню с позиционированием.

Навигационная панель в четвёртой части.

  • Атрибут класса со значением: anchors.
  • Название: Меню из обычных ссылок.

Текст в элементах достаточно короткий, поэтому каждый из них можно смело записывать в одну строку.

Все ссылки имеют только атрибут href=#. К этому знаку номера можно без пробела дописать имя идентификатора другого элемента в любом месте страницы. Шёлчок по этой ссылке прокрутит страницу так, что элемент с идентификатором окажется в самом верху.

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

Текст ссылок задаётся аналогией: первый пункт, второй пункт, третий… и так до пятого. В ссылках следующих меню номера повторяются.

Добавим в документ ещё одну ссылку обычную в тексте. В Подзаголовке слово описание поместим в элемент Aс атрибутом href=.... А в его значении запишем ссылку http://rulik.unionlik.ru/room/m_displ.htm#a_05 на странцу с этим текстом, которая ведёт прямо к пятому разделу «Практика». И ещё один атрибут target=_blank, чтобы страница по ссылке открывалась в новой вкладке

Теперь Подзаголовок в коде вместе со структурными отступами, именами тегов и текстом со ссылкой занимает больше 80 символов. В этом случае закрывающий тег нужно поместить строго под открывающим с тем же количеством струткрных отсупов, а ткст со ссылкой — в отдельной строке между ними. Найти бижайший к 80-му знакоместу пробел и текст после него начать с новой строки.

Проверьте првильность порстроения структруы. Включите в браузере «Инструменты…» выберите в структуре DOM BODY и справа от него щёлкните по треугольнику с нажатой клавишей Alt. Не обращая внимание на текст со строчными элементами, проверьте, структура в вашем коде HTML соответствует той, котрую построил браузер?

Теперь откройте контексное меню страницы и выберите «Исходный код страницы». Оцените изящество созданного вами кода. Всё построено из отдельных блоков. Чётко прослеживается структура. Несмотря на то, что буквы неразличимы, легко ориентироваться в отдельных частях кода и по необходимости найти в нём нужное место.

Некрасивый самолёт не полетит, часто повторял ©Андрей Николаевич Туполев советский учёный и авиаконструктор. Он требовал от своих инженеров-конструкторов творческого отношения к работе, а не только профессионального. Самый знаменитый самолёт авиационного ОКБ с именем учёного: Конструкторское бюро «Туполев» лётчики называют «Белый лебедь».

Документ HTML создан и меняться уже не будет. Все остальные действия будут выполняться в файле CSS и в «Инструментах разработчика».

Ссылки и CSS

Для наблюдения за тем, как горизонтальные меню будут размещены на странице, нужно чётко видеть её ширину, выделив, например цветом. Но если даже её ширину ограничить, фон займёт всю рабочую область, что не совсем правильно. Чтобы избежать этого нужно задать отдельный фон «рабочему столу» -- рабочей области браузера. Назначим ему светло-серый цвет.

Для этого откройте сайт «Инструмент для подбора цветов и генерации цветовых схем» ColorScheme.Ru. В меню «Далее…» перейдите на страницу «Названия цветов». На ней все цвета перечислены по алфавиту.

Можно разглядывать цветные блоки с названиями, но чтобы ускорить процесс поиска нажмите аккорд Ctrl + F (от английского слова Find -- найти) или F3 . В открывшемся поле ввода введите светло-серый, перейдите к нему и скопируйте его шестнадцатеричный код.

Рабочий стол — это вся рабочая область окна браузера HTML. Создайте для него правило самым первым в разделе основных свойств таблицы стилей, а в нём укажите только цвет фона.

В правиле для страницы всё необходимое уже написано и даже лишнее про ширину. Макет страницы планируется резиновый, поэтому лишним является свойство фиксированной ширины. Удалите его.

Если изменения таблицы стилей вы выполняли в файле menu.css, то в браузере обновите страницу, включите «Инструменты…» и переключитесь в «Редактор таблиц стилей CSS» Ctrl + F7 . Если в «Редакторе…» — не забудьте сохранить изменения.

Рассмотрим страницу подробнее. На ней два типа ссылок: в меню и в тексте. Выполните щелчок по любой ссылке в любом пункте меню. Изменив цвет её символов, браузер подсказывает читателю, что он уже посетил указанное в ней место. Все, кроме ссылки в тексте, изменили свой цвет, потому что они ведут в то же самое место.

Ссылка в разных состояниях ведёт себя, как будто ей добавили атрибут класса с другим значением свойства. На самом деле в CSS имеются псевдоклассы ?.

Псевдокласс в CSS — это ключевое слово, добавляемое через двоеточие к селектору, которое определяет особое состояние и положение объекта на странице.

Попробуем этим воспользоваться. Предположим, что для страницы выбрана цветовая схема Изумруд. Цвета для ссылок предпочтительнее подбирать в группе зелёных цветов. В обычном состоянии поярче и посветлее, например, бирюзовый, а для просмотренных темнее, ближе к яркости шрифта, но другим цветом — тёмно-бирюзовый.

Теперь сформируем правила. Для ссылки в обычном состоянии селектор будет таким: alink. А для просмотренных ссылок — avisited. В редакторе стилей добавьте эти правила в раздел «Основные свойства страницы» сразу после правила body.

Эти правила приходится применять почти во всех макетах, назначая цвета с учётом цветовой гаммы, чтобы не давать браузеру выбирать их самостоятельно. Откройте в рабочей папке шаблон sample.css и добавьте в него оба правила. А цвета запишите стандартные. Для ссылок в обычном состоянии: синий #0000FF; или #00F;, для просмотренных — #FF00FF; или #F0F;. Сохраните и закройте шаблон.

Вы уже знакомы псевдоклассами «буквица» — первая буква, первая строка абзаца. В CSS3 уже сегодня их больше 40 ? и с развитием версий CSS готовятся спецификации на новые. Псевдоклассы могут быть добавлены к любым селекторам и даже цепочкой по нескольку штук. Они уточняют элементы на основе их отношений в DOM, состояния самого элемента, его содержимого, позиции курсора и др.

Псевдоклассы — мощный инструмент стилизации любого элемента или групп элементов на странице.

Со ссылками в тексте разобрались, но в меню ссылки могут выглядеть по разному. Например, в виде нарисованных кнопок. Надписи на кнопках не обязаны иметь подчёркивание и синий цвет, тем более менять его после переходов.

Для цвета ссылок с названиями пунктов меню нужно выбрать единый неизменяемый цвет. Воспользуемся чёрным цветом символов текста. Ссылки в меню отличаются от ссылок в тексте расположением. Для них создайте отдельное правило с контекстным селектором: для всех элементов ссылка во всех панелях навигации. И добавьте псевдокласс «в обычном состоянии». В этом правиле будет первое свойство цвет символов чёрный. И второе — текст без подчёркивания ?.

Но эти же значения свойств будут и у просмотренных ссылок в панели навигации. Чтобы не создавать отдельное правило используйте групповой селектор.

Сыылки в меню выглядят как обычный текст, но остаются ссылками. Теперь есть правило в котором можно придавать им любой внешний вид.

Последние правила тоже можно добавить к шаблону, так как любая страница сайта всегда имеет меню для перехода к другим. С опытом вы заметите какие правила регулярно добавляются к каждой странице в разных макетах и сможете расширять возможности своих шаблонов самостоятельно.

Списки и CSS

Переключите «Инструменты…» в режим «Инспектор DOM и стили CSS». Определите состояние элемента UL, пункты которого должны стать пунктами меню.

Для пунктов меню стандартные маркеры не нужны и их стоит убрать ?. Текст пунктов должен быть выровнен по левой вертикальной границе вместе с заголовками и линейками. Встраивая в страницу меню, управлять придётся свойствами элемента NAV. Но сверху и снизу за его пределы выпирают отступы UL. Это может оказаться серьёзной помехой.

Но не забывайте, какая проблема возникла при создании правила для ссылок, и какое решение для неё оказалось удачным. Ведь списков на странице может быть несколько. Не только в меню, но и в тексте статьи, в дополнительной панели, в подвале и т. .п. Две подсказки в виде правил:

  • Первое правило для сообразительных: Отключение маркеров не должно коснуться списков в статье.
  • Второе правило с подсказкой: Отключение маркеров должно коснуться только списков в меню.

Оформление страницы

И буквы, и линии вплотную прилипают к левой и правой границам страницы. Это можно считать ошибкой. Нужно их отодвинуть, причём и слева, и справа на одинаковое расстояние.

  1. Чтобы текст и линейки не прилипали к левой и правой границам достаточно чтобы они оказались отодвинуты, например, на 10 пикселов от этих границ. Самый простой способ отодвинуть содержимое от крёв страницы — установить ей поля.

    Вместо этого ещё можно использовать оступы или поля у элементов внутри BODY. В некоторых случаях структурного построения документа это предпочтительнее. Но тогда запланированная визуальная ширина контента в 960px будет уменьшаться. Об этом нужно помнить и учитывать.

  2. Подтвердите выбранную цветовую схему страницы. Назначьте шрифту заголовков и рамкам линеек цвет Изумруд ?. А заодно, на этот цвет смените и фон рабочего стола — элемент HTML.

Осталось в пустой строке снизу записать название экспериментального раздела. И подготовка обоих файлов оба будет закончена.

Эксперименты

Вертикальное меню

Селекторы правил для оформления каждого пункта меню должны быть контекстными, чтобы наборы правил относились к конкретным блокам меню. В начале каждого правила для элементов первого блока должна быть указана навигационная панель с именем класса navnormal ....

Каждый пункт — блочный элемент LI. Чтобы выделить их назначим им цветной фон. С большим разнообразием многих цветов страница выглядит аляповато, как петушиный хвост. Выберем цвет из уже имеющихся. Подходящим будет цвет просмотренной ссылки: #116062, ведь пункт меню это тоже ссылка.

После применения цвета все пункты меню слились в единый блок. Было бы неплохо, чтобы каждый из них отступил один от другого. В правило добавьте отступ снизу 2 пиксела. Каждый пункт стал отдельной строчкой. Ограничьте их ширину примерно до 180px. И теперь они выглядят как настоящие пункты меню.

Но есть ещё три свойства, которые придадут им большей выразительности. Самое важное — цвет символов. Для правила можно использовать селектор цвета ссылок, но с уточнением, что он для ссылок в навигационной панели с отдельным классом: navnormal a.... Цвет можно выбрать белый не чистый, а дымчатый #F5F5F5.

Добавилось правило, но вернёмся к предыдущему. Ещё одна неприятность — высота пункта. Текст оказался жёстко зажат между верхней и нижней границей. Установите высоту пункта, например 40px.

Текст теперь прижат к верхнему краю. Высота строки оказалась много меньше высоты блока. Текст в блоке нужно отодвинуть вниз, то есть увеличить его межстрочный интервал line-height ?. Добавьте это свойство в правило для LI и пробуйте увеличивать значение в пикселах 10, 20, 30

Остановитесь на числе сорок. Те, кто догадались, что это за число — научились вертикально центрировать однострочный текст в высоких блоках. Последнее, что стоит добавить, это поля по 5 пикселов, чтобы текст не прижимался к границам. Меню почти готово.


Чтобы «оживить» меню, после правила для пунктов создайте ещё одно с таким же селектором. К селектору добавьте псевдокласс ... lihover ? . Он позволяет свойствам задавать значения, которые проявятся только при наведении мыши на объект. В правило запишите лишь одно свойство цвет фона, а его значение измените на цвет ссылок в обычном состоянии: #30D5C8.

Теперь, после правила для ссылок, создайте ещё одно для ссылок с наведённой мышью ... ahover. В нём запишите смену цвета символов на цвет просмотренной ссылки: #116062. Обратите внимание, что блок пункта меню и ссылка в нём меняют цвет не одновременно.

Ссылка так и осталась размером меньше пункта. По ширине она у́же его, а по высоте ниже. Это потому, что элемент HTML пункта блочный, а ссылки — строчный.

Ссылку на экране можно превратить в блочный объект. Тогда он займёт всю ширину, выделенную родителем или назначенную в правиле. А высоту тоже можно назначить в 100% родительской или необходимую. Теперь порассуждаем. Итак, ссылка:

  • при выводе на экран block,
  • ширина блока — 180px,
  • высота — 40px;
  • поля — 5px,
  • межстрочный интервал — 40px,
  • цвет фона — #116062.

У нас получилось готовое правило. А теперь главный вопрос: вы где-нибудь замечали подобный набор свойств? Это правило для элемента LI. Его почти полностью можно использовать для элементов A, лишь в селекторе изменить один элемент на другой. С двумя оговорками.

  1. В правило для A нужно добавить свойство display и удалить свойство с отступами.
  2. Блок элемента LI получит высоту контента, поэтому в его правиле достаточно оставить только одно свойство — нижние отступы между пунктами в 2px.

Так как цвет фона перекочевал в правило для A, то и в правиле для смены фона при наведении мыши тоже придётся изменить селектор. А теперь посмотрите внимательно на код. После перестройки селекторов, у двух правил они оказались одинаковыми. Объедините свойства обоих правил в одно.

Одно из требований в ТЗ РУ: Пункт меню текущей страницы не должен быть ссылкой. В обоих кодах документа роль работающего пункта меню и ссылки выполняет элемент A. Вывод: текущий пункт меню не должен быть этим элементом. Представим, что мы находимся на первой странице. Замените в первом пункте меню кода HTML A на несемантический элемент span.

Правила для span ещё нет, но он должен и ширину, и высоту, и поля иметь такие же, как и у ссылки. Проще у правила для ссылки-пункта изменить селектор на групповой. Текущий пункт станет похожим на все остальные. Но отдельное правило для него придётся создать, чтобы назначить цвет фона прозрачным transparent и добавить рамку.

Свойство border не подойдёт, так как оно влияет на общий размер объекта. Его нужно заменить тенью вокруг блока box-shadow ?. Смещение тени по горизонтали и вертикали установите равным 0, размытие и растяжение — по 2px, а цвет — как у просмотренной ссылки. Но очень важно: чтобы не изменить визуальный размер пункта, тень нужно направить внутрь элемента.

Вертикальное меню визуально сформировано. Оцените свои труды, переключив «Инструменты…» в режим «Инспектор DOM и стили CSS». Проведите мышкой над всеми элементами кода «Вертикальное меню» и оцените состояние каждого.

Элемент NAV блочный и без правила, ограничивающего его ширину растянут на всю страницу. Место контенту только под блоком меню. В макете ему можно назначить подходящую ширину и удалить из потока, освобождая место справа.

В самом начале группы правил, первым создайте правило для него. В него запишите только одно свойство: ширина и пока задайте ей значение 180px. Теперь ширина пунктов ограничена шириной предка и родителя. Из правила для пунктов, свойство ограничивающее их ширину можно удалить.

Код с набором правил сохраните в отдельном файле. Он готов для использования в любом проекте, но с небольшими изменениями. Например, в HTML нужно встроить код в структуру документа и изменить текст, а в CSS настроить положение размеры, цвет и т. п. блока и его элементов.

Таким образом, это начало создания вашей личной библиотеки с фрагментами кода, копии которых можно использовать в разных проектах.

Меню с плаваньем

Первым делом представим, что это меню на второй странице. Ссылку во втором пункте нужно заменить элементом SPAN. Больше никаких изменений в коде HTML не будет…

Все правила для элементов второго блока меню должны учитывать его класс и начинаться с navfloat .... Таким образом, они будут влиять на внешний вид объектов только этого меню.

Для начала создадим правило для NAV. Оно понадобится для встраивания меню в конкретную страницу. Зададим ему цвет фона киноварь #FF4D00 для контроля высоты блока с плавающими объектами. В дальнейшем это свойство удалим.

Создадим правило для элементов LI. В нём им всем зададим плаванье влево. Каждый элемент сжался до ширины контента, и на свободное место справа от него пристроился следующий. И линейка тоже пристроилась к ним на свободное место справа.

Но самое главное, теперь все пункты удалены из потока и в элементе UL стало пусто. Пустые элементы браузер выводит на экран с нулевой высотой. Поэтому и NAV потерял высоту, а с ней и яркую заливку.

Ранее уже применялось для очистки потока под плавающими элементами свойство clear. Оно назначалось следующему элементу после плавающих. «Следующим», как правило, добавлялся элемент BR. Но можно обойтись и без него.

Между предыдущими правилами добавьте ещё одно для UL. В нём запишите единственное свойство overflowauto ?. Блок с этим свойством изолирует своё содержимое от общего контента, что и позволяет плавающим элементам передавать высоту родителю.

Это, возможно, не самый лучший способ, но самый простой. И он не единственный. Лучший из них — применение псевдоэлемента ? в селекторе. Материал об этом можете поискать в интернете и изучить самостоятельно ?.

Вернёмся к правилу элементов списка. У нас 4 пункта, поэтому добавим свойство ширины 25% каждому и в них центрирование текста по горизонтали. Не забывайте, после добавления или редактирования свойства, в «Инструментах…» переключаться на вкладку «Инспектор DOM…» и оценивать состояние изменений на странице.

Следующим правилом по предыдущему опыту нужно создать правило с групповым селектором для элементов A и SPAN. С этим придётся потрудиться.

  • Для начала фон покрасьте в цвет обычной не просмотренной ссылки.
  • Затем установите оба элемента блочными. Ширина автоматически стает равной 100% родительской. Высоту установите в 50 пикселов.
  • Применённым в предыдущей работе способом, поместите текст в центре блока по вертикали.

Ну и последним приготовлением создайте правило для ссылок в обычном и просмотренном состоянии. Назначьте шрифту начертание полужирным и цвет, как у просмотренной ссылки.


Теперь, чтобы чётко видеть границы каждого пункта между ними нужно добавить промежутки. Это можно сделать двумя способами.

  1. Ссылкам A добавить отступы слева-справа, и они отодвинутся от краёв пунктов LI.
  2. Пунктам LI добавить поля слева-справа и их ширина, выделенная для ссылок A, уменьшится.

Первый способ проще, поэтому рассмотрим второй. Добавим пунктам поля по 25 пикселов. Поля, так же как и границы увеличивают полную ширину объекта. Общая ширина всех пунктов стала (25% + 25px × 2) × 4 намного больше 100% и они не уместились в одной строке.

Свойство, которое может решить эту проблему, называется box-sizing —  размер блока ? . Оно определяем каким образом браузер должен вычислять на экране полные размеры (ширину и высоту) блочного объекта. У этого свойства два значения.

  1. Первое по умолчанию content-box. Собственно ширина контента элемента, как и высота, остаётся неизменной, а полная ширина увеличивается за счёт полей и границ: border-left + padding-left + width + padding-right + border-right.
  2. Второе альтернативное border-box. В этом состоянии полная ширина объекта равна width, а собственно ширина контента вычисляется вычитанием границ и полей: width − border-left − padding-left − padding-right − border-right.
Слева: box-sizingcontent-box. Справа: box-sizingborder-box

И в первом, и во втором случае width100px, но ширина для контента совершенно разная. Чтобы ширина пунктов не изменялась при добавлении полей нужно добавить в правило свойство с правым значением на изображении выше.

Минус этого способа в том, что собственно ширина контента в пункте меньше и ещё уменьшится при сжатии в резиновом дизайне. В длинном словосочетании последнее слово ссылки может спрыгнуть на новую строку и выскочит далеко вниз за пределы пункта.

Добавьте к любой ссылке в меню длинное слово и проведите эксперимент самостоятельно. Последнего слова на экране не видно. Тому есть две причины.

  1. В этой работе используется увеличенный межстрочный интервал для вертикального выравнивания A и расстояние между строками его текста назначено в 50px. Слово спрыгнувшее во вторую строку оказалось далеко внизу за пределами блока меню.
  2. Элемент UL имеет свойство переполнение overflow, то есть не отображать то, что выходит за пределы блока. При его значении auto браузер справа от меню включил полосу прокрутки, и она поможет увидеть выпавшее слово. Измените значение этого свойства на hidden. Теперь полоса прокрутки включаться не будет, но и выпавшее слово увидеть не удаться.

Старайтесь не создавать длинные названия пунктам меню. А если придётся, то решением может быть уменьшение промежутка между пунктами.

Использовать их можно не два: левый-правый у соседних элементов, а только, например, правый. Внесите изменения в правило для пунктов установите поле справа в 10px.

У последнего пункта правое поле лишнее, и его надо отключить. Создадим ещё одно правило. Для селектора воспользуемся псевдоклассом последний элемент: lilast-child ?. Последний пункт без по́ля стал шире, но если поля́ установить по 3 – 5 пикселов, то это будет не столь заметно.

В самом конце осталось добавить правило для ссылок при наведении мыши. В нём можно отключить фоновый цвет, сделав его прозрачным. И ещё одно правило с отличием текущего пункта от остальных: фон прозрачный, толщина линий шрифта обычная и цвет шрифта тёмно-серый #888. А в правиле для списка отменить ярко-красный цвет.

Совет. Если вы часто используете свойство float, то в правиле о сохранении высоты UL селектор элемента нужно заменить только именем класса. Например, clearfix без контекстной привязки. Само правило перенести в блок правил /* --- Основные свойства страницы --- */ и возможно добавить в шаблон. Списку и другим элементам с плавающими дочерними назначать класс clearfix.

Меню с позиционированием

Это меню будет принадлежать третьей странице. Замените ссылку в третьем пункте пеню на элемент SPAN.

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

Как всегда начните с создания правила для NAV. И пока задайте ему фон с ярким красным цветом киноварь #FF4D00. В дальнейшем это свойство удалим.

Все пункты LI списка нужно выстроить в одну горизонтальную линию свойством position. Это можно сделать со значением absolute. Для этого сначала нужно переместить их координатную плоскость в родительский элемент список UL. Создайте для него правило с относительным relative позиционированием.

Три правила готовы. В «Инструментах…» перейдите на вкладку «Инспектор DOM…» и оцените изменения на странице.

Абсолютно позиционированные пункты полностью удалены из потока, и остальные элементы даже не знают об их существовании. Список без них оказался пустым, высота его схлопнулась до нуля. Навигационный блок без списка тоже потерял высоту, а с ней и цвет. Линейка прижалась к нему. А пункты сложились стопкой слева под списком.

Пока не будем обращать внимание на высоту элементов. Растянем пункты и заполним ими всю строку. Как и в прошлой работе зададим каждому ширину по 25% и назначим горизонтальное центрирование тексту. Визуально почти ничего не изменилось, но пункты приобрели одинаковую ширину. Увидеть это можно выделяя их в структуре DOM.

Разместим каждый из них последовательно относительно левой границы. Для этого понадобится правило для каждого LI. Без дополнительных атрибутов применим селектор псевдокласса, учитывающий порядок элементов linth-child(#) ?.

Создайте четыре правила для каждого пункта, а в скобках вместо решётки вписываете их порядковые номера: 1, 2 и т. д. В каждом правиле запишите свойство смещения объекта от левой границы: у первого 0, у второго 25px, у третьего и четвёртого посчитайте самостоятельно.

Теперь создайте правило для ссылок и без ссылки у текущего пункта.

  • Назначьте их блочными элементами.
  • Установите высоту 30 пикселов.
  • Выровняйте текст пункта по вертикали.
  • Задайте рамку сплошной линией, толщиной 1 пиксел и цветом просмотренной ссылки.
  • К углам добавьте радиус скругления ?. К верхним левому и правому по 15px, а остальным 0.

Пункты превратились в корешки вкладок, а линейка так и осталась над ними. Для решения этой проблемы в правило для списка нужно добавить высоту такую же, как и у пунктов.

Добавьте ещё правило для ссылок в обычном состоянии и просмотренных. Назначьте шрифту полужирное начертание и цвет просмотренной ссылки. Всё почти готово и можно отключить цвет у блока меню.


Не хватает только двух правил.

  • Для ссылки с наведённой на неё мышкой установите относительное позиционирование, высоту 40 пикселов и смещение от нижней границы 10 пикселов.
  • У блока текущей страницы отключите нижнюю границу, установите шрифту обычное начертание и тёмно-серый цвет.

Оцените результат.

Подробнее о [NAV]

Согласно спецификации HTML 5.2 его рекомендуется использовать только для двух уровней навигации: по сайту и по странице. На сложных страницах, с одной или несколькими обширными статьями, допустимо прямо в статью добавлять дополнительную навигацию по её разделам.

Если набор ссылок представляется в виде списка, то и в навигационной панели рекомендуется использовать маркированный список. Но это не является обязательным требованием. Для оформления меню можно использовать любые элементы. Добавлять заголовок с описание его роли, а ссылки оформлять в виде обычного текста и т. п.

Вот пример кода титульной страницы сайта, оформленной в виде географической карты с Розой ветров. Этот пример взят из опубликованного непосредственно на сайте W3C образца: EXAMPLE 11 ?.

····NAV
······H2Навигация/H2
······P
Вы путешествуете по моей домашней странице. К Северу простирается A href=/blogблог/A, откуда слышны звуки боя. С Востока наступают большие горы, среди которых вы найдёте много рефератов и творческих
A href=/schoolработ/A. А далеко за горами, можно видеть маленькую фигурку, которая, как представляется мне, отчаянно строчит очередную
A href=/school/thesisкурсовую работу/A.
······/P
······P
На Западе несколько дорог. Одно удовольствие — искать дорогу с указателем A href=https://games.example.com/«Игры»/A
······/P
······P
К югу лежит тёмная и промозглая DELстрана/DEL INSстраница/INS A href=/about«Контакты»/A. Паутина затянула её заброшенный вход. И только крысы через щель изредка проникают туда.
······/P
····/NAV

Выходит, что ограничением в оформлении меню сайта и меню страницы, могут быть только ваша творческая фантазия и её программное воплощение в кодах HTML и CSS. Как и всего сайта в целом.

Меню из обычных ссылок

Последнее из рассмотренных меню будет для четвёртой страницы. Замените в четвёртом пункте A на SPAN. Как и в предыдущих меню, правила для всех элементов блока должны учитывать класс родительского и начинаться с navanchors ....

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

Первое правило создайте для навигационной панели. Оно, как и в предыдущих экспериментах, понадобится для встраивания меню в дизайн страницы. Во втором правиле будут описаны ссылки на соседние и текущую страницы.

Установим привычную ширину в 25%, а высоту — 40px. Выровняем текст посередине вертикали и горизонтали, и зададим цвет как у обычной ссылки. Проверьте отображение ссылок на странице, а в «Инструментах…» наличие у них правила с назначенными свойствами.

Из всех свойств, описанных в правиле, выполнилось только изменение цвета фона. Все остальные, заданные строчным элементам, браузер проигнорировал. Добавьте в это же правило первым свойством displayblock.

Все описанные в правиле свойства применились к ссылкам. Они на экране отобразились, как пункты списка — из обычных ссылок легко формируется вертикальное меню. Но хотелось, чтобы они сложились не в стопку, а сразу в одну строку без дополнительных свойств.

Загляните в справочник на страницу с описанием свойства display ?. У него есть множество различных значений, но нас будет интересовать inline-block. Измените значение в правиле.

Обратите внимание на три интересных особенности преобразования объектов.

  1. Они продолжают иметь свойства блока: ширина высота и оба центрирования. Значит элементы блочные.
  2. В тоже время они выстроены в строку без дополнительных свойств, как обычные строчные элементы.
  3. Но как приходится разными способами добиваться промежутков между блоками в горизонтальных меню. А сейчас эти промежутки имеются изначально и своим размером выдавливают четвёртую ссылку из строки. Наверное, вы догадались, что это за промежутки?

Если нет, то даю подсказку. Эти промежутки изначально были между ссылками записанными в строку и теперь при значении inline-block. То есть свойство display меняет не тип элемента в DOM, а только тип объекта, выведенного на экран. Несмотря на то, что ссылки на экране выглядят как блоки, по сути они остаются строчными элементами. Теперь понятно, откуда белые промежутки?

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

На самом деле промежутки это и есть пробелы. А чтобы избавиться от них нужно убрать пробелы между ссылками в коде. Для этого придумано несколько изощрённых способов, но с увеличением количества разновидностей браузеров не все они универсальны. Остановимся только на двух, которые работают всегда и везде.

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

····NAV
A href=...Пункт первый/A<A
··href=...>Пункт второй/A
···NAV

A href=...Пункт третий</A
>A href=...Пункт четвёртый/A

Между первым и вторым, третьим и четвёртым пунктами пробелов нет. Можно использовать любой из этих способов. Но они несколько нарушают структуру кода, хотя с требованиями ТЗ РУ: строки не длиннее 80 символов, первый пример предпочтительнее.

Есть ещё один способ, при котором структура кода остаётся идеально правильной. Лишние пробелы комментируются.

····NAV
A href=...Пункт первый/A<!--
·-->A href=...Пункт второй/A<!--
·-->A href=...Пункт третий/A<!--
·-->Ahref=...Пункт четвёртый/A
···NAV

Всё что записано в комментариях: от открывающей угловой скобки, восклицательного знака и двух чёрточек до двух чёрточек и закрывающей угловой скобки, браузер игнорирует и на экран не выводит. Таким образом, пробела между ссылками не будет.

Выберите любой из способов и внесите исправления в код HTML. В результате все ссылки выстроятся в одну линию как строчные элементы, но вести себя будут как блочные. Теперь можно использовать способы оформления меню, рассмотренные выше или какие-либо другие, но уже без промежуточных пунктов списка.

Подобным способом формирования меню упростился код документа HTML и набор правил CSS для него. Но, в свою очередь, это создало проблемы для голосовых браузеров — ведь пробелов между словами нет. Поэтому чтение меню будет непривычным на слух.

И напоследок. Чтобы курсор мыши над текущими пунктами меню выглядел как указатель, а не как текстовый, познакомьтесь со свойством cursor ?.

Выводы

Разобраться с документацией по применению свойств легко, если вы читаете не по слогам. А вот создавать правила CSS для их применения, особенно составлять сложные комбинированные селекторы — работа не простая. Для этого нужно:

  • легко ориентироваться в структуре собственного документа HTML;
  • желательно знать особенности всех селекторов, применяемых на сегодняшний день в браузерах;
  • ориентироваться в большом количестве псевдоклассов и псевдоэлементов.

Иногда бывает, что уже весь код написан и страница выглядит как задумано, но требуется внести небольшую правку. Приходится добавлять, изменять или удалять элементы, идентификаторы, классы в HTML. Редактировать, создавать или удалять правила в CSS. Одно изменение цепляется за другое, и их вереница может вырасти в отдельную сложную работу. Те, кто выполнял новогоднюю контрольную, уже сталкивались с этим.

Однако, с хорошо структурированным кодом и оптимально подобранными селекторами, изменения будут не столь катастрофичны. При этом: Правил CSS понадобится меньше… меньше будет размер файла… браузер будет работать быстрее… читатели будут довольны… заходить на сайт чаще… и приглашать друзей больше…