Сегодня: 18 апреля 2024 г., четверг Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 9. Элементы "span" и "div". Учимся группировать элементы сайта

Элементы <span> и <div> - важная часть CSS, поэтому им посвящен отдельный урок.

Они отвечают за структурирование html-документа и применяются совместно с "class" и "id", либо самостоятельно.

Сами по себе элементы HTML-кода <span> и <div> ничего не дают документу, однако в сочетании с CSS они могут кардинально менять вид отдельных участков текста или заголовка.

Рассмотрим пример. У нас есть заголовок:

<h1>Все цвета радуги</h1>

Давайте расцветим его с помощью элементов <span>:

<h1> Все <span class="red">ц</span><span class="orange">в</span><span class="yellow">е</span><span class="green">т</span><span class="blue">а</span> радуги</h1>

И вот что мы видим в итоге:

Все цвета радуги

Немного громоздкая конструкция, не правда ли? Однако это же вам не текстовый редактор – каждый отдельный элемент сайта требует кодирования. Кроме того, если вы делаете сайт в программе с визуальным редактором, например, в Adobe Dreamweaver, то все это писать вам не понадобится – вы только выделяете каждую букву соответствующим ей цветом (как в Word’е, например), а программа сама прописывает код.

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

Вот большой, но очень наглядный пример такого блока. Он взят из кода сайта, который я делал для своих друзей:

Код HTML-документа:

<div class="post">
<h1>Старинная голландская мебель из массива дуба</h1>
<p align="justify"> <a href="furniture.php"><img src="images/furniture/dresser_icon.jpg" width="98" height="130" alt="Голландская мебель" class="float-left" /></a> Если вы не хотите быть "как все", если вам чужда безвкусица массового ширпотреба, если ваш стиль - индивидуальность, советуем обратить внимание на голландскую мебель прошлого века из массива мореного дуба, которую мы привозим и реставрируем для вас. Она наполнит ваш дом старинным уютом, качеством тех времен, когда еще не умели делать плохо и неповторимой аурой натурального дуба. </p>
<p align="justify">Кроме мебели вы найдете у нас люстры, напольные часы и предметы интерьера, которые по своей ценности не уступают антиквариату, а стоят намного дешевле!</p>
<p align="right"><a href="gallery.php">Фотогалерея мебели</a></p>
</div>

Код в таблице стилей:

.post {
margin: 0; padding: 0;
background: #FFF url(gradientbg.jpg) repeat-x;
border: 1px solid #EFEDED;
}

Подобным образом сделаны и другие блоки сайта, они также выделены элементами <div>.

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментариев к этому уроку пока нет

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.