Это моя старая статья, но я уверена, что она еще вполне полезна и много кому пригодится.
Кому-то, может быть, это будет неинтересно - но может, кому-то будет полезно...
________
Значит, так. Каскадные листы стилей (CSS) бывают двух видов: внешние и внутренние. То, о чем мы говорили до этого - это внешние (они даже расположены в отдельности от всего остального). А что же тогда внутренние?
Строятся они так же:
элемент {атрибут: значение;}
Их отличие от внешних в том, что они как бы встраиваются в Html код. Вообще на сайтах (не на форумах, на сайтах) такие кодики записываются между тегами <head> и </head>. Но, поскольку на форумах mybb и их партнеров нет возможности редактировать код страниц, то на форумах все это дело вставляется в html-верх. Да, именно в HTML-верх!
А что же делают эти "внутренние" CSS? То же самое, что и те, которые нам привычны. Однако, так ли незнакомы нам внутренние листы стилей? Кто новичок в этом деле, но уже брал коды дизайнов, наверняка замечал вот что: у каких-то дизайнеров только два кода (Структура CSS и Цвета CSS), а у кого-то есть еще и коды в HTML-верх и в HTML-низ. Почему так? В HTML-низ вставляют обычно копирайты (я уже повторяюсь), либо специальную кнопку баннеров. А вот в HTML-верх вставляются как раз они, CSS. Надеюсь, я вас не запутала окончательно 
__________
Давайте что ли к практике перейдем?
CSS "внедряется" в HTML код вот таким образом:
<style>коды, коды, коды...</style>
Зеленым выделен как бы еще один тег HTML. Его придумали как раз затем, чтобы можно было вставлять CSS в HTML. Ведь HTML и CSS - совершенно разные языки! Вместо "коды, коды..." должны быть "закорючки", построенные в образце чуть выше (атрибут, значение, элемент...). Вот, например, самое простое:
<style>b {color:red;}</style>
Что это значит? Светло-зеленым выделено: "b". Это так называемый элемент. То есть всё на форуме, что выделено жирным шрифтом (<b>,</b>) попадает под эту категорию и со всем вот этим, выделенным жирным, будут проводится какие-то операции. В нашем примере: розовым - color - это атрибут, red - это его значение. Значит, все, что выделено жирным шрифтом, будет красного цвета. Это помогает меньше "пихать" на страничку HTML-тегов, ведь так намного быстрее, согласитесь. Вот, есть скрины по поводу этого примера:
Многие делают стили, но не могут толком разобраться во всех этих кодах. Я расскажу немножко секретиков, если администрация будет не против
Во-первых, давайте посмотрим на начало кода Структуры CSS:
/*Здесь можно поставить копирайт*/
Что же это за кодик-то такой? Это называется комментарий, такие есть почти и в Html, просто они по-другому оформляются. Они нужны только для автора стиля, чтобы он мог делать какие-либо пометки в коде лично для себя. Например, описать, что значит то или иное свойство, описанное ниже. Причем эти комментарии никак не видны при просмотре страницы. Видимо, кто-то один раз приспособил комментарии для того, чтобы подписывать автора стиля. Ну что ж, это, конечно, очень хорошо, но, по-моему, толку от этого нет. Если убрать эту часть кода, в стиле ничего не изменится. Чаще всего авторы делают красочные копирайты в картинках и ставят их в Html-низ или в специальный контейнер:
#pun-title .title-logo span {display: none;}
#pun-title .title-logo {background-image : url(код картинки);
Однако, этот контейнер содержится в Цветах CSS - вероятно, поэтому мы ставим копирайты еще и в структуру, ведь структуру тоже надо составить
Как уже говорилось во всех статьях на этом форуме, все коды Структуры CSS заняты лишь тем, чтобы настроить весь форум, а графика (то есть изображения и цвета) "вставляется" в стиль только в Цветах CSS. В моей темке поговорим о Цветах - потому что Структура хоть и больше, но чем-то даже попроще, о ней мы будем говорить чуть позже.
Давайте рассматривать строчки кода:
/* CS1 Background and text colours
-------------------------------------------------------------*/
Легко можно перевести - здесь будет о фонах и цветах.
Если брать код посложнее (более интересный и качественный), то получится вот что:
body {
background-color:#9ea6ab;
background-image: url(ссылка на изображение);
background-attachment: fixed;
background-repeat: fixed;
background-attachment: fixed;
background-position: top center;}
Зеленым - здесь должна быть размещена ссылка на фоновое изображения для форума. Если в этом месте будет пусто или нет ссылки (например, написан текст, как у меня в примере), то фон будет просто белым. Но в нашем случае фон окажется того цвета, какой указан в строчке выше (выделено синим). Да, и кстати, вместо Background-color поставьте вот это:
background-image:url(ссылка на картинку)
Кстати, хочу сказать вот что: если вы планируете взять как фон обычный квадратный "кусочек" картинки (ну то есть, что он будет "размножаться" по форуму), то лучше подобрать такой, чтобы не видно было никаких границ (будет смотреться намного ровней и аккуратней) и чтобы кусочек был небольшой (50-100 пикселей - норм).
А вообще, если говорить о цветах, то я пользуюсь палитрой цветов. Она очень помогает, ведь нужно вводить специальные коды цветов. Лично мне помогает эта палитра: Таблица Цветов Огнегривки.
Разберем остатки этой части, чтоб не мучиться. Ярко салатовым выделен еще одно значение. Если хотите, чтобы изображение было на одном месте - оставьте всё как есть.
Светло-серым выделено другое значение. Переводится как позиция заднего фона, так что у нас стоит top center, в стандартных стилях так и стоит. Если стоит такое значение, то фон просто будет идти как он есть.