Как в html красиво оформить текст – 7 классных примеров с тенями для текста, которые вы просто не можете пропустить — Вебджем.рф

Содержание

Стильно оформить текст на странице сайта

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

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

И подходим к главному, в этом мануале мы узнаем, как красиво и стильно выделить кусок текста в информационную таблицу, как понимаете, в ней должно только быть самое важное. Работать будем с HTML и CSS, где с их помощью мы создадим 2 таблицы для начало, которые полностью редактируются и в них еще будет установлен знак по левую сторону, а какой он будет, вам решать, по умолчанию будут идти, что увидите ниже.

Как красиво выделить текст с помощью HTML

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

Так будет смотреться:

Этот код ставим или с начало настроим цветовую гамму под свой портал.

Код

<div align=»center»>Здесь вы можете написать, то что нужно по вашей статье, к примеру как на сайте zornet.ru что проверяю этот стиль и как он изначально будет смотреться</div>

Все в нем настраивается, это высота и длинна, где можно поставить Avto чтоб сразу устанавливалась автоматически. Также саму ширину рамки, что у нас по левой стороне установлено, что похоже на цитату, но не является ней, можно поставить стиль border-radius: 5px; на закругление углов и выставлено пять пикселей.

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

Вот подошли к самому распространенному способу, у которого явно больше возможностей по стилистике и здесь если ставить рамку, то различие очень большое будет. От первого он отличается по установке, так как стили вы сразу можете поместить в CSS и после этого работать с ними. Есть другой способ для этого, вам нужно создать с текстового файла style.css и залить файловый менеджер. И тогда нам не нужно размещать в CSS сайта, так как иногда там места не хватает.

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

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

Вот такая получиться:

1. Первым делом устанавливаем стиль:

Код

.info{
margin: 10px;
padding: 15px 17px 15px 80px;
border: 1px solid #026194;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 3px #bbb;
-moz-box-shadow: 2px 2px 3px #bbb;
-webkit-box-shadow: 2px 2px 3px #bbb;
background: #fff url(http://zornet.ru/Fresa/AB/zornet/info.png) 15px 50% no-repeat;
text-align:justify;
color: #000
}

Код HTML где будет находиться описание или информация.

Код

<div>
Здесь как раз идет размещение описание, что и будет потом обображаться
Как сами видите не чего сложного здесь нет, заполняем и вставляем в статью и получиться красивое оформление.
</div>

2. Идем по этому же пути, только поменяем стиль, и цвет рамки, здесь вам решать и безусловно иконку, что присутствует.

Визуально такая получится:

Это в CSS или под него файл создаем.

Код

.zornet{
margin: 10px;
padding: 15px 17px 15px 80px;
border: 1px solid #026194;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 3px #bbb;
-moz-box-shadow: 2px 2px 3px #bbb;
-webkit-box-shadow: 2px 2px 3px #bbb;
background: #fff url(http://zornet.ru/Fresa/AB/zornet/warning.png) 15px 50% no-repeat;
text-align:justify;
color: #000
}

Второй HTML

Код

<div>
Это второй идет и уже немного изменен, но стили по сути не отличаются от первого.
И так вы можете делать таблицы, то количество, которое посчитаете нужным.
</div>

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

Источник: nazyrov.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#gal { border:2px solid #6A5ACD; width:70%; border-radius: 13px; background: #FFE4B5 url(http://nesmelov.ru/wp-content/uploads/2015/08/galo4ka.png) 15px no-repeat; padding: 15px 17px 15px 80px; margin:0 auto 0 auto; font-family:Tahoma; font-size:14px; text-align:justify; }

#gal {

border:2px solid #6A5ACD; width:70%;

border-radius: 13px;

background: #FFE4B5 url(http://nesmelov.ru/wp-content/uploads/2015/08/galo4ka.png) 15px no-repeat;

padding: 15px 17px 15px 80px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

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

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

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

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

#kar{ border:2px solid #6A5ACD; width:70%; border-radius: 13px; background: #F0F8FF url(http://nesmelov.ru/wp-content/uploads/2015/08/karandash.png) 15px no-repeat; padding: 15px 17px 15px 80px; margin:0 auto 0 auto; font-family:Tahoma; font-size:14px; text-align:justify; }

#kar{

border:2px solid #6A5ACD; width:70%;

border-radius: 13px;

background: #F0F8FF url(http://nesmelov.ru/wp-content/uploads/2015/08/karandash.png) 15px no-repeat;

padding: 15px 17px 15px 80px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

— можно задать шрифт данному блоку и его размер.

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

#kres{ border:2px solid #6A5ACD; width:70%; border-radius: 13px; background: #87CEFA url(http://nesmelov.ru/wp-content/uploads/2015/08/krestik.png) 15px no-repeat; padding: 15px 17px 15px 80px; margin:0 auto 0 auto; font-family:Tahoma; font-size:14px; text-align:justify; }

#kres{

border:2px solid #6A5ACD; width:70%;

border-radius: 13px;

background: #87CEFA url(http://nesmelov.ru/wp-content/uploads/2015/08/krestik.png) 15px no-repeat;

padding: 15px 17px 15px 80px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

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

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

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

#line1{ background-color: white; border-left: 3px dotted #FF3744; padding: 10px 10px 10px 10px; margin:0 auto 0 auto; font-family:Tahoma; font-size:16px; text-align:justify; }

#line1{

background-color: white;

border-left: 3px dotted #FF3744;

padding: 10px 10px 10px 10px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:16px; text-align:justify;

}

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

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

#line2{ background-color: white; border-top: 4px groove #FF3744; border-bottom: 4px groove #FF3744; padding: 10px 10px 10px 10px; margin:0 auto 0 auto; font-family:Tahoma; font-size:14px; text-align:justify; }

#line2{

background-color: white;

border-top: 4px groove #FF3744;

border-bottom: 4px groove #FF3744;

padding: 10px 10px 10px 10px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

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

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

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

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

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

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

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

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

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

note;
important;
tip;
warning;
help.

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

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

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

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

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

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

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

#gal {

border:2px solid #6A5ACD; width:70%;

border-radius: 13px;

background: #FFE4B5 url(http://nesmelov.ru/wp-content/uploads/2015/08/galo4ka.png) 15px no-repeat;

padding: 15px 17px 15px 80px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

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

#kar{

border:2px solid #6A5ACD; width:70%;

border-radius: 13px;

background: #F0F8FF url(http://nesmelov.ru/wp-content/uploads/2015/08/karandash.png) 15px no-repeat;

padding: 15px 17px 15px 80px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

border — Ставим значения для границы рамки. В идеале нужно указывать именно так, как показано на примере. С начала толщина границы, потом ее стиль, в моем случае solid. Можно указать вообще без рамки (none), dashed — рамка состоит из пунктиров. Цвет границы — скачайте программку ColorMania и задавайте любой цвет для границ.

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

#kres{

border:2px solid #6A5ACD; width:70%;

border-radius: 13px;

background: #87CEFA url(http://nesmelov.ru/wp-content/uploads/2015/08/krestik.png) 15px no-repeat;

padding: 15px 17px 15px 80px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

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

#line1{

background-color: white;

border-left: 3px dotted #FF3744;

padding: 10px 10px 10px 10px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:16px; text-align:justify;

}

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

#line2{

background-color: white;

border-top: 4px groove #FF3744;

border-bottom: 4px groove #FF3744;

padding: 10px 10px 10px 10px;

margin:0 auto 0 auto;

font-family:Tahoma; font-size:14px; text-align:justify;

}

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

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

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

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

note;
important;
tip;
warning;
help.

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

Оформление Текста html — Домашний бизнес

~~Зачеркнутый текст~~	<s>Your text</s>
Подчеркнутый текст	<u>Your text</u>
Выделенный жирным	<b>Your text</b>
`мелкий текст`	<samp>Your text</samp>
Увеличенный текст	<big>Your text</big>
наклонный текст	<i>Your text</i>
Жирный,наклонный текст	<b><i>Your text</i></b>
Подчеркнутый-жирный,наклонный текст	<u><b><i>Your text</i></b></u>
мелкий текст	<small>Your text</small>
Такой текст^текст	TEXT<sup>text</sup>
Или такой_текст	TEXT<sub>text</sub>

Такой текст

Такой текст

Такой текст

Такой текст
<font size=»+1″>Your text</font>

Такой текст
<font size=»-2″>Your text</font>

Супермелкий шрифт. Например: Я тебя люблю Или: Я тебя люблю
<font >ТЕКСТ</font>
Минимальное значение font-size:1pt (самый мелкий)
Аналогично делается суперкрупный шрифт.

Меняем вид шрифта:
Your very intresting text
<font face=»Monotype Corsiva»>ТЕКСТ</font>

Your very intresting text
<font color=»FF0000″>ТЕКСТ</font>

На заметку: typetester.org — полезный сайт для желающих поэкспериментировать с текстом

Your very intresting text

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ

Синий текст подчеркнут красной линией

Синий текст в красной рамке

<span ><span >Синий текст в красной рамке</span></span>

Цветной текст с цветным фоном

<span >Цветной текст с цветным фоном</span>

Цветной текст с цветным фоном в цветной рамке

<span >Текст</span>

Текст, подчеркнутый пунктиром

<span>Текст, подчеркнутый пунктиром</span>

Текст, подчеркнутый точками

<span>Текст, подчеркнутый точками</span>

Текст, подчеркнутый двойной чертой

<span>Текст, подчеркнутый двойной чертой</span>

Текст, окаймленный разноцветным пунктиром

<span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>

Текст в двойной рамке

<span >Текст в двойной рамке</span>

Цветной текст в двойной цветной рамке

<span ><span >Цветной текст в двойной цветной рамке</span></span>

Ваш текст в объемной 3D-рамке

<span > Ваш текст в объемной 3D-рамке</span>

На заметку:

Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и получим (на примере выше):

Ваш текст в объемной 3D-рамке

то бишь рамку на всю ширину поста.

Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где width:200px; — ширина блока 200 пикселей,
height:50px; — высота блока 50 пикселей

Получим:

Ваш текст в объемной 3D-рамке

<div > Ваш текст </div>

Сервисы для подбора цвета:

№ 1 | № 2 | № 3

Аббревиатура: HTML

Так называемый “спойлерный” текст, проявляющийся при его выделении. Типа:
“А убийцей в том кино был дворецкий”
<span >спойлерный текст</span>

Так называемая “буквица”: Mirzam.ru —Прекрасный сайт…

<font size=»+4″ face=»Monotype Corsiva» color=»#0000FF»>Mirzam.ru</font> <i>Прекрасный сайт…</i>

Еще красивый текст html, просто поменяйте в коде Monotype Corsiva на приведенные ниже. Получите отличный шрифт для сайта

Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

<p title=»Пояснительный текст»>Основной текст</p>

Текст “наоборот”:
Повернуть текст задом-наперед

<bdo dir=»rtl»>Повернуть текст задом-наперед</bdo>

Расстояние между словами

<div >Расстояние между словами</div>

Большие расстояние между словами

<div >Больше расстояние между словами</div>

Расстояние между буквами

<div >Расстояние между буквами</div>

А здесь задано расстояние между строками по вертикали пятьдесят пикселей

<div >Расстояние между строками</div>

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

Невидимый фрагмент записи

Делаем красивые посты: добавим немного HTML!: alexey_donskoy — LiveJournal

Хотите красиво оформленную важную цитату или эпиграф?

А вот такой блок ссылок на свои посты (мини-оглавление)?Другие полезные советы:

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

Можно, я не буду подробно писать про цвет?

Даже те, кто далёк от программирования, легко могут использовать кнопочку задания цвета шрифту в редакторе ЖЖ — подбирайте нужный цвет и смотрите его код, затем вставляйте, куда нужно!
И, наконец, я надеюсь, что не надо объяснять специально, что все использованные здесь стилевые параметры можно добавлять и комбинировать в нужных сочетаниях; а синтаксис будет понятен из приведённых примеров.
Предполагается, что читатель знает на базовом уровне язык HTML и может при необходимости задать, к примеру, размеры картинки параметрами width и height, грамотно оформить ссылки, закрыть теги и т.п.
Но можно и без этого — просто скопируйте выделенный текст (не забудьте! редактор должен быть переведён в режим HTML!) и подставьте свой текст, и измените нужные значения и параметры.
Поехали.

Выделение текста «маркером»:

#FF8888;»>отмеченный текст

Выделение текста с закруглением:

<span>отмеченный текст с закруглением 8 пикселов и границей маркера с отступом в 4 пиксела от текста</span>

;

А вот так можно красиво оформлять цитаты (пример в начале поста):

#CCFFCC; margin-left:40%;»>Хотите красиво оформленную важную цитату или эпиграф?

Хотите красиво оформленную важную цитату или эпиграф?

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

возможность указания отступов блока (margins) для его расположения на странице (а заодно покажу и отступы текста от границ блока — padding):

#CCCCFF; margin-left:10%; margin-right:40%; padding-left:60px; padding-top:30px; padding-bottom:10px; border-right:dotted blue 7px;»>размещаемый в блок текст
из нескольких строк

возможность обтекания блока текстом, например, слева:

#FFCCCC; width:50%; float:right; padding:18px; margin-left:5%;»>размещаемый в блок текст
из нескольких строк(Здесь текст, написанный сразу после блока div): Обратите внимание, что все размеры в HTML можно задавать как в абсолютных величинах — удобнее всего в пикселах (80px, например), так и в процентах от ширины страницы: вот здесь написали про ширину и расположение: «width:50%; float:right;» и получили блок строго в правой половине основного текста, независимо от разрешения экрана и размера окна браузера. Отступ от обтекаемого текста регулируется в данном случае параметром «margin-left:5%;»

Рамка вокруг текста:

#CCFFCC;»>Текст в точечной рамке, а ещё текст внутри строки с хитрым типом рамки, с закруглением 8 пикселов
текстКстати, в этом примере заданы отступы по вертикали и горизонтали, без подробного указания каждой из сторон.
Надеюсь, вы также поняли, что можно тут же задавать ширину рамки (от 1px, а по умолчанию считается 3px).
И даже каждую сторону по отдельности, как в примере выше.
И вот какие типы обрамления бывают:
solid , dotted , dashed , double , groove , ridge , inset , outset

Как писать стихи.

Самая большая проблема в HTML в том, что лишние пробелы просто игнорируются.
Чтобы написать стихотворение «лесенкой», можно использовать так называемые неразрывные пробелы:
Мы вам скажем пару слов о погоде,
Где какой открыть сезон на природе,
   О дождях и о снегах,
   О ветрах и облаках
   И о том, как утром солнце восходит!Мы вам скажем пару слов о погоде,
Где какой открыть сезон на природе,
   О дождях и о снегах,
   О ветрах и облаках
   И о том, как утром солнце восходит!
(читать полностью)
Есть и более простой и наглядный способ с применением тега предварительного форматирования pre:

<pre>Края синих туч
    на закатной поре
        сияют огнём зололтым...</pre>

К сожалению, на многих серверах (как на упомянутом Стихи.ру) HTML-теги запрещены совсем, и там для форматирования стихов лесенкой остаётся только первый способ с неразрывными пробелами.

Красивое мини-оглавление.

Теперь, наконец, приведу код таблички со ссылками, которая в начале поста.
Раньше был единственный способ сделать такую конструкцию — через таблицу.
Приведу без пояснений, чтобы не затягивать на несколько страниц рассказ про то, как делать таблицы:

Заголовок
Ячейка 1	Ячейка 2	Ячейка 3

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

#6da6c4; padding:8px;»>Заголовок
#bdd6d4; width:60px; float:left»>Ячейка 1
#bdd6d4; width:60px; float:left»>Ячейка 2
#bdd6d4; width:60px; float:right»>Ячейка 3

Заголовок

Ячейка 1

Ячейка 2

Ячейка 3

P.S. И верно, не везде показывается правильно. Как всегда, проблемы вылезают в ленте из-за увеличенных шрифтов.
Посмотрите, как у вас?

Ещё по теме:
• Большой справочник по HTML, где следует смотреть подробную справку и варианты использования всех тегов и их параметров.

Спрашивайте, что непонятно, или что хотите ещё узнать про HTML-дизайн текста в ЖЖ!

Как в html красиво оформить текст – 7 классных примеров с тенями для текста, которые вы просто не можете пропустить

Стильно оформить текст на странице сайта

Как красиво выделить текст с помощью HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оформление Текста html — Домашний бизнес

Делаем красивые посты: добавим немного HTML!: alexey_donskoy — LiveJournal

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

Рубрики