Применение стилей CSS в редакторе WordPress

Применение стилей CSSЗдравствуйте, дорогие читатели!

В сегодняшнем юбилейном, 100-м посте я хочу написать о применении стилей во встроенном редакторе WordPress для нестандартного оформления контента. Этот материал является продолжением статьи «HTML-редактор WordPress и его возможности».

С помощью стилей создается внешний вид страницы, ее оформление. Аббревиатура CSS означает Cascading Style Sheets (Каскадные таблицы стилей), об этом я уже писал в статье «Что такое CSS», но приходится немного повторяться.

Слово «каскадные» можно объяснить тем, что существует три способа описания стилей, и браузер постепенно, каскадом, прочитывает их и применяет к контенту. Кроме того, между стилями существует так называемое наследование, но о нем позже.

Способы вставки стилей

Как я уже отметил, существует три способа вставки стилей: внешний файл, внутренний стиль и строчный стиль. Рассмотрим их подробнее.

 Внешний файл

Каждый современный сайт имеет такой файл (а, бывает, и не один). Чаще всего он называется style.css. В нем описываются все методы оформления сайта: как оформляются абзацы, списки, таблицы, какие используются фоны и т. д.

Для подключения этого файла применяется тэг link в области head

1
<link rel=”stylesheet” type=”text/css”  href=”style.css” />

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

 Внутренний стиль

Для описания этого стиля не используется специальный файл, он прописывается в HTML-файле с помощью тэга style в области head. Например

1
2
3
4
5
6
7
<style type=”text/css” >
.styletext {
color: red;
font-size: 14px;
font-family: Arial;
}
</style>

Этот стиль также нельзя редактировать в HTML-редакторе WordPress.

 Строчный стиль

Этот стиль уже прописывается внутри HTML-тэгов, и именно его можно применять для изменения внешнего вида записей в WordPress. На нем я остановлюсь подробнее.

Форматы строчных стилей

Строчные стили применяются для всех тэгов, которые мы рассматривали в статье «HTML-редактор WordPress и его возможности».

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

Для блоков

1
<div style=”стиль: значение;  стиль: значение; ”></div>

Для изображений

1
<img src=”” style=”стиль: значение;  стиль: значение; ”/>

Для ссылок

1
<a href=”” style=”стиль: значение;  стиль: значение; ”>Текст ссылки</a>

Для выделенной части текста

1
<strong style=”стиль: значение;  стиль: значение; ”>Выделенный текст</strong>

Таблицы

1
2
3
4
5
6
<table style=”стиль: значение;”>
<tr style=”стиль: значение;”>
<td style=”стиль: значение;”>содержимое ячейки</td>
<td style=”стиль: значение;”>содержимое ячейки</td>
</tr>
</table>

Списки

1
2
3
4
<ul style=”стиль: значение;”>
<li style=”стиль: значение;”>Элемент списка</li>
<li style=”стиль: значение;”>Элемент списка</li>
</ul>

 Стили для текста

Стиль: font-family — шрифт.
Значение: Название шрифта — Arial, Times New Roman, Comic Sans MS…
Например,

1
<p style="font-family: Arial;">Этот текст содержит фразы, написанные несколькими шрифтами. Основной шрифт - Arial. <span style="font-family: Times New Roman;">Этот фрагмент написан шрифтом Times New Roman,</span> <span style="font-family: Comic Sans MS;">а этот - шрифтом Impact.</span> Здесь опять Arial.</p>

Этот текст содержит фразы, написанные несколькими шрифтами. Основной шрифт — Arial. Этот фрагмент написан шрифтом Times New Roman, а этот — шрифтом Impact. Здесь опять Arial.


Стиль: font-size — размер шрифта.
Значение: указывается в пикселях.
Например,

1
<div style="font-size: 30px;">Текст написан крупным шрифтом.</div>
Текст написан крупным шрифтом.

Стиль: font-style — стиль текста.
Значения: normal — обычный, italic — курсив.
Например,

1
<p>Этот абзац содержит текст, в котором один <span style="font-style: italic;">фрагмент выделен курсивом,</span> а остальная часть написана обычным шрифтом.</p>

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


Стиль: font-weight — насыщенность текста.
Значения: normal — обычный, bold — жирный.
Например,

1
<p>Этот абзац содержит текст, в котором один <span style="font-weight: bold;">фрагмент выделен жирным,</span> а остальная часть написана обычным шрифтом.</p>

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


Стиль: text-decoration — украшение текста.
Значения: line-through — зачеркнутый, overline — надчеркнутый, underline — подчеркнутый, none — нет.
Например,

1
2
3
4
<div style="text-decoration: line-through;">Это зачеркнутый текст</div>
<div style="text-decoration: overline;">Это текст с полосой наверху</div>
<div style="text-decoration: underline;">А это подчеркнутый текст</div>
<a href="http://kviter.ru/karta-sayta" style="text-decoration: none;">Это ссылка без подчеркивания</a>
Это зачеркнутый текст
Это текст с полосой наверху
А это подчеркнутый текст

Это ссылка без подчеркивания


Стиль: text-transform – трансформация букв.
Значения: capitalize – Первые Заглавные, lowercase – все маленькие, uppercase – ВСЕ БОЛЬШИЕ, none – нет.
Например

1
2
3
<div style=”text-transform: capitalize;”>первая буква каждого слова большая</div>
<div style=”text-transform: lowercase;”>Все Буквы маленькие</div>
<div style=”text-transform: uppercase;”>Все буквы большие</div>
первая буква каждого слова большая
Все Буквы маленькие
Все буквы большие

Стиль: text-align — выравнивание текста.
Значения: left — слева,right — справа, center — по центру.
Например,

1
2
3
<div style="text-align: left;">Этот текст выровнен по левому краю.</div>
<div style="text-align: right;">Этот текст выровнен по правому краю.</div>
<div style="text-align: center;">Этот текст выровнен по центру.</div>
Этот текст выровнен по левому краю.
Этот текст выровнен по правому краю.
Этот текст выровнен по центру.

Стиль цвета

Стиль: color
Значения: можно указать название цвета (blue, red …), но чаще используется его шестнадцатеричный код.
Например,

1
<p style="color: #00ff00";>Этот текст напечатан зеленым цветом, <span style="color: #ff0000";>а этот фрагмент выделен красным.</span></p>

Этот текст напечатан зеленым цветом, а этот фрагмент выделен красным.

Стили для блоков

Стиль: width, height — ширина и высота.
Значения: число в пикселях.


Стиль: border — граница.
Значения: у границы указывается толщина в пикселях, вид (dotted, dashed, solid, double, groove, ridge, inset, outset), цвет. Все элементы и порядок их расположения обязательны.
Рассмотрим пример

1
<div style="width: 400px; border: 2px dotted #0000ff">Текст расположен в блоке размером 400 пикселей шириной с рамкой из точек синего цвета.</div>
Текст расположен в блоке размером 400 пикселей шириной с рамкой из точек синего цвета.

Попробуйте сами поэкспериментировать со значениями.


Стиль: padding — отступы внутри блока.
Значения для этого стиля можно записывать разными способами:
padding: 5px — со всех сторон отступ 5px
padding: 3px 5px — сверху и снизу 3px, справа и слева 5px
padding: 3px 10px 5px 15px — сверху 3px, справа 10px, снизу 5px и слева 15px (по часовой стрелке)
Можно использовать и другую форму записи:
padding-top: — отступ сверху
padding-right: — отступ справа
padding-bottom: -отступ снизу
padding-left: — отступ слева.

Изменим предыдущий пример, добавив отступы и изменив вид рамки

1
<div style="width: 400px; border: 5px inset #ff0000; padding: 10px">Текст расположен в блоке размером 400 пикселей шириной с рамкой красного цвета.</div>
Текст расположен в блоке размером 400 пикселей шириной с рамкой красного цвета.

Стиль: margin — отступы вокруг блока.
Значения записываются аналогично предыдущему стилю.
Пример не привожу, можно попробовать самостоятельно.


Стиль: background — фон.
Значение: код цвета.
И последний на сегодня пример

1
<div style="width: 400px; border: 5px outset #00ff00; padding: 10px; margin: 5px; background: #000f00">Текст расположен в блоке размером 400 пикселей шириной с рамкой зеленого цвета, с внутренними отступами 10px, внешними отступами 5px и ярко-зеленым фоном.</div>
Текст расположен в блоке размером 400 пикселей шириной с рамкой зеленого цвета, с внутренними отступами 10px, внешними отступами 5px и ярко-зеленым фоном.

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

Более глубоко и полно изучить CSS вы сможете, используя курс Евгения Попова «CSS практика». Ничто так не повышает ваш уровень в создании качественных веб-страниц, как хорошая порция практики в виде верстки реальных графических шаблонов.

Я надеюсь, что эта статья оказалась для вас полезной. Если так, рекомендуйте ее своим друзьям в соц. сетях. Подписывайтесь на обновления блога, чтобы не пропустить новый интересный материал.

Адаптивная, SEO подготовленная WordPress тема
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...
Понравилась статья? Поделиться с друзьями:
Комментариев: 6
  1. Кэтэлин

    Прекрасная статья, спасибо. Могу поделиться с вами другими не менее полезными способами.

  2. максим

    Здравствуйте! очень хорошая статья, обязательно воспользуюсь данными советами.

  3. witos1

    Ой как сложно.

  4. Валентин

    Хороший пример, разумно сделано. Но лучше бы было научить через файл стилей все это делать, так верстка правильнее получается.

    1. Владимир
      Владимир (автор)

      Редактировать файл стилей неопытному блогеру опасно — можно испортить весь сайт, а поэкспериментировать с одной записью в редакторе WordPress нестрашно.

      1. Валентин

        Тоже верно, но для этого и надо делать резервные копии файлов. Кстати сам вордпресс очень много вставляет своих стилей в статьях, нужных и не очень, за этим тоже надо следить.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: