Css: колір шрифту, стилі, фон, розмір
Програмування - що дзеркало: спочатку було слово, а відбився зовсім не відповідь. І дуже швидко довелося «поміняти»: спочатку дзеркало, потім слово ... У даний момент часу таблиці каскадних стилів - це добре, але чому так довго до них йшло свідомість розробника? CSS - це все той же масив часів початку ери комп`ютерних програм, але тільки в іншому ракурсі. Навіть коли масиви стали асоціативними, революції це не справило.
Сторінка сайту - це теги HTML-розмітки, яким може бути приписаний певний стильовий клас або ідентифікатор стилю. Перше можна визначити одного разу і приписувати до чого завгодно скільки потрібно раз, друге належить конкретному елементу.
Загальна логіка опису стилів
За традицією, стиль поміщається в CSS-файл, але може бути приписаний до конкретного елементу в його атрибуті style. Стиль можна створити в динаміці засобами javascript. Особливого значення не має, як описати, наприклад, за допомогою 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: стиль ідентифікатора - тільки між окремими елементами а стиль класу - багатьом тегам, до того ж останні можна вказувати в тегах як прикметники:
Відео: 008 ENG HTML and CSS Basic CSS styling like color font size background padding and margin
- задати колір шрифту в CSS - стиль класу groundColor;
- уточнити розмір шрифту - клас size15;
- встановити положення - клас PlaceUp.
Природно, використання ідентифікаторів, особливо коли вони належать одному елементу розмітки, краще десятка стильових класів, розписаних в різному поєднанні по сотні елементів сторінки. Але у всьому є своя об`єктивна логіка.
Розробник просто повинен грамотно враховувати: якщо навіть колір шрифту HTML, CSS пропонує описати жорстко, то гнучкість загальної структури описів - це його робота.
Відео: HTML Tutorial 08 Changing the Background Color, Text Color and Font Color
Очікуваний результат застосування загальної логіки
Сучасні браузери спокійно ставляться до великої кількості стильових файлів і їх обсягами. Однак проектуючи, зокрема, за допомогою CSS, color всієї сторінки, завжди слід думати про розумної достатності. Не всі стильові правила «дешево» виглядають в застосуванні. Проста лаконічний запис: * {color: white-} - безумовно красива, але відноситься вона до всіх елементів сторінки без винятку.
З усіх правил, якими оснащений CSS, найважливіше:
- стиль - клас, і тоді його ім`я починається з ".";
- стиль - ідентифікатор і його ім`я починається з символу "#";
- в інших випадках - це найменування тега або щось особливе
Решта ідеї в частині опису стилів (успадкування, перекриття властивостей, пріоритети, стан, порядок і т. Д.) Слід застосовувати осмислено і строго по необхідності.
Браузер завжди пропустить, що ні розбере в описі, так що особливих несподіванок не буде. Якщо чогось не виявилося в потрібному місці або задати колір шрифту в CSS не вдалося, значить, помилка в стилі.
несподівані можливості
Не слід зловживати стилями начебто * {left: 124px; } або
ol ol, ol ul, ul ul, ul ol {margin-bottom: 0-}
a img {border: 0-}
Хоча важко змусити навіть початківця розробника використовувати правила CSS як є. Завжди в розробці будь-якого сайту навіть ідеально простий синтаксис CSS дарує непередбачені проблеми. Втім, якщо спрямувати зусилля в область правильного використання синтаксису, але застосувати до нього функціонал javascript, то нові несподівані можливості дозволять уникнути монотонного створення ідентифікаторів для кожного елемента або стежити за різноманіттям застосування стильових класів.
CSS - це не тільки файл стилів, підключений до сторінці через тег link або вставлений в неї через тег style. Це також можливість створити стиль на льоту або змінити вже існуючий.
Застосовуючи CSS, колір шрифту можна зробити програмно. Так само як і розмір, і положення, відступи. Сайт - це не мета застосувати знання в CSS, HTML, PHP або блиснути ефектами javascript.
Веб-ресурс - це перш за все інформація, пропонована певним чином. Саме тому CSS найкраще розглядати в динаміці крізь призму того, як можна сформувати, поки сторінка ще на сервері (нею зайнятий PHP в момент, коли на сайт прийшов відвідувач, а не розробник в той час, коли він розробляє сайт), потрібний файл стилів під конкретний текст, під актуальний контент або створити стиль класу або ідентифікатора на льоту в процесі роботи сторінки, коли її переглядає конкретний відвідувач.
статична динаміка
Не завжди слід писати складний javascript-код, щоб зробити контент динамічним, а його оформлення - адекватним змістом. Іноді досить правильно використовувати наявні можливості. Зокрема, визначивши за допомогою 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, він отримає потрібне утримання в належному оформленні.
Динаміка стилю від javascript
Мінімальна, хоча і дуже ефективне рішення, - робити стильове оформлення безпосередньо в браузері клієнта. По-перше, це розвантажує сервер - не потрібно буде витрачати час на формування гіпертексту сторінки і файлів стилів для неї.
По-друге, природні витрати часу всередині браузера створять ефект, що сторінка зайнята справою і активно підтримує діалог з відвідувачем: все одно той не сприймає контент оптом, отже, йому сподобається послідовний і продуманий висновок інформації.
По-третє, це дає можливість розробнику надати в розпорядження користувача механізм формування контенту в такому стилі, в якому йому це зручно. Цього немає ще ні в кого.
Відео: learn html and css # 9 hindi / urdu {align center, background colour, color text, div align center}
Для втілення цієї ідеї необхідно реалізувати механізм створення стилів елементів відразу після завантаження сторінки і в процесі її функціонування. Сучасний сайт - це AJAX в тому чи іншому варіанті. Чи не складає труднощів виконувати формування стилів безпосередньо в процесі формування дерева сторінки. Це просто, доступно і ефективно, тому як контент йде разом зі своїм оформленням.
Це не суперечить сучасній тенденції відокремити подання даних від їх обробки і виконується над даними йдуть в відображення.
CSS як активна компонента
Гіпертекст приніс багато хорошого, але тільки мала дещиця природної інформації була успішно формалізована, з`явилися інструменти і досвід створення якісних HTML, XML, CSS документів. Не проблема формалізовивать нові обсяги інформації і змінювати вже зроблене раніше.
Відносно CSS цей процес вже активізується в зовсім іншому контексті. Засоби в javascript, що дозволяють «на льоту» створювати елементи і стилі елементів, не припускали таку можливість, а творці PHP, зокрема, вважали займатися формуванням тільки HTML сторінок.
І перше, і друге дозволяють зайнятися програмуванням стилів. Це новий напрямок в області інформаційних технологій. Стилі значно більш формальна річ, ніж HTML або XML, правила дуже прості. Стиль завжди присутній в інформації, якою б природи вона не була.
Оформленням даних програмісти займаються завжди в набагато більш неформалізованих сферах, але ось тема CSS - дуже просте завдання, але якось не потрапляла в поле зору процесу розробки.
Про догмах в області програмування
Як і айсберг, догма не може довго борознити інформаційні простори. Накопичений досвід повинен був концентруватися не тільки в HTML- і CSS-стандартах, інструментах роботи з ними, знаннях розробників.
Просте завдання - зробити за допомогою CSS колір шрифту - знайшла своє відмінне рішення. Правила, синтаксис, логіка і зручність безсумнівні. Але навіть коли шрифтів насправді потрібно не багато, квітів для практики теж багато не треба, та й взагалі для цілей віртуалізації реальності зовсім не потрібна вся накопичена «сила» HTML і CSS, настає момент, коли ситуативні знання йдуть в репродукуючі, і з`являється досвід та інструменти природничої освіти стилів від контенту.
Як це буде, може і не зовсім ясно, але те, що процес уже йде, очевидно.
