Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Май, 2017

Создание буквицы

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

Рис. 1. Вид буквицы в тексте

Буквица в виде картинки

Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определенный настрой содержанию. Если хочется именно так сделать на сайте, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).

Пример 1. Создание буквицы с помощью рисунка

Буквица

олго ли, коротко ли, скоро сказка сказывается, да не скоро дело делается, — приходит Иван-царевич к избушке; стоит в чистом поле избушка, на куриных лапках повертывается.

Расстояние от текста до изображения управляется параметрами hspace — отступы вокруг рисунка по горизонтали и vspace — отступы по вертикали. Выравнивание рисунка по левому краю и одновременно его обтекание текстом создается параметром align тега со значением left.

Достоинства рисунков в качестве буквицы следующие:

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

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

Буквица в тексте

Можно создать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению с базовым шрифтом. Для того чтобы текст огибал первую букву, ее необходимо поместить в контейнер и для него задать свойство float со значением left, как показано в примере 2.

Пример 2. Использование стилей для создания буквицы

Буквица .letter {  font-size: 220%;  float: left;  color: blue;  padding-right: 3px;  line-height: 32px; }

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

Результат данного примера показан на рис. 2.

Рис. 2. Вид буквицы, созданной с помощью стилей

Размер шрифта буквицы управляется с помощью параметра font-size, а цвет символа через color. Чтобы добавить небольшое пространство между буквицей и текстом используется атрибут padding-right. Также можно слегка сдвигать букву вверх или вниз за счет добавленного свойства line-height. Значение подбирается самостоятельно, исходя из гарнитуры шрифта, размера текста и собственны х предпочтений.

На самом деле создание буквицы можно автоматизировать, если вспомнить о псевдоэлементе first-letter. Он через двоеточие добавляется к требуемому селектору и определяет стиль первого символа текста. Таким образом, запись p:first-line будет задавать стиль первой буквы каждого абзаца текста (тега

). Так что в простейшем случае CSS перепишется, как показано в примере 3.

Пример 3. Использование псевдоэлемента first-letter

P:first-letter {  font-size: 220%;  float: left;  color: blue;  padding-right: 3px; }

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

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

P { } P + P {

}

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

Замечание

Соседние селекторы не поддерживаются браузером Internet Explorer.

Для создания буквицы требуется добавить псевдоэлемент first-letter к селектору P и определить вид первого символа. Но поскольку это действие будет распространяться на все параграфы текста, то с помощью соседних селекторов требуется придать буквице вид обычного текста (пример 3).

Пример 4. Использование дочерних селекторов

Буквица p:first-letter {  font-size: 30pt;  float: left;  background-color: #fc0;  padding: 3px;  margin-right: 4px; } p + p:first-letter {  color: black;  font-size: 12pt;  background-color: #fff;  padding: 0;  margin: 0; }

Ловля льва методом случайных чисел

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

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

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

Результат данного примера показан ниже. В браузере Internet Explorer буквица будет добавлена к каждому абзацу без исключений.

Рис. 3. Буквица для первого абзаца текста

Команда p + p:first-letter определяет стиль первой буквы всех абзацев кроме первого и предназначена для того, чтобы преобразовать буквицу в рядовой текст. Впрочем, ничего не мешает изменить цвет символов и получить тем самым новое оформление текстового материала.

Используйте стилевой параметр margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL, в зависимости от типа списка. Также можно воспользоваться универсальным атрибутом margin.

Пример

Отступы в списке UL {  margin: 0px; }

  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Результат данного примера показан на рис. 1. Заметьте, что при использовании свойства margin исчезают также отступы слева и маркеры уже не видны.

Рис. 1. Список без вертикальных и горизонтальных отступов

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется атрибут background-position со значением no-repeat. В то же время все эти параметры можно заменить одним универсальным background, который задает путь к графическому файлу, положение картинки и способ ее повторения, как показано в примере.

Пример

Положение фонового рисунка BODY { background:  url(‘tomatos.jpg’)  right bottom  no-repeat; margin-right: 200px; }

Консервы из помидор

Плоды отбирают с хорошей ровной окраской, плотные и однородные по размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г поваренной соли и 6г лимонной кислоты). Банки прикрывают крышками и ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8, трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.

Примерный расход сырья и продуктов на литровую банку: помидоров красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.

Результат данного примера показан ниже (рис. 1).

Рис. 1. Фоновая картинка в правом нижнем углу окна

В данном примере изображение позиционируется в нужном месте с помощью аргументов right bottom параметра background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через параметр margin-right. Само изображение, которое использовалось в текущем примере, хранится в формате JPEG и продемонстрировано на рис. 2.

Рис. 2. Изображения для создания фона на веб-странице