»

 Будь в курсе событий:

css integration

Интеграция CSS
Интеграция CSS

Наконец то я перебрался на свой старый сайт и доволен, что буду писать свои уроки именно здесь. Надеюсь вам понравится :)

Интеграция CSS

Давайте поговорим сегодня об интеграции CSS в наши документы. Есть несколько способов и все они работают на Jimdo. Честно говоря, меня уже довольно много людей спрашивали, а зачем вообще нужно внедрять на свои страницы CSS. Ответ на поверхности. Мы хотим видеть наши сайты более привлекательными и это стремление к идеалу есть совершенно нормальное явление. Поэтому необходимо не только знать, что такое CSS, но так же эффективно использовать данный инструмент разметки. Давайте перейдем к уроку, в котором я опишу основные способы интеграции кода в HTML.

Самый распространенный способ, который на мой взгляд, меньше всего подходит для CMS Jimdo - прописать в области head ссылку на отдельный файл style.css. Напоминаю еще раз, данный пример вставки кода будет работать в том случае, когда на другом хостинге расположен файл style.css.

Способ 1. Ссылаемся на отдельный .css файл

html
<html>
  <head>
    <title>Заголовок документа</title>
    <!-- Интеграция style.css в документ -->
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <p>Контент документа</p>
  </body>
</html>

Непарный тег <link /> определяет ссылку на внешний файл стиля style.css

Способ 2. Подключение .css в тексте

html
<p style="color:red; font-weight:bold">Текст красного цвета, полужирный</p>

Данный пример будет полезен в том случае, когда вы неплохо орудуете виждетом html, который встроен в Jimdo в качестве заменителя WYSIWYG редактора. Есть еще один способ вставки кода в хедер вашей страницы. Наиболее часто используется, если код не очень большой, но для Jimdo - это практически палочка-выручалочка. Рассмотрим третий способ.

Способ 3. подключение .css в тексте

html
<html>
  <head>
    <title>Подключение CSS файла</title>
    <!-- Подключаем в хедере стиль при помощи тега <style type="text/css"> -->
    <style type="text/css">
p {color:#006633}
.forexample {color:Yellow}
#ident {color:#ffffff; font-weight:bold}
body {background-color:#66cc66}
</style>
  </head>
  <body>
    <p>Текст параграфов этого документа темно-зеленого цвета</p>
    <p>Текст</p>
    <p class="forexample">А здесь текст желтый</p>
    <p id="ident">Текст белого цвета, полужирный</p>
    <h2 class="forexample">Заголовок</h2>
    <p>Текст</p>
  </body>
</html>

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

 

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

Оставить комментарий

Комментарии: 0