CSS: колір шрифту, стилі, фон, розмір

Програмування – що дзеркало: спочатку було слово, а позначилася зовсім не відповідь. І дуже швидко довелося «поміняти»: спочатку дзеркало, потім слово В даний момент часу таблиці каскадних стилів – це добре, але чому так довго до неї йшла свідомість розробника? CSS – це все той же масив часів початку ери комп'ютерних програм, але тільки в іншому ракурсі. Навіть коли масиви стали асоціативними, революції це не справило. Сторінка сайту – це теги HTML-розмітки, яким може бути приписаний певний стильовий клас або ідентифікатор стилю. Перше можна визначити одного разу і приписувати до чого завгодно скільки потрібно раз, друге належить конкретному елементу.

Загальна логіка опису стилів

За традицією, стиль поміщається в CSS-файл, але може бути приписаний до конкретного елементу в його атрибут style. Стиль можна створити в динаміці засобами jаvascript. Особливого значення не має, як описати, наприклад, за допомогою CSS колір шрифту, його розмір, шрифт, фон під ним та ін. Місце опису стилю має значення в контексті, зазвичай двох ідей: чим пізніше описано, тим воно пріоритетніше, а якщо описано на елементі, то це зовсім !important. Останнє, записане як є, явно визначає пріоритет. Застосовувати стиль щоб, наприклад, якесь font color змінило колір, можна де завгодно і як завгодно. Питання в тому, як до цього поставиться браузер в ході розбирання всіх стилів у сукупності. Скільки він на це витратить процесорного часу? В ідеалі, font color повинно бути зазначено лише один раз – це класика. Додумувати до одного простого опису ще парочку, а потім ще і ще звісно, можна. Це модно, але непрактично.

Приклад загальної логіки

Все дуже просто: визначивши за допомогою CSS color все для трьох елементів, можна отримати як мінімум три тривалі проблеми: #Ele1 #Ele2 #Ele3 {
POSITION: absolute;
left : 20px;
top : 14px;
color: red;
} #Ele2 #Ele3 {
left : 90px; //змінити координату CSS по горизонталі
color: yellow; //змінити колір шрифту CSS
} #Ele3 {
top : 114px; //змінити координату CSS по вертикалі color: green; //ще раз змінити колір шрифту CSS background-color: lightgrey; //колір виділення тексту CSS змінений, але цього немає в #Ele1 і #Ele2; положення теж змінено, але воно вже змінювалося #Ele2 і не так, як тут } Тепер доведеться пам'ятати, що всі ці три елементи десь визначені, а в разі зміни колірних уявлень власника сайту, розробнику доведеться згадати не тільки про color, але і про правила left і top, так і про зміну кольору виділення тексту слід не забути.


Далеко не всі розробники шанують вимога CSS: стиль ідентифікатор – тільки одного елемента, а стиль класу – багатьом тегам, до того ж останні можна вказувати в тегах як прикметники: задати колір шрифту в CSS – стиль класу groundColor; уточнити розмір шрифту – клас size15; встановити положення – клас PlaceUp. Природно, використання ідентифікаторів, особливо коли вони належать одному елементу розмітки, краще десятка стильових класів, розписаних в різному поєднанні по сотні елементів сторінки. Але у всьому є своя об'єктивна логіка.
Розробник просто повинен грамотно враховувати: якщо навіть колір шрифту HTML, CSS пропонує описати жорстко, то гнучкість загальної структури описів – це його робота.

Очікуваний результат застосування загальної логіки

Сучасні браузери спокійно ставляться до великої кількості стильових файлів та їх обсягами. Однак, проектуючи, зокрема, за допомогою CSS, color всієї сторінки, завжди слід думати про розумної достатності. Не всі стильові правила «дешево» виглядають у застосуванні. Проста лаконічний запис: * {color: white;} – безумовно красива, але вона відноситься до всіх елементів сторінки без винятку. З усіх правил, якими оснащений CSS, саме важливе: стиль – клас, і тоді його ім'я починається з "."; стиль – ідентифікатор і його ім'я починається з символу "#"; в інших випадках – це назва тега або щось особливе Інші ідеї в частині опису стилів (спадкування, перекриття властивостей, пріоритети, положення, порядок тощо) слід застосовувати осмислено і строго по необхідності. Браузер завжди пропустить, що не розбере в описі, так що особливих несподіванок не буде. Якщо чогось не виявилося в потрібному місці або задати колір шрифту в CSS не вдалося, значить, помилка в стилі.

Несподівані можливості

Не слід зловживати стилями начебто * {left: 124px;} або ol ol, ul ol, ul ul, ul ol {margin-bottom: 0;}
a img {border: 0;} Хоча важко змусити навіть початківця розробника використовувати правила CSS. Завжди в розробці будь-якого сайту навіть ідеально простий синтаксис CSS дарує непередбачені проблеми. Втім, якщо спрямувати зусилля в області правильного використання синтаксису, але застосувати до нього функціонал jаvascript, то нові несподівані можливості дозволять уникнути монотонного створення ідентифікаторів для кожного елемента або стежити за різноманіттям застосування стильових класів. CSS – це не тільки файл стилів, підключений до сторінки через тег link або вставлений в неї через тег style. Це також можливість створити стиль на льоту або змінити вже існуючий. Застосовуючи CSS, колір шрифту можна зробити програмно. Так само як і розмір, і положення, відступи. Сайт – це не мета застосувати знання CSS, HTML, PHP або блиснути ефектами jаvascript. Веб-ресурс – це насамперед інформація, пропонована певним чином. Саме тому CSS найкраще розглядати в динаміці крізь призму того, як можна сформувати, поки що сторінка ще на сервері (нею зайнятий PHP в момент, коли на сайт прийшов відвідувач, а не розробник у той час, коли він розробляє сайт), потрібний файл стилів під конкретний текст, під актуальний контент або створити стиль класу або ідентифікатора на льоту в процесі роботи сторінки, коли її переглядає конкретний відвідувач.

Статична динаміка

Не завжди слід писати складний jаvascript, щоб зробити контент динамічним, а його оформлення – адекватним змістом. Іноді досить правильно використовувати наявні можливості. Зокрема, визначивши за допомогою CSS колір шрифту спочатку статичним правилом, можна приховати це правило (hidden) і візуалізувати інше (visible). Тут динаміка не вимагає алгоритму: //підсвітити кнопку входу на сайт
function scfWelcomeOver() {
document.getElementById('scDocxNamePiP').style.visibility = 'visible';
}

//приховати кнопку входу на сайт
function scfWelcomeOut() {
document.getElementById('scDocxNamePiP').style.visibility = 'hidden';
} CSS пропонує власні варіанти динаміки: біжучі рядки, прозорість елементів, різні варіанти накладень, проявів, загасань кольору. В CSS колір шрифту можна зробити навіть таким, яким ні одним стильовим правилом не передбачено.

Динамічне відображення контенту

Якщо б не було догм, ймовірно, не було б і прогресу. Просто не з чим було б боротися. Гіпертекст приніс у світ багато догм. Настала пора звернути на них увагу і зайнятися розробкою сайтів в прагматичному і практичному стилі. Спочатку є сторінка (P), на ній розміщено контент (K), всі теги сторінки описані в таблиці стилів (S). Не ново формувати сторінку P через PHP або Perl на сервері, вибираючи K з бази даних. Наявна таблиця стилів S додасться автоматом. Однак K може бути змінений, а в більшості випадків така зміна потягне за собою потребу в інших стилях, тобто S+. Наприклад, замовник сказав: «Сайт, який описує життя Москви, краще буде виглядати, якщо новинні статті оформлені в стилі "ЗаЗавтраком", опису нічний суєти в стилі "ЛасВегас", а статті про науково-технічному прогресі в стилі "МодернТехно"». Але якщо зробити S на три цих варіанта, то немає ніякої гарантії, що у замовника не виникне ідеї мати набір статей «Новини», «Свята», «Робота», «CSS/HTML» і бонус «ХозяйкеНаЗаметку». Більш практичний інший підхід. Незалежно від категорії статті в ній завжди є зміст, який можна розфарбувати в певний колір. Ось на цьому місці виникає цілком слушна думка: отримавши конкретне K, ще на сервері сформувати адекватну S, і коли браузер зажадає P, він отримає потрібне утримання в належному оформленні.

Динаміка стилю від jаvascript

Мінімальний, хоча і дуже ефективне рішення – робити стильове оформлення безпосередньо в браузері клієнта. По-перше, це розвантажує сервер – не потрібно буде витрачати час на формування розмітки сторінки і файли стилів для неї. По-друге, природні витрати часу всередині браузера створять ефект, що сторінка зайнята справою і активно підтримує діалог з відвідувачем: все одно той не сприймає контент оптом, отже, йому сподобається послідовний і продуманий виведення інформації. По-третє, це дає можливість розробнику надати в розпорядження відвідувача механізм формування контенту в такому стилі, в якому йому це зручно. Цього немає ні в кого. Для втілення цієї ідеї необхідно реалізувати механізм створення стилів елементів відразу після завантаження сторінки і в процесі її функціонування. Сучасний сайт – це AJAX в тому чи іншому варіанті. Не складає праці виконувати формування стилів безпосередньо в процесі формування дерева сторінки. Це просто, доступно і ефективно, тому що контент йде разом зі своїм оформленням. Це не суперечить сучасній тенденції відокремити подання даних від їх обробки і виконується над даними йдуть в відображення.

CSS як активна компонента

Гіпертекст приніс багато хорошого, але тільки мала дещиця природної інформації була успішно формалізована, з'явилися інструменти і досвід створення якісних HTML, XML, CSS документів. Не проблема формалізовивать нові об'єми інформації і змінювати вже зроблене раніше. Щодо CSS цей процес вже активізується в зовсім іншому контексті. Вбудовані засоби в jаvascript, дозволяють «на льоту» створювати елементи і стилі елементів, не припускали таку можливість, а творці PHP, зокрема, вважали займатися формуванням тільки HTML сторінок. І перше, і друге дозволяють зайнятися програмуванням стилів. Це новий напрямок в області інформаційних технологій. Стилі значно більш формальна річ, ніж HTML або XML, правила дуже прості. Стиль завжди присутній в інформації, який би природи вона не була. Оформленням даних програмісти займаються завжди в набагато більш неформалізованих сферах, але ось тема CSS – дуже проста задача, але як то не потрапляла в поле зору процесу розробки.

Про догмах в області програмування

Як і айсберг, догма не може довго борознити інформаційні простори. Накопичений досвід повинен був зосередитися не тільки в HTML і CSS-стандартах, інструменти роботи з ними, знаннях розробників. Проста задача – зробити допомогою CSS колір шрифту – знайшла своє відмінне рішення. Правила, синтаксис, логіка та зручність безсумнівні. Але навіть коли шрифтів насправді потрібно не багато, квітів для практики теж багато не треба, та й взагалі для цілей віртуалізації реальності зовсім не потрібна вся накопичена «сила» HTML і CSS, настає момент, коли ситуативні знання йдуть у репродуцирующие, і з'являється досвід та інструменти природного утворення стилів від контенту. Як це буде, може і не зовсім ясно, але те, що процес вже йде, очевидно.