Как работает CSS

Что такое код дизайна, откуда он берется и как работает

Что, по сути, есть изменение дизайна? Это изменение графической составляющей страницы и ее интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять удобный вид для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.

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

так выглядит форум без кодов CSS	так выглядит форум со стандартным дизайном	так выглядит форум с индивидуальным диайном

Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять, как они работают, и запомнить написание кодов (выучить синтаксис кодов).
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. Мы указываем (выбираем), что будет изменено (например: категории форума, форма ответа, поля профиля и т.п.).
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.
Например, вот так выглядит HTML код шапки mybb форума (красное - идентификаторы, синее - классы):

в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:

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

СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.

Свойства и значения пишутся парами внутри фигурных скобок ({}). Свойство и значение - неразлучная пара: не бывает такого, что указано только свойство без значения, они всегда идут вместе.
После свойства ставится двоеточие и пишется аргумент:

Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (;)

Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.

Инструменты для верстки дизайна (Firebug)
Как уже говорилось выше, селекторы нужно не зубрить и знать, а их всегда можно подглядеть в исходном коде.
Для того, чтоб исходный код было удобно просматривать, сделана масса программ, в том числе есть инструменты для просмотра исходного кода, встроенные в браузер по умолчанию. Однако, они не очень удобны, для того, чтоб щелкать html и css коды, как орешки, лучше озаботиться поиском отдельного программного обеспечения.
Программ для веб-разработчиков масса, тут каждый выбирает для себя, мне лично подошел FireBug, поэтому и добавлю сюда инструкцию по использованию (если у кого-нибудь будут рекомендации программы получше, скиньте в ЛС, предложим альтернативу).

FireBug - это плагин для браузера FireFox. Им можно абсолютно бесплатно обзавестись на firebug.ru, и если вам понравится, добровольно пожертвовать разработчикам, сколько не жалко.
после установки у вас появится возможность проанализировать код любого элемента на любой странице:



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



И HTML-код и CSS-код в панели FireBug можно редактировать. Более того, туда встроено авто-заполнение, поэтому подобрать коды с ошибками не получится.



Подробнее о том, как использовать FireBug показано в этом видео-уроке:

Теги: Уроки по дизайну, css
Дата: 12.05.2015, Просмотров: 1045, Рейтинг: 4.7 (3), Категория: Уроки по дизайну

Имя *:
Email *:
Все смайлы
Код *: