Портянка Готовых Тегов и Стилей

30 ноября 2010      Блогострой, Главная

  • Без тегов и стилей сайт не построишь. Но чтобы Раскрутка Сайтов была эффективной, лучше послушать мудрые советы. Кликните по верхней ссылке, чтобы попасть на форум поисковой оптимизации и узнать что-то новенькое!

готовые тегиЧестно говоря, я в html-верстке соображаю не очень. Для меня, как законченного гуманитария, все эти br и css не являются самыми близкими друзьями. У меня с тегами чисто деловые, официальные отношения. Понятно, что контент-менеджеру и копирайтеру без знаний основ html работать нельзя. Но старые добрые буквы и абзацы мне всегда будут ближе и милее :).

Так что в случае каких-либо затруднений с размещением на сайте, я всегда лезу в Гугл и ищу простые решения.  Типа, вставил готовые теги  и полный порядок! Когда я смотрю на работу нашего html-верстальщика, который программирует быстрее, чем говорит, у меня это всегда вызывает дрожь восхищения.

Поняв, что рожденный ползать летать не сможет :), я оставил свои попытки переплюнуть Билла Гейтса. И пользуюсь теперь одной офигенной заготовочкой , которую нарыл на форуме gamedev.ru. Выбрал все, на мой взгляд интересные, скомпоновал и теперь выкладываю на своем блоге. Возможно, эта заготовка стилей и тегов пригодится и другим блоггерам. Итак, встречайте — набор основных тегов тегов и стилей на каждый день! 🙂

Теги шрифтов


 [b]...[/b]
 Жирный

текст

 
или <b>...</b>,
<strong>...<strong>
 
 [i]...[/i]
 курсив 
или <i>...</i>
 
<SPAN style="text-decoration: overline"
>...</SPAN>
 Надчеркнутый 
Черта над текстом
 
 [u]...[/u]
 Подчеркнутый 
или <u>...</u>
 
 [s]...[/s]
 Зачеркнутый 
или <s>...</s>
 
[u]<s><SPAN style="text-decoration:
overline">...</SPAN></s>[/u]
 Не то

написал

 
можно объединять
 
 <tt>...</tt>
 Моноширинный 
Стиль
пишущей машинки
 
 <sup>...</sup>
 43=64 
 Надстрочный
 
 <sub>...</sub>
 Н2SO4 
 Подстрочный
 
 <small>...</small>
 Мелкий 
 Мелкий шрифт
 
 [offtop]...[/offtop]
Вне темы
 Оффтоп 
<h1>...</h1>
 Заголовок

размера 1

 
Заголовок статьи
 
<h4>...</h4>
 Заголовок

размера 4

 
от <h1> до <h4>
 
<p><font size="1">...</font></p>
 Шрифт

размером

1 пункт

 
Размер шрифта
в п.(1 - 4)
 
<p style="font-size:15px;">...</p>

Шрифт размером

15 пиксел

 
Размер шрифта
в пикселах
 
<p style="font-style: italic;">...</p>

Курсив

 
normal (обычный)
italic (курсив)
oblique (наклонный)
 
<p style="font-weight:bolder;">...</p>

Текст стилем
bolder

 
bold (жирный)
bolder (жирнее)
lighter (тоньше)
 
<p><font size=xx-large>...</font></p>
 Текстшрифтом
размера

xx-large

 
xx-small
x-small
small (мелкий)
medium (средний)
large (крупный)
x-large (крупнее)
xx-large (Крупный)
larger(крупнее)
smaller (мельче).
 
<p><font face="Times New Roman"
>...</font></p>
 Текст написан
шрифтом

Times New Roman

 
Задает шрифт
 
<p><font color="#ff0000">...</font></p>
 Выделение

текста цветом

 
16-тиричные
константы цвета
 
<p><font color="blue">...</font></p>
 Цвет

задан константой

 
Константы цвета
 
<p><font color="rgb
(100%, 0%, 0%)">...</font></p>
 Цвет задан

моделью rgb

 
Соотношения

Еще стили и теги под шрифты


<span style="text-shadow: 1px 1px 2px #000;
 ">...</span>
 Текст с тенью 
Не работает в IE
 
<span style="text-decoration: blink"
>...</span>
 Мигающий текст 
Не работает в IE
 
<span style="text-shadow: 0px
14px 0px #F00; color:#FFFFFF;">...</span>
<span style="text-decoration: blink;
color: #00D000;">...</span>
 Цветной!

Цветной!

 
Не работает в IE
 
<span style=writing-mode:tb-rl;
>...</span>
 Текст под углом
 
90 гр.
Работает только в IE
 
<font face="Monotype Corsiva" size="+2"
color="FF0000">...</font>
 Вычурный 
size="+1", size="-1"
размера шрифта
 
<span style="color:red;
text-decoration:line-through;">
<span style="color:blue">...</span>
</span>

Неправильно

 
Синий текст
зачеркнут красным
 
<span style="color:red;
text-decoration:underline;">

<span style="color:blue">...</span></span>

Важно

 
Синий текст
подчеркнут красным
 
<span style="border-bottom: 2px dashed red;"
>...</span>

Текст

подчеркнутый

 
Красный пунктир
 
<span style="border-bottom: 3px dotted lime;"
>...</span>
 Текст,

подчеркнутый

точками

 
Зеленое
подчеркивание.
 
<span style="border-bottom:
double red;">...</span>
 Обратите

внимание

 
Двойная черта.
 
<span style="background-color:#FFFFFF;
 color:#FFFFFF">...</span>
 Спойлерный текст 
Проявление текста
при его выделении.
 
<div style="visibility: hidden;">...</div>
Невидимый текст
 
Невидимый текст.
 
<a style="cursor:auto">...</a>
 Можно

подсвечивать

текст

 
При наведении курсора.
Не работает в IE.
 
<font size="+4" face="Monotype Corsiva" 

color="#0000FF">...</font> <i>...</i>
 В некотором

царстве…

 
Буквица.


Линии, абзацы…


<br/>
 
Перевод строки
 
<hr/>
 
Горизонтальная линия
 
<hr  style="border: double 1pt;
border-color: Blue">
 
Цветная
горизонтальная
линия
 
<hr  style="border: dotted 1pt;
border-color: red ">
 
Цветная
прерывистая
горизонтальная линия
 
<hr  style="border: dashed 1pt;
border-color: red ">
 
Цветная
прерывистая
горизонтальная
линия
 
<pre>...</pre>
 
текст
 
Предварительно
отформатированный
текст.
 
 <p>...</p>
 абзац 
Поддерживаются
стили
абзаца
 
 <p style="...">...</p>
 стиль абзаца 
Заданный стиль
применяется
для всего абзаца
 
 [p align=left]
 выравнивание абзаца

по левому краю

 
форматирование
текста
 
 [p align=right]
 выравнивание абзаца

по правому краю

 
форматирование
текста
 
 [p align=center]
 выравнивание абзаца

по центру

 
форматирование
текста
 
<P style="text-indent: 30px">

отступ

 
Жестко
заданный отступ
красной строки
 
<P style="text-indent: -20px">
 

Работают
отрицательные значения
 
<P style="letter-spacing: 10pt">...</P>

текст

 
Увеличенное
межбуквенное расстояние
 
<SPAN style="line-height: 10pt;
font-size: 12pt">...</span>
 Уменьшенное

межстрочное

расстояние

 
Уменьшенное
межстрочное  расстояние
 
<P style="word-spacing: 20px">...</P>

Расстояние

между словами

 
Увеличенное
расстояние
между словами
 
<P style="word-spacing: -7pxpx">...</P>

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

 
Уменьшенное
расстояние
между словами
 
 <div>...</div>
блок
 
Поддерживаются
стили
 
 <div style="...">...</<div>
 стиль блока 
Заданный стиль
применяется
для всего блока
 
==...==, ===...===
 Разбивка на главы 
С автоматической
генерацией содержания


Всякие рамочки


 >...
 >Как в Фидо 
Не работают
другие теги
внутри цитаты.
 
[quote]...[/quote]
Через тег quote
 
Поддерживаются
теги и вложенное
цитирование.
 
[quote]...[quote]...[/quote][/quote]
цитируемый текст
 
цитирование
цитирования.
 
<p><blockquote>...</blockquote></p>

Через тег blockquote

 
Поддерживаются теги
и вложенное цитирование.
 
<div style="background-color:
RGB(249, 201, 16)">...</div>
Текст сообщения
 
Выделение цветом фона.
 
<table><tr><td style="background-color: red;

">...</td></table>
Текст сообщения 
Выделение
цветом фона
с помощью таблицы.
 
<span style="background-color:blue;
color:white; padding:3px;">...</span>
 Цветной текст с цветным фоном 
Заготовка
 
<div style ="border-style:  ridge">...</div>
обводка сообщения рамкой
 
Типы рамок:
dotted, outset,
dashed, solid,
inset, ridge,
groove, dooble.
 
<div style ="border-style:  dashed;
border-color: #ff0000">...</div>
с параметрами
 
Цвет: border-color,
толщина: border-width
(thin, medium и thick,
или числовое
значение в пикселах).
 
<span style="border:2px solid red;
padding:3px;">
<span style="color:blue;"
>...</span></span>
 Синий текст

в красной рамке

 
Заготовка.
 
<span style="
background-color:dodgerblue;
color:white; padding:3px;
border:3px solid red;"
>...</span>
 Что-то написано 
Заготовка.
 
<span style=border-style:
dashed; border-top-color:blue;
border-bottom-color:red;
padding:5px;>...</span></p>
 Пунктирная рамка 
Заготовка.
 
<span style="border-style: double;
padding:3px;">...</span>
 Текст в

двойной рамке

 
Заготовка.
 
<span style="border-style: double;
color: green; padding:3px;">
<span style="color:blue;"

>...</span></span>
 Цветной текст

в двойной

цветной рамке

 
Заготовка.
 
<div style="border-right: #000080
1px solid; padding-right: 4px;
border-top: #000080
1px solid; padding-left: 3px;
font-size: 92%;
padding-bottom: 4px;
border-left: #000080 1px solid;
color: #000080; padding-top: 2px;
border-bottom: #000080
1px solid; background-color: #f0f0ff"
>...</div>
Тут пишем текст
 
Заготовка.
 
<span style="border-width:thick;
border-style:groove; padding:4px;
border-color:#FF5730"
>...</span>
 В цветной

3D-рамке


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

Устали слушать про теги, стили и прочие скучные вещи? В голове туман, в животе обман… Идите-ка лучше смотреть оригинальные рецепты с фото, чтобы приготовить себе что-нибудь вкусненькое!

Как видите. все получилось! 🙂

Работа для авторов и вебмастеров на бирже фриланса Kwork
Умеешь писать и хочешь зарабатывать on-line? Регистрируйся на Copylancer, пиши на TurboText!
Метки: , ,
Налог на файлы
Предыдущая запись
Фотоаппарат из шоколада
Следующая запись

Обсуждение: 17 комментариев

  1. Татьяна:
    в

    Интересненько, особенно для чайников вроде меня. Сейчас просто в закладки Мазиллы поставлю этот пост, чтобы всегда под рукой были линии, абзацы, рамочки…
    Мне всегда хотелось освоить эту премудрость, но времени не хватает катастрофически. А тут такая шпаргалка! Спасибо!!!

    Ответить
    1. emanno:
      в

      Татьяна, а я не пожалел времени и скомпоновал все это на своем блоге. Честно говоря, чтобы самому не лазить по этим закладкам :). Вечно я их забываю!

      Ответить
  2. Перспективный блоггер:
    в

    Мда… И вправду не хило! Даже меня как верстальщика с серьезным стажем такая подборочка впечатлила 🙂 Ну, а если все же появится желание таки выучить далеко не такое большое количество тегов html, то однозначно посоветую вам htmlbook.ru. Не только теги выучить можно, но и верстать с нуля научиться. Один из самых полезных ресурсов на эту тему в Рунете вообще, по сути заменяет любую современную книгу по html/css/js

    Ответить
    1. emanno:
      в

      Хех, спасибо за наводочку, дружище! И кстати за все развернутые комменты. Пойду таперича и у тебя полазаю хорошенько 🙂

      Ответить
  3. vikeshka:
    в

    О, это просто супер! Спасибо огромное за такую подборочку!

    Ответить
    1. emanno:
      в

      Пожалуйста! приятно, что труд был не напрасен! 🙂

      Ответить
  4. Alexred:
    в

    Мигающий текст — это что-то новое!

    Ответить
  5. Kushrum:
    в

    По правде, найти такое, как вы говорите, простое решение, несложной проблемы — способны далеко не все блоггеры 🙂

    Ответить
  6. Inzbruk:
    в

    Супер! Многих тегов не знал и не догадывался об их существовании. Буду время от времени забегать на эту страничку. Отличнейшая шпаргалка!

    Ответить
  7. Adiko:
    в

    Это всё, конечно, хорошо, и главное, очень похвально, что Вы не поленились и собрали всё в одном месте. Но единственное: стили всё же лучше через css делать.

    Ответить
    1. emanno:
      в

      Adiko, полностью согласен. Если хорошо знаешь css :). Я выложил специально для себя и таких же олухов 🙂

      Ответить
  8. devastation:
    в

    Тег это для просто жирного выделения. Важные участки лучше выделять с помощью

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

    Лучше добавлять class=»имя» или id=»имя», а стили записать в отдельном файле.

    Тогда правка будет занимать секунды для всего документа.

    Это также относиться для div и span.

    Ответить
  9. devastation:
    в

    Автор порезало все html теги.

    Вначале были b и strong

    Ответить
  10. Puma:
    в

    Кладезь! Все в одном.

    Ответить
    1. emanno:
      в

      Получайте свое дофоллоу 🙂

      Ответить
  11. Vedro_Okunei:
    в

    Ага очень удобно, когда сразу все здесь. В закладки поставлю)))

    Ответить
  12. Макс:
    в

    Спасибо, очень пригодилось +100500… ))))))

    Ответить

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

Ваш e-mail не будет опубликован.

Списки
Рубрики
Страницы
© 2020 Мир Эманно ·  Дизайн и техподдержка: Goodwinpress.ru