Главная - Настройки - Настройки пользователя и настроить отображение баннеров:

Можно сделать по другому, если желаете, что бы отображались другие баннеры.

Имена пользователей

Теперь перейдем: «Пользователи » => «Группы пользователей » => «Список групп » выбираем нужную группу и приступаем к стилизации.
Для этого надо задать стиль CSS в пункте «CSS-стиль для имени пользователя ». Будем использовать стили для текста:

color - цвет ника. Можно использовать цветовые значения: RGB формат - rgb(r, g, b); шестнадцатиричная запись - #RRGGBB; RGBa формат - rgba(r, g, b, a); Базовые названия цветов: aqua, black, blue, fuchsia, gray ......
font-family - семейство шрифта для ника (Arial, Georgia, Verdana ....) Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.
font-size - размер шрифта ника. Разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% (или не указано) берется размер шрифта родительского элемента.
font-style - определяет начертание шрифта ника - обычное, курсивное или наклонное (normal, italic, oblique).
font-weight - устанавливает насыщенность (жирность) шрифта (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
Так же можно использовать тень текста для ника:
text-shadow - указываются четыре параметра сдвиг по x, сдвиг по y, радиус размытия и цвет (1px 1px 2px black). Допускается указывать несколько параметров тени, разделяя их между собой запятой (1px 1px 2px black, 0 0 1em red)

Пример :
Указываем CSS стиль для ника:

Color: red; font-weight: bold; font-size: 12px;

Выравнивает ник по центру
Настройки стиля>>Элементы сообщений>>Имя пользователя
В блоке "Прочее" добавить

Text-align: center;

Что у нас получилось

Анимированный фон для имени(ника) пользователей

В "CSS-стиль для имени пользователя" добавить фон

Background: url(папка с картинкой/glitter_001.gif) no-repeat

В архиве ниже 14 разных фонов.

Звания пользователей

"Текст баннера пользователя " пишем любой, не видно будет, «» - имя класса, например admin , в EXTRA.css задаем стиль:

Admin { background: url(папка картинки/admin.gif) no-repeat; display: block; width: 120px; height: 30px; color: rgba(0, 0, 0, 0); margin-left: -5px; }

Смотрим что получилось

"Текст баннера пользователя " пишем название группы «Другой, используя своё имя CSS-класса » - имя класса, например admin-ribbon , в EXTRA.css задаем стиль:

/* Ранги пользователей */ .admin-ribbon, .moder-ribbon, .member-ribbon { color: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; margin-left: -12px; margin-right: -12px; text-align: center; text-shadow: 0 0 0 transparent, 0 0 2px black; width: 134px; } .admin-ribbon { background: url("styles/default/xenforo/icons/admin_ribbon.png") no-repeat scroll 0 0 transparent; } .moder-ribbon { background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; } .member-ribbon { background: url("styles/default/xenforo/icons/member_ribbon.png") no-repeat scroll 0 0 transparent; } /* END Ранги пользователей */

В архиве ниже найдете 3 ленточки для баннера.

Свой цвет для баннеров:
Переходим на страницу списка групп: /admin.php?user-groups/ - выбираем нужную Вам группу - В поле "Текст баннера пользователя:" прописываем нужно название - В настройке "Оформление баннера пользователя:" выбираем опцию "Другой, используя своё имя CSS-класса:" и в этом поле указываем: userBanner my-style - Сохраняем всё это дело и в шаблон EXTRA.css добавляем такой код:

UserBanner.my-style { color: white; background-color: green; }

или такой

UserBanner.my-style { color: white; background-color: green; border-color: green; }

Пример баннеров с применением стилей CSS.
Сделаем баннеры с использованием только CSS. Как уже говорилось для этого используем "Другой, используя своё имя CSS-класса" , задаем для каждой группы свой класс, а в EXTRA.css , укажем стили для этих классов:

Admin_style, .lamer_style, .moder_style, .user_style { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; display: block; font-size: 11px; margin: 4px 0 5px; padding: 2px 6px; position: relative; text-align: center; color: white; text-shadow: 0 0 0 transparent, 1px 1px 1px black; width: 98px; } .admin_style { background-color: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.7); } .moder_style { background-color: rgba(0, 155, 4, 0.5); border: 1px solid rgba(0, 155, 4, 0.7); } .user_style { background-color: rgba(0, 51, 155, 0.5); border: 1px solid rgba(0, 51, 155, 0.7); } .lamer_style { background-color: rgba(0, 158, 217, 0.5); border: 1px solid rgba(0, 158, 217, 0.7); }

CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

Рис. 1. Структура объявления CSS-стиля

Виды каскадных таблиц стилей и их специфика

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

Внешняя таблица стилей представляет собой текстовый файл с расширением.css , в котором находится набор CSS-стилей элементов. Файл создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут содержатся только стили, без HTML-разметки. Внешняя таблица стилей подключается к веб-странице с помощью тега , расположенного внутри раздела . Такие стили работают для всех страниц сайта.

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

...

1.3. Встроенные стили

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

Такие стили действуют только на тот элемент, для которого они заданы.

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.

2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег

и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.

Инструкция пользования персональным компьютером

.headline { text-transform: uppercase; color: lightblue; }

2.4. Селектор идентификатора

Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.

#sidebar { width: 300px; float: left; }

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня.

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

, не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Псевдоклассы характеризуют элементы со следующими свойствами:

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

4. Группировка селекторов

Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.

Рис. 2. Режим разработчика в браузере Google Chrome

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

5.2. Каскад

Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

Для каждого правила браузер вычисляет специфичность селектора , и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.

Порядок подключённых таблиц

Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.

Каскадные селекторы

Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).

Исключения:

• Селекторы состояний (selected , active , hover ).
• Селекторы контекста. Существуют случаи, когда компонент используется на разных страницах или в разном окружении. В этом случае удобно использовать селекторы контекста. Важно, чтобы эти контекстные стили содержались в родительском компоненте.
• Верстка, в которой нельзя изменить структуру HTML-тегов.

Именование классов

• Имена классов записываются на английском языке в нижнем регистре. Если не уверены в написании английского слова, проверьте его по словарю. PHPStorm имеет встроенную проверку орфографии.
• Желательно, чтобы терминология в названии класса совпадала с названиями, которыми оперирует разработчик (названия полей в базе данных, названия PHP-классов).
• Для разделения слов в именах используется дефис (-).
• Создавайте имена CSS-селекторов максимально информативными и понятными. Это поможет упростить разработку и отладку кода. Не стесняйтесь использовать длинные названия классов.
• Название класса должно отражать суть блока, а не его внешний вид.
• Первым словом в названии класса должно идти название модуля. На втором месте - название блока. Название блока может состоять из нескольких слов. Такой формат, с одной стороны, сразу показывает принадлежность стилей, с другой - гарантирует их уникальность. Уникальность стилей обеспечивает независимость верстки компонентов.
• Вложенные элементы должны сохранять контекст именования блока. Блок не обязательно должен быть прямым родителем элемента.

  Оба варианта именования допустимы:

• Не допускайте сокращений. Сокращения могут привести к ситуации, когда одинаковые вещи будут названы по-разному (btn/button).
• Не используйте старый префикс bx- .
• Если к элементу происходит обращение по классу через JavaScript, то такой класс должен иметь префикс js- .
• Для верстки шаблона сайта допускается опускать префикс модуля.

Inline-стили

Избегайте инлайновых стилей, все стили должны задаваться в CSS-файле через назначение классов элементам. Инлайновые стили применимы, только если они являются неотъемлемой часть контента страницы (аватар пользователя, размер ползунков в фильтре и т. п.).

Селектор тега и селектор на атрибут

Избегайте использование имен классов с селектором тега и атрибута.

Div.task-detail-title { margin: 20px; } input { margin: 20px; } Хорошо: .task-detail-title { margin: 20px; } .task-detail-user-field { margin: 20px; }

Сокращенная форма записи свойств

CSS предлагает множество различных сокращенных форм записи (например, margin , padding , border и другие), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений. Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.

Meeting-sidebar { margin-top: 5px; margin-bottom: 3px; border-width: 1px; border-style: solid; border-color: #fff; }

Meeting-sidebar { margin: 5px 0 3px; border: 1px solid #fff; }

Сокращенные формы для шрифта (font ) и фона (background ) допускается разделять на несколько свойств.

Единицы измерения

Используйте значения в пикселях. Размеры, указанные в px , абсолютные, четкие, понятные и не зависят ни от чего. Допустимо использовать проценты % везде, кроме размера текста (font-size ).

0 и единицы измерения

Не указывайте единицы измерения для нулевых значений.

Плохо: .timeman-task-list { margin: 0px 12px 0px 13px; } Хорошо: .timeman-task-list { margin: 0 12px 0 13px; }

Кавычки в ссылках

Не используйте кавычки с функцией url() , кроме случая, когда ссылка содержит пробел, либо формируется программно (обычно при использовании inline-стилей).

Плохо: .im-user-status { background: url("images/im-sprite.png"); } Хорошо: .im-user-status { background: url(images/im-sprite.png); }

Цвет

Для указания цвета элемента используйте шестнадцатеричную запись или rgba() , если требуется указать прозрачность. Не используйте rgb() и верхний регистр в значении свойства.

Плохо: .disk-invitation-popup { background: #FFFFFF; } Хорошо: .disk-invitation-popup { background: #fff; }

Хаки

Избегайте хаков в CSS-коде. Если все таки требуется сделать уникальные свойства для конкретного браузера, воспользуйтесь специальными классами .bx-chrome , .bx-firefox , .bx-ie10 .

Плохо: *+ html .vote-answers { margin: 5px; } Хорошо: .bx-ie7 .vote-answers { margin: 8px; }

Группировка правил

Старайтесь, чтобы селекторы, описывающие определенный блок верстки, находились в одном месте и не были раскиданы по CSS-файлу.

Псевдоселекторы (:before, :after)

Псевдоселекторы позволяют не нагромождать HTML-код лишними элементами, имеющими декоративное назначение. Важно понимать, что этих элементов нет в DOM и обратиться к ним через JavaScript невозможно.

Сброс стилей (CSS Reset)

Не используйте CSS Reset в верстке. Компоненты являются независимыми блоками. На них не должны влиять CSS-правила, созданные для всей страницы. Это нарушает независимость блоков и затрудняет их повторное использование. Общий сброс стилей реализуется с помощью глобальных CSS-правил, которые в большинстве случаев пишутся к селекторам на тег, что нежелательно использовать в верстке. Кроме того, сброс стилей влияет на производительность рендеринга страницы и может конфликтовать с версткой клиентов.

С помощью CSS селекторов мы выбираем какие конкретно элементы на сайте стилизовать. О чем нам говорит эта запись?

H1 { color: red; } = селектор { свойство: значение }

Заголовку h1 присвоить красный цвет.

На этом уроке мы разберем основные виды CSS селекторов:

1. Селектор тегов
2. Селектор-идентификатор
3. Селектор классов
4. Селектор атрибутов
5. Универсальный селектор
6. Комбинированные селекторы

1.Селектор тегов

Пишется название тега без угловых кавычек.

H1 { ..
}

Давайте заглянем в консоль инструментов для разработчика какого-нибудь сайта.

На скриншоте отчетливо видно, что для селектора тега h1 задано свойство с конкретным значением (font-size: 34px;) по размеру шрифта. Те или иные значения свойств можно задать любому тегу на веб-сайте. Однако, проблема заключается в том, что теперь на сайте все заголовки h1 будет размером в 34 пикселя. Если мы так и задумали, то все ОК, а если нет, например на другой странице по задумке дизайнера, заголовок h1 должен быть 40 пикселей. Тогда переходим к следующему виду CSS селекторов .

2.Селектор классов

Вот этому особенному заголовку h1 размером в 40 пикселей присваиваем свой класс с произвольным название, например: "big" .

В HTML -документе:

Заголовок

Мы помечаем на HTML -странице только заголовки размером 40 пикселей классом "big" .

В файле CSS стилях:

Big { font-size: 40px; }

Перед названием класса всегда ставится точка, .big – селектор класса. Может применяться на сайте много раз. В случае, если мы точно знаем, что заголовок h1 размером 40 пикселей будет в единственном экземпляре. Переходим к следующему типу CSS селекторов .

3.Селектор-идентификатор

В отличии от классов применяется на сайте всего один раз и вместо точки ставится решетка # .

В HTML -документе:

Заголовок

В файле CSS стилях:

#big { font-size: 40px; }

Просто запомните, что id должно быть уникально на весь документ и не может повторяться.

Желательно id использовать для якорей или для скриптов. Старайтесь при верстке использовать только классы.

4.Селекторы атрибутов

Чаще всего селекторы атрибутов используются в формах, так как поля форм содержат атрибуты с разными значениями. Например наша форма содержит два поля с логином и паролем.

В HTML -документе:

Логин

Пароль

В файле CSS стилях:

/* Зададим фоновый цвет #fcf8e3; полю для ввода логина */
input {
background-color: #fcf8e3;
}
/* Зададим фоновый цвет #f2dede; полю для ввода пароля */
input {
background-color: #f2dede;
}

У нашей формочки поле для логина покрасится в желтый цвет, а поле для пароля – в розовый. Селекторы атрибутов записываются в квадратные скобки элемент [атрибут] .

5.Универсальный селектор

В общем случае синтаксис универсального селектора будет такой. Суть его состоит в том, что он применяет стили сразу ко всем элементам сайта. Раньше он использовался для того, чтобы обнулить все стили для элементов сайта. Например отступы, поля для того, чтобы в каждом браузере сайт изначально смотрелся одинаково. Верстальщик ставил универсальный селектор, обнулял маржины и паддинги, это устаревший уже способ.

* { margin: 0;
padding: 0;
}

Но сейчас все используют normalize.css с GitHub .

6.Комбинированные селекторы

Это CSS селекторы состоящие из нескольких селекторов. Рассмотрим самые распространенные типы комбинированных селекторов.

Мультиклассы

К тегу можно одновременно добавить несколько классов. Берется значение класса, стоящего в коде ниже.

В HTML -документе:

Заголовок

В файле CSS стилях:

Big1 { font-size: 34px;}
.big2 { font-size: 40px;}

К заголовку h1 применится значение класса big2 , он стоит ниже.

Вложенный селектор

Задаются через пробел. Очень знакома ситуация, когда внутри абзаца выделяется какое-нибудь слово курсивом.

Пример такого варианта выделения

P i {
font-style: italic; /* курсив */
}

Здесь

это родительский тег, а - дочерний тег, расположенный в контейнере

. В этом случае стиль будет применяться к тегу .

Дочерний селектор

div > span {..}

Тег span является ребенком, а div – родителем. Значение стиля всегда применяется к ребенку, если он прямой потомок и непосредственно расположен в контейнере родителя.

Соседний селектор

Соседними называются элементы страницы, когда они идут друг за другом.

B + i { color: gray; }

Тебе так идет серый цвет, особенно в сочетании с розовым.

А чтобы научиться применять ваши знания на практике, рекомендую ознакомиться с моим курсом

В этой статье мы представляем набор правил по созданию CSS-имен. Они уже были испытаны в нескольких крупных проектах. Это помогло нам достигнуть определенных успехов. Цель инструкции - исключить возможность конфликтов имен, упрощения отладки, обслуживания и процесса присвоения названий.

Правила присвоения имен, приведенные, ниже сложно назвать оптимальными для браузеров. Тем не менее, правила дают огромное преимущество, а их влияние на производительность незначительно.

CSS-класс и имя файла

Используйте строчные буквы в названиях всех CSS-классов и файлов. Для разделения слов в имени используйте символ «-». Например, мы можем назвать классы как-то вроде widget-latest-comments, а файлы - post.css.

Организация CSS-файлов

Распределите CSS-стили по отдельным файлам, чтобы облегчить работу команде разработчиков и дальнейшее обслуживание системы. CSS-файлы могут быть названы в соответствии со следующими правилами:

• global.css - этот файл содержит глобальные стили CSS, которые могут быть использованы повторно в различных местах.
• layout.css - этот файл содержит CSS стили, используемые в макетах.
• ControllerID.css - к этому файлу обращается контроллер приложения. Это означает, что каждый контроллер может иметь свой собственный файл стилей, который назван по его идентификатору. Например, для PostController может быть CSS-файл с именем post.css.
• widget-WidgetClass.css - здесь, под именем WidgetClass подразумевается класс виджета, для которого написан отдельный файл CSS стилей. Например, виджет LatestComments будет обращаться к файлу widget-latest-comments.css.
• FeatureName.css - большие функции могут иметь свои собственные файлы CSS названные в честь самой функции. Например, функция Markdown вполне вероятно использует markdown.css.
• Другие необходимые CSS-файлы, например, CSS-фреймворки.

Присвоение имен CSS-классам

В общем, в CSS, мы должны использовать классы вместо идентификаторов для стилизации HTML-элементов. Это делается, потому что один и тот же идентификатор не может использоваться дважды на одной странице XHTML.

Для присвоения имен классам мы опираемся на следующие правила:

• CSS-классы, которые предназначены для совместного использования, должны начинаться с префикса g-. Например, у нас могут быть классы g-submit-button, g-link-button, стилевое описание которых следует поместить в вышеупомянутый файл global.css. У вас получится синтаксис следующего вида: .g-link-button { ... }
• Каждый файл, выводящий какую-либо запись, должен иметь корневой контейнер, в котором заключен контент. В нем объявляется класс, имя которого в точности повторяет путь до файла. Например, для файла, доступного по адресу post/index.php, эта конструкция выглядит так:
  ...view content here...
• Описание CSS-стилей должно быть помещено в соответствующий контроллеру CSS-файл. Каждое объявление стиля должно начинаться с названия класса корневого контейнера. Например, чтобы объявить CSS-стили для класса item корневого контейнера post-index, мы должны вставить следующую запись в post.css файл: /* in post.css file */ .post-index .item { ... }
• Создание имен CSS-классов и стилей для виджетов в точности повторяют вышеописанные инструкции. Например, виджет LatestComments должен использовать корневое имя CSS класса widget-latest-comments и обращаться за стилями комментариев к файлу widget-latest-comments.css: /* in widget-latest-comment.css file */ .widget-latest-comments .comment { ... }

Файл макета должен также содержать корневой контейнер с префиксом layout-. Например, макет main должен использовать CSS-класс layout-main в качестве корневого контейнера. Чтобы избежать конфликтов с CSS-классами, предназначенными для стилизации контента, классы контейнерных элементов в макете могут начинаться с имени класса корневого контейнера. Например, раздел заголовка может использовать layout-main-header, а раздел содержания - layout-main-content.

Включение CSS-файлов

В режиме разработчика (когда режим YII_DEBUG задействован) каждый файл CSS должны быть подключен к основному файлу макета.

В рабочем режиме, все CSS-файлы должны быть объединены и сжаты в один файл. Имя файла должно содержать дату (например, styles-201010221550.css).

Поступая таким образом, мы разрешаем браузеру кэшировать объединенный файл CSS и тем самым устранить необходимость загрузки CSS-файла каждый раз.

Объединение и сжатие файлов CSS

Здесь мы вводим стратегии по достижению указанной цели.

Во-первых, мы объявляем все имена CSS-файлов в виде массива в параметрах приложения.

Во-вторых, пишем консольную команду, чтобы объединить и сжать CSS-файлы. Для этих целей может быть использован YUI-компрессор. Эта команда будет считывать названия CSS-файлов из параметров приложения, объединять все содержимое файлов в один файл, и вызывать YUI-компрессор для компрессии CSS-стилей. Созданный файл должен быть назван временной меткой.

В-третьих, модифицируйте главный файл макета, вставив следующий код в раздел head: ...... params["css.files.compressed"]): ?> params["css.files.compressed"]; ?>" /> params["css.files"] as $css): ?> " />
Мы предполагаем, что CSS-файлы перечисляются в параметре приложения css.files. И если файлы объединяются и сжимаются, то в конечном итоге имя файла должно быть включено в параметр приложения css.files.compressed. Консольная команда должна внести изменения в конфигурационный файл приложения для обновления параметра css.files.compressed после того, как создастся комбинированный и сжатый CSS-файл.

Инструкции по созданию имен для JQuery-селекторов

Мы можем использовать правила создания CSS-имен и для JQuery-селекторов в JavaScript-коде приложения. В частности при выборе одного или нескольких элементов с помощью JQuery-селекторов мы должны следовать аналогичным правилам для объявления CSS-стилей. Например, если мы хотим прикрепить обработчики «клика» ко всем гиперссылкам в пределах новостных блоков, то мы должны использовать следующие селекторы JQuery: $(".news-index .item a").click(function(){ ... });
То есть селектор должен начинаться с имени корневого контейнера CSS-класса (в данном случае news-index).