Рубрика: Создание сайта | Дата: 13.12.15

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

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

Вот только тут надо быть немного поаккуратнее. Наверное замечали, что на некоторых сайтах сделано такое выделение, что глаза ломаются? Всё выделено разными цветами, шрифтами и т.д. Пока такую статью прочитаешь, дак глаза не один раз так в пучок соберутся, что хрен потом распучкуешь roll Для чего так делают? Для того чтобы продвинуться в поисковых системах. Да, да, поисковики прекрасно видят, что там и как выделено, так что это очень даже хорошо помогает в продвижении сайта. Но тут есть одна опасность, если навыделять очень много, то существует возможность выпадения статьи из индекса, или вообще залёта сайта под фильтры. Так-что будьте с этой темой поаккуратнее. Но это в основном касается ключевых слов и выражений. Различные-же цитаты, куски текста и т.д., в принципе можно выделять сколько душе угодно. Итак...


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

Можно конечно выделить тупо жирным, курсивом, цветом, РАЗМЕРОМ, ШРИФТОМ, или всем в КУЧЕ, но для этого не надо быть семи пядей во лбу. Для этого уже давно во всех редакторах есть кнопочки и всё такое, так-что в принципе это не проблема. Но на всякий случай напишу код и для этих случаев:

<strong>жирным</strong>
<em>курсивом</em>
<span style="color: #ff0000;">цветом</span>
<span style="font-family: Comic Sans MS, cursive;">ШРИФТОМ</span>

Так выделять конечно удобно и быстро, но хочется чего-то особенного, к примеру вот так как сейчас. Как-же это сделать?

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

К примеру мы захотели красиво выделить текст.


Что для этого надо сделать?

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

Итак, в статье, в нужном месте, открываем тег <span>Пишем всё что нужно и закрываем этот тег.</span>

А вот дальше самое интересное. Первый вариант - можно вносить правки непосредственно в документ, статью. Второй вариант - можно воспользоваться таблицей стилей. Первый вариант очень не удобен, ибо придётся каждый раз всё прописывать заново. С другой стороны, каждый раз можно всё делать немного по другому. Но это уже на любителя. Всё таки надо стараться выдерживать свой сайт в определённом стиле и всё такое. Так-что второй вариант тут намного предпочтительнее. Но к сожалению некоторые люде при словах "Таблица стилей", начинают нервно хватать воздух и хлопаться в обморок wink Поэтому я напишу действия для обоих способов. Для начала пройдёмся по первому варианту.

Для первого варианта, свойства надо добавлять прямо к тегу, к примеру возьмём заголовок статьи - Как красиво выделить текст на сайте

Получается код:

<span style="color: #ff0000; font-family: Comic Sans MS, cursive;"><strong>Как красиво выделить текст на сайте</strong></span>

Где:

color: #ff0000; - цвет
font-family: Comic Sans MS, cursive; - шрифт
<strong>Как красиво выделить текст на сайте</strong> - выделение жирным

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

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

Получается код:

<span style="background-color: #ccc; color: #ff0000; border-left: 3px solid #333; margin-left: 20px; padding: 10px; border-radius: 5px 5px 5px 5px;"> Как красиво выделить текст на сайте</span>

Где:

<span - открываем тег
background-color: #ccc; - меняем цвет фона
color: #ff0000; - меняем цвет шрифта
border-left: 3px solid #333; - полоска слева, толщина и цвет
margin-left: 20px; - отступ слева
padding: 10px; - отступ, так сказать "во все стороны" от записи smile
border-radius: 5px 5px 5px 5px; - закругляем края
</span> - закрываем на фиг тег

Можно сделать и покрасивее, к примеру использовать фоновую картинку вместо фона, тень и т.д. Вот пример:

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

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


Для тех кто знаком с таблицей стилей, я так думаю объяснять ничего не надо и так всё понятно. Ну а с другой стороны, от пары лишних слов ни кто ещё не умирал smile В общем, для того чтобы красиво выделить текст, при помощи таблицы стилей, нам тоже надо  в статье в нужном месте, открыть тег <span> Ну а дальше всё будет немного по другому, теперь этому тегу надо присвоить класс, к примеру class="vyidelit_tekst" и получится у нас следующий код:

<span class="vyidelit_tekst"> Как красиво выделить текст на сайте</span>

Вставляете его в статью, куда надо. Далее идём в таблицу CSS и прописываем для нашего класса нужные свойства:

.vyidelit_tekst {
background-color: #ccc;
color: #ff0000;
border-left: 3px solid #333;
margin-left: 20px;
padding: 10px;
border-radius: 5px 5px 5px 5px;
}

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

<span class="vyidelit_tekst">Цитата блин, с новым наполнением, блин</span>

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

Ну а если плохо знакомы с таблицами стилей, то я настоятельно советую, лучше потратить время сейчас и изучить таблицу стилей, чем тратить время потом на бесчисленные мелкие правки. Ведь вы в последствии оставите сотни выделений текста. А вдруг вам захочется сменить цвет шрифта, или цвет фона, или ещё что-то сменить? Вам ведь придётся рыскать по всему сайту и делать замены. Можно конечно и в базе данных поменять, это в принципе секундное дело, но это уже другая тема. А если будете пользоваться таблицей стилей, то при внесении изменений в саму таблицу, изменения будут происходить сразу на всём сайте. Только не забывайте кэш почистить, а то сейчас народ понаставил этих плагинов, а кэш чистить забывает, а потом кричат что "Не фига не работает". Всё работает.., блин cool


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

Похожие записи:

  • Ну.., скажем так, владельцы думают что текст, фото, видео можно защитить от копирования :roll: На самом деле всё это не совсем так, точнее совсем не так. Честно говоря я вообще тяжело понимаю зачем это делается. Ведь если браузер показывает текст ...
  • Разберём мы всё это на примере темы Виндовс 7 (упрощённый стиль). Почему именно на этой теме? Просто потому, что именно в этой теме цвет шрифта и цвет подсветки кнопок совпадает. Он тупо белый :) В результате чего фиг разберёшь что там написано, ...
  • Давайте сразу начнём с простого примера. К примеру нам надо постоянно архивировать какую-то папку, или папки, или файлы и т.д. То-есть нам надо постоянно выполнять одну и туже операцию по архивации. Запускать архиватор, искать файлы, выбирать мес ...
  • Программы для создания сайта. Их много, всяких разных. Какая лучше? Это конечно вопрос вопросов. Но тут скорее на любителя. Функционал и возможности у них в основном одинаковые. А разные дополнения и т.д., дак ведь разные скрипты и так можно отде ...
  • Ну.., наверное ни кому не надо объяснять что есть такое "Горячие клавиши". Но на всякий случай сообщу. Горячие клавиши служат для того, чтобы парой тыков можно было производить определённое действие. К примеру копировать, вырезать, вставить и т.д ...

Есть мысль?

  1. anatolij:

    А статья мне понравилась, по крайней мере я все понялsmile Кроме одного, эта таблица стилей, она единая?
    А то я набирал в поиске, но не нашел ни одного сайта, где была бы эта таблица стилей, то есть полный список.

    • halych:

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

  2. anatolij:

    Блин, ну не могу понять, как редактировать в тексте понятно, поменял с визуального редактора на текст и пишешь там. Но как в таблице стилей? Ну открываю я у себя на сайте таблицу стилей, но там же не прописана каждая статья.

    • halych:

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

  3. anatolij:

    Спасибо, хорошая статья! Для чайников самое то. Только непонятно, где это прописывать в таблице стилей на сайте. Если я захочу в какой-то статье выделить цитату. Напишу то, что выделено красным в таблице стилей, пускай в конце. Эта цитата попадет в эту статью? А для следующей статьи?

    • halych:

      В таблицу стилей, код надо вставлять только один раз. Таблица стилей вносит изменения сразу в весь сайт, во все статьи, комментарии и т.д. То-есть для каждой статьи отдельно ничего делать не надо. Только занести код в таблицу стилей один раз и всё. Затем вставляете свою цитату в теги:
      <span class="vyidelit_tekst">Ваша цитата</span>
      Все дела. Класс можно задавать любой, не обязательно class="vyidelit_tekst" можно к примеру написать class="blin" smile Только не забудьте заменить его так-же и в таблице стилей.

      • anatolij:

        Понятно, то есть в таблице стилей создаешь шаблон, а когда пишешь статью, его надо оттуда копировать. Правильно? А если я хочу сделать желтый фон
        background-color: #ccc;
        Здесь надо заменить только background ? А где взять цвет, искать в интернете?
        Или просто написать yellow smile

        • halych:

          Ничего, никуда копировать не надо. Код вносится в таблицу только один раз, потом про него можно забыть. В него вносятся изменения только если появится желание что-то изменить, цвет, размер и т.д.
          Если хотите заменить цвет, к примеру на жёлтый, то да, можно прописать и буквами, получится:
          background-color: yellow;
          Если хотите цифрами, так-как там можно более хорошо подобрать различные оттенки, то есть куча всяких таблиц. А можно в том-же самом фотошопе выбрать цвет, а он вам циферки покажет, все дела. Вот к примеру одна из таких таблиц Написание цвета и коды в RGB

          • anatolij:

            Да уж, таблица цветов впечатляетsmile
            Попробую. Вот только концепцию не могу понятьsmile
            Ну вот прописал я в таблицу стилей то что выделено красным, только свой текст вставил.
            <span style="background-color: #ccc; color: #ff0000; border-left: 3px solid #333; margin-left: 20px; padding: 10px; border-radius: 5px 5px 5px 5px;"> Психология, это сила</span>
            Потом я вставляю статью, редактирую и как вставить эту фразу?

            • halych:

              Ну человече ты даёшь, ты попутал таблицу стилей со вставкой прямо в документ. Точнее не попутал, а совместил smile То что ты написал, надо вставлять прямо в статью. А чтобы воспользоваться таблицей стилей. Надо просто вставить в статью следующий код:

              <span class="vyidelit_tekst"> Психология, это сила</span>

              А в таблицу стилей надо вставить вот этот код:

              .vyidelit_tekst {
              background-color: #ccc;
              color: #ff0000;
              border-left: 3px solid #333;
              margin-left: 20px;
              padding: 10px;
              border-radius: 5px 5px 5px 5px;
              }

              Всё, больше ничего делать не надо. Если захочешь вставить новую цитату в новую статью, то просто пишешь в этом новом документе в нужном месте тот-же самый код, но просто с новым наполнением, к примеру так:

              <span class="vyidelit_tekst">Новая цитата блин</span>

              В таблицу стилей больше ничего добавлять не надо. А если в таблице стилей что-то поменяешь, то изменятся сразу все цитаты.

Выскажись :)

Хостинг Хостланд
Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "В гостях у Халыча" обязательна. Контакты - admin@halych.ru
Вверх блин :) Вверх блин :)