CSS для @щоденників вступна частина
Матеріал із Довідка @diary.ru.
Зміст
[ред.] Що таке CSS і навіщо він потрібний?
CSS(Cascading Style Sheets, каскадні таблиці стилів) – це набір параметрів відображення елементів веб-сторінки, тобто. стандартизована мова опису зовнішнього вигляду документа HTML або іншого формату. Говорячи дуже просто, CSS – це набір коштів, дозволяють описати, як будуть відображатися на екрані елементи сторінки – таблиці, текст, посилання, картинки зрештою.
Для кожного елемента на сторінці є власна назва або селектор: наприклад блок меню на diary носить назву#side, так його прописали в коді сторінки. Для елемента#sideза допомогою CSS можна задати характеристики відображення, наявні в активі, наприклад ширину - width. Якщо задати width рівним 200 пікселів, меню на екрані відобразиться саме з такою шириною. Однак про властивості поговоримо пізніше, зараз розглянемо інші узагальнені поняття.
[ред.] Diary CSS і як з ним працювати?
На @щоденниках у користувачів є можливість працювати зі своїми стилями оформлення, тобто. ми можемо додавати в дизайн свої рядки на мові CSS, відповідно до наших бажань змінюючи зовнішній вигляд свого щоденника. Але вище голови тут не стрибнеш – код сторінки міняти не можна, єдине, що ми можемо зробити – це видозмінювати відображення наявних елементів сторінки. Ми маємо можливість зробити так, щоб деякі елементи не відображалися, але додати нові не вийде, доводиться працювати з тим, що маємо.
[ред.] Синтаксис CSS
Синтаксис – це правила написання коду. Нічого складного тут немає, головне знати назву (селектор) потрібного вам елемента (блоку). Ось зразок написання рядків мовоюCSS:
І так далі. У готовому вигляді це виглядає так:
Прописуємо код так:
для елемента div з класом .bordered
[ред.] Проблеми з відображенням у різних браузерах. Загальні проблеми дизайну
Перш ніж приступити безпосередньо до роботи, потрібно засвоїти одну річ -CSS - це стандарт, а браузери написані не на 100% відповідно до стандарту, тому те, що виглядає «правильно» в одному, будемо в іншому виглядати зовсім інакше.
Запам'ятайте: Ви можете зробити все під себе, тому що вам подобається, але якщо вам потрібні читачі, то добре було б подумати і про них. Незручний вигляд вашого щоденника точно не приверне до вас постійної уваги користувачів, і справа тут не тільки в кросбраузерності - порушення правил дизайну або різниця відображення при різних дозволах монітора також накладає свій відбиток.
Правила дизайну прості: треба, щоб було чудово. Краще не використовувати яскравих кислотних кольорів, жахливих контрастів на кшталт червоного із зеленим чи синім, сильно темніти чи світлити. Ще один факт - користувачі можуть дивитися ваші щоденники, не включаючи картинки в браузері, щоб знизити трафік, і якщо у вас як фон картинка, то вона не буде видно. Тому постарайтеся зробити так, щоб без картинок ваш дизайн теж виглядав добре – не використовуйте колір тексту такий самий, як колір його фону, тому що колір фону все одно використовується (саме для таких випадків), навіть якщо фоном ще й картинка.
Потім, у всіх користувачів різна роздільна здатність екрана. Це означає, що ваш щоденник буде виглядати на різних дозволах по-різному, і це треба також враховувати для читача. Не дрібніть і не гігантоманьте з текстом та іншими елементами, дивіться за шириною та висотою елементів. Найпростіше, щоможна запропонувати для вирішення проблем – перемикайте роздільну здатність монітора вище і нижче і дивіться, як буде відображатися. Якщо ваш монітор не підтримує високих дозволів, попросіть друзів перевірити дизайн на своєму комп'ютері, влаштуйте тестування.
Повернемося до браузера. Завжди непогано мати під рукою хоча б два - Internet Explorer і ще якийсь, особливо Opera або Firefox. Ще краще – всі три, і дивитись на свій дизайн у них. Звертайте увагу на стандарт написання коду, якщо є якісь проблеми з відображенням. Буває так, що не зовсім коректний код має правильне відображення в одному браузері та неправильне в іншому. Наводьте в коректний вигляд.
[ред.] Як подивитися код чужого дизайну та сторінки
[ред.] Доповнення та рекомендації
Перш ніж робити дизайн у CSS, непогано б продумати його і навіть намалювати на листочку/у фотошопі, продумати кольори. Крім того, уважно прочитайте цей невеликий розділ, перш ніж візьметеся за роботу над дизайном.
[ред.] Кольоровість
Щоб зробити дизайн красивим, потрібно грамотно використати кольори. Колір CSS, крім стандартних 16ти, задається шістнадцятковим кодом (#f56d2b), дізнатися який можна, наприклад, через Фотошоп (просто вибравши колір у палітрі). Якщо фотошопу немає, то допоможе програмаColor Cop. Вона може показати код для будь-якого кольору, навіть вибраного піпеткою з екрана.
Іншу гарну річ пропонує @користувач Tex –Color Scheme Generator. Він дозволяє вибрати відразу хороше поєднання кольорів для оформлення, адже кольори краще підходять один одному за принципом відтінку. Можна брати контрастні відтінки, можна тонові, коди кольорів там вказані. Рекомендовано для використання.
А якщо вже зовсім туго, тоберітьстандартні веб-кольори. Ну і звичайно ж підганяйте кольори до картинок та фонів.
[ред.] Якщо є ще питання
Перш ніж їх ставити, зробіть ось що:
- Скористайтеся пошуком за текстами цього посібника (ctrl+F), наберіть слово, яке вас цікавить, та перегляньте всю інформацію, яку вдається знайти. Прочитайте уважно.
- Скористайтеся пошуком по спільноті Diary CSS.Наберіть пару слів, що цікавлять, і ВСЕ, що ви хотіли б знати, відобразиться в знайдених постах. Також можна клацнути на потрібну тему записів у спільноті, щоб переглянути всі пости на задану тему. Так можна знайти абсолютно все і відразу, а не чекати, поки вам дадуть відповідь «йдіть за цим посиланням». Ви самі можете чудово це посилання знайти.
Якщо все одно нічого не допомогло, і проблема має місце бути, то ставте питання в спільноту Diary CSS, при цьому:
- тримайте свій щоденник відкритим
- випишіть ваш код
- поясніть до ладу, чого б вам хотілося бачити.
[ред.] Готові дизайни
Ходіть чужими щоденниками – в їх дизайнах ви знайдете багато корисних для себе придбань. Особливо раджу заглянути сюди.
Ось запропонований дизайн від користувача Tex з кодом. Характерне меню, фіксована ширина, солідний вигляд. Ось дизайн від користувача Roldo з кодом. Тут реалізована динамічна ширина, а також фон навколо постів та поєднання фонів різних елементів у єдиний колаж.