Логическое и физическое форматирование. Селектор тега и селектор на атрибут
Каскадные селекторы
Любой блок на странице должен описываться селектором класса. Не используйте каскадные селекторы так как они нарушают принцип независимости компонентов. Это же правило относится к селекторам прямого потомка (>) и соседнего элемента (+).
Исключения:
- Селекторы состояний (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.Селектор тегов
Пишется название тега без угловых кавычек.
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 (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 , то выиграет второе правило.
Порядок подключённых таблиц
Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.
В этой статье мы представляем набор правил по созданию 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 { ... }
Включение 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).
Главная - Настройки - Настройки пользователя
и настроить отображение баннеров:
Можно сделать по другому, если желаете, что бы отображались другие баннеры.
Имена пользователей
Теперь перейдем: «Пользователи
» => «Группы пользователей
» => «Список групп
» выбираем нужную группу и приступаем к стилизации.
Для этого надо задать стиль 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); }