<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое SVG? Стилизуем объекты.

Что такое SVG? Стилизуем объекты.

Продолжаем изучать векторную графику и сегодня мы узнаем, как стилизовать svg объекты с помощью CSS.

Стилизовать svg объекты через css мы можем так же, как и html элементы, но есть некоторые исключения. Например, чтобы задать фоновый цвет, используется свойство fill, а рамка задаётся с помощью свойства stroke. Все свойства вы можете посмотреть на сайте консорциума w3.org.

Способы стилизации

Первый способ задания стилей - через атрибуты. Этот подход мы уже использовали в предыдущей статье.

<svg>
  <rect width="200" height="200" fill="#ccc" stroke="#000" stroke-width="1">
</svg>

Т.е. мы просто пишем название атрибута-свойства и через равно его значение.

Второй способ задания стилей - через атрибут style.

<svg>
  <rect width="200" height="200" style="fill: #ccc; stroke: #000">
</svg>

Пишем атрибут style и внутри него через точку с запятой свойства. Свойства задаются в таком формате: свойство: значение;

Третий способ задания стилей - через атрибут style в теге head.

<head>
<style>
  <![CDATA[
   rect {
    fill: #ccc;
    stroke: #000;
    stroke-width: 1;
   }

   rect:hover {
    stroke: #0f0;
    fill: yellow;
   }
  ]]>
</style>
</head>
<body>
  <svg>
   <rect x="10" y="10" width="100" height="100">
  </svg>
</body>

В первой статье я говорил, что SVG основан на XML и, следовательно, стили должны быть в секции CDATA.

Четвёртый способ задания стилей - вынести все стили в отдельный файл.

Ничего необычного. Просто вынесите все стили в отдельный .css файл и подключите его в теге head

<link rel="stylesheet" href="style.css">

Вот и все способы задания стилей для SVG объектов. Напоследок, давайте рассмотрим, как задавать общие стили для нескольких элементов.

<svg>
  <g style="fill: #ccc; stroke: #000; stroke-width: 1">
   <circle cx="40" cy="40" r="30" />
   <rect width="50" height="50" x="50" y="30" />
  </g>
</svg>

С помощью тега g можно объединить несколько элементов и к каждому из них будут применены стили, заданные в теге g.

Вот и всё. Сегодня мы разобрались, как стилизовать SVG объекты через css.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Maks4ever Maks4ever 27.12.2014 16:27:46

У меня пример со стилями заработал только без CDATA, с ним был чёрный квадрат

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.