Строчные элементы
Строчные элементы включаются в текстовую строку, не прерывая ее течение. Самый распространенный строчный элемент в HTML - это, конечно же, а.
К строчным также относятся элементы акцентированного текста strong и em. Перед строчными элементами и после них разрывы не образуются, поскольку они являются непосредственной частью другого (родительского) элемента и не изменяют его структуру.
Несмотря на подобные характеристики, строчные и блочные элементы в HTML и CSS имеют несколько разные свойства. В частности, в HTML блочные элементы запрещается вкладывать в строчные. В CSS подобного ограничения нет, и порядок вложения элементов может быть самым произвольным, независимо от их типа. Чтобы понять, как такое возможно, рассмотрим свойство display.
У этого свойства огромное количество возможных значений, но на данный момент нас интересуют только три из них: blосk, inline и list-item. Остальные значения будут детально описаны в последующих главах. Например, значения grid и inline-grid рассмотрены в главе, посвященной верстке документа по сетке, а все значения, в названиях которых встречается слово "tаblе".
Изучим поведение элементов, свойство display которых представлено значениями bосk и inline. Рассмотрим следующий код.
<body>
<р>В абзац включен <еm>строчный элемент</еm>.</р>
</body>
В этом НТМL-коде имеются один строчный (em) и два блочных (body и р) элемента. Согласно спецификации HTML элемент em разрешается вкладывать в элемент р, но не наоборот. Иерархическая структура элементов в HTML не предполагает вложение блочных элементов в строчные.
В CSS ограничения на вложение элементов, характерных для HTML, не предусмотрены, что позволяет произвольным образом изменять тип каждого из них. Для изменения типа двух из трех элементов (при неизменной разметке документа) применяется следующий код CSS.
р {display: inline;}
em {display: block;}
Выполнение этого кода приводит к вложению блочного элемента в строчный, что никак не противоречит правилам CSS. Если же попытаться изменить способ вложения элементов с помощью HTML, то можно получить ошибку выполнения кода.
<еm><р>Абзац некорректно вложен в строчный элемент.</р></еm>
Независимо от изменений, вносимых в элементы с помощью CSS, в HTML данный способ вложения элементов недопустим.
В то время как для улучшения представления НТМL-документа способ вложения элементов изменяется достаточно часто, в документах XML подобные изменения нужно вносить крайне осторожно. Зачастую ХМL-документы вообще не содержат сведений о типах включенных в них элементов, поэтому их нужно задавать отдельно. В качестве примера рассмотрим следующий фрагмент ХМL-кода.
<book>
<maintitle>Cascading Style Sheets: The Definitive Guide</maintitle>
<subtitle>Third Edition</subtitle>
<author>Eric А. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>NovemЬer 2006</pubdate>
<isbn type="print">978-0-596-52733-4</isbn>
</book>
<book>
<maintitle>CSS Pocket Reference</maintitle>
<subtitle>Third Edition</subtitle>
<author>Eric А. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>October 2007</pubdate>
<isbn type="print">978-0-596-51505-8</isbn>
</book>
Поскольку по умолчанию для свойства display устанавливается значение inline, при выполнении этого ХМL-кода в браузере все его элементы выводятся сплошной текстовой строкой, как показано на рис.
Для улучшения внешнего вида документа нужно задать значения свойства display отдельно для каждого из его элементов.
book, maintitle , subtitle, author, isbn {display : blосk;}
publisher, pubdate {display: inline;}
В первой строке приведенного выше кода перечислены ХМL-элементы блочного типа, а во второй - ХМL-элементы, сохранившие строчный тип. В данном случае блочные ХМL-элементы сопоставимы с элементами di v в HTML, а строчные ХМL-элементы - с элементами span.
Основополагающая возможность изменения типа элемента в CSS применяется для решения самых разных задач . В частности, дополнив приведенный выше код CSS несколькими простыми стилями, можно существенно повысить уровень визуального восприятия документа.
Прежде чем приступить к изучению методик написания кода CSS , необходимо понять, каким образом он подключается к НТМL-документу. В конце концов, для изменения внешнего вида НТМL-документа с помощью CSS необходимо добиться однозначного взаимодействия инструментов обеих технологий. Далее вы узнаете о том, как обеспечить выполнение кода CSS в НТМL-документах.
Понравился сайт? Поделись с друзьями
