Шаблони для новачків

Всі сайти тримаються як мінімум на двох китах: 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-стилі.

Ми бачимо звичайний тег і атрибут style. Стилі мають свій синтаксис:

«Властивість-значення» розділяється двокрапкою і вказує що саме потрібно змінити в зазначеному HTML-тегу. Якщо вказується кілька властивостей, то їх слід розділяти крапкою з комою.

У нашому прикладі використовуємо строковий тег SPAN. Це універсальний тег, і стандартно він ніяк не впливає на оформлення.

Але в style ми вказуючи вивести цей текст червоним кольором (color: red) і напівжирним (font-weight: bold).

Упевнений, що ви вже перевіряєте цей код в MaxSite CMS.

Спробуйте застосувати ці стилі до інших уже відомим вам тегами.

Способи підключення стилів

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

Разом з тим, іноді і такі стилі бувають досить громіздкими. Наприклад на сторінці ми хочемо використовувати кілька H2-заголовків для оформлення. При використанні внутрішніх стилів нам доведеться їх копіювати від одного заголовка до іншого. Це не зовсім зручно.

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

Сам клас myred повинен бути десь визначено заздалегідь, щоб браузер про нього знав.

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

У цьому прикладі ми задали клас myred. який і вказали в class тега SPAN.

Зверніть увагу на сінтактіс завдання стилів в STYLE. Загальна схема така:

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

У CSS існує кілька видів селектор. Найпростіший це селектор тега:

Наприклад можна зробити так:

Тобто ми задали властивості для тега SPAN. І зверніть увагу, що class можна вже не вказувати - браузер застосує зазначені стилі для всіх тегів SPAN.

У нашому першому прикладі ми вказали селектор «тег.класс»:

Тобто браузер застосує стилі тільки до тегами із зазначеним класом.

Розглянемо ще приклад:

Перший текст забарвиться в червоний колір, другий в синій, третій в зелений.

При завданні стилю іноді можна опускати вказівку тега:

В цьому випадку стиль буде застосований до всіх тегами. у яких вказано необхідний клас.

Де слід розташовувати стилі

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

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

Зверніть тільки увагу, що стилі тут потрібно вказувати без обгортки STYLE - MaxSite CMS робить це автоматично.

BB-код - це HTML теги

А тепер повернемося до HTML-тегами. Я не просто так сказав, що вивчити HTML досить просто, особливо, якщо прямо перед очима є підказки. )

Розгляньте уважно цей довідник і зверніть увагу на відповідність ВВ-коду HTML-поданням. Наприклад ВВ-код BOLD перетвориться в тег B.

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

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

BB-код використовується для спрощення оформлення текстів. До того ж такі коди не зменшують Новомосковскбельность тексту, як це було б з використанням HTML + CSS.

Тепер повернемося до стилів. )

зовнішні стилі

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

Готові хелпери (помічники)

У MaxSite CMS в default-шаблоні в підключається css-файлі вже присутні трохи css-стилів, які можна використовувати для своїх потреб. Наприклад є класи для кольору тексту:

А для кольору фону можна використовувати схожі класи:

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

Де знаходяться файли MaxSite CMS

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

Відповідно default-шаблон знаходиться в підкаталозі шаблонів - в default. Повний шлях буде таким: application / maxsite / templates / default /. У ньому вже шукаємо потрібний файл.

довідник CSS

Властивостей стилів досить багато і на поточний момент нам немає необхідності їх все запам'ятовувати. Поступово ми освоїмо все, що нам потрібно, але ви повинні записати посилання на український довідник CSS. який може в майбутньому стати в нагоді.

Кольори в CSS

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

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

На закуску подивіться приклад, де один і той же колір заданий різними способами:

Або те ж саме в BB-коди:

Вказівка ​​кольору - одна з найпоширеніших завдань вебмастера. Колір використовується і при оформленні текстів, і при створення дизайну, тому потрібно відразу навчитися правильно його ставити.

Міняємо стилі тексту сайту

Узагальнивши всю теорію давайте спробуємо поміняти на всьому сайті основний шрифт. Змінимо колір, гарнітуру і розмір.

За колір тексту, як ми вже розібралися, відповідає властивість color. Йдемо в Настройки шаблону - Оформлення і пишемо:

Тег BODY є т.зв. тілом документа, тобто все, що виводиться на сторінці знаходиться всередині BODY. Тому ми і ставимо колір тексту для нього, а всі вкладені елементи (теги) автоматично візьмуть ці ж властивості.

За умови, звичайно, що в них не вказані свої.

Після збереження, ми бачимо, що основний текст сайту став кольором Midnightblue.

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

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

Останній штрих - розмір основного тексту. Для цього використовується властивість font-size. Як значення одиниць вимірювання можна використовувати:

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

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

Коли ми будемо робити шаблон, то одним з перших дій буде вказівка ​​саме цих css-властивостей для BODY. Спробуйте пошукати в css властивість робить текст курсивом. Це, скажімо так, завдання додому. )

Схожі статті