Красивое оформление текста css – Оформление текста css – как оформить его красиво

Дама сдавала в багаж Диван, Чемодан, Саквояж, Картину, Корзину, Картонку И маленькую собачонку. Выдали даме на станции Четыре зеленых квитанции О том, что получен багаж: Диван, Чемодан, Саквояж, Картина, Корзина, Картонка И маленькая собачонка.

Жил человек рассеянный На улице Бассейной. Сел он утром на кровать, Стал рубашку надевать, В рукава просунул руки Оказалось, это брюки. Вот какой рассеянный С улицы Бассейном!

 Ну и ещё, к примеру, увеличим закругление углов у рамки с правой и с левой стороны. Изменим в коде свойства border-left:5px и border-right:5px. И поменяем цветовой эффект. Имеем следующее.

У старика и старухи Был котенок черноухий, Черноухий и белощекий, Белобрюхий и чернобокий. Стали думать старик со старухой: — Подрастает наш черноухий. Мы вскормили его и вспоили. Только дать ему имя забыли.

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

Как это реализовать. При написании сообщения переходим в режим HTML и в нужном месте вставляем этот код. если предполагается многократное использование такого эффекта, то первая часть кода CSS, а именно, то что заключено в теги <style>код </style> установить непосредственно в шаблон блога. Вкладка шаблон-изменить HTML . Находим, давно полюбившуюся всем строку ]]></b:skin> и над ней этот код устанавливаем. Но уже без этих тегов <style></style>. Сохраняем шаблон. А потом, когда очень захочется что-то выделить, берём этот маленький код HTML

Как красиво оформить текст с помощью CSS ~ Страницы Интернета

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

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

Чтобы сделать красивое оформление текста, придется добавить CSS код в файл стилей style.css, а потом при написании статей добавлять HTML код в нужном месте текста. На скриншоте ниже, Вы можете посмотреть, как выглядит фрагмент текста в красивом блоке

С помощью CSS, Вы можете сделать красивый блок для текста под шаблон Вашего сайта. Можно изменять размер и цвет текста, да и весь блок в целом тоже можно изменить. А вот уже готовое оформление под мой шаблон.

Заголовок блока

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

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

1. /* оформление рамки блока */

2. .bloginfo {

3.     background: #FFD963;

4.    border: 1px solid #000000;

5.    padding: 3px 5px 3px 30px;

6.     margin: 11px;

7.     text-align: justify;

8.  -webkit-border-radius: 5px;

9.  -moz-border-radius: 5px;

10.  -o-border-radius: 5px;

11.  -khtml-border-radius: 5px;

12.  border-radius: 5px;

13. -webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */

14. -ms-filter: «progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)»;/*Internet   Explorer */

15.   box-shadow: 5px 5px 5px #847B6C;/*Opera и Firefox*/

16. }

17. /* оформление заголовка блока */

18. .bloginfo-head {

19.     font-size:1.4em;

20.     font-weight: bold;

21.     color:#783E2B;

22.    margin: 0 0 5px 0;

23. }

24. /* оформление текста блока */

25. .bloginfo-txt {

26.     line-height: 1.3em;

27.     color:#4A00F;

28.    font-size:14px;

29.  }

Теперь при написании нового поста, надо в нужном месте вставить следующий HTML код:

<div>
<div>Заголовок блока</div>
<div>Содержимое блока</div>
</div>

Посмотрите виде, как красиво оформить текст с помощью CSS

internet-pages.blogspot.com

Оформление текста в html. Элементы

Чтобы визуально оформить и выделить текст в html применяют такие элементы:

STRONG

Выделяет текст жирным шрифтом:

<strong>Между этими тегами текст будет выделен жирным шрифтом</strong>

EM (Emphasis)

Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом:

<em> Этот текст будет выделен курсивом </em>

U (Underline)

Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:

<u> Данный текст подчеркнутый </u>

SUB

Отображает текст, заключенный между открывающим <SUB> и закрывающим </SUB> тегами, как нижний индекс от основного текста.

Формула пропана С ₃ Н ₈

Результат: С ₃ Н ₈

SUP 

Используется для создания верхнего индекса. Например:

2 ⁵ = 32

Будет выглядеть  2 ⁵ = 32.

FONT

Используется для изменения цвета, шрифта и размеров и  текста.
Атрибуты:
SIZE — с помощью него можно менять размер шрифта. Возможные значение — 1 , 2 , 3 , 4 , 5 , 6 , 7.
COLOR — задает цвет текста.
FACE — для определения шрифта (Times New Roman, Arial, Tahoma)

Например:

Этот текст без оформления <br>
<FONT SIZE=»+2″ COLOR=»yellow»> Увеличенный желтый шрифт</FONT>
<br>
<FONT SIZE=»3″ FACE=»Tahoma» COLOR=»red»> Красный текст 3 размера</FONT>

При просмотре в браузере увидим:

 SIZE=»+2″ это значит увеличенный шрифт на 2 единицы по сравнению со стандартным. Стандартный размер шрифта равен 3 .

HR

Применятся для вставки в текст горизонтальной линии. Отличительная особенность – нет закрывающего тега.
Атрибуты:
ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: 
left – выравнивает по левому краю документа.
right – выравнивает по правому краю.
center – выравнивание по центру документа (используется по умолчанию).
WIDTH – применяется для определения длины линии в пикселах или процентах от ширины страницы.
SIZE – толщина линии в пикселах.
NOSHADE – с помощью этого атрибута линия закрашивается как сплошная. Без него – линия выглядит объемной.
COLOR – задаем цвет линии.

Например:

Текст до линии <hr noshade align=»left»> Текста после линии <br>
А это линия толщиной 3px без noshade  
<hr align=»left» size =»3″> А здесь линия c noshade закрашенная в красный цвет <hr align=»left» color=»red» size =»3″ noshade>

Результат:

Следующая страница — Списки в html

Предыдущая — Форматирование текста в html

wm-port.com

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

Здравствуй, уважаемый читатель.

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

Перед изучением CSS пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок

Теория и практика

Чтобы красиво оформить текст на странице, придать ему привлекательный вид, необходимо знать некоторые CSS свойства которые помогут сделать это.

font-family

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

Рассмотрим CSS код:

1
2
3

p {
   font-family: comic sans ms, times new roman, verdana;
}

Лучше всего название шрифта писать в нижнем регистре. Тогда браузеры их лучше понимают. У вас наверное появился вопрос почему мы указали сразу несколько шрифтов. Это делается для того, чтобы если первый шрифт «comic sans ms» не установлен у пользователя на компьютере, тогда текст будет показан в «times new roman». Если и он не установлен, тогда он будет показан со шрифтом «verdana».

font-size

После того как мы выбрали шрифт, нам необходимо задать его размер. В CSS это делается с помощью свойства font-size. Размер в CSS может задаваться с помощью нескольких величин: пиксели(px), проценты(%), пункты(em) и ключевые слова(small, large, medium). Я рекомендую вам использовать пиксели, и т.к. бразуеры их хорошо масштабируют.

Рассмотрим CSS код:

1
2
3
4

p{
    font-family: comic sans ms, times new roman, verdana;
    font-size:16px;
}

font-style

Также в CSS текст можно делать курсивный и наклонный. Это делается с помощью свойства font-style. У данного свойства есть несколько значений:

font-style: normal | italic | oblique | inherit
normal — обычный текст.
italic — курсивный текст.
oblique — наклонный текст. Он отличается от курсивного тем, что курсивный это текст написанный «от руки», а наколонный — это просто наклон букв вправо.
inherit — наследуется значение родителя(например: <div><p>Text</p></div>. Мы задали для div один стиль текста и хотим чтобы этот стиль наследовался тегу <p>, который находится внутри <div>. Тогда необходимо применять данное значение).

Вот пример курсивного и наклонного текста(разница есть, но она не очень заметная).

font-weight

Еще одним из необходимых свойств при работе с текстом это — выделение текста жирным. За это отвечает свойство font-weight.

font-weight: bold | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Пример CSS кода:

1
2
3
4
5
6

p{
    font-family: comic sans ms, times new roman, verdana;
    font-size:16px;
    font-style:italic;
    font-weight:bold;
}

Ниже можете посмотреть пример и скачать его:

Посмотреть примерСкачать

Сегодня мы рассмотрели как задать оформление тексту. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

Урок 5. Шрифты 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья — расскажи друзьям! 🙂

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

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

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

Выделение картинок и ссылок

Красивая реализация выделения при наведении ссылок и картинок с в стиле twitter

Пример ι Скачать исходники

RSS плагин новостей с JQuery

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

Пример ι Скачать исходники

Текстовый слайд эффект с использованием JQuery

Пример ι Скачать исходники

JQuery эффект при наведении на текст jMagnify

Прекрасный эффект для текста при наведении на него курсором

Пример ι Скачать исходники

Увеличение текста с JQuery

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

Пример ι Скачать исходники

Прокрутка списка с JQuery

Пример ι Скачать исходники

Красивое оформление текста в стиле Web

Замечательное оформление текста на сайте с использованием CSS3.

Пример ι Скачать исходники

Текстовый эффект при наведении с JQuery

Интересный эффект, который при наведении меняет цвет текста.

Пример ι Скачать исходники

Цвет при выделении текста с CSS3

Этот эффект меняет цвет выделения текста на сайте.

Пример ι Скачать исходники

Подсказка для посетителей с JQuery

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

Пример ι Скачать исходники

Красивая карта сайта с JQuery

Прекрасная и запоминающаяся карта сайта для Вашего ресурса.

Пример ι Скачать исходники

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

Красивое оформление списков на Вашем сайте с использованием JQuery

Пример ι Скачать исходники

Прокрутка для текста

Прекрасная реализация плавной прокрутки текста на сайте.

Пример ι Скачать исходники

Интересный эффект для текста

Красивый эффект, который осветляет текст в конце страницы

Пример ι Скачать исходники

Подсветка ключевых слов с использованием CSS3 и JQuery

Прекрасный эффект для выделения ключевых слов или фраз в статье.

Пример ι Скачать исходники

Оформление цитаты. JQuery плагин

Прекрасная реализация красивых цитат для Вашего ресурса.

Пример ι Скачать исходники

JQuery текст с двигающимся фоновым изображением

Пример ι Скачать исходники

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

beloweb.ru