ГлавнаяJoomlaРазмер текста css joomla

Свойства CSS для изменения текста. Размер текста css joomla


font-size | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Размер шрифта

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML CSS HTML
xx-small x-small small medium large x-large xx-large  
1   2 3 4 5 6 7

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-size</title> <style> h2 { font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */ font-size: 250%; /* Размер шрифта в процентах */ } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; /* Размер шрифта в пунктах */ } </style> </head> <body> <h2>Duis te feugifacilisi</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства font-size

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById("elementID").style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

htmlbook.ru

Свойства CSS для изменения текста

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

Свойство Font

font - универсальное свойство, в которое можно включать несколько характеристик, указывая их через пробел - такие как стиль, жирность, размер, размер шрифта.

font: italic 12px arial;

Но обычно свойства font расписывают отдельно:

font-family - указывается имя (тип) шрифта. Можно указать через запятую, тогда - если у пользователя нет 1-го шрифта, то применится следующий.

font-family: verdana, times new roman;

font-size - размер шрифта, можно указывать в px, em, процентах или через постоянные значения - xx-small, x-small, small, medium, large, x-large-xx-large.

font-size:1.3em;

font-style - выбор способа вида шрифта - курсив (italic), наклонный (oblique) и обычный (normal)

font-style: italic;

font-variant - определение строчных букв - нормальное (normal) и small-caps (строчные буквы, как уменьшенные заглавные)

font-variant: small-caps;

font-weight - определние жирности шрифта. Можно указывать от 100 до 900 или с помощью слов: bold, bolder, lighter и normal.

font-weight: bold;

Изменения между символами

letter-spacing - отступ между символами. Можно указывать в отрицательном значении в px, in, pt и т.п. Для обычного интервала - normal.

letter-spacing:5px;

line-height - отступ между строками. Можно указывать в px, % или normal. Нельзя указать отрицательное значение.

line-height:50%;

word-spacing - отступ между словами. Указывается в px, in, pt и т.п. или normal.

word-spacing:5pt;

Положение и декор текста

text-align - положение теста по центру (center), по левому (left) или по правому (right) краям:

text-align:center;

vertical-align - положение текста по вертикали, относительно родителя. Устанавливается с помощью слов:

Также можно указывать в мерах длины и процентах с учетом того, что при положительном значении - смещение вверх,  а при отрицательном - вниз.

vertical-align:sub;

text-decoration - добавление декора к тексту с помощью подчеркивания снизу (underline), сверху (overline), перечеркивания (line-through) и мигание (blink). Значение none - отменяет декорирование, даже подчеркивание ссылок.

text-decoration:overline;

text-indent - определение отступа первой строки абзаца. Указывается в любой мере длины.

text-indent:20px;

text-shadow - тень к тексту. Сначала указывается смещение по x, затем по у и радиус размытия тени. В конце можно указать цвет тени.

text-shadow:2px 2px 5px red;

text-transform - управление заглавными и строчными буквами с помощью слов:

text-transform:lowercase;

white-space - выбор отображения пробелов с помощью слов:

Для знакомства с основными тегами для текста читайте статью из раздела верстки HTML.

spinch.net.ua

Способы установки размера шрифтов в CSS | Все для CMS

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

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

Мы достигнем нашей цели традиционным методом проб и ошибок. Согласно новаторской работе Оуэна Бригса образца 2002-го года, я создал набор примеров для исследования, состоящий из 6 шагов и 161 скриншота. Ну так что, начнем?

Тестовый набор

Для тестирования использовалась разметка, состоящая из двух колонок — основной колонки слева и врезки справа. Был выбран шрифт Arial с целью соответствия различным операционным системам и платформам.

Тестирование проводилось на браузерах: Safari 2, Firefox 2 и Opera 9.5α на Mac OS X Tiger, а также Internet Explorer 6 (IE6) и Internet Explorer 7 (IE7) на Windows XP со сглаживанием шрифтов ClearType. Ясно, что это не исчерпывающий список браузеров, операционных систем и средств визуализации, но они сегодня соответствует потребностям большинства пользователей.

Каждый из браузеров и ОС был запущен с настройками по умолчанию. На каждом шаге проверялось то, как браузер отображает маленький, средний, большой и огромный размеры шрифта, что соответствует 90%, 100%, 110% и 120% увеличения текста в тех браузерах, где эта возможность существует.

Исходный пример

Сначала нужно было удостовериться в том, что все браузеры настроены одинаково. В исходном примере видно, что размер текста по умолчанию в каждом из браузеров равен 16px и текст везде масштабирован одинаково. Это условие выполняется, если не применены никакие стили (отличные от стилей для браузеров по умолчанию).

Размер текста в пикселях — шаг 1

Размер текста по умолчанию в исходном примере — хорошая отправная точка, но для большинства людей (дизайнеров, заказчиков и их клиентов) 16px слишком много для текста по умолчанию. В нашем примере размер основного текста был уменьшен до 14px, а текста во врезке до 12px. На первом шаге мы всего лишь задали размер текста в пикселях:

2     font-size:14px;
6     font-size:12px;

В результате Safari и Firefox по-прежнему позволяют масштабировать текст, тогда как IE6 и IE7 — нет. Размер текста в Opera и IE7 можно изменить, используя инструмент масштабирования страницы, который увеличивает как текст, так и изображения — то есть масштабирует страницу целиком.

Размер текста в em — шаг 2

Хотя доля браузеров, которым пользователи отдают предпочтение, различна для каждого отдельно взятого сайта, можно с уверенностью сказать, что IE6 пока используется большинством людей. Таким образом, устанавливая размер текста в пикселях, мы не даем многим людям возможности его масштабировать. Ещё один аргумент — от пользователей IE7, у которых также не будет возможности изменить размер шрифта без использования инструмента масштабирования.

Следующая единица измерения шрифта — em. Em — это действительно типографская единица, рекомендуемая W3C и сравнимая по точности задания размера с ключевыми словами. Исходя из размера текста по умолчанию, мы можем придать тексту желаемые размеры:

2   font-size:0.875em; /* 16x0.875=14 */
6   font-size:0.75em; /* 16x0.75=12 */

По результатам видно, что размер текста при стандартных настройках браузеров соответствует размеру, заданному в пикселях. Эти результаты также служат доказательством того, что текст, указанный в em, может легко масштабироваться в любом из браузеров. Однако IE6 и IE7, хотя и приемлемо, но всё-таки преувеличивают размеры текста при его масштабировании.

Основной текст, указанный в процентах — шаг 3

Решением проблемы неправильного масштабирования текста в IE6 и IE7 является установка величины шрифта тега body в процентах. Так что, оставив em для остального содержимого, протестируем следующие стили:

02     font-size:100%;
06     font-size:0.875em;
10     font-size:0.75em;

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

Установка высоты строки в пикселях — шаг 4

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

Для нашего примера подходящая высота строки — 18px. Применим эти параметры к основному тексту:

02     font-size:100%;
03     line-height:18px;
07     font-size:0.875em;
11     font-size:0.75em;

По результату видно, что высота строки в 18px наследуется всеми элементами на странице — заметим также, что текст врезки имеет такую же высоту строки, что и текст основной колонки. После определения единиц размера (в нашем случае px) для высоты строки, это значение наследуется всеми элементами страницы. Если мы определили высоту строки без единиц измерения, — этот коэффициент наследуется всеми элементами, но будет пропорционален размеру шрифта каждого из элементов, таким образом, нарушая вертикальную согласованность.

К сожалению, результаты говорят нам о том, что высота строки в 18px не масштабируется в IE6 и IE7, в то время как размер шрифта изменяется, и при увеличении масштаба — строки ужасно прижимаются друг к другу.

Установка высоты строки в em — шаг 5

Если с пикселями не не получилось — будем использовать em. Изменим высоту строки в наших стилях:

02     font-size:100%;
03     line-height:1.125em; /* 16x1.125=18 */
07     font-size:0.875em;
11     font-size:0.75em;

В результате получим правильное, пропорциональное увеличение размера шрифта и высоты строки во всех браузерах. Превосходно. Ну или почти превосходно.

Проблема с моноширинными шрифтами в Safari — шаг 6

Вы, наверное, заметили небольшую проблему в Safari: моноширинный шрифт основного текста отображается по-разному. Для текста в пикселях Safari верно отображает моноширинный шрифт такого же размера, как и пропорциональный шрифт, окружающий его. Если текст указан в em, то Safari отображает моноширинный текст намного меньше окружающего его текста. Различия появляются вследствие разного размера шрифта по умолчанию для пропорционального (16px) и моноширинного шрифта (13px). В Safari 3a на OS X такой проблемы не существует.

Вы можете решить, что мелкий моноширинный текст не очень-то помешает вам и вашим читателям, использующим Safari. Для тех, кто не может ждать, альтернативным решением является установка шрифта в пикселях для Safari.

Добавим условный комментарий в наши стили, для того чтобы установить размер в пикселях для всех браузеров, кроме IE6 и IE7 (конструкция [if !IE] заставляет IE/Win игнорировать заключенную в комментарии разметку).

01 <style type="text/css">
03     font-size:100%;
04     line-height:1.125em;
08     font-size:0.875em;
12     font-size:0.75em;
18 <style type="text/css">
20     font-size:16px;

По результату видно, что теперь шрифт во всех браузерах выглядит одинаково, включая и моноширинный текст в Safari 2.

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

Заключение

Нашей целью был поиск способа задания параметров текста, который бы позволил дизайнерам сохранить тщательный контроль над его оформлением, не жертвуя при этом возможностями пользователя по настройке текста. Мы протестировали различные единицы измерения в популярных браузерах. Указывая величину шрифта и высоту строки в em, с процентными значениями для элемента body (и с дополнительным условием для Safari) было показано, как придать тексту аккуратность и чёткость, при этом оставляя возможность его масштабирования. Эти методы вы можете с уверенностью положить в свой багаж знаний и использовать в качестве одного из лучших способов по установке параметров текста в CSS, который удовлетворяет как дизайнерам, так и пользователям сайтов.

Приложение

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

Источник:   w3pro.ru

на Ваш сайт.

cmsart.ru

Как редактировать CSS шаблона в Joomla?

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

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

Зачем редактировать CSS стили шаблонов?

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

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

 

Где находится нужный CSS файл?

В современных шаблонах для Joomla и других CMS как правило содержится много папок, в которых располагаются файлы, обслуживающие работу определенных модулей, вывод стилей и т.д. Практически всегда, отвечающие за дизайн шаблона файлы находятся в папках шаблона под названием CSS. В таких шаблонах может быть несколько папок с таким названием, да и в самих папках можеть находиться много файлов с расширением .css и нужно четко понимать, какой именно файл нужно редактировать.

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

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

Должен сразу заметить, что у меня на ноутбуке установлена ОС Lubuntu, поэтому графика программ и приложений у Вас может отличаться, но это не имеет принципиального значения.

Справа видим HTML-код шаблона, но поскольку нам нужно отредактировать CSS-файл, отвечающий за стиль отображения шапки сайта, переходим сразу в него, нажав на его названии (кликните там, где показано в скриншоте выше красным). В итоге нам открывается нужный CSS файл (смотрите скриншот ниже).

Удобная штука! Вам сразу же показан нужный участок кода, что значительно облегчает работу! Но перед тем как начать фокусы с дизайном, давайте в основных понятиях проанализируем тот кусок кода, который будем редактировать. Вот ниже его и приведу:

td.logoheader {  margin: 0;  padding:  0;  background     : url(../images/123.png)  #4B6B94 no-repeat bottom center;  height         : 146px;  width          : 100%;   }

td.logoheader - имя шапки сайта в CSS-файле

background - фон шапки сайта, который состоит из картики (url(../images/123.png)) и из html-кода цвета фона (#4B6B94), а также из правила, которое указывает картинке не тиражироваться (no-repeat) и находиться внизу по центру (bottom center)

height - высота шапки сайта в пикселях (в данном случае - 146px)

width - ширина шапки сайта по отношению к шаблону, в примере выражена в % (100%)

Для изменения цвета фона, размера шапки сайта и самой фоновой картинки мы будем вносить изменения в параметры background и height, остальные не будем трогать.

Где следует вносить изменения в CSS-файл?

Самое интересное и приятное заключается в том, что изменения мы будем вносить в код прямо в редакторе таблиц стилей в браузере Firefox (смотрите второй скриншот). И что очень удобно, изменения будут отображаться в реальном времени и только для Вас! Таким образом Вы сможете провести эксперименты, найти оптимальное решение в дизайне и уже только потом внести остаточные изменения в CSS-файл шаблона! Согласитесь - это избавляет от массы проблем :)

Для наглядности, давайте сделаем следующие изменения:

Кстати, чтобы точно узнать путь к папке, в которой лежит нужное изображение, нужно просто на самом изображении в браузере кликнуть правой кнопкой мыши, далее выбрать пункт Открыть фоновое изображение и в браузерной строке увидите полный путь от домена до названия самого файла :)

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

С какими проблемами можете столкнуться при окончательном редактировании CSS-файла шаблона Joomla?

Вроде уже потренировались в редакторе браузера, определились с изменениями в дизайне. Заходите через FTP-клиент на сервер или через менеджер файлов хостинга, скачиваете нужный CSS-файла шаблона, открываете его в Notepad++ (или в текстовом редакторе JuffEd, если у Вас Ubuntu), вносите изменения в сам файл, сохраняете, заливаете измененный файл на сервер но никаких визуальных изменений в итоге не произошло? Что нужно сделать:

Эти простые манипуляции должны помочь :)

На этой позитивной ноте заканчиваю статью "Как редактировать CSS шаблона в Joomla?", которая имеет универсальный алгоритм и может быть полезной для всех веб-мастеров, не зависимо от CMS сайта. Если Вам понравилась статья, можете поделиться ею в соцсетях, возможно, она будет для кого-то не менее полезной:) Успехов Вам в веб-дизайне и до встречи в следующих статьях!

А если у Вас возникли вопросы к данной статье, пожалуйста, спрашивайте через форму комментариев ниже :)

 

kleparj.com

Перевод страниц на Joomla. | CSS | HTML | Joomla | Russian

diastark

Hello sir/madam , We have good experience of PHP,JOOMLA,HTML,HTML5,CSS, Ajax,jquesry,JavaScript,Mysql, Graphic Design,Website Design, Android, mobile application,Photoshop, Banner Design ,Flayer mail,Logo Design, More

www.freelancer.com

css размер шрифта

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать шрифт в CSS. В данной статье я бы хотел рассказать, как задать размер шрифта в CSS. Если размер шрифта не задавать, то браузер будет отображать текст стандартным размером шрифта (каким — узнаете ниже). Размер шрифта задаётся с помощью свойства font-size. Существуют следующие способы задания размера шрифта:

Браузер по умолчанию отображает размер шрифта следующим образом:

Т.е все эти 5 значений равны между собой. Убедитесь в этом сами, задав размер шрифта любым из этих 5 способов.

Давайте создадим тестовую html-страницу.

<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p>Первый абзац данного текста</p> <p>Второй абзац данного текста</p> </body> </html>

Допустим мы хотим увеличить размер шрифта и задать его в процентах. Для этого в файле стилей style.css необходимо написать:

p { font-size:120%; }

Обновите страницу и вы увидите, что базовый размер шрифта увеличился. Если вы хотите уменьшить размер шрифта, то соответственно, нужно указывать число, меньшее базового размера. Давайте зададим размер шрифта в единицах. Данная единица измерения пришла из книгопечатания (1em = 100%):

p { font-size:0.7em; }

Вы увидите, что шрифт уменьшился. Как и проценты, данная единица хорошо масштабируется.

На своих сайтах я обычно задаю размер в пикселях (px). Раньше считалось, что браузеры плохо масштабируют пиксели. На данный момент все современные браузеры очень хорошо справляются с этой задачей.

В пунктах обычно размер не задают (очень редко где встречал, да и смысла в этом нет, когда есть другие хорошие способы). Один пункт равен 0,35 миллиметра.Ключевые слова large, medium, small встречаются крайне редко. Если нужно ещё меньше, чем small, то можно писать x-small или xx-small (что ещё меньше). То же самое и для large.

Домашнее задание: создайте тестовую html-страницу и задайте размер шрифта с помощью всех 5 способов.

В данной статье вы узнали, как задать размер шрифта в CSS.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Следующая статья >

alekseygulynin.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта