Совсем недавно занялась разборками с
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.
За сим прощаюсь и желаю творческих успехов во всех ваших начинаниях :)
Внутри каждого из нас живет ребенок, который так и просит, так и пищит: «нууу дааай конфетку». Не отказывайте себе в такой мелочи, как долька шоколада :)
