Contra CSS

PRO CSS

Примеры парных тегов

Тег - как контейнер

Парные теги(<тэг> </тэг>) - это контейнер, который может содержать внутри себя другие тэги (и/или текст).

<tag params="..." params="..."> содержимое контейнера </tag>

Очерёдность открытия и закрытия тегов звучит так:

"Последним открыл, первым закрыл".

То есть:

<tag_1><tag_2><tag_3>............. </tag_3></tag_2></tag_1>

а не:

<tag_1><tag_2><tag_3>............. </tag_1></tag_3></tag_2>

Тег - как элемент

Элемент страницы (картинка, кнопка,) и некоторые заголовочные теги. Не имеет парного закрывающего тега.

Данный тег будет выглядеть в HTML-коде подобным образом:

<tag params="..." params="...">

Стоит ещё добавить, что некоторые более строгие языки, такие как XHTML (переходный между HTML <-> XML) требуют закрытия непарных тегов, ставя в конце определения тега прямой слеш, предваренный пробелом:

<tag params="..." params="...“/>

Блочный элемент DIV и его смысл

Является блочным элементом и предназначен для выделения фрагмента документа с целью изменения оформления содержимого.

Как и всех блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки, то есть <br>

Обозначается данный элемент на странице так

<div> </div>

Примеры DIV
VERTICAL DIV Вертикальный

<div style="padding: 10px; background-color: #FF0000;">

Вертикальный блок №1

</div>

<div style="padding: 10px; background-color: #00FF00;">

Вертикальный блок №2

</div>

HORIZONTAL DIV горизонт.

<div style="padding: 10px; background-color: #FF0000; float:left;">

Вертикальный блок №1

</div>

<div style="padding: 10px; background-color: #00FF00;float:left;">

Вертикальный блок №2

</

TABLES

<table width="200" border="1">

 <tr>

 <td>Cell 1_1</td>

 <td>Cell 1_2</td>

 </tr>

 <tr>

 <td>Cell 2_1</td>

 <td>Cell 2_2</td>

 </tr>

</table>

Cell 1_1	Cell 1_2
Cell 2_1	Cell 2_2

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа.

•Несколько дизайнов страницы для разных устройств просмотра.

•Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл.

•Простота последующего изменения дизайна.

•Дополнительные возможности оформления.

•Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.

•Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

Дата добавления: 2015-04-23