1. 
   Юзабилити. Существенно сокращается объём кода сайта. Чем больше код
   страницы, тем медленнее она загружается. Сайт начинает быстрее
   загружаться, если при его создании использовались CSS таблицы.
   
2. 
   Современность. Часто случается, что одну и ту же услугу предлагают
   несколько компаний. И тогда покупатель начинает сравнивать ваш сайт с
   сайтами конкурентов. И побеждает сайт, который качественней оформлен.
   Это не значит, что сайт, который оформлен проще, чем сайт конкурента
   хуже. Главное, чтобы он выглядел современно и аккуратно.
   
3. Доступность. Сайты, сделанные при помощи табличной вёрстки, не корректно отображаются на портативных устройствах.
   
4. 
   Поисковая оптимизация. Раньше уже отмечалось, что при использовании CSS
   при разработке дизайна сайтов существенно сокращается их код. В этом
   случае ещё одним плюсом становиться то, что плотность ключевых слов к
   коду заметно увеличивается. А это в свою очередь улучшает позиции сайта
   в поисковой выдаче. Поисковики видят больше ключевых слов и очень мало
   кода, и это хорошо.
   

Для того, чтобы ответить на заданный выше вопрос о каскадировании, сначала
надо определиться с тем, как те или иные стили настраиваются для применения к
тем или иным элементам.

Стили описываются следующим образом:

элемент {параметр: значение;}

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

Самый простой способ настроить внешний вид документа - это задать стиль
отображения для требуемых тегов HTML. Например, если мы хотим каждый параграф
вывести зеленым цветом и размером в 12 пикселей, то в описании стилей можно
написать:

P {
color: #00FF00;
font-size: 12px;
}

Способ работает хорошо, но часто возникает необходимость отдельные абзацы
как-то выделить. Для этого можно использовать классы и/или идентификаторы. По
большому счету разница между ними только в том, что идентификатор относится к
какому-то одному элементу (и, кстати, по стандарту все идентификаторы в
документе должны быть уникальными, но на это часто не обращают внимания - все
браузеры успешно работают с неуникальными идентификаторами), а класс может
применяться к группе элементов (в том числе и разнородных).

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

P#redelement {
color: #FF0000;
font-size:
12px;
}

а в документе указать: <p ID="redelement">

Если же предполагается, что красных абзацев будет несколько, то правильнее
будет использовать класс (обратите внимание, что идентификатор отделяется
"диезом", а класс - точкой):

P.redelement {color: #FF0000; font-size: 12px; } 

а в документе:
<p class="redelement">

В таблице стилей можно описать и класс, не привязанный к какому-то
элементу:

.redelement {color: #FF0000; font-size: 12px; }

Такой класс
может быть применен не только к параграфу, но и, например, к ячейке таблицы,
тегу FONT или еще чему-то - достаточно в документе указать, например, <FONT
CLASS="redelement">.

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

H1, H2, H3, H4, H5, H6 {font-size: 20px;}

Однако значительно более полезным бывает описание стиля вложенных элементов.
Например, вам может захотеться, чтобы все теги SMALL, которые находятся внутри
абзаца выделялись красным цветом, а те, которые не в абзаце (а, например, в
ячейке таблицы) сохраняли свою естественную окраску. Для этого достаточно
указать требуемые элементы через пробел:

P SMALL {color: #FF0000;}

Такое
объявление будет относиться только к элементам SMALL, расположенным
внутри P. Уровень вложенности может быть любой, но больше трех уровней
применяется редко - слишком запутанной получается картина. Разумеется, такого же
эффекта можно добиться просто создав отдельный класс и описав все вложенные
SMALL с этим классом, но если подобная конструкция повторяется часто, то
использование вложенности более удобно и позволяет сократить размер документа.
Кстати, "вкладывать" можно не только теги HTML, но и классы.

Для удобства пользователей в CSS есть еще несколько встроенных
псевдоэлементов и псевдоклассов. Например, можно указать стиль для
псевдоэлемента first-letter, который изменит вид первой буквы каждого абзаца. А
псевдоклассы очень часто используются для работы со ссылками. Например,
описание:

A:link {text-decoration: none;}
A:visited {text-decoration:
none;}
A:active {text-decoration: none;}
A:hover

Страшно подумать, но в июле этого года исполнилось всего 10 лет стандарту HTML
1.0 (который, кстати, так никогда и не был "официально" принят и остался в виде
черновика для "внутреннего употребления"). За эти 10 лет HTML прошел очень
большой путь, завоевал практически все компьютеры в мире и стал одним из самых
известных "компьютерных языков" (все-таки отнести его к языкам программирования
рука не поднимается)... И одним из весьма заметных этапов развития HTML стало
появление CSS - Cascading Style Sheets или, говоря по-русски, каскадных таблиц
стилей.

Идея CSS очень проста. Если в HTML вы прямо в документе ставили указание на
то, как должен выглядеть тот или иной элемент, то при использовании CSS такие
указания выносятся в отдельный блок (который может либо включаться в документ,
либо читаться из внешнего файла).

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

Первая версия CSS - CSS
level 1 - принятая в 1996 и пересмотренная в 1999 году, позволяла
оперировать только цветами, шрифтами, отступами и им подобными относительно
простыми и частоиспользуемыми элементами. Принятая в 1998 году, спецификация CSS level 2 добавила
возможность абсолютного позиционирования элементов, создания стилей для разных
типов устройств, использования собственных курсоров, расширила возможности по
выбору элементов, к которым должен применяться тот или иной стиль и многое
другое. Естественно, что CSS level 2 поддерживает и таблицы стилей, созданные в
CSS level 1. В настоящее время консорциум W3C активно ведет разработку стандарта CSS level 3 и
CSS level 2 revision 1,
которые должны учесть все возрастающие потребности вебмастеров и вебдизайнеров,
по созданию современных и удобных сайтов.

Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют
визуальное представление документа от его содержания - они только позволяет
более компактно описать правила визуального представления. И если вы захотите
изменить дизайн сайта, то вам все-равно придется переписывать HTML код (правда,
сделать это будет проще чем при отсутствии CSS). Значительно больший уровень
абстракции можно получить, используя связку языков XML + XSL (из которых, в
частности, можно генерировать HTML + CSS), но это намного сложнее, и несколько
выпадает из темы данной статьи.

Но хватит теории! Давайте попробуем практикой заняться...

Есть три способа описать стиль элемента в HTML документе. Самый простой и,
практически, не использующий преимуществ CSS способ - это указать стиль внутри
тега HTML. Например, написать
<H2 STYLE="COLOR: #AADDAA; FONT-WEIGHT:
BOLD; FONT-SIZE:11pt;">заголовок второго
уровня</H2>
Единственное преимущество, которое можно получить
таким образом - это задание некоторых атрибутов текста, которые не
поддерживаются тегами HTML. Зато сохраняются все недостатки HTML - указанный
стиль относится только к одному тегу и для изменения внешнего вида документа вам
придется изменить описание стиля в каждом теге.

Второй способ несколько лучше: надо описания стилей заключить внутри тегов
<STYLE TYPE="text/css"> и </STYLE>. Например, если вы
напишете
<STYLE TYPE="text/css">
H2 {COLOR: #AADDAA; FONT-WEIGHT:
BOLD; FONT-SIZE:11pt;}
</STYLE>
а в тексте документа укажете
<H2>заголовок второго уровня</H2>, то получите тот же эффект.
Однако, в отличие от предыдущего способа, свойства отображения применятся ко
всем тегам H2 в документе. И если, скажем, вам потребуется изменить размер
шрифта или цвет всех заголовков второго уровня, то изменить потребуется всего
одну строчку. Согласитесь, что это намного удобнее!

Однако, у предыдущего способа тоже есть свой недостаток: блок STYLE вам
придется скопировать в каждую страницу своего сайта. А если страниц там
несколько сотен? И вам понадобится что-то поменять? Неудобно... Но можно
победить и эту проблему - с помощью тега LINK. Описав требуемые стили в
отдельном текстовом файле (теги STYLE указывать не требуется), вы затем можете
написать в секции HEAD

1. Неправильно указан или не указан DOCTYPE. А ведь браузер на него периодически обращает внимание, и по-разному отображает различные теги в соответствии с ним.
   Решение: W3C вам в помощь.
   См. также "Почему так важен DOCTYPE"
2. Вы пользуетесь WYSIWYG-редактором
   наподобие FrontPage или другого.... Что ж... в 80% случаях, при сложной
   верстке, кроссбраузерности вам с таким подходом не видать, особенно
   если вы начинающий(не в html и css, а в FrontPage или другом вашем
   любимом визивиге).

   Решение: либо
   бросить этот редактор и работать с Source-editor`ом(простым текстовым
   редактором, ну может быть с подсветкой синтаксиса, и кнопками вставки
   определенных тегов...), как настоящие джедаи, либо долго и упорно
   изучать сам редактор(html и css знать обязательно в любом случае, хотя
   бы общие правила). Дело ваше.

3. Ваша верстка неправильная.
   Если в коде куча ошибок, что ж удивляться неправильному отображению
   страницы? Набор тегов, их вложенность, наличие или отсутствие, значение
   аттрибутов - даже мелочи играют роль.

   Решение: Проверьте
   как следует ваш html и css-код на соответствие стандартам и
   спецификации объявленной в DOCTYPE. Придется покопаться с литературой.

4. Вы использовали в своем css селекторы, которые поддерживаются не всеми браузерами.
   Хоть и пришел в нашу жизнь css2, но браузеры так и остались отсталыми.
   Один вдруг начал поддерживать одни новые фичи, другой - другие... И все
   - разные, и по-разному. Даже если ваш код правильный и абсолютно
   валидный, далеко не факт что страничка будет отображаться так как
   задумано.

   Решение: Google вам в помощь.

5. Несоответствие размеров.
   Пример: вы объявили блок шириной 150px, а внутрь него пытаетесь
   поместить блок шириной 200px, или картинку размером 180х180, даже без
   указания размеров. В результате наш блок раздвигается в ширину по
   ширине самого широкого из вложенных в него элементов, сдвигая соседние
   блоки в сторону. Если для соседнего блока на странице или в корневом
   относительно него блоке не хватает места, он падает вниз, туда где
   места больше. И получается что страница разъехалась. Если же не все
   размеры указаны явно, то вся конструкция просто раздвинется, но
   смотреться это будет все равно некрасиво, и вычислить такую ошибку не
   очень то просто.

   Решение: БУДЬТЕ БДИТЕЛЬНЫ! Программных
   способов борьбы с этим, насколько я знаю, не существует. Браузер
   считает что так все и задумано.

6. Значения по умолчанию.
   А знаете ли что браузер для каждого элемента устанавливает свои
   отступы, границы, межстрочные интервалы и прочие аттрибуты, которые вы,
   создавая страницу, возможно считаете равными нулю? Что ж, знайте. Но
   это еще не самое страшное. Каждый браузер устанавливает свои значения по умолчанию для этих аттрибутов, и по-разному их обрабатывает.

   Решение:
   Первым делом нужно сбросить значения основных аттрибутов для основных
   блочных тегов и установить свои. Причем сначала именно обнулить:

   /*style.css*/

   html, body, div, p, table, pre, td, tr, th, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, img, blockquote, iframe {

   margin: 0;

   padding: 0;

   border: 0;

   }

   Уже после чего для каждого элемента устанавливать свои значения. Трудоемко но дает ощутимый эффект!

7. Нюансы
   - прочие мелочи, которые не входят в отдельные пункты списка и
   проявляются периодически. Например знаете ли вы что если в

Подсветка ссылки

Для того, чтобы подсветить ссылку при наведении на неё курсора мышки, необходимо задать такую таблицу стилей:

<STYLE TYPE="text/css">
<!--
a:hover {color: red; mso-bidi-font-size:12pt}
-->
</STYLE>

В
этом случае все ссылки на странице при наведении на них курсора мышки
будут подсвечиваться красным цветом и перезаписываться шрифтом размером
в 12 pt.

Для того, чтобы с одной из ссылок этого не происходило,
необходимо задать для неё принудительно шрифт с помощью тега
<font> внутри ссылки, например:

<a href=#><font color=blue>Неподсвеченная ссылка</font></a>

Для
того, чтобы одна группа ссылок подсвечивалась одним цветом, другая
другим, необходимо несколько иначе написать таблицу стилей:

<style>
body a:Hover {color : red}
.group1 {text-decoration: none; font-family: arial; font-size: 8pt; color: black}
a:hover.group1 {text-decoration: none; font-family: arial, font-size: 8pt; color: blue}
.group2 {font-family: arial, font-size: 10pt; color: green}
a:hover.group2 {font-family: arial, font-size: 10pt; color: gray}
</style>

В
этом случае ссылки, для которых указан класс group1, будут отображаться
не подчеркнутыми, чёрным цветом, шрифтом Arial размером 8 pt. При
наведении мышки они станут подчёркнутыми и перекрасятся в синий цвет.

Ссылки,
для которых указан класс group2, будут подчёркнутыми и отображаться
шрифтом размера 10pt зелёным цветом. При наведении мышки они станут
серыми.

Изменение фона в таблице.

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

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

<table
id=table onMouseover="table.bgColor='red'"
onMouseOut="table.bgColor='white'" bgcolor=white
border=1><tr><td>
При наведении курсора мышки на таблицу она поменяет цвет.
</td></tr></table>

При
наведении мышки на область таблицы она изменит цвет с белого на
красный. Соответственно, когда курсор мышки вновь покинет эту область,
она вновь станет белой.

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

А вот ещё небольщой пример, который демонстрирует, как можно с помощью CSS динамически обвести таблицу контуром:

<table id=tabl1e onMouseover="table1.border='2" onMouseOut="table1.border=0'" border=0><tr><td>
<a href=#>При наведении курсора мышки на таблицу она очертится контуром;/a>
</td></tr></table>

Как
Вы можете заметить, CSS даёт достаточно немалые возможности создания
динамической страницы для последующего отображения в Internet Explorer.
Для Netscape Navigator, чтобы реализовать что-то подобное, требуется
либо использовать графические элементы, либо слои. Однако фиксация
шрифтов работает и для того и для другого броузера так же, как и
реализация не подчеркнутых ссылок, а это уже даёт неплохое поле для
деятельности.

Фиксирование шрифтов на странице с помощью таблицы стилей.

Предположим,
что Вы создали достаточно симпатичную страничку с малым количеством
графических элементов, текст у Вас расположен в таблице в две колонки.
Вы некоторое время любуетесь вашим творением, но тут приходит Ваш
приятель и погружает Вас в глубокое уныние, поставив в настройках
броузера более крупный шрифт. Вы видите, что страница приняла вид
весьма далёкий от того, что было задумано изначально. Что же делать?
Самый простой способ решения подобной задачи заключается в составлении
таблицы стилей для Вашего сайта. Эти таблицы относятся к каскадным
таблицам стилей (Cascading Style Sheets – CSS). Это означает, что при
определении стиля какого-нибудь элемента все элементы, находящиеся
внутри него, наследуют этот стиль.

Вот простейший пример таблицы стилей:

<style>
body
.text1 {text-decoration: none; font-family: arial, font-size: 10pt; font-weight : bold; color: red}
.text2 {font-family: sans-serif; font-size: 14pt; color: black;}
</style>

BODY {color: black; font-size: 14 px; font-family: Arial}

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

H2 {color: red}

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

Вы
должны были заметить, что в вышеприведенном примере имеется
противоречие. С одной стороны, мы присвоили всему тексту в документе
черный цвет, с другой - всем заголовкам присвоен красный цвет. Каким же
цветом отображать заголовок? Здесь действует принцип последовательного приоритета,
введенный в еще более ранних версиях HTML, т.е. при возникновении
конфликтных инструкций, преимущество отдается более позднему тэгу. На
примере это выглядит так:

это какой-то текст

А это заголовок

и снова текст

При
встрече с открывающим тэгом браузер обращается к таблице стилей (о том
как сделать так, чтобы браузер знал, что ему надо обращаться к таблице
стилей мы поговорим позже) и узнает, что весь текст внутри элемента
body должен быть черного цвета. Однако продолжая считывать код, браузер
наталкивается на открывающий тэг <H2>
и через таблицу стилей узнает, что весь текст внутри элемента H2 должен
отображаться красным цветом. Автоматически предыдущая команда теряет
свою силу и текст после тэга <H2> окрашивается в красный цвет. Далее появляется закрывающий тэг </H2>,
который говорит браузеру о прекращении действия инструкций элемента H2.
Тогда браузер возвращается к более ранним инструкциям элемента body и
снова начинает окрашивать весь следующий текст в черный цвет. Говоря о
последовательном приоритете, следует также упомянуть и о принципе наследования.
Этот принцип заключается в том, что элемент, не получивший собственных
атрибутов, наследует атрибуты присвоенные элементу, внутри которого
заключен неохарактеризованный элемент. Конечно же принцип наследования
распространяется только на атрибуты поддерживаемые наследующей и
наследуемой сторонами. На примере это выглядело бы так. Допустим, что в
таблице стилей у нас как и прежде есть описание элемента body BODY {color: black; font-family: Arial; bgcolor: white} но нет описания для элемента H2. Тогда при прочтении кода:

это какой-то текст

А это заголовок

и снова текст

браузер интерпритирует его следующим образом. После открывающего тэга <body> он начнет окрашивать текст в черный цвет и отображать его шрифтом Arial. Далее, столкнувшись с открывающим тэгом <H2>
и не найдя описания для данного элемента в таблице стилей, браузер
обращается к более раннему описанию элемента body и пытается применить
его описание к элементу H2. У элемента body имеется три описывающих его
атрибута: цвет шрифта, тип шрифта и цвет фона. Из этих атрибутов только
два поддерживаются элементом H2: цвет и тип шрифта. Именно их и
применит браузер к элементу H2.

Синтаксис
СSS1 позволяет присваивать один атрибут сразу нескольким элементам. Для
этого достаточно перечилить все необходимые элементы через запятую.
Выглядеть это может так:

H1, H2, H3 {color: green}

Данная
запись говорит о том, что все заголовки первого, второго и

Блочная разметка страниц средствами CSS  чаще всего применяется для
размещения блоков текста (или графики) на странице. Что-то вправо, 
что-то влево, основное в центре...

Как правило, при этом применяют кучу так называемых  «хаков»—
участков кода описания стилей, которые читаются только одним броузером
или,  наоборот, только одним броузером не читаются.

Все это понятно, когда заказчику надо что-то определенное, уже обговоренное ранее.

А если проект под себя делается?


Может, есть возможность сделать все описания стилей в одном файле не используя всяких хаков?

Кроме того— может быть стоит отказаться от стандартов, установленных табличной версткой?

1. проект свой— дизайн и размещение блоков на наше усмотрение
   
2. проект информационный,  основное— текст
   

Так... Кто сказал, что она нужна? Чего в ней полезного? Да почти
ничего... Возможно, только визуальные некие элементы. А вот как она
будет выглядеть... наше дело совершенно.

Ну, давайте три возьмем.. Для кучи... Колонка содержимого в центре, колонка меню справа, колонка новостей слева.

Ну, конечно... Адреса, копирайты, пару счетчиков...

А что там еще? А ничего... видимо...

Три колонки

Что если просто сделать? Задать ширину в процентах, спозиционировать
по абсолютному типу, правый угол тоже зафиксировать в процентах?

Например:

Получили три колонки, не зависящие ни от ширины экрана, ни от прочих мелочей :)

Теперь шапку и футер сделаем.

Делаем три блока шириной в сто  процентов, с отступами «0».

Один блок будет для шапки, один для текста, один под футер.

Итак, почти все есть... Надо только с отступами разобраться в текстовом блоке.