|
Читайте также: |
Весь выше описанный код CSS касался только размещения информации на странице. Нужно позаботиться и о форматировании текста.
Добавим несколько общих стилей и глобальный сброс в основной файл template.css (файл с таким именем подключается в основном файле нашего шаблона index.php).
| * { | |
| margin:0; |
| padding:0; | |
| } |
| h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address { | |
| margin: 0.5em 0; |
| } | |
| li,dd { |
| margin-left:1em; | |
| } |
| fieldset { |
| padding:.5em; | |
| } |
| body { | |
| font-size:76%; |
| font-family:Verdana, Arial, Helvetica, sans-serif; | |
| line-height:1.3; |
| } |
Данный код осуществляет глобальный сброс CSS для нашего шаблона. Такое действие помогает добиться единообразной работы кода в разных браузерах.
Затем мы устанавливаем размер шрифта 76%, опять же для единообразного отображения в разных браузерах. Для размера шрифта используются единицы em (1 em = размеру текущего шрифта документа). Высота строки устанавливается равной 1.3 em. Использование единиц em позволяет обеспечить простую настройку размера шрифта страницы без существенных искажений шаблона.
Взглянем, как выглядит наш шаблон после установки правил CSS. Для большей наглядности в левую часть были добавлены модули основного меню и формы регистрации на сайте, а в правую - модуль с меню информации о Joomla.
В заголовке сайта выведено его название, сформированы три колонки, и они расположены рядом одна с другой.
Дата добавления: 2015-07-21; просмотров: 75 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Используем CSS сетку | | | Создание шаблона Joomla за 6 шагов. Шаг 3. |