Стиль первой строки.
Псевдоэлемент first-line определяет стиль первой строки в текстовом блоке.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдоэлемент first-line.</title>
<style type="text/css">
body {background-color: #fffacd}
p {color: #005}
p:first-line {
font: 16px Arial;
color: #f00
}
</style>
</head>
<body>
<p>Если бы при приеме на работу… … …</p>
<p>Однажды молодой сисадмин … … …</p>
</body>
</html>
Честно признаться, я не знаю в каких ситуациях действительно целесообразно применять псевдоэлемент first-line, хотя не исключаю, что такие ситуации бывают. Обусловлено это в первую очередь тем, что в зависимости от расширения экрана, размера шрифта, интервала между словами и символам и т.д. первая строка в текстовом блоке будет разной длины, что не позволяет веб мастеру полностью контролировать стиль данного текстового блока.
Контент.
Псевдоэлементы after и before предназначены для "врезки" в страницу сайта контента который изначально неуказан в HTML документе. Вставляется содержание перед (:before) или после (:after) какого либо элемента с помощью свойства content, которое собственно и определяет содержимое для вставки.
Всё вместе пишется так:
p:after {content: "Конец, а кто слушал молодец!!"; }
Теперь после каждого параграфа будет добавляться надпись: "Конец, а кто слушал молодец!!"
Значением свойства content может быть:
· "текст" - собственно любой текст или символы.
· "\0410" - юникод.
· url(путь)- адрес какого либо объекта.
· open-quote - открывающая кавычка.
· close-quote - закрывающая кавычка.
· no-open-quote - отменяет открывающую кавычку.
· no-close-quote - отменяет закрывающую кавычку.
· inherit - наследует значение элемента родителя.
· none - ничего не добавляется.
· normal - для псевдоэлементов before и after тоже самое, что и none.
· counter - показывает значение счетчика, заданного свойством counter-reset.
· attr(атрибут тега) - показывает текст, который является значением атрибута того или иного тега указанного в скобках.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдоэлементы after и before</title>
<style type="text/css">
*:before {color: #00f; font-variant: small-caps;}
*:after {color: #f00; font-variant: small-caps;}
body:before {content: "начало документа";}
body:after {content: "конец документа";}
p:before {content: "анекдот:";}
p:after {content: ":-)"; font-size: x-large;}
ul {list-style-type: none;}
li:before {content: "№ "; color: #0f0;}
h4:before{content:url(graphics/marker.gif);}
q:before{content: open-quote; font-size: 30px;}
q:after {content: close-quote; font-size: 30px;}
img:after {content:attr(src);}
</style>
</head>
<body>
<hr>
<h4>Заголовок с сердечком.</h4>
<h4>Параграфы с добавлением слова "анекдот:" вначале и смайлика в конце:</h4>
<p>Если бы при приеме на работу...</p>
<p>Однажды молодой сисадмин...</p>
<h4>После рисунка добавляется значение его атрибута: "src" - путь к рисунку:</h4>
<img src="graphics/fon.jpg">
<h4>Цитата в кавычках:</h4>
<q>Лёд тронулся, господа присяжные заседатели!</q>
<h4>Список с нестандартными маркерами:</h4>
<ul>
<li> Первый
<li> Второй
<li> Третий
</ul>
<hr>
</body>
</html>
Чувствую перехитрил я с примером, поэтому несколько комментариев к нему:
Звездочка перед псевдоэлементом *:псевдоэлемент{свойство} говорит о том, что указанные правила стиля распространяются на все элементы. Так в нашем примере текст в начале везде синий, а в конце везде красный, если он конечно не указывается дополнительно, как например в случае с зелёными "маркерами" в списке из примера.
В качестве добавляемого контента может вступать какой либо объект, в примере мы добавили рисунок ко всем заголовкам, однако если браузер не сможет обработать тот или иной файл, то ничего не добавится.
Спецсимволы HTML (например, спецсимвол: ¶), будут отображаться простым текстом (¶ а не ¶) так что если необходимо добавить какую либо хитрую закорючку используйте юникод.
Псевдоэлементы after и before, как и свойство content не поддерживаются браузерами Internet Explorer 7 и ниже.
Дата добавления: 2016-02-02; просмотров: 515;