Индивидуальное оформление элемента
В предыдущей главе вы узнали, как работать с уже имеющимися правилами в таблицах CSS; эта глава посвящена составлению новых правил.
Индивидуальное оформление элемента
Иногда возникает необходимость один из нескольких одинаковых элементов страницы оформить строго индивидуально. Например, в предыдущей главе было рассмотрено оформление бордюров модулей; но правило .moduletable, расположенное в файле stl_tpl_wds_v1.css (строка 283), устанавливает оформление сразу для всех модулей на сайте. А что делать, если нужно установить индивидуальные настройки для какого либо модуля? Этот вопрос решается довольно просто: нужно создать новое правило именно для этого модуля! Как это делать читайте в следующем примере.
Оформление модуля авторизации
Согласитесь: модуль авторизации выглядит далеко не лучшим образом! Кнопка явно смещена влево, сам модуль сильно прижат к правому бордюру, поля для логина и пароля - вправо, цвет фона заголовка тоже оставляет желать лучшего (рис.222):
Конечно же, это нужно исправить!
Изменение позиции элемента
Что бы изменить позицию модуля (в данном случае - сдвинуть правее) необходимо к классу .moduletable добавить суффикс, который будет указывать, что правило относится к определённому модулю (элементу). Для этого в меню Панели управления откройте Расширения > Модули и выберите модуль авторизации.
На вкладке Дополнительные параметры в поле "Суффикс CSS-класса модуля" впишите суффикс; какой именно, придумайте сами (рис.223).
Обратите внимание на очень важный момент!!! Суффикс всегда должен начинаться с пробела! Т.е. в любом случае в начале идёт пробел, а затем уже слово, иначе ничего работать не будет!
К сожалению, на рисунке не видно, что впереди идёт пробел, так как это не знак нижнего подчёркивания, но никогда не забывайте об этой особенности!
После внесения суффикса нажмите Сохранить и закрыть .
Откройте в редакторе файл stl_tpl_wds_v1.css и выберите место для нового правила; так как в файле уже имеются правила, относящиеся к данному модулю, то новое правило следует разместить рядом сними. Найдите строку комментария "Модуль авторизации" (номер строки приблизительно 300, зависит от внесённых ранее изменений) и сразу под этой строкой внесите новое правило.
Как составить новое правило?
Как уже говорилось в главе 22, правило должно начинаться с селектора. Так как класс модуля состоит из основного названия moduletable и суффикса login, то должен быть применён селектор классов: вначале идёт точка, далее название класса, далее снова точка, которая в этом случае заменяет тот самый пробел, о котором было сказано выше, и в конце - суффикс:
1 .moduletable.login {
2 свойство: значение
3 }
Теперь становится понятно, для чего нужен пробел в начале суффикса: если бы его не было, то название класса просто слилось в единое целое с суффиксом и образовало бы новый класс.
Обратите внимание на то, что поэкспериментировать с новым правилом вы можете не вписывая его в файл CSS; для этого в Инструментах разработчика имеется такая возможность. Если навести курсор на любое их правил, показанных в нижней части панели, то внизу этого правила вы увидите три точки:
Кликнув на эти точки, вы откроете строку с дополнительными возможностями:
Кликнув на "плюс" вы создадите новое правило:
Это правило создаётся с селектором, выделенным синим цветом в строке над этой таблицей:
но его можно изменить и вписать свой, а затем экспериментировать со свойствами и их значениями.
После селектора должны быть прописаны свойства и значения, которые берутся в фигурные скобки. Свойства внутри скобок отделяются друг от друга точкой с с запятой (перенос на другую строку для браузера ничего не меняет, это нужно только для удобства восприятия разработчиком).
Добрый совет: когда вы записываете правило в таблицу, после внесения селектора сразу прописывайте обе скобки, т.е. сначала открывающую, затем делайте одну свободную строку для свойств, и сразу же ставьте закрывающую скобку - это нужно для того, что бы потом просто не забыть про неё!
Итак, основа правила составлена, теперь нужно продумать, какие в нём прописать свойства. Так как речь идёт о позиционировании элемента, то откройте в главном меню Программирование > CSS > Свойства CSS по группам и выберите "Позиционирование элементов, отступы и поля"; здесь вы найдёте все свойства, относящиеся к расположению модуля на странице.
В данном конкретном случае нужно установить выравнивание элемента с правой стороны (т.е. остальные элементы будут обтекать модуль слева, см. свойство float), и выставить количество пикселей от правого края; это можно сделать, добавив с правого края отступ (свойство margin или margin-right). В результате получится такое правило:
1 /* Модуль авторизации */
2 .moduletable.login {
3 margin: 0 8px 0 0;
4 float: right; /* положение */
5 }
Данное правило устанавливает выравнивание по правой стороне и отступы со всех сторон сразу. Свойство margin устанавливает отступ в 0 пикселей сверху, 8 пикселей справа, 0 пикселей внизу и 0 пикселей слева, т.е. если в этом свойстве применяется четыре значения, то они идут по часовой стрелке начиная с "12" (сверху). Возникает вопрос: зачем применять это свойство, когда проще указать только одно значение, применив margin-right? Всё просто! Вполне возможно, что возникнет необходимость изменить и эти значения, поэтому лучше (но не обязательно!) сразу прописать все четыре.
Как быстрее и удобнее подобрать данные значения? Для ускорения процесса и просто для удобства используйте Инструменты разработчика так, как это было подробно описано в предыдущей главе. Сначала откройте файл и создайте правило с приблизительными значениями (или вообще с нулями), затем откройте страницу сайта, откройте Инструменты, найдите нужный элемент (в данном случае - модуль авторизации), при этом смотрите, что бы цветом был выделен весь модуль, а не какой-то его компонент и кликните левой кнопкой мыши. В открывшейся таблице (внизу) найдите созданное вами правило и экспериментируйте со значениями до тех пор, пока не найдёте оптимальный вариант, после чего просто перенесите эти данные в файл, сохраните и перезагрузите страницу. Если вы не допустили никаких ошибок, то элемент должен занять своё место, а точнее, после перезагрузки страницы ничего измениться не должно, так как перед перезагрузкой элемент уже находился на новом месте; если же элемент "съехал" на старое место - значит, вы где-то допустили ошибку.
Обратите внимание на то, что при любых изменениях в позиции или размерах элемента возможно "разрушение" общего вида всей страницы: например, при перемещении модуля влево (то, что сейчас и было описано) контейнер с контентом может оказаться слишком широким, в результате чего модуль авторизации переместиться вниз, так как ему просто не хватит места. Поэтому при выполнении такого рода работы всегда внимательно смотрите за другими элементами на странице и при необходимости так же изменяйте и их значения; например, уменьшите ширину основного контента на несколько пикселей. Так же не забывайте про отступы (свойство margin), которые тоже влияют на расположение элементов: при необходимости подберите значения и для них при помощи Инструментов.
Точно таким же образом вы можете работать с любым другим элементом на странице!
Оформление кнопок
На сайте есть однотипные элементы, которые встречаются в различных местах, но выполняют схожие функции, например, кнопки. Такие элементы лучше всего оформить в одном стиле (цвет фона, бордюры и т.п.), а в случае крайней необходимости для определённого элемента можно применить индивидуальные настройки.
Кнопка является элементом, который может находиться в нескольких различных состояниях:
- в обычном (в состоянии "покоя");
- состояние при наведении курсора;
- в активированном состоянии.
Внешний вид кнопки нужно настроить для каждого из этих состояний, например, сделать, что бы при наведении курсора кнопка меняла цвет, а при активации ("нажатии") не только меняла цвет, но и надпись: для того же модуля активации - "Войти" или "Выйти" и т.п.
В большинстве случаев в файлах CSS шаблона уже имеются определённые правила, связанные с оформлением кнопок, а если какого-то правила нет - значит нужно его создать!
За динамическое, т.е. изменяющееся состояние элементов отвечают псевдоклассы.
Откройте в файле строку с комментарием "Оформление кнопок" (приблизительно 79 строка). Здесь собраны правила, касающиеся всех кнопок на сайте; в дальнейшем, при создании новых правил для кнопок, помещайте их сюда же, распологая ниже и обязательно с комментариями, тогда вам будет легко найти нужное правило.
В таблице имеется правило для всех кнопок сразу, расположенное прямо под комментарием, и несколько индивидуальных правил, позволяющих настроить конкретно взятую кнопку. Для начала посмотрите, как выглядит общее для всех правило:
79 /* Оформление кнопок */
80 .btn {
81 background-color: RGB(0,0,0);
82 height: 30px; /* высота кнопок */
83 margin: 4px 0 5px 54px; /* отступы от соседних элементов */
84 background-image: linear-gradient(to bottom, RGB(155,155,155), RGB(200,200,200));
85 background-repeat: repeat-x;
86 border-color: rgb(90,90,90); /* цвет бордюра */
87 border-width: 2px; /* толщина бордюра */
88 color: RGB(255,255,255); /* цвет текста */
89 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
90 }
Вы можете сразу же перенастроить эти правила и тогда все кнопки будут отображаться с одинаковым оформлением. Например, на этом сайте изменено свойство background-image в строке 84: вместо указанных цветов применены другие:
84 background-image: linear-gradient(to bottom, RGB(67,67,255), RGB(0,255,255));
Так же изменён цвет бордюра:
86 border-color: rgb(0,0,255); /* цвет бордюра */
В результате все кнопки стали с синим бордюром и двухцветным фоном - один плавно переходит в другой (градиент) (см.рис.224):
Если возникнет необходимость переопределить какие-либо настройки для отдельно взятой кнопки, нужно выяснить, присвоен ли данной кнопке какой-либо класс. Для этого в окне браузера откройте страницу сайта, откройте Инструменты разработчика, активируйте режим просмотра (кнопка вверху слева) и наводите курсор на кнопку (в данном случае на кнопку в модуле авторизации); при этом кнопка будет выделена цветом и над ней появится такая строка (выделено чёрным цветом):
button. btn.btn-primary.login-button 67 x 30
где:
- button - тег;
- btn - основной класс элемента;
- btn-primary - класс элемента;
- login-button - суффикс класса;
- 67 x 30 - размер элемента (кнопки).
Почему у данной кнопки два класса? Основной класс btn - это класс для всех кнопок сайта, а btn-primary - это класс именно этой кнопки, расположенной в модуле авторизации. Любые изменения, произведённые в основном классе могут повлиять на внешний вид всех кнопок, а вот изменения, произведённые для класса данной кнопки на другие влиять не могут.
Кликните на данный элемент; при этом откроется HTML-код (вверху) и код CSS (внизу), непосредственно отвечающие за данный элемент. Если посмотреть на HTML-код, то вы увидите следующую строку (будет выделена цветом):
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary login-button">Войти</button>
Итак, класс известен (btn-primary) и вы можете сразу найти нужные строки в таблице CSS, но можно сделать и по-другому: найдите эти правила в коде CSS (внизу) и просмотрите номер строки, с которого начинается правило (номер указан в конце адреса файла, содержащего правила):
92 .btn-primary {
93 margin: 4px 0 5px 46px;
94 }
95 .btn-primary:hover {
96 background-color: RGB(210,210,210); /* цвет кнопки при наведении курсора*/
97 color: RGB(0,0,0); /* цвет шрифта при наведении курсора*/
98 }
Первое правило (.btn-primary) устанавливает отступы для этой кнопки (margin), цвет бордюров (border-color) и устанавливает для фона-изображения на кнопке (background-image) значение linear-gradient - линейный градиент. Это свойство сначала устанавливает направление (снизу вверх), затем начальный цвет и оконечный цвет; при этом на всём пространстве кнопки цвет плавно изменяется от первого значения до второго.
Второе правило (.btn-primary:hover) устанавливает изменения, которые произойдут с кнопкой при наведении на неё курсора. Имеющиеся в этом правиле свойства предписывают браузеру изменить цвет самой кнопки (background-color), при этом измениться только нижняя половина, и шрифта (color).
Как и с другими элементами, вы можете поэкспериментировать с оформлением кнопки при помощи Инструментов разработчика, как это было описано ранее. Не забудьте сохранить полученные результаты!
Обратите внимание на то, что помимо файла в шаблоне, на внешний вид влияют и другие файлы CSS - достаточно прокрутить полосу прокрутки что бы в этом убедиться. Однако не забывайте, что все эти значения вы можете изменить, внеся соответствующие правила, свойства и значения в файл CSS шаблона: всё, что содержится в таблицах CSS шаблона имеет приоритет.
Установка положения элементов
На рисунке хорошо видно, что кнопка смещена влево. Что бы это исправить, необходимо изменить значения свойства margin в правиле .btn-primary. При помощи Инструментов разработчика можно установить, что нужно изменить последнее число, отвечающее за отступ слева. (в данном случае отступ рассчитывается от края модуля, что хорошо видно при наведении курсора при использовании Инструментов).
Далее необходимо таким же образом изменить расположение полей с логином и паролем. Почему оба поля смещены вправо, легко понять при помощи всё тех же Инструментов (рис.225):
Нажмите на кнопку 1, наведите курсор между полями и вы увидите, что будет выделен элемент, создаваемый тегом <div> класса userdata. Обратите внимание на цвет, обозначенный цифрой 2: это отступ, который и смещает весь блок вправо, поэтому нужно изменить значение свойства margin (обозначено цифрой 3). Данное значение вы должны подобрать самостоятельно, так как оно полностью зависит от многих других параметров страницы. В данном случае нужно либо убрать данное правило вообще, либо выставить такое же значение с правой стороны, тогда отступы будут равны, но ширина самого модуля увеличится.
Данного правило в указанном файле имеет другие значения для этого свойства; значения, приведённые здесь, показаны только для примера.
Оформление списка (слова "Регистрация", "Забыли пароль?")
В модуле авторизации слова-ссылки "Регистрация" и "Забыли пароль?" являются списком. В коде страницы это выглядит так:
Как видно из кода, список (тег <ul>, класс "unstyled") имеет две строки (теги <li>), в которых содержатся ссылки и отображаемый текст. Для того, что бы изменить оформление этого списка, необходимо посмотреть, какие имеются для него правила. Панель Инструментов разработчика показывает, что для этого элемента правила имеются только в файлах bootstrap.css, поэтому необходимо создать новые правила в файле stl_tpl_wds_v1.css шаблона.
Так как в этом файле ещё нет правил, касающихся списков, создайте новый раздел (просто пишем комментарий!) в самом конце таблицы:
*** /* Оформление списков */
Ниже создайте правило. Это правило будет касаться строк в списке, обозначенных тегом <li>, и принадлежащих списку с тегом <ul> и классом "unstyled", а значит, селектор должен быть записан так:
*** ul.unstyled li {
*** правила
*** }
Какие свойства стоит прописать здесь? Это решать вам! На данном сайте прописаны такие:
*** /* Оформление списков */
*** ul.unstyled li {
*** text-align: center;
*** font-family: Georgia;
*** font-style: italic;
*** font-size: 16px;
*** }
Свойство text-align устанавливает слова отображаемого текста по середине контейнера <ul class="unstyled"> ... </ul>, свойство font-family устанавливает тип шрифта, font-size - его размер, а font-style - начертание (курсив). В результате получается следующее:
Оформление заголовка модуля
Вы можете изменить цвет фона, цвет и шрифт текста, а так же размеры заголовка.
При необходимости вы можете совсем убрать заголовок; это можно сделать в Панели управления: откройте нужный модуль и на вкладке "Модуль" (основная вкладка) выставите нужное значение переключателя "Показать заголовок".
Откройте страницу сайта, Инструменты разработчика и просмотрите, какие таблицы отвечают за оформления заголовка. Вы увидите, что таких таблиц несколько, а так же то, что к данному элементу применяются правила с селекторами h3 и h3.moduletitle. При необходимости вы можете переопределить значения свойств в уже имеющихся правилах или прописать новые в файле stl_tpl_wds_v1.css. В этой таблице уже имеются правила для обоих селекторов, но вносить изменения в h3 не стоит: это правило определяет оформление всех подобных заголовков на сайте; а вот заголовки, относящиеся к модулям, легко оформить во втором правиле:
290 /* Общее оформление заголовков модулей */
291 h3.moduletitle {
292 background-color: RGB(144,144,144); /* цвет фона */
293 color: RGB(255,255,255); /* цвет текста */
294 font-size: 14px; /* размер шрифта */
295 font-weight: normal;
296 line-height: 20px;
297 margin: 0 -3px 5px -3px;
298 padding: 4px 5px;
299 text-align: center; /* положение текста*/
300 }
Как видно из кода, здесь указан цвет фона, цвет и размер шрифта, а так же его толщина (значение normal отменяет значение bold, установленное в одном из файлов bootstrap; так же установлено расстояние между строками на тот случай, если заголовок будет иметь более одной строки, отступы, поля и положение текста. Все эти значения вы можете изменить и/или дописать новые свойства, например, указать тип и стиль начертания шрифта.
Точно так же вы можете изменить внешний вид и размеры полей для логина и пароля, надпись у чекбокса "Запомнить меня".
На рис.228 вы можете сравнить внешний вид модуля до и после оформления:
Используя выше описанные способы работы с таблицами и Инструментами разработчика, вы можете полностью изменить любой элемент страницы, создавая новые правила и редактируя уже имеющиеся.
Оформление модуля BREDCRUMBS
Последнее, что на данный момент осталось оформить - BREADCRUMBS, строку навигации по сайту. Вот так она выглядит до оформления:
А вот так - после:
Конечно, это только один из вариантов, применённый на данном сайте, но он показывает, насколько широкие возможности дают CSS. А как оформить свой сайт - это уже ваша задача как разработчика! Экспериментируйте, ищите оптимальный вариант.
Что здесь изменено?
В первую очередь строка переместилась в контейнер с основным контентом, следовательно, модульная позиция BREADCRUMBS изменена на TOP-CONTENT.
Так как при этом у модуля появились бордюры, возникла необходимость создать новое правило для их оформления: бордюры сверху, слева и справа отключены, а для нижнего бордюра изменена толщина, так как общее значение для всех модулей установлено больше, чем это нужно в данном случае.
Так же созданы правила для изменения размера и цвета шрифта, откорректированы значения свойств margin и padding для всех элементов строки.
Все эти правила помещены в "раздел" "breadcrumbs" файла stl_tpl_wds_v1.css (рис.231):
где:
- .moduletable.navigator - правило для настройки бордюров и отступа снизу;
- .breadcrumb>li - правило, созданное для настройки элементов списка (строка навигации является списком!);
- .breadcrumb>li>.divider - правило для класса divider, создающего в строке блок для изображения "4";
- .breadcrumb>li>.divider img - правило для настройки положения изображения "4";
- .breadcrumb>.active - настройки для элемента списка, который открыт в данный момент (материал, компонент);
- .breadcrumb>li>.pathway - настройки для элементов списка, являющихся ссылками на страницу.
_________________________________________________
Всё! Теперь вы знаете основы работы с таблицами CSS, знаете, как использовать Инструменты разработчика для настройки внешнего вида элементов и всей страницы в целом. Теперь при добавлении новых элементов не забывайте их сразу оформлять и помните, что оформление - один из важных критериев, по которому посетители будут оценивать ваш сайт, и от того, какую оценку ему выставит пользователь, зависит, захочет ли этот пользователь зайти сюда снова.
