FAQ Как использовать свои свойства (классы) CSS в оформлении

Администратор · Регистрация: 27.02.2009

Код в шаблоне может быть такого плана:

PHP код:



<div class="thead"></div>

thead - это класс CSS - который может иметь какие-то свойства CSS, например:

Вот так код будет выглядеть если его вставить прямо в шаблон, то есть в html документ:

PHP код:



<style>
.thead {
     background: #000;
     border:1px solid #000;
}
</style>

класс thead имеет фон черный и границу черного цвета, толщиной в 1px сплошной линией

конкретно класс thead - уже используется форумным движком по умолчанию, посмотреть это можно вот тут:
админ панель - стили и шаблоны - выбрать стиль - из выпадающего меню выбрать - Основная таблица CSS

в левом нижнем углу видим как раз название класса - .thead
фон - это свойство CSS - background: # ;
Цвет шрифта - color:# ;
Стиль шрифта - font-weight:bold; жирный
Размер шрифта - font-size:10px;
и т.д. (смотрим учебник по CSS)

ссылки CSS нормальный, переводится на язык CSS вот так:

PHP код:



.thead a {
color:#;
text-decoration:none;
}

То есть ссылки размещенные внутри DIV-а с классом thead, будут иметь такой то цвет и не будут иметь какого-либо оформления (например подчеркивания)

PHP код:



<div class="thead"> <a href="#">ссылка</a></div>

ссылки CSS под курсором (то есть ссылка при наведении на нее мышкой):

PHP код:



.thead a:hover {
color:#;
text-decoration:underline;
}

То есть underline - при наведении на ссылку она будет отображаться с чертой под ней.

В дополнительные атрибуты CSS
можно добавить свои дополнительные свойства, например добавить:
padding: 4px;
внутренний отступ по всем краям ссылки будет 4px

Если вы html тегу назначили какой-то свой уникальный класс, например:

PHP код:



<div class="prof"></div>

То его свойства можно вставить в Дополнительные определения CSS (в любое из двух полей)

PHP код:



/* ***** postbit_legacy ***** */
.prof {
border:solid #25707c;
border-width:1px 0;
padding:5px;
margin: 3px 0 1px 0;
text-align: center;
}

/* ***** postbit_legacy ***** */ - это всего лишь комментарий, который помагает узнать в каком шаблоне, например, находится тот или иной класс.
текст помещенный в такие косые черты со звездочками не выполняется /* тут текст который не исполняется */

PS. Это минимальные сведения, учите HTML и CSS - чтобы разобраться лучше

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Обсуждаем Выкладываем свои фото работы.	Vector	Цифровое фото, аудио и видео	15	23.02.2013 21:30
FAQ Добавляем свои ссылки в меню навигации	Scof87	XenForo	0	21.01.2012 20:44
FAQ Как вставить свои шрифты в форум	Vector	FAQ по vBulletin 3.х	2	03.12.2011 21:45
Новости Вирусы будут использовать графические процессоры?	Jeffry Dahmer	Новости Software	0	30.09.2010 15:29
Вопрос Можно ли использовать несколько модемов для одного соединения для увеличения общей ск	Vector	Сетевое оборудование	0	02.07.2009 18:19