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

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

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

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

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

Сразу хочется затронуть небольшой момент. У некоторых людей возникает проблема при вставки 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].

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