Тeги «div» и «span»

Здравствуйте уважаемые начинающие веб-мастера.

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

Но, при их помощи, можно создавать контейнеры, на которые потом очень удобно воздействовать средствами CSS.

Их можно делать видимыми и не видимыми, можно задавать им рамки и размещать в различных частях экрана.

Вы это поймёте на практике, а пока запомним следующее: <div></div> – это блочный элемент, и внутри него могут заключаться любые другие элементы, и он всегда начинается с новой строки.

А <span></span> – это встроенный элемент, и внутри его может размещаться только текст, или ещё встроенный элемент, и расположить его можно в любой части текста.

Одним из замечательных свойств тега <div&gt, является то, что его можно располагать внутри другого дива,хоть он и блочный элемент.

Именно благодаря этой особенности, и создаётся блочный каркас сайта.

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

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="sidebar1"></div>
        <div id="blok">
            <div class="sidebar2">
                <div class="dva"></div>
                <div class="dva1"></div>
                <div class="dva2"></div>
            </div>
            <div class="sidebar3">
                <div class="tri"></div>
                <div class="tri1"></div>
                <div class="tri2"></div>
            </div>
        </div>
    <div id="content"></div>
    <div id="footer"></div>
</div>
</body>
</html>

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

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

В примере показано, что блоку с идентификатором (id) wrapper заданы ширина, временная рамка, внутренние и внешние отступы, и позиционирование.

#wrapper{
  width: 900px;
  outline: 1px solid #787274;
  padding: 10px;
  margin: 0 auto;
  position:relative;
}

Тег <span></span> в основном применяется для выделения каких либо частей текста, путём подключения к нему встроенных стилей.

В примере показано, как при помощи тега <span>, можно покрасить слово head в синий цвет.

Тег<span style="color: #0000ff;"><head></span> — голова документа

Тег<head> — голова документа

К цвету можно добавить размер, вид шрифта, и так далее.

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

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Постоялец — хозяйке отеля:
— А что это за странное пятно на потолке у меня в комнате?
— Понимаете, до вас тут жил один химик. . .
— Это пятно от химикатов?
— Нет, от химика.

Подключение таблиц стилей < < < В раздел > > > Селекторы CSS

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *