Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° Bookidrom.ru! БСсплатныС ΠΊΠ½ΠΈΠ³ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅

Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ Β«HTML, XHTML ΠΈ CSS Π½Π° 100%Β». Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 36

Автор Π˜Π³ΠΎΡ€ΡŒ ΠšΠ²ΠΈΠ½Ρ‚

<body>

<ol class="alpha">

<li>ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ списка

<ul>

<li>Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ списка

</ul>

</ol>

</body>

</html>

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов списка ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ, ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹Ρ… ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°ΠΌΠΈ Ρ‚ΠΈΠΏΠ° lower-alpha ΠΈ disc соотвСтствСнно, Π±ΡƒΠ΄Π΅Ρ‚ осущСствлСно Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Однако каскад ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ стиля (Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π΅Π΅ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ классС) Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‚ΠΎΡ€ΠΎΠ΅. И Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ (рис. 9.2).

Рис. 9.2. Каскад

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π΄Π°Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ:

OL.alpha > LI { list-style: lower-alpha }

UL LI { list-style: disc }

Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ записи, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ваш список Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°Π΄ΡƒΠΌΠ°Π»ΠΈ. Для этого Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ list-style ΠΎ стилС списка ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π² элСмСнтах списка:

OL.alpha { list-style: lower-alpha }

UL { list-style: disc }

Благодаря наслСдованию значСния свойства list-style элСмСнтов OL ΠΈ UL Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒΡΡ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ свойствам элСмСнтов LI. ИмСнно этот способ рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для задания стиля списка.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ URL Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π»ΡŽΠ±Ρ‹ΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ значСниями, ΠΊΠ°ΠΊ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

UL { list-style: url(Β«http://my_site.com/my_image.gifΒ») disc }

Если Π² Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ смоТСт ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ графичСскому ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ, Ρ‚ΠΎ вмСсто Π½Π΅Π³ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ Ρ‚ΠΈΠΏΠ° disc.

Надо ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ссли для свойства list-style устанавливаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none, Ρ‚ΠΎ свойствам list-style-type ΠΈ list-style-image Ρ‚Π°ΠΊΠΆΠ΅ присваиваСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none:

UL { list-style: none }

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ элСмСнта списка просто Π½Π΅ отобраТаСтся.

ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹

Π’ Π΄Π°Π½Π½ΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ рассмотрим использованиС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ².

Для понимания ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΊΠ°ΠΊ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ элСмСнтов CSS Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ структурного Π±Π»ΠΎΠΊΠ° HTML-элСмСнта. ΠŸΡ€ΠΈ использовании Π² CSS ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ примСняСт Π΄Π²Π° способа отобраТСния, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π΄Π²Π° Π±Π»ΠΎΠΊΠ°: ΠΎΠ΄ΠΈΠ½ Π³Π»Π°Π²Π½Ρ‹ΠΉ структурный Π±Π»ΠΎΠΊ (для содСрТимого элСмСнта) ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ для ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для Ρ‚Π°ΠΊΠΈΡ… элСмСнтов оформлСния, ΠΊΠ°ΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, изобраТСния ΠΈΠ»ΠΈ числа). Π‘Π»ΠΎΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈΠ»ΠΈ Π²Π½Π΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ содСрТимого, добавляСмого с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства content, Π±Π»ΠΎΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π½Π΅ влияСт Π½Π° располоТСниС Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Π‘ΠΎΠ»Π΅Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π² своих возмоТностях способ разбиСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ свойства списков. И хотя ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π±ΠΎΠ»Π΅Π΅ слоТны для понимания, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ списков ΠΎΠ½ΠΈ позволят Π²Π°ΠΌ Ρ‚ΠΎΡ‡Π½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ ΠΈ содСрТимым. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ вмСстС со счСтчиками для создания Π½ΠΎΠ²Ρ‹Ρ… стилСй списков, для Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΎΠΊ Π½Π° полях ΠΈ мноТСства Π΄Ρ€ΡƒΠ³ΠΈΡ… дСйствий.

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ· листинга 9.8 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ для добавлСния Ρ‚ΠΎΡ‡Π΅ΠΊ послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка.

Листинг 9.8. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ списка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ²

<html>

<head>

<title>Π“Π»Π°Π²Π° 9. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ списка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ²</title>

<style type="text/css">

li:before {

display: marker;

content: counter(mycounter, upper-roman) ".";

counter-increment: mycounter;

}

</style>

</head>

<body>

<ol>

<li> Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка.

<li> Π­Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка.

<li> Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка.

</ol>

</body>

</html>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ выполнСния этого HTML-ΠΊΠΎΠ΄Π° ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ список:

I. Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка.

II. Π­Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка.

III. Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСлСкторов ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ² ΠΈ сСлСкторов Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² Π² зависимости ΠΎΡ‚ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ влоТСнности списков.

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ свойству display Π² псСвдоэлСмСнтС: before ΠΈΠ»ΠΈ: after Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ marker. Если содСрТимоС псСвдоэлСмСнта: before ΠΈΠ»ΠΈ: after, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ относится ΠΊ Ρ‚ΠΈΠΏΡƒ block ΠΈΠ»ΠΈ inline, являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ элСмСнта, Ρ‚ΠΎ содСрТимоС Ρ‚ΠΈΠΏΠ° marker формируСтся Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, находящийся Π²Π½Π΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π‘Π»ΠΎΠΊΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ строки. Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° создаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° свойство content псСвдоэлСмСнта Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ содСрТимоС.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ для Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ отступы.

Π’ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ CSS говорится, Ρ‡Ρ‚ΠΎ Π² псСвдоэлСмСнтС: before Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ тСкста, содСрТащСгося Π² Π±Π»ΠΎΠΊΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, осущСствляСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ тСкста ΠΏΠ΅Ρ€Π²ΠΎΠΉ строки содСрТимого Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Если Π³Π»Π°Π²Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π½Π΅ содСрТит тСкста, Ρ‚ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ…Π½ΠΈΠ΅ сСгмСнты Π²Π½Π΅ΡˆΠ½ΠΈΡ… ΠΊΡ€Π°Π΅Π²Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΈ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Π’ псСвдоэлСмСнтС: after Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ тСкста, содСрТащСгося Π² Π±Π»ΠΎΠΊΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, осущСствляСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ тСкста послСднСй строки содСрТимого Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Если Π³Π»Π°Π²Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π½Π΅ содСрТит тСкста, Ρ‚ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½ΠΈΠΆΠ½ΠΈΠ΅ сСгмСнты Π²Π½Π΅ΡˆΠ½ΠΈΡ… ΠΊΡ€Π°Π΅Π²Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΈ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Высоту Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ свойством line-height. Π‘Π»ΠΎΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, связанный с псСвдоэлСмСнтом: before ΠΈΠ»ΠΈ: after, принимаСтся Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ вычислСнии высоты ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ послСднСго Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, содСрТащСгося Π² Π³Π»Π°Π²Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠΎ послСднСй строкС содСрТимого элСмСнта, Π΄Π°ΠΆΠ΅ Ссли Π±Π»ΠΎΠΊΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠ°Ρ….

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° опрСдСляСтся свойством vertical-align.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство width. Если Π²Ρ‹ Π·Π°Π΄Π°Π΄ΠΈΡ‚Π΅ для свойства width Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ auto, Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° содСрТимого Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ содСрТимого.

Для ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство marker-offset. Π­Ρ‚ΠΎ свойство Π·Π°Π΄Π°Π΅Ρ‚ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠΎΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΈ связанным с Π½ΠΈΠΌ Π³Π»Π°Π²Π½Ρ‹ΠΌ Π±Π»ΠΎΠΊΠΎΠΌ. РасстояниС измСряСтся ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΡ… блиТайшими краями Π³Ρ€Π°Π½ΠΈΡ†.

Если для свойства display элСмСнта Π·Π°Π΄Π°Π½ΠΎ CSS-ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ display: list-item ΠΈ устанавливаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ marker, Ρ‚ΠΎ Π±Π»ΠΎΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ для псСвдоэлСмСнта: before, замСняСт ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ элСмСнта списка.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Ρ‚Π°ΠΊΡƒΡŽ страницу, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ содСрТимоС располагаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ 6 em (листинг 9.9).

Листинг 9.9. Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого Π² Π±Π»ΠΎΠΊΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°

<html>

<head>

<title>Π“Π»Π°Π²Π° .9 Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого Π² Π±Π»ΠΎΠΊΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°</title>

<style type="text/css">

li:before {

display: marker;

content: "(" counter(counter) ")";

counter-increment: counter;

width: 6em;

text-align: center;

}

</style>

</head>

<body>

<ol>

<li> Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт.

<li> Π­Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт.

<li> Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт.

</ol>

</body>

</html>

Если Π²Ρ‹ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, прСдставлСнный Π² листингС 9.9, Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

(1) Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт.

(2) Π­Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт.

(3) Π­Ρ‚ΠΎ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт.

Рассмотрим Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ (листинг 9.10). Π’ Π½Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтами списка ΠΈ послС Π½ΠΈΡ….

Листинг 9.10. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтами списка ΠΈ послС Π½ΠΈΡ…

<html>

<head>

<title>Π“Π»Π°Π²Π° 9. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтами списка ΠΈ послС Π½ΠΈΡ…</title>

<style type="text/css">

@media screen, print {

li:before {

display: marker;

content: url("smiley.gif");

li:after {

display: marker;

content: url("sad.gif");

}

}

</style>

</head>

<body>

<ul>

<li>ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка располагаСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ

<li>Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка располагаСтся Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ

</ul>

</body>

</html>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ· листинга 9.10 Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

:-) ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка располагаСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ :-(

:-) Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка располагаСтся Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ :-(

Рассмотрим Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π³Π΄Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π°Π±Π·Π°Ρ†Π΅Π²-Π·Π°ΠΌΠ΅Ρ‚ΠΎΠΊ (листинг 9.11).

Листинг 9.11. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ для создания Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π·Π°ΠΌΠ΅Ρ‚ΠΎΠΊ

<html>

<head>

<title>Π³Π»Π°Π²Π° 9. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ΡΡ для создания Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π·Π°ΠΌΠ΅Ρ‚ΠΎΠΊ</title>

<style type="text/css">

p { margin-left: 12 em; }

@media screen, print {

p.note:before {

display: marker;

content: url("note.gif")

"ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ " counter(note-counter) ":";

counter-increment: note-counter;

text-align: left;

width: 10em;

}

}

</style>

</head>

<body>

Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† Π² Π΄Π°Π½Π½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

<p class="note">Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

ΠšΠΎΠ½Π΅Ρ†.

</body>

</html>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ выполнСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ· листинга 9.11 ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π°Π±Π·Π°Ρ† Π² Π΄Π°Π½Π½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ 1: Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

ΠšΠΎΠ½Π΅Ρ†.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ блиТайшими краями Π³Ρ€Π°Π½ΠΈΡ† Π±Π»ΠΎΠΊΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΈ связанного с Π½ΠΈΠΌ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство marker-offset. Π’ качСствС значСния ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ слуТСбноС слово auto. Π’ΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ задаст расстояниС автоматичСски.