Вам к CSS и HTML какой соус подавать?

Совсем недавно занялась разборками с CSS, а на десерт оставила PHP (только этот десерт я съедать не торолюсь :). Собснно, что могу сказать, как новичек в этом деле: CSS штука интересная и полезная. Вообще, забавно, как из набора буковок и значков получаются Сайты. Удивительно.

Немного теории. CSS это ни что иное, как Cascading Style Sheets (каскадные таблицы стилей). Каскадная модель подразумевает под собой последовательный алгоритм выполнения поставленных задач (на сколько я помню из курса информационных технологий), т.е. действия выполняются последовательно, одно за другим.

Технология CSS позволяет задавать внешнее офомление веб-страницы: какого цвета будут заголовки, ссылки, где они будут расположены на странице; разделять документ на блоки и т.д. Больше объяснять не буду, т.к. считаю, что много теории на этапе знакомства не надо. Достаточно поискать и скачать любой шаблон сайта, открыть файл *.css и покопаться в нем.

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

Для начала нам необходим рабочий материал, который можно найти на популярном ресурсе Layout Gala, который предлагает 40 каркасов для сайтов. Вы можете ознакомиться с каждым из 40 примеров и скачать либо по одному, либо все в одном архиве (single zip file). Готовые сайты вы можете взять у 1stwebdesigner. Можно посмотреть, какие атрибуты к чему прикручиваются и для чего применяются. Конечно, вы ничего не поймете, но в последствии, при чтении «объяснялок», хотя бы будут встречаться знакомые слова. Достаточно будет соотносить уже увиденное с новой инфой.

Например, из записи
body {
font: .75em "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
background: #fff;
color: #333;
}
мы явно можем понять, что она задает шрифт (font), цвет фона (background) и цвет текста (color) документа в целом.

Теперь, когда у вас в голове полно непонятных словечек и закорючек, типа a, hover, background, color, text-decoration, border-bottom, margin и т.д., пришло время узнать побольше о синтаксисе, классах, селекторах SCC, и еще о многом другом. В этом поможет htmlbook Влада Мержевича. В первую очередь, я советую посетить разделы CSS по шагам, Основы CSS и Рецепты CSS. В общем, этой информации должно хватить для понимания CSS.

И, гляда на предыдущий пример,
body {
font: .75em "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
background: #fff;
color: #333;
}
вы уже точно понимаете, что body выступает селектором (который задает оформление «тела» документа), font, background и color — это свойства селектора. Записи после двоеточия — значения каждого свойства. Запись типа
Селектор { свойство1: значение; свойство2: значение; ... } выступает в качестве базового синтаксиса. Т.е. именно так и должны быть оформлены все теги.

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

И в дополнение, 36 eye-catching меню (осторожно! Глаза и правда начинают выпадывать :))), 30 интересных приемов с ипользованием CSS, а так же вы найдете полезные уроки на WebDesignerWall.

За сим прощаюсь и желаю творческих успехов во всех ваших начинаниях :)