Допустим вам нужно выделить какое-нибудь отдельное слово в тексте (предположим другим цветом и фоном), или чтобы картинка и текст, относящийся к ней, были сверху и справа в ячейке таблицы, а основное содержимое страницы, допустим в низу и ближе к левому краю. По поводу первого примера скажу, что можно это сделать тегом <font> с набором нужных параметров, но он относится к запрещенным тегам (новые браузеры его могут не поддерживать), да и свойства замены фона у него нет.
Для подобных случаев и предусмотрены два специфических тега, которые по сути ничего не делают сами по себе. Но при применении нужных стилей к ним, можно добиться чего угодно. Можно вообще используя только два этих тега и применяя к ним стили, сделать всю страницу сайта.
И так, это теги <div></div> и <span></span>.
Какая между ними разница, если используются они для одного и того же?
<div></div> — это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).
<span></span> — это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).
Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.
Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к <div></div>) .
Первое с чего хотелось бы начать это с позиционирования элементов.
Это свойство:
position — устанавливает или определяет позицию элемента.
Значения:
static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.
absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.
left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.
Значения:
x – число в процентах или пикселях.
auto — значение по умолчанию.
Рассмотрим пример:
<div style="position: relative; top:350px; left:200px; width:300px;"> Любое содержимое блока!!!</div>
Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и влево на 200px, относительно того места, в котором он появится по умолчанию.
Следующее важное свойство:
margin – величина отступа от нашего блока до соседних объектов с четырех сторон.
Значения:
margin-top — задает величину верхнего отступа объекта
margin-left — задает величину левого отступа объекта
margin-right — задает величину правого отступа объекта
margin-bottom — задает величину нижнего отступа объекта
Пример:
<div style="margin-top:30px; margin-left:30px; margin-bottom:30px; margin-right:30px;"> Любое содержимое блока!!!</div>
Мы создали блок с отступами вокруг него по 30px от всех его сторон.
Над чем хотелось бы остановиться еще:
padding – свойство задает величину пространства, вставляемого между объектом и его границами.
Значения:
padding-bottom — задает величину пространства, вставляемого между объектом его нижней границей.
padding-left — задает величину пространства, вставляемого между объектом его левой границей.
padding-right – задает величину пространства, вставляемого между объектом его правой границей.
padding-top – задает величину пространства, вставляемого между объектом его верхней границей.
Пример:
<div style="padding-bottom:30px; padding-left:30px; padding-right:30px; padding-top:30px;"> Любое содержимое блока!!!</div>
Мы создали блок с отступами по 30px от содержимого до всех его сторон.
И рассмотрим пример с использованием тэга <span></span>:
Допустим, у нас есть конструкция вида:
Любой текст !
Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тег <span></span> и применим соответствующие стили.
Любой <span style="background-color:#FFFF66; color:#000066;">текст</span>! <p></code></p>
Любой текст!
Еще раз повторюсь, что все рассмотренные стили применимы не только к рассмотренным двум тэгам, но и ко всем нами известным тэгам!
На этом мы сегодня закончим, и напоминаю Вам, что Вы можете, для лучшей проработки, скачать видео-версию урока:
Любой текст!
С Вами был Бернацкий Андрей!