Page 62 - Сила CSS3 Освой новейший стандарт
P. 62

62  •  Глава 2. Облачка с текстом

            Благодаря такому коду фрагмент HTML <p class=«caption»>Isn’t my cat cute?</p>
            на самой странице в браузере будет отображаться так:
            Figure: Isn’t my cat cute?

            Поскольку перед нами стоит задача сгенерировать хвостики к облачкам с текстом,
            в нашем случае отображаться должны только рамки сгенерированного содержимо-
            го, а не само содержимое. Чтобы добиться этого, давайте сгенерируем невидимое
            содержимое — неразрывный пробел.
            В HTML неразрывный пробел обозначается мнемоникой  , однако внутри
            свойства content невозможно применять мнемоники HTML. Вместо этого при-
            дется использовать шестнадцатеричную часть элемента кода Unicode для данного
            символа. Многим из вас может показаться, что эта китайская грамота доступна
            лишь самым продвинутым разработчикам, но не пугайтесь — в Сети можно найти
            массу удобных таблиц, содержащих подобные значения.
            Например, на сайте http://www.digitalmediaminute.com/reference/entity/ вы видите
            252 маленьких поля, в каждом из которых отображается одна допустимая мнемо-
                                            ника (X)HTML. В поле Filter entities by keyword
               Еще один полезный инструмент —   (Фильтровать записи по ключевому слову) вве-
               конвертер Unicode Code Converter,   дите «non-breaking space». 251 поле пропадет, и на
               адрес которого http://rishida.net/  странице останется только одно поле, содержа-
               tools/conversion. Здесь вы вводите   щее имя мнемоники в HTML,  . Подведите
               символ или его мнемонику HTML   указатель мыши к этому полю (рис. 2.8). Появят-
               в текстовое поле и можете пре-  ся еще два кода: числовой код мнемоники (в дан-
               образовать ее в разнообразные   ном случае  ) и ее код Unicode (u00A0). Вас
               форматы, в том числе получить   интересует шестнадцатеричная часть кода Uni-
               шестнадцатеричный элемент кода.
                                            code, т. е. то, что находится после «u». Скопируй-
                                            те текст 00A0 в буфер обмена.
            Почти все готово. Но, хотя мы и получили код Unicode, его невозможно напрямую
            добавить в свойство content, например, так:
            blockquote:after {
                content:"00A0";
            }


                                            Если бы мы так сделали, то браузер вполне логич-
               Элементы кода Unicode часто за-  но посчитал бы, что мы просим его отобразить
               писываются с префиксом «U+»   текст «00A0», а не неразрывный пробел. Для того
               вместо простого «u». В любом слу-  чтобы сообщить браузеру, что это не текст, а код
               чае, в свойстве content вы указы-  специального символа, необходимо добавить
               ваете только шестнадцатеричную
               часть, включающую четыре циф-  управляющий символ. Программистам должна
               ры и следующую за префиксом.  быть знакома эта концепция: вы добавляете
                                            перед кодом обратную косую черту, указывая,


                                                        www.trk.kg
   57   58   59   60   61   62   63   64   65   66   67