Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » HTML » Учебник HTML для начинающих. Блочная верстка

Учебник HTML для начинающих. Блочная верстка
Раздел: Создание сайта » HTML  
14 июня 2009   |   автор: admin Оставить комментарий



 

Урок 14 Оптимизация кода HTML с помощью CSS

 

Создание шаблона страницы имеет еще одну важную особенность. Дело в том, что блоки наследуют свойства других блоков, в которые они входят, а элементы отдельного блока наследуют свойства самого блока. Это своеобразная иерархия. В нашем случае она выглядит следующим образом:

 

Учебник HTML для начинающих. Блочная верстка

 

 

Следовательно, если мы хотим, что бы на всем нашем сайте использовался шрифт Arial с размером в 12px, то нам следует указать данный атрибут лишь единожды и применить его к тэгу «body».

 

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

 

Такая иерархия позволяет сократить количество кода HTML, за счет использования возможностей таблицы стилей CSS.

 

Разберемся на примере.

 

В нашем шаблоне для блока с контентом мы дважды использовали тэг

. При этом каждый раз указывая для него определенный класс стиля.

 

</p>
<p><div id="content"><br /><p class="nazvanie_bloka"></p></p>
<p><p class="text"></p><br /></div></p>

 

 

Мы можем сократить количество кода, если в первом случае вместо тэга параграфа с классам стиля

поставим тэг заголовка

. А во втором уберем класс вовсе. Получим -

. В итоге наш код приобретет следующий вид:

 

</p>
<p><div id="content"><br /><h1></h1></p>
<p><p></p><br /></div></p>

 

После этого перейдем к таблице стилей. Здесь, первым делом, в самом начале документа установим следующие атрибуты:

 

* {<br />border:0;<br />margin:0;<br />padding:0;<br />}

 

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

 

Затем укажем атрибуты, которые будут относиться к документу в целом:

 

html, body {<br /> height: 100%;<br /> margin: 0px;<br /> padding: 0px;<br /> background-color: #fff;<br /> font-family:Verdana, Arial, Helvetica, sans-serif;<br /> font-size:12px;<br />}

 

По высоте (height) наш документ будет занимать 100%. Никаких полей (margin) и отступов (padding) у него не предусмотрено (это относительно окна браузера). Цвет фона белый.

 

Дальше семейство шрифтов и его размер.

 

Согласно с принципом наследования данные свойства будут применены для всех последующих элементов.

 

Тут же можно указать атрибуты для отдельных элементов сайта. Например:

 

h1, h2, h3, h4, h5, h6 {<br /> color: #FF6666;<br /> text-align: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br />}


Такая запись означает, что все заголовки в нашем документе будут иметь красный оттенок и располагаться по центру блока с отступами 10px сверху и снизу.

 

Если возникнет необходимость изменить атрибуты заголовка для отдельного блока, то, в таблице стилей, следует указать идентификатор этого блока вместе с тегом заголовка, а затем применить к ним определенные атрибуты.

 

Пример:

 

Изменяем код:

 

</p>
<p><div id="leftside"><h1>Левая колонка</h1></div></p>
<p><div id="rightside"><h1>Правая колонка</h1></div></p>

 

 

 

Изменяем стиль:

 

#leftside h1, h2, h3, h4, h5, h6 {<br /> color: #FFFF00;<br /> padding: 0;<br />}

 

Аналогично поступаем с атрибутами параграфа нашего центрального блока:

 

#content p {<br /> text-align: justify;<br /> padding: 10px;<br />}

 

Результат в браузере:

 

Учебник HTML для начинающих. Блочная верстка

 

 

 

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

 

Текст параграфа аккуратно разместился по всей ширине блока (text-align: justify;) и имеет отступы в 10px (padding: 10px;) со всех сторон.

 

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

 

 

Полный код HTML нашего шаблона:

 

</p>
<p style="text-align: left"></html></p>
<p style="text-align: left"><head><br /><title>Шаблон из трех колонок</title><br /><link rel="stylesheet" type="text/css" href="style.css" /><br /></head></p>
<p style="text-align: left"><body></p>
<p style="text-align: left"><div id="container"></p>
<p style="text-align: left"><div id="header"><h1>Шапка сайта</h1></div><br /> <br /> <div id="leftside"><h1>Левая колонка</h1></div><br /> <br /> <div id="rightside"><h1>Правая колонка</h1></div><br /> <br /> <div id="content"><br /> <h1>Контент</h1><br /> <p>Приступая к созданию собственного сайта начинающий веб-мастер как правило оказывается погребен под лавиной новой информации. Он сталкивается с множеством неизвестных доселе понятий, специфических терминов и различных направлений. Каждая новая ссылка ведет на очередной ресурс, а там, то идет речь о HTML, то о раскрутке проекта. Но чаще о том, как заработать в сети.</p><br /> </div><br /> <br /> <div id="clear"></div><br /> <div id="footer"><h1>Подвал сайта</h1></div><br /></div></p>
<p style="text-align: left"><br /></body><br /></html></p>

 

 

 

 

 

 

Итоговая таблица стилей CSS:


</p>
<p style="text-align: left">* {<br />border:0;<br />margin:0;<br />padding:0;<br />}</p>
<p style="text-align: left">html, body {<br /> height: 100%;<br /> margin: 0px;<br /> padding: 0px;<br /> background-color: #fff;<br /> font-family:Verdana, Arial, Helvetica, sans-serif;<br /> font-size:12px;<br />}</p>
<p style="text-align: left">h1, h2, h3, h4, h5, h6 {<br /> color: #FF6666;<br /> text-align: center;<br /> padding-top: 10px;<br /> padding-bottom: 10px;<br />}</p>
<p style="text-align: left">#container {<br /> width:960px;<br /> margin: 0 auto;<br /> border:solid #CCCCCC 1px;<br />}</p>
<p style="text-align: left">#header {<br /> height: 100px;<br /> width: 900px;<br /> background-color: #FF0000;<br /> margin: 10px auto;<br />}</p>
<p style="text-align: left">#leftside {<br /> background-color: #0000FF;<br /> width: 200px;<br /> float: left;<br /> margin-left: 30px;<br />}</p>
<p style="text-align: left">#leftside h1, h2, h3, h4, h5, h6 {<br /> color: #FFFF00;<br /> padding: 0;<br />}</p>
<p style="text-align: left">#rightside {<br /> background-color: #0000FF;<br /> width: 200px;<br /> float: right;<br /> margin-right: 30px;<br />}</p>
<p style="text-align: left">#content {<br /> background-color: #CCFFCC;<br /> width: 450px;    <br /> float: left;<br /> margin-left: 25px;<br />}</p>
<p style="text-align: left">#content p {<br /> text-align: justify;<br /> padding: 10px;<br />}</p>
<p style="text-align: left">#clear {<br /> clear: both;<br />}</p>
<p style="text-align: left">#footer {<br /> height: 50px;<br /> width: 900px;<br /> background-color: #FF0000;<br /> margin: 10px auto;<br />}</p>

 

 

 

Далее... Урок 15. Вставляем изображение

 

 

 

Вернуться к Оглавлению 

 


Ключевые теги: Учебник HTML, Блоки, div, блочная верстка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Назад 1 2 3 4 5 6 7 8 9 10 ... 2185 Далее
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код