Здравствуйте, дорогие друзья!

Приступаем к изучению CSS.

Сразу скажу, что рассказывать я буду не о CSS в общем, а исходя из того, что у вас уже есть шаблон блога со всеми необходимыми файлами стилей CSS (style.css и может быть с другими файлами с расширением .css). И наша цель – внести небольшие изменения в них.

А если вы хотите серьезно изучить CSS на профессиональном уровне, то вам сюда: http://www.htmlbook.ru/

Если вы зайдете в админпанель блога и перейдете к: Внешний вид – Редактор, то вы должны увидеть сразу текст основного файла стилей для вашего блога, например  style.css. Если вы видите какой-то другой файл, то справа найдите файл стилей и откройте его (как это делать, смотрите в видеоуроках Как изменить цвет в шаблоне блога и А что там внутри?)

Файл стилей CSS состоит из записей примерно такого вида:

То, что выделено красным цветом, называется селекторы, а синим – блок объявлений. Эта парочка – селекторы и объявления – составляют правила таблицы стилей.

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

Имена записываются в фалах содержания блога (php), таким образом:

<div id =”header”>

Или:

<h2 class =”right”>

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

Вернемся к примеру файла CSS. В нем в первых двух правилах в качестве селектора выступают теги img (картинка) и  a (ссылка).

А в двух последних как раз и используются имена каких-то элементов. Если селектор записан с точкой в начале (.right), то имя этого элемента задавалось словом class, а если перед селектором стоит # (#header), то использовался id.

В одном правиле может использоваться несколько селекторов:

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

Марина Макарова

Если вам помогла эта статья, то будет справедливо
если вы разместите ссылку на нее у себя на блоге :)

Читайте еще по этой теме:

• Свойства CSS, отвечающие за цвет элемента (5)
• Рамки в CSS (0)
• Отступы и поля в CSS (3)
• Как изменить шрифт в блоге (6)
• Как задаются значения цвета в CSS (0)