Основные теги для верстки

При вёрстке сайта с помощью слоёв самым часто используемым htmlтегом является <div>, который как раз и формирует слой на вебстранице. Он является блочным тегом. Второй тег, который используется при верстке, это строчный тег <span>. Сами по себе эти теги ничего на экране не отображают, и оформляются они стилями css.

<div>Блочный элемент</div>

<span>Строчный элемент</span>

Блочный элемент создает разрыв строки перед тегом и после него. Он образуют прямоугольную область, по ширине занимающую всю ширину вебстраницы или блокародителя, если для него не задано значение width.

Блочные элементы могут содержать внутри себя элементы любого типа. Нельзя размещать блочные элементы внутри строчных, за исключением элемента <img>. Для блочных элементов можно задавать margin и padding. Свойства width и height устанавливают ширину и высоту области содержимого элемента. Фактическая ширина элемента складывается из ширины полей (внутренних отступов), границ и внешних отступов.

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

Ширина и высота строчного элемента зависит только от его содержания, задать его размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.

Давайте вспомним, какие основные элементы html относятся к блочным, а какие к строчным.

Блочные элементы

● <h1>...</h1> ● <h2>...</h2> ● <h3>...</h3> ● <h4>...</h4> ● <h5>...</h5> ● <h6>...</h6> ● <li>…</li> ● <legend>…</legend> ● <nav>…</nav> ● <ol>…</ol>, Строчные элементы		● ● ● ● ● ● ● ● ●	<article>…</article> <aside>…</aside> <body>…</body> <blockquote>…</blockqu ote> <div>…</div> <fieldset>…</fieldset> <footer>…</footer> <form>...</form> <header>…</header>		● ● ● ● ● ●	<output>…</output> <p>…</p> <pre>…</pre> <section>…</section> <ul>…</ul> ...
● <a href=”#”>...</a> ● <i>...</i> ● <b>...</b> ● <em>...</em> ● <strong>...</strong> ● <font>...</font> ● <img> ● <input> ●...

В этом списке тег картинки <img> является замещаемым строчным элементом, т.е. при помощи замещаемых элементов указывается, что в данном месте должен быть какой-то сторонний объект, в данном случае картинка. Замещаемому элементу можно задать и ширину, и высоту, но все равно замещаемый элемент будет являться строчным.

Практика

Создание стилей для меню сайта

<ul class=”menu”> <li>Главная</li> <li><a href="catalog.html">Каталог</a></li> <li><a href="contacts.html">Контакты</a></li> </ul> <h3>Каталог</h3> <ul class=”menu”> <li>Товар 1</li> <li class=”new”>Товар 2</li> <li>Товар 3</li> </ul>

.menu li a:hover { color: #1896FF; } .menu li a:active { color: red; } .catalog.new:after { content: " new"; color: blue; }

Домашнее задание

1. При наведении на меню сайта цвет ссылок должен меняться на произвольный.

2. На всех страницах создать блок с классом “header”, содержащий:

a. логотип вашего сайта;

b. Меню сайта.

3. Создать блок с классом “footer” и разместить в него содержимое футера.

4. На странице услуги:

a. Под заголовком “Услуги” разместить таблицу, размером не меньше

2*3 (есть задание *);

b. Записать в таблицу произвольные услуги;

c. Если услуг нет, добавьте таблицу с любыми параметрами по вашему выбору.

5. *При наведении на изображения, необходимо сделать так, чтобы рамка исчезала, но сама картинка при этом не должна смещаться, т.е должна оставаться неподвижной.

6. *На странице подробное описание услуг, в каждом параграфе сделать первую букву первого слова другим шрифтом и размером.

7. * Создать таблицу размером не менее 4*5.

8. * Объединить несколько ячеек как по горизонтали, так и по вертикали.

9. * Задать высоту для верхней строки таблицы, отличную от всех остальных.

10. Задачи со * предназначены для продвинутых учеников, которым мало сделать обычное ДЗ.

Дополнительные материалы

1. Популярно о псевдоэлементах:Before и:After

2. Псевдоклассы и псевдоэлементы

3. Дополнительный материал о таблицах

4. div & span

Используемая литература

Для подготовки данного методического пособия были использованы следующие ресурсы: