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

Все сайты держатся как минимум на двух китах: 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-кодам.

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

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

Результат:

И тут сразу отмечаем одну важную деталь - если используется 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 также предусмотрена подсказка по цветам:

Мы видим название цвета, а также его числовое представление (начинается с #). Оба этих представления полностью идентичны и какой вариант использовать, решать вам. Наиболее часто для основных (самых простых) цветов (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 »»»