Хостинг от Макхост

Как красиво выделить текст на странице

Автор: Евгений Несмелов
как красиво выделить текст, красиво оформить текст онлайн

Добрый день, сегодня я покажу примеры как оформить текст на странице с помощью стилей css, как оформить цитату в тексте или в диалоге и какие вообще есть способы красивого выделения текста онлайн на своем сайте с помощью теней и рамок. Покажу несколько уже готовых примеров кода, которые нужно будет вставить в файл со своими стилями и все будет работать.

к оглавлению ↑

Как  красиво оформить текст

Сразу хочется сказать, что я не буду пользоваться разными плагинами, не вижу в этом смысла, но про ихнее существование скажу. Дополнительный плагин это всегда лишняя нагрузка на сайт, зачем вам это нужно. Благодаря стилям css вы не только легко сможете оформить текст, но и придать маленькую часть уникальности в ваш шаблон, что есть очень хорошо.

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

Как красиво оформить текст

Итак, что нужно для этого дела. В статье будут указаны коды, каждый отдельно. Вам нужно открыть файл со стилями (style.css) и вставить все туда. Можно поменять все, что пожелаете, на ваш вкус и цвет…цвет, картинку, оформление, шрифт, отступы и так далее. Прежде, чем делать какие то изменения в шаблоне, сделайте на всякий случай копию баз данных ( на всякий случай ).

  1. Делаем копию базы данных или файла стилей.
  2. Находим изображения для оформления текста.
  3. Добавляем код для цитат.
  4. Добавляем код для диалогов.
  5. При желании ставим плагин.

Сразу хочется затронуть небольшой момент. У некоторых людей возникает проблема при вставки CSS в файл на движке, например на WordPress. Как решить эту проблему я напишу в конце статьи, надеюсь вам это поможет. Кажется , что все очень просто...открыл файл, скопировал часть кода и все заработало. Но бывают случаи, когда не все понимают куда нужно заходить и что копировать.

к оглавлению ↑

Оформление текста онлайн

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

В каждом примере написан код, который нужно будет вставить в таблицу стилей (style.css), файл у всех называется по разному. Самое главное, на что нужно будет обратить внимание, на первую строчку. Название можно будет изменить на свое. Кроме этого, в коде прописан url, по которому находится само изображение. Его тоже нужно изменить на свой адрес. Больше ничего трогать не нужно.

к оглавлению ↑

Как оформить цитату

Кроме стандартного оформление цитат при написании текста, можно добавить несколько своих вариантов. В моем примере используется выделенный текст, отдельное изображение, задний фон и рамка. Вместо моего изображения можно установить любое другое. При написании текста, переходим в текстовый режим и выделяем нужный нам участок текста блоком #gal.

Вот, что из этого получилось. Как было написано ранее, вы можете поменять под себя картинку, изменить шрифт, размер шрифта, фон, толщину рамки и другое.

В начале предложения пишем <div id="gal"> и в конце предложения закрываем блок вот таким образом </div>.

к оглавлению ↑

Как оформить диалог

Во втором варианте используется все тоже самое, только другой фон и другая картинка. Прежде чем пользоваться изображением, его нужно загрузить на ваш хостинг. Сделать это можно с помощью любого FTP клиента или через админку движка обычной загрузкой файла. Чтоб пользоваться данными DIV-ами в дальнейшем, нужно просто запомнить ихнее название, в моем случае это ( gal, kar и kres).

border — Ставим значения для границы рамки. В идеале нужно указывать именно так, как показано на примере. С начала толщина границы, потом ее стиль, в моем случае solid. Можно указать вообще без рамки (none), dashed — рамка состоит из пунктиров. Цвет границы — скачайте программку ColorMania и задавайте любой цвет для границ.
border-radius — можно округлить в пикселях углы рамки. Тут все понятно.
background — работаем с фоном. Задаем цвет фона, картинку и местоположение.
padding — про них я уже давал описание выше, задаем отступы внутри блока.
margin — задаем отступы контейнера от других контейнеров.
text-align — Выравниваем текст. По центру (center), по левому краю (left), по правому краю (right) или по ширине (justify).
font-family — можно задать шрифт данному блоку и его размер.

Еще один пример для оформления диалогов или своих отдельных частей текста. В начале предложения пишем <div id="kres"> и в конце предложения закрываем блок вот таким образом </div>.

Готовый пример оформления абзаца или диалога в тексте.

к оглавлению ↑

Как оформить рамку

Кроме таких вариантов, красиво оформить текст можно с помощью рамки. Сами линии можно сделать какими угодно, тонкими или толстыми, справа или слева. Я сделаю два варианта. В первом случае будет одна линия и находится она будет слева. Во втором случае будет две линии, находиться они будут сверху и снизу.

В таком примере получилась одна линия слева.
Картинку я не задавал, можно применять для цитат или просто выделения текста.

Второй вариант, линии будут сверху и снизу.

Цвет линий можно задать любой, толщину так же можно задать любую. Так же можно указать любой шрифт для выделения и его размер. Если дойти до крайностей, можно задать и цвет шрифту, но это наверное будет уже лишним.

к оглавлению ↑

Проблема с оформлением текста

У некоторых встречается такая проблема, что они не могут загрузить код в свой файл со стилями на движке. То есть они хотят воспользоваться каким то кодом, копируют его в свой файл со стилями, указывают в тексте название и потом оформить текст никак не получается.

В первую очередь конечно нужно все проверить, правильно вы делаете или нет. В таком случае я рекомендую скачать плагин Simple Custom CSS. Качаем его, после установки переходим в «Внешний вид». Заходите в него и перед вами открывается окошко для вставки личного кода. Вставляете в это окошко свой код и нажимаете Update Custom CSS.

После всего этого плагин можно отключить или удалить. Код будет вставлен и все должно работать. Может быть такой вариант, что конкретно данный плагин будет работать не совсем правильно. В таком случае, саму суть проблемы вы уже знаете и вам нужно просто подобрать похожий вариант плагина и попробовать уже на нем.
Проблема с оформлением текста онлайн

к оглавлению ↑

Выделение с помощью плагинов

Если вы используете движок wordpress и не хотите ковыряться в коде, можно установить плагин и с его помощью оформить текст на своем сайте. Данный плагин поможет вам в вашей проблеме. Напомню еще раз, лично я не любитель левых плагинов, все остается на ваше усмотрение. Заходим в админку, переходим в раздел с плагинами и качаем Wp-noteПосле установки сразу не пугаемся, вы его нигде не сможете найти.Оформление текста с помощью плагина

В настройках не появится никаких дополнительных вкладок, при написании новой статьи дополнительных кнопок так же не будет. Пользоваться данным плагином можно только с помощью шорткодов. При написании статьи, переходим в текстовый режим и ставим в нужное место [note] и в конце предложения закрываем код [/note].

  • note;
  • important;
  • tip;
  • warning;
  • help.

А вы пробовали оформить текст на своем сайте таким образом или все еще пользуетесь плагинами?

 

Евгений Несмелов

Подпишись на обновления блога!Будь в курсе первым
10 комментариев

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

10 комментариев

по хронологии
по рейтингу сначала новые по хронологии

Этот метод я учту. Я как раз занимаюсь улучшением дизайна своего сайта и надеюсь что все у меня получится.

Этот метод я учту и надеюсь что у меня больше не будет возникать проблем с версткой сайта.

прикольно, попробую так оформить у себя

Благодарю! Вот бы ещё подсказал кто, как определённый текст на сайте всегда выделять? Например, устойчивое словосочетание.

Автор

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

будет на странице. blockquote

Возможно, я непонятно объяснил. Хочется сделать вот что: допустим, есть словосочетание "Красные розы", если оно где-то попадается на сайте (в тексте и названии записей, в названии рубрик, в метках, в комментариях, в меню) - всегда автоматом чтобы текст "Красные розы" был красными буквами. По идее, надо написать функцию обработки текста. Думал, вдруг кто-то уже занимался этим.
А нужно сейчас прежде всего для того, чтобы определённую Рубрику подсвечивать красным )) Может, есть другие идеи?

Автор

Выделить текст на странице можно вышеописанными способами, выделить жирным, курсивом, увеличить шрифт выделенных слов, добавить цитату, сделать заголовок h2 h3 h4 h5 h6, добавить описание в таблицу тега table. Это будет более эффективней и полезней.

Автор

Не сталкивался с таким и даже нигде не видел подобное. Допустим словосочетание "Красные розы" сделать так и постоянно употреблять, скорей всего будет переспам. Я бы лично так не делал.

+1

Хороший способ!
Принят на вооружение.
Работает легко.