Наверное каждый, кто хоть немного сталкивался с изменением или созданием дизайна для форумов mybb, задавался вопросом, а как узнать где и что менять?!
На этот вопрос я и постараюсь ответить в данной статье.
Небольшое отступление: Поскольку изменение разметки (html) на форумах движка mybb и Ко, то пользователю не остается ничего, как использовать для создания дизайна каскадные таблицы стилей (CSS), которые, как все знают, можно изменять с помощью меню "Свой стиль". Каскадные таблицы стилей представляют собой довольно мощный инструмент для оформления внешнего вида сайта или форума, но нужно уметь им правильно пользоваться.
Таблицы стилей представляют собой набор блоков правил для определенных селекторов, которые идентифицируют различные элементы разметки (параграфы, блоки <div>, ссылки, заголовки и т.п.).
Селектор указывает, на какие элементы разметки подействует то или иное правило. Чтобы указать на элемент наиболее точно, элементам могут быть присвоены классы и идентификаторы, тогда именно они могут стать частью селектора.
Именно селектор отвечает за то, какие элементы мы изменяем (каким элементам назначаем те или иные стилевые правила).
Селекторы бывают разных видов:
1. Селектор тега.
Селектор тега полезен тогда, когда мы хотим выбрать все одинаковые элементы (элементы заданные одним тегом).
Например,Код:<div> <ul> <li>Красный</li> <li>Оранжевый</li> <li>Желтый</li> <li>Зеленый</li> <li>Голубой</li> <li>Синий</li> <li>Фиолетовый</li> </ul> </div>Если мы хотим выделить все элементы списка (тег <li>) красным цветом, то мы можем использовать селектор тега:
2. Селектор класса.
Селектор класса полезен, когда мы хотим выбрать лишь некоторые элементы, которые мы специально обозначим.
Для этого при создании разметки необходимо задать класс для нужных элементов (это делается с помощью атрибута class):
Теперь мы можем обратиться к элементу по имени класса:
Селектор класса представляет собой имя класса, которое предворяется знаком точки.
3. Селектор идентификатора.
Селектор идентификатора полезен тогда, когда у нас на странице есть один, уникальный элемент, которому мы хотим назначить те или иные правила. Идентификатор также сначала необходимо задать в разметке. Делается это почти также как и класс:
Теперь по имени идентификатора можно обратиться к элементу (главное не забывать, что элементов с одним идентификатором должно быть ровно один)
4. Контекстный селектор.
Иногда селекторов тега, класса и идентификатора мало, чтобы точно указать на нужный элемент (не задавать же всем элементам идентификатор, правильно?), поэтому используются контекстные селекторы, которые описывают не только сам элемент, но и его окружение:Код:<div class="bluelist"> <ul> <li>Красный</li> <li>Оранжевый</li> <li>Желтый</li> <li>Зеленый</li> <li>Голубой</li> <li>Синий</li> <li>Фиолетовый</li> </ul> </div> <div class="redlist"> <ul> <li>Красный</li> <li>Оранжевый</li> <li>Желтый</li> <li>Зеленый</li> <li>Голубой</li> <li>Синий</li> <li>Фиолетовый</li> </ul> </div>Например, у нас есть два списка, один вложен в <div> с классом bluelist, другой - с классом redlist. Нам необходимо изменить цвет текста элементов списка так, чтобы в первом он был синим, во втором - красным. Если мы воспользуемся селектором тега, то мы поменяем сразу сразу везде и оба списка будут одинаковым цветом. Это нам не надо.
Мы можем присвоить элементам первого списка один класс, а элементам второго - другой, но это будет очень громоздко, зачем писать лишний код. Ну и тем более нас не следует назначать каждому элементу идентификатор.
Лучше воспользоваться контекстным селектором:.bluelist li {
color: blue;
}Здесь мы использовали контекстный селектор, т.е. сказали браузеру "Возьми все элементы списка <li>, которые вложены в <div> с классом bluelist и сделай цвет текста синим". Для описания элементов списка мы использовали селектор тега, для описания дива - селектор класса. Элемент, который идет раньше (в который вложен наш список), мы записали первым, конечный элемент, который нам необходимо изменить - последним. Таким образом, синий цвет получат только те элементы списка, которые находятся ВНУТРИ тега <div> с классом bluelist.
И мы можем спокойно назначить второму списку другой цвет:.redlist li {
color: red;
}5. Псевдоклассы.
Ну и последнее о чем надо сказать, это о псевдоклассах. В некоторых случаях нам надо описать элемент в особом состоянии - например, ссылку, когда на нее наведен курсор мыши. За эти состояния отвечают псевдоклассы. Использовать их можно дописывая ключевые слова к нужным селекторам:a:hover {color: red}
.ancor: hover {color: red}
#ancor:hover {color: red}
Как правило, верстальщики, что сами создают разметку сайта (html), сами назначают элементам классы и идентификаторы и соответственно легко могут составлять селекторы
Конечно, самый простой способ - это