Шаблоны для новичков. Урок 2. Что такое CSS

Просмотров: 210Комментарии: 0
MaxSite CMSСоздание шаблонов (версии 0.8x)

Все сайты держатся как минимум на двух китах: HTML и CSS. Основы HTML мы уже рассмотрели, теперь очередь за CSS. Что это за «зверь» и с чем его едят?

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

Тогда и придумали использовать HTML только для описания структуры, а как именно оформлять - вынести в отдельный блок - CSS.

Почему сразу изучаем стили?

Вот действительно: в других же учебниках HTML тэги изучаются гиганским количеством часов?! Но я считаю, что тэги можно преспокойнейшим образом изучать не напрягаясь. Скажу больше: в HTML-верстке нам понадобятся буквально десяток тэгов, которые вызубрятся по ходу. :-)

Браузеры

Важный момент - не все браузеры одинаковы полезны. Ну если совсем точно, то есть только один проблемный браузер - это Internet Explorer (IE). На сегодня существует стандарт HTML5 и CSS3. Но IE их толком не подерживает, поэтому вебмастера вынуждены идти на различные хитрости или отказываются от новых возможностей из-за ограничений IE. К счастью, доля IE потихонечку снижается, и если вдруг по какому-то великому недоразумению вы пользуетесь браузером IE, немедленно скачайте любой современный браузер: FireFox, Chrome или Opera!

Атрибут STYLE

Хватит введений, переходим непосредственно к стилям!

У практически любого HTML-тэга есть атрибут STYLE, в котором и размещаются css-стили.

<span style="color: red; font-weight: bold;">Текст<span>

Мы видим обычный тэг и атрибут style. Стили имеют свой синтаксис:

свойство: значение; свойство: значение;

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

В нашем примере используеся строковый тэг SPAN. Это универсальный тэг, и стандартно он никак не влияет на оформление.

Но в style мы указывем вывести этот текст красным цветом (color: red) и полужирным (font-weight: bold).

Уверен, что вы уже проверяете этот код в MaxSite CMS.

Стили в редакторе

Результат:

Результат

Попробуйте применить эти стили к другим уже известным вам тэгам.

Способы подключения стилей

Мы рассмотрели пример внутренних стилей - это стили, которые указываются непосредственно в атрибуте style. При оформлении текстов в записях сайта, такие стили очень удобны. Можно использовать любые варианты оформления, которые вам придут в голову.

Вместе с тем, иногда и такие стили бывают довольно громоздкими. Например на странице мы хотим использовать несколько H2-заголовков для оформления. При использовании внутренних стилей нам придется их копировать от одного заголовка к другому. Это не совсем удобно.

Для таких случаев можно использовать предопределенные стили. Например мы можем определить набор правил myred, а потом просто указывать его в атрибутах тэгов. Такой атрибут называется class:

<span class="myred">текст</span>

Сам класс myred должен быть где-то определен заранее, чтобы браузер о нем знал.

Такие стили задаются где-то в начале HTML-документа с помощью тэга STYLE.

<style>
span.myred {color: red; font-weight: bold;} 
</style>
 
<span class="myred">текст</span>

В этом примере мы задали класс myred, который и указали в class тэга SPAN.

Обратите внимание на синтактис задания стилей в STYLE. Общая схема такая:

селектор {свойство: значение; свойство: значение;}

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

В CSS существует несколько видов селекторов. Самый простой это селектор тэга:

тэг {свойство: значение; свойство: значение;}

Например можно сделать так:

<style>
span {color: red; font-weight: bold;} 
</style>
 
<span>текст</span>

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

В нашем первом примере мы указали селектор «тэг.класс»:

тэг.класс {свойство: значение; свойство: значение;}

То есть браузер применит стили только к тэгам с указанным классом.

Рассмотрим еще пример:

<style>
span.red {color: red;} 
span.blue {color: blue;} 
span.green {color: green;} 
</style>
 
<span class="red">текст1</span> 
<span class="blue">текст2</span>
<span class="green">текст3</span>

Первый текст окрасится в красный цвет, второй в синий, третий в зеленый.

При задании стиля иногда можно опускать указание тэга:

.класс {свойство: значение; свойство: значение;}

В этом случае стиль будет применен ко всем тэгам, у которых указан необходимый класс.

Где следует располагать стили

Задавать стили, как мы сейчас делаем в теле записи не совсем правильно. Браузеры ничего не имеют против такого способа, но вот стандарт CSS и HTML рекомендует это делать в самом начале документа. К структуре HTML страниц мы доберемся чуть позже, пока просто запомните, что в MaxSite CMS css-стили можно располагать в Настройках шаблона - Оформление.

Стили в настройках шаблона

Преимущество этого способа в том, что стили можно задать один раз и после использовать на всех страницах сайта.

Обратите только внимание, что стили здесь нужно указывать без обертки STYLE - MaxSite CMS делает это автоматически.

BB-код - это HTML тэги

А теперь вернемся к HTML-тэгам. Я не просто так сказал, что выучить HTML довольно просто, особенно, если прямо перед глазами есть подсказки. :)

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

Справка по BB-кодам

Рассмотрите внимательно этот справочник и обратите внимание на соответствие ВВ-кода HTML-представлению. Например ВВ-код BOLD превратится в тэг B.

Для ВВ-кодов можно указывать различные параметры, например css-стили.

Пример BB-кода в тексте

Результат:

Результат

И тут сразу отмечаем одну важную деталь - если используется BB-код, то не нужно использовать обрамляющий html. MaxSite CMS самостоятельно разберется со всеми BB-кодами и преобразует их в правильный HTML-код.

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

Теперь вернемся к стилям. :)

Внешние стили

Есть ещё один способ подключения css-стилей - из внешнего файла. По сути вся верстка шаблона и будет происходить в таком css-файле. Пока же нам нет необходимости заботиться об этом, поскольку MaxSite CMS берет на себя всю рутину по подключению файлов. Нам остается заниматься только творчеством. :)

Готовые хелперы (помощники)

В MaxSite CMS в default-шаблоне в подключаемом css-файле уже присутствуют немного css-стилей, которые можно использовать для своих нужд. Например есть классы для цвета текста:

  • red
  • blue
  • green
  • gray
  • black
  • white
  • yellow

А для цвета фона можно использовать похожие классы:

  • bg-red
  • bg-blue
  • bg-green
  • bg-gray
  • bg-black
  • bg-white
  • bg-yellow

Рассматривать все стили пока не входит в нашу задачу, но вы можете с ними ознакомиться в файле style-all.css (в конце секция HELPERS), который находится в каталоге /css/ default-шаблона.

Где находятся файлы MaxSite CMS

А вот теперь мы должны научиться понимать где находятся основные файлы и каталоги MaxSite CMS на сервере (диске). Тут всё просто: основной каталог application/maxsite/.

  • Плагины в подкаталоге plugins
  • шаблоны - templates
  • админ-панель - admin
  • ядро в common

Соответственно default-шаблон находится в подкаталоге шаблонов - в default. Полный путь будет таким: application/maxsite/templates/default/. В нем уже ищем нужный файл.

Справочник CSS

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

Цвета в CSS

Теперь немного практики. В качестве учебного пособия рассмотрим некоторые css-свойства, которые наиболее часто используются для оформления текстов. Один из них - цвет текста color.

селектор {color: цвет}

Цвета в CSS (HTML) задаются несколькими способами. Самый простой - явно указать имя цвета. Существуют таблицы предопределенных цветов, которые понимают все браузеры. В редакторе Editor markItUp также предусмотрена подсказка по цветам:

Таблица базовых цветов HTML

Таблица цветов

Мы видим название цвета, а также его числовое представление (начинается с #). Оба этих представления полностью идентичны и какой вариант использовать, решать вам. Наиболее часто для основных (самых простых) цветов (red, white, black и т.п.) используется название цвета. А для сложных, имеющих длинное/сложное название - числовое представление.

Числовое представление цвета

Число представляет собой комбинацию трех цветовых составляющих R (red), G (green), B (blue). Вы наверняка слышали о модели RGB, которая применяется в телевизорах, мониторах и т.п. Цвет получается путем смешивания этих трех компонентов. Каждый компонент может иметь интенсивность от 0 до 255. Скажем для красного цвета: R=255, G=0, B=0.

В HTML принято (его же придумали программисты ;) ) указывать цвета в 16-ричной системе исчисления, где 0 = 0, а 255 = FF. Запоминать в общем-то особого смысла нет, поскольку все современные программы отображают значение цвета сразу во всех вариантах.

Значение цвета состоит из трех пар, где первая это R, вторая - G, третья - B: #RRGGBB. Теперь, глядя на такую запись вы сразу поймете что она означает.

Но это еще не всё. Можно использовать короткую запись цвета. Она используется в случаях, когда парные цифры равны. Например #FF8800 можно сократить до #F80.

Еще одним способом указания цвета является использование rgb(). Он используется там где нужно указывать значение в десятичном исчислении:

color: rgb(255,80,23)

На закуску посмотрите пример, где один и тот же цвет задан разными способами:

<div style="color: red">текст1</div>
<div style="color: #F00">текст2</div>
<div style="color: #FF0000">текст3</div>
<div style="color: rgb(255,0,0)">текст4</div>

Или тоже самое в BB-кодах:

[div=color: red]текст1[/div]
[div=color: #F00]текст2[/div]
[div=color: #FF0000]текст3[/div]
[div=color: rgb(255,0,0)]текст4[/div]

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

Меняем стили текста сайта

Обобщив всю теорию давайте попробуем поменять на всём сайте основной шрифт. Изменим цвет, гарнитуру и размер.

За цвет текста, как мы уже разобрались, отвечает свойство color. Идём в Настройки шаблона - Оформление и пишем:

body {color: #191970}

Тэг BODY является т.н. телом документа, то есть всё, что выводится на странице находится внутри BODY. Поэтому мы и задаем цвет текста для него, а все вложенные элементы (тэги) автоматически примут эти же свойства.

При условии, конечно, что в них не указаны свои.

После сохранения, мы видим, что основной текст сайта стал цветом Midnightblue.

Теперь разберемся с гарнитурой (шрифтом) текста. По-умолчанию для default-шаблона используется шрифт Verdana. В HTML принято использовать на сайтах т.н. безопасные шрифты, то есть те шрифты, которые установлены практически у всех пользователей. Вот этот список:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

Шрифт задаётся с помощью свойства font-family. Например сделаем для сайта основной шрифт Georgia. Допишем для BODY:

body {color: #191970; font-family: Georgia;}

Последний штрих - размер основного текста. Для этого используется свойство font-size. В качестве значений единиц измерения можно использовать:

  • pt - привычные типографские пункты
  • px - высота в пикселах
  • % - процент от базового размера
  • em - процент, только заданный в диапазоне от 0 до 1.

Стандартно в default-шаблоне установлен размер 11pt. Изменим на 14pt:

body {color: #191970; font-family: Georgia; font-size: 14pt;}

Измененный стиль текста

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

««« Урок 3 | Урок 1 »»»

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

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.