Free login module joomla

Редактор JCE | Изменение стиля текста

styleПри создании сайта постоянно возникает необходимость изменения стилей текста для самых разных фрагментов и элементов HTML-страниц. Такой подход не только добавляет сайту уникальность, но и повышает качество восприятия информации пользователями. В языке HTML для этого существуют специальные теги, но для начала их нужно как минимум знать, да и прописывать их вручную довольно таки долго и трудоемко. Значительно упростить этот процесс нам поможет лучший визуальный редактор JCE. Широкий функционал  для изменения стиля выбранного текста содержит в себе инструмент "Изменение стиля выбранного текста". В данной статье я подробно описал все CSS-стили, используемые инструментом "Изменение стилей", а также привёл теги в HTML кодах. Надеюсь, что данная статья поможет Вам разобраться в фишках  редактора JCE, а также освоить азы языка HTML.

Если нажать на значек кнопка изменения стилей изменения стиля, то появится окно, состоящее из 7 вкладок:

Вкладка "Текст" (Text). Здесь указываются параметры для выделенного текста: шрифт, размер, варианты изменения жирности, высота строки, цвет, оформление (подчеркнутый, надчеркнутый, зачеркнутый, мерцающий, без эффекта)

 Вкладка "Текст".

  • Шрифт (font-family)выбор семейства шрифта для оформления текста содержимого. Список шрифтов может включать несколько названий, разделенных запятой. Заканчивается список, как правило, словом описывающим тип шрифта — serif, sans-serif, cursive, fantasy или monospace.
  • Размер (font-size) - определяет размер шрифта текста. Константы (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. Константы (larger, smaller) устанавливает относительные размеры шрифта. Так как размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу  для того, чтобы определить размер шрифта текущего элемента. В дополнительном поле в качестве значений указываются любые допустимые единицы CSS: высота шрифта элемента (em), пункты (pt), высота символа х (ex), пикселы (px), проценты (%) и др. Размер шрифта родительского элемента берется за 100%.
  • Стиль (font-style) – определяет стиль шрифта обычный (normal), курсив (italic) или наклонный (oblique) образуется путем наклона обычных знаков вправо.
  • Высота строки (line-height )- межстрочный интервал текста, отсчитывается от базовой линии шрифта. В дополнительном поле в качестве значений указываются любые  единицы длины, принятые в CSS — пикселы (px), пункты (pt),  дюймы (in)  и т.д.  При  использовании записи в процентах за 100% берется высота шрифта.
  • Цвет (color) – цвет текста. При клике по кнопке "Обзор" откроется окно с палитрой цветов.

цвет текста

  • Оформление (text-decoration) – оформление отмеченного текста в виде подчеркивания (underline), перечеркивания  (line-through), линии над текстом (overline) , мигания (blink) и без эффектов (none). Одновременно можно применить несколько стилей, перечисляя их значения через пробел.
  • Толщина (font-weight)- насыщенность шрифта: bold — полужирное начертание, normal — нормальное начертание. Также можно использовать условные единицы от 100 до 900 с шагом 100 в сторону увеличения жирности. Значения bolder и lighter устанавливают жирность относительно насыщенности родителя в большую и меньшую сторону.
  • Вариант (font-variant )- выбор вида представления строчных букв — оставить регистр символов исходным без модификаций (normal) или делать все строчные символы как заглавные уменьшенного размера (small-caps).
  • Регистр (text-transform) - преобразование текста в заглавные или прописные символы. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Capitalize - капитализирует каждое слово. Например: "djek milton" станет "Djek Milton".
Uppercase - конвертирует все символы в верхний регистр. Например: "djek milton" станет "DJEK MILTON".
Lowercase - конвертирует все символы в нижний регистр. Например: "DJEK MILTON" станет "djek milton".


Вкладка "Фон" (Background)

Вкладка "Фон"

  • Цвет фона (background-color) - определяет цвет фона элемента. Клик по кнопке "Обзор" откроет палитру цветов.
  • Фоновое изображение (background-image) - устанавливает фоновое изображение для элемента. Если одновременно с изображением для элемента задан цвет фона, то он будет показан пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ отключен в браузере. Путь к фоновому изображению задайте с помощью кнопки "Обзор".
  • Повторить (repeat) - определяет как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение изображения только по горизонтали (repeat-x), по вертикали (repeat-y)  или в обе стороны (repeat).
  • Прокрутка фона (background-attachment)  - устанавливает будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано (fixed) и оставаться неподвижным или перемещаться (scroll) совместно с документом.
  • Горизонтальная позиция (background-position) - задает начальное положение фонового изображения, установленного с помощью свойства background-image. Возможные значения: left, center или right. Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Список располагается в правом поле.
  • Вертикальная позиция  (background-position) - задает начальное положение фонового изображения, установленного с помощью свойства background-image. Возможные значения: top, center или bottom.

Вкладка "Блок" (Block).

Вкладка "Блок"

  • Отступы между словами (word-spacing) - задает интервал между словами. В качестве значений, в поле справа, предложены единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но рекомендую проверять работоспособность на разных браузерах.
  • Интервал между знаками (letter-spacing)- определяет интервал между символами в пределах элемента. В качестве значений, в поле справа, предложены единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц, которые основываются на размере шрифта (ems и exs).
  • Выравнивание по вертикали (vertical-align) - выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Доступные значения:
Baseline - выравнивание базовой линии текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, тогда в качестве нее принимается нижняя граница элемента.
Bottom - выравнивание основания текущего элемента по нижней части элемента строки, расположенного ниже всех.
Middle - выравнивание средней точки элемента по базовой линии родителя плюс к ней половина высоты родительского элемента.
Sub - элемент отображается как подстрочный, в виде нижнего индекса. Размер шрифта остается прежним.
Super - элемент отображается как надстрочный, в виде верхнего индекса. Размер шрифта при этом не меняется.
text-bottom - нижняя граница элемента выравнивается по нижнему краю текущей строки.
text-top - верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
Пиктограмма добавить значение означает "добавить значение". В качестве значения можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, а отрицательное число опускает его вниз. При использовании процентов, отсчет будет вестись от значения свойства line-height, при этом 0% аналогично значению baseline.

  • Выравнивание текста (text-align) - определяет горизонтальное выравнивание текста в пределах элемента.

Доступные значения:
center - выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, в котором расположен текстовый блок. Строки текста как бы нанизываются на невидимую глазу ось, которая проходит по центру веб-страницы сайта. Подобный способ выравнивания используется в заголовках и различных подписях, наподобие подрисуночных, что придает солидный вид оформлению текста. В других случаях выравнивание по центру применяется очень редко потому, что читать большой объем такого текста неудобно.
Justify - выравнивание по ширине. Осуществляется одновременное выравнивание по левому и правому краю. Чтобы произвести выравнивание по ширине браузер добавляет пробелы между словами.
Left - выравнивание текста по левому краю. Строки текста выравнивается по левому краю, а правый край располагается как будто "лесенкой". Способ выравнивания по левому краю является наиболее популярным на сайтах, так как позволяет пользователю быстро отыскивать взглядом новую строку и удобно читать большой текст.
Right - выравнивание текста по правому краю. Строки текста выравнивается по правому краю, а левый остается "лесенкой".  

  • Отступ первой строки (text-indent ) - величина отступа первой строки блока текста (например, для абзаца <p>). В дополнительном поле в качестве значений указываются любые единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки будет вычисляться в зависимости от ширины блока.
  • Пробелы (white-space) - устанавливает как отображать пробелы между словами. Обычно любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>. Помещенный в этот контейнер <pre>… </pre> текст выводится со всеми пробелами заданными пользователем. Свойство white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

Возможные значения:
Normal - текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
Nowrap - пробелы не учитываются, переносы строк в коде HTML игнорируются и весь текст отображается одной строкой. При этом, добавление тега <br> переносит текст на новую строку.
Pre - текст показывается с учетом всех пробелов и переносов, в том виде в котором они были добавлены в коде HTML разработчиком. При этом, если строка получается слишком длинной и не помещается в окне браузера, тогда добавляется горизонтальная полоса прокрутки.
pre-line - пробелы в тексте не учитываются, текст переносится автоматически на новую строку, если он не помещается в заданную область.
pre-wrap - в тексте сохраняются все пробелы и переносы, но если строка по ширине не помещается в заданную область, тогда текст автоматически переносится на новую строку.
Inherit - наследуются значение родителя.

  • Отображение (display) - определяет, как элемент должен быть показан в документе.

Возможные значения этого свойства:
Block - элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
Inline - элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, в результате содержимое блочных элементов будет начинаться с того места, где окончился предыдущий элемент.
inline-block - генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Такой элемент похож на встраиваемые элементы (вроде тега <img>), при этом его внутренняя часть форматируется как блочный элемент, а сам элемент как встроенный.
inline-table - определяет, что заданный элемент является таблицей, как при использовании тега <table>. При этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item - элемент выводится как блочный и добавляется маркер списка.
None - временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
run-in - устанавливает элемент как блочный или как встроенный в зависимости от контекста.
Table - определяет, что элемент является блочной таблицей, аналогично применению тега <table>.
table-caption - задает заголовок таблицы подобно применению тега <caption>.
table-cell - указывает, что элемент представляет собой ячейку таблицы, подобно применению тега   <td> или <th>.
table-column - назначает указанный элемент колонкой таблицы, подобно применению тега <col>.
table-column-group - указывает, что элемент является группой одной или более колонок таблицы, аналогично применению тега  <colgroup>.
table-footer-group - используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы, как при использовании тега  <tfoot>.
table-header-group - предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row - элемент отображается как строка таблицы,  подобно применению тега  <tr>.
table-row-group - создает структурный блок, который состоит из нескольких строк таблицы, как при использовании тега <tbody>.

Вкладка "Контейнер" (Box).

Вкладка "Контейнер"

Здесь задаются настройки для блока текста, направленные на позиционирование.

  • Ширина (Width) – ширина блока. В дополнительном поле в качестве значений указываются любые единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др.
  • Высота (Height) – высота блока. В дополнительном поле в качестве значений указываются любые единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др.
  • Выравнивание с обтеканием (float) - указывает по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно.

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

  • Запрет обтекания (clear) - устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью float, то clear отменяет его действие для указанных сторон.

Доступные значения:
None - отменяет действие свойства clear, но при этом обтекание элемента происходит, как задано с помощью свойства float.
Both - отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда необходимо снять обтекание элемента, но неизвестно точно с какой стороны было это обтекание установлено.
Left - отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз и расположатся под текущим элементом.
Right - отменяет обтекание с правой стороны элемента.

  • Поля (padding) – устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.Одинаково для всех  - снятие или установка галочки позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.
  • Отступ (margin)- устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Одинаково для всех  - снятие или установка галочки позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Вкладка "Границы" (Border).

Вкладка "Границы" (Border).

Настройка границ выбранного элемента.

  • Стиль (border-style) - стиль границы вокруг элемента. Можно задавать индивидуальные стили для разных сторон элемента.

Значения для установки стилей границ:
solid - сплошная линия;
dashed - пунктирная линия;
dotted – линия в виде точек;
double - двойная сплошная линия.
Groove, ridge, inset, outset - линии с имитацией падения тени, выпуклости и т.д.

  • Ширина (border-width)- устанавливает толщину границы элемента.

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в дополнительном поле в пикселах или других единицах.

Цвет (border-color) - устанавливает цвет границы на разных сторонах элемента. Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

Вкладка "Список" (List).В этой вкладке назначаются параметры для нумерованного или ненумерованного списков.

Вкладка "Список" (List)

  • Тип (list-style-type) - изменяет вид маркера для каждого элемента списка. Маркеры различаются для маркированного списка (тег <ul>) и нумерованного (тег <ol>). В выпадающем списке предложен ряд значений, которые зависят от того, к какому типу списка они применяются: маркированному или нумерованному.

Маркированный список
Circle - маркер в виде кружка.
Disc - маркер в виде точки.
Square - маркер в виде квадрата.
Нумерованный список
Decimal - арабские числа (1, 2, 3, 4,...).
lower-alpha - строчные латинские буквы (a, b, c, d,...).
lower-roman - римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha - заглавные латинские буквы (A, B, C, D,...).
upper-roman - римские числа в верхнем регистре (I, II, III, IV, V,...).
none - отменяет маркеры для списка.

  • Маркер (list-style-image) - устанавливает адрес изображения, которое служит в качестве маркера списка.
  • Позиция (list-style-position) - определяет, как будет размещаться маркер относительно текста.

Есть два значения:
outside — маркер вынесен за границу элемента списка.
inside — маркер обтекается текстом.

Вкладка "Позиционирование" (Positioning) . В этой вкладке настраивается общее позиционирование элемента относительно сайта и других элементов.

Вкладка "Позиционирование" (Positioning)

  • Тип (Type position) - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

 Значения:
Absolute - элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице как будто абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom. Стоит отметить, что на положение элемента влияет значение свойства position родителя. Если у родительского элемента значение position установлено как static либо родителя нет, тогда отсчет координат ведется от края окна браузера. Если же у родительского элемента значение position задано fixed, relative или absolute, тогда отсчет координат будет вестись от края родительского элемента.
Fixed - это значение близко к absolute, но в отличие от него элемент привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Relative - элемент устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позиционирование и сдвигает элемент в ту или иную сторону от изначального положения.
Static - элемент отображается как обычно. Добавление свойств left, top, right и bottom не приводит ни к каким результатам.

  • Ширина (width) и высота (height) – блока в пределах которого задается положение элемента.
  • Размещение - положение от нижнего края (bottom), положение от правого края (right), положение от левого края (left) и положение от верхнего края (top). В дополнительном поле в качестве значений указываются любые единицы длины, принятые в CSS: пикселы (px), дюймы (in), пункты (pt) и др.
  • Видимость (Visibility) -  отображение или скрытие элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, однако место, которое элемент занимает, остается за ним.

Значения:
Visible - отображает элемент как видимый.
Hidden - отображает элемент как невидимый или точнее сказать, элемент становится полностью прозрачным, т.к. он продолжает участвовать в форматировании страницы.
Inherit – наследуется значение родителя.

 Z-индекс (наложение)  - управляет размещением элементов по z-оси. Позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное монитору. Это свойство работает только для элементов, у которых значение position задано absolute, fixed или relative.

  • Переполнение (overflow) - управляет отображением содержания блочного элемента, если содержимое целиком не помещается и выходит за область заданных размеров.

Значения:
Visible - отображается всё содержание элемента, даже за пределами установленных рамеров (высоты и ширины).
Hidden - отображается только внутренняя область элемента, остальное содержание будет скрыто.
Scroll - добавляются полосы прокрутки.
Auto - полосы прокрутки будут добавлены только при необходимости.

  • Ограничение (clip) - определяет область, в которой будет показано содержимое позиционированного элемента. Всё, что не помещается в эту область, будет обрезано и станет невидимым. В качестве значений используется расстояние от края элемента (Y1, X1, Y2, X2) до области вырезки, которое задается в дополнительном поле единицах CSS: пикселы (px), em и др.

Для всех рассмотренных вкладок есть возможность добавить тег < span>. Для этого в левом нижнем углу нужно поставить галочку в чекбоксе "Добавить стиль тегом span". 
О функциях остальных кнопок панели инструментов редактора JCE описано здесь.

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Тэги: CSS-стили, font-size, text-decoration, Background, Block, display, Border, Type position, редактор JCE

Добавить комментарий


Защитный код
Обновить