Основні прийоми і хитрості при роботі з css
Main View - Скарбничка розробника. Все про дизайн, розробці та створенні сайтів
Main View - блог про дизайн, веб дизайн та веб розробці. Якщо ви займаєтеся розробкою веб сайтів, або цікавитеся веб дизайном і просто дизайном речей, які нас оточують, або вам просто цікава тематика веб дизайну та веб розробок, то цей блог буде вам дуже корисний. На блозі ви можете знайти статті, огляди, уроки і багато іншого.
1. Скорочений код для CSS шрифту
Коли ви задаєте злити для шрифту в CSS. ви зазвичай описуєте правила так:
Однак можна дещо спростити саму запис, щоб вона легше сприймалася. Ви можете скоротити стиль для шрифту і записати властивості в скороченому вигляді:
Думаю так набагато краще! І ще пару слів: таке скорочення для CSS буде працювати тільки якщо ви визначите два правила разом: font-size і the font-family. Причому правило font-family має розташовуватися в самому кінці рядка, а правило font-size має розташовуватися, строго перед ним. Також ви можете не вказувати правила font-weight. font-style і font-variant. У цьому випадку значення для них автоматично будуть виставлені в normal. Про це ви повинні пам'ятати.
2. Використання декількох класів.
Зазвичай, в атрибутах вказується один клас. Але це не означає, що дозволено використовувати тільки один клас. Насправді ви можете призначати стільки класів, скільки вам потрібно. наприклад:
Тут, як ми бачимо, параграфу призначені два класи text і side. Використання цих класів разом (розділених пропуском, а не коми) означає, що до параграфу буду застосовані правила, призначені в классахtextandside. Якщо в класах міститися однакові правила, то застосовуватися будуть правила того класу, який розташований нижче в документі CSS.
3. значення за замовчуванням для бордюру (border) в CSS.
Коли ви пишете правило для бордюру, ви зазвичай вказуєте колір (color), товщину (width) і стиль (style). Наприклад, написавши border: 3pxsolid # 000 ви отримаєте чорну суцільну кордон, товщиною в 3 пікселі. Однак, єдиною обов'язковою значенням тут буде стиль бордюру. Якби ви написали тільки border: solid. то інші параметри для нього були б використані за замовчуванням. Але який є типовим? Все описано в стандарті CSS, який потрібно знати або хоча б прочитати. Як ширини, за замовчуванням, для бордюру використовується значення medium (це приблизно 3 - 4 пікселя). В якості кольору, за замовчуванням, для бордюру використовується колір тексту усередині бордюру.
Таким чином, якщо ваші значення параметрів збігаються зі значеннями параметрів за замовчуванням, то ви можете не вказувати ці параметр.
4. Документ CSS для друку.
Перший рядок коду викликає CSS для дисплея (використовуючи media = "screen") а другий рядок коду викликає CSS для друку (використовуючи media = "print").
Створіть простий текстовий документ і назвіть його printstyle.css. Запишіть в нього ті CSS команди, які сформують вашу сторінку для друку.
5. Техніка підміни зображеннями.
При верстці сторінок дуже важливо використовувати основні теги HTML для розмітки тексту. А використовувати зображення для заміни тексту не варто. Це погано. І це одна з серйозних помилок початківців веб майстрів. І хоча я сам, з самого початку не дуже любив використовувати зображення, але іноді без них все де не обійтися. Розмітка стандартними тегами HTML має багато переваг. І головна причина тут в тому, що сторінку зверстаний тегами HTML добре розуміють пошукові машини. До того ж сторінка набагато швидше завантажується. Є і ще переваги, але зараз мова не про це.
Припустимо, що ви настільки любите різні красиві шрифти, що застосували їх для заголовків в дизайні сайту. І тепер сидите і думаєте, як же це все верстати. Адже напевно у відвідувачів вашого майбутнього сайту на комп'ютерах буде відсутній ваш чудовий шрифт. Отже, ви не зможете зверстати сторінку тільки тегами HTML. Що ж, залишається тільки замінити теги зображенням з вашим чудовим заголовком. Здавалося б все просто. Але немає, проте і тут з'являється проблема. Пошукові машини не зможуть прочитати текст на зображенні і правильно проіндексувати вашу сторінку.
Для наочності припустимо, що ви продаєте віджети і хотіли б на кожній сторінці зробити яскраву привабливу напис "купи віджет". Для вас вкрай важливо, щоб пошукові машини могли прочитати ваш заголовок з одного боку, і Новомосковсктелі звертали на нього увагу, і він значно виділявся, а значить, був зображенням, з іншого боку:
Ви можете припустити, що і так все добре. Але цілком очевидно, що пошукові машині не додадуть такого значення тегу alt, як якщо б це був просто текст. Оскільки спритні веб майстра часто записують в цей тег що попало, його вага занадто малий.
Так що ж робити? - запитаєте ви. А ось тут і потрібно якраз застосувати техніку підміни зображенням:
Зараз ми маємо текст придатний для пошукових машин, але він не використовує ваш художній шрифт. Вирішуємо це в файлі стилів:
- Користувачі побачать красиву картинку з текстом
- Пошукові машини побачать текст в стандартному тезі
6. альтернативний хак CSS для боксу (box model).
Альтернативний хак CSS зазвичай використовується для фіксації проблеми відображення в браузерах Internet Explorer версії 6 і нижче на PC, коли border і padding входять в ширину елемента.
Наприклад, щоб задати розміри контейнера, ви описуєте правила CSS наступним чином:
А потім, назначте ці правила CSS для контейнера:
Це означає, що загальна ширина контейнера дорівнює 150px (100px ширина + два бордера по 5px + два відступу по 20px) для всіх браузерів, за винятком браузерів Internet Explorer версії 6 і нижче на PC. У цих браузерах загальна ширина дорівнює 100px, а відступи і бордюр включені в цю ширину. Альтернативний хак CSS для боксу виправляє цю невідповідність, але може внести справжню плутанину.
Найпростіша альтернатива може бути такі правила CSS:
А код HTML потрібно змінити так:
Відмінно! Тепер ширина контейнера буде завжди рівною 150px незалежно від браузера!
7. Вирівнювання блоку по центру по горизонталі за допомогою CSS.
Припустимо, що у вас дизайн з фіксованою шириною, і ви хочете, щоб ваш контент розташовувався посередині сторінки. В цьому випадку ви повинні використовувати наступний код CSS:
Тепер уклавши контент в тег
Тепер основний текст буде розташований посередині. А всередині контейнера нам довелося примусово вирівняти по лівому краю. Але це працює!
8. Вирівнювання блоку по центру по вертикалі за допомогою CSS.
Найлегший спосіб вертикального вирівнювання це використання таблиць. Але табличная верстка застаріла і неефективна. Щоб контент вирівняти по центру по вертикалі потрібно використовувати vertical-align: middle. Але, на жаль це не працює.
Припустимо. що ви хочете встановити висоту пункту меню рівній 2em. Ви використовуєте в CSS вертикальне вирівнювання, але це не працює. Текст вперто відображається у верхній частині.
Хм. Це не те сто ми очікували побачити. Як же вирішити цю проблему?
Рішення таке: задайте висоту рядка line-height рівній висоті пункту меню. Так як наша висота дорівнює 2em, то ми повинні створити правило CSS. line-height: 2em. Відмінно! Тепер наш текст розташувався вертикально по центру.
9. CSS позиціювання всередині контейнера.
Однією з кращих речей в CSS, безумовно є те. що ви можете розташувати елемент на сторінці в абсолютно будь-якому місці.
Ви також можете (і це часто використовується) розташувати об'єкти всередині контейнера.
Це також дуже легко зробити. Просто призначте контейнеру наступне правило CSS:
Тепер будь-який елемент всередині контейнера буде розташовуватися щодо самого контейнера.
Припустимо, що у вас є така HTML структура:
І щоб розташувати контейнер navigation точно на 30 пікселів зліва і 5 пікселів зверху від кордону контейнера container, ви повинні використовувати наступний CSS код:
Відмінно! Ті, хто добре знає CSS, звичайно скажуть, що в цьому прикладі ви повинні використовувати margin: 5px0 0 30px. Все це так, але в деяких випадках все ж бажано використовувати позиціонування.
10. Вертикальний фон до кінця сторінки.
Як ви вже напевно знаєте, CSS неможливо контролювати вертикально. І це є одним з недоліків CSS, і створює ряд проблем, ускладнюючи нам життя. Хоча табличная верстка і позбавлена цього недоліку, але ми спробуємо що-небудь придумати.
Уявімо, у вас є колонка в лівій частині сторінки шириною 150px. Вам потрібно, щоб вона проходила через всю сторінку від верху до низу. Фон вашої сторінки білий, а фон вашої колонки синій. Відповідно ви намагаєтеся застосувати наступний код CSS:
Всього одне зауваження. в тому випадку якщо вміст контейнера navigation не використовує всю висоту колонки і скажемо його вистачає тільки на половину висоти, то ваш фон буде обрізаний після закінчення контенту. Тобто фон вашої колонки буде синім тільки до середини екрану. І це безперечно зіпсує ваш чудовий дизайн. Що ж з цим робити !?
На жаль, єдиним вирішенням цієї проблеми є використання фонового зображення. Ви повинні використовувати зображення з білим фоном і синьою колонкою, по ширині точно збігається з вашим дизайном. Призначте його наступним кодом CSS:
Зображення, яке ви використовуєте в якості фону повинно бути по ширині 150px і залито синім кольором, як і ваша колонка.
Недоліком цього методу, як ви вже, напевно, здогадалися, це жорстка прив'язка до ширини. Якщо користувач збільшить шрифт і ширина колонки змінитися, то він побачить розбіжність ширини фону і колонки. Використовуючи цей метод, ви повинні вказувати ширину в пікселях (px).
висновок
Сьогодні ми розглянули деякі моменти роботи з CSS. Таких моментів насправді набагато більше. Це тема не однієї статті. Сподіваюся ця інформація буде корисна для вас. Дякуємо за увагу.
Вітаю! В тему сайтостроения увійшов нещодавно, роблю перший сайт на основі InstantCMS 1.7. Почав вникати в CSS, натрапив на Вашу цікаву статтю. Зрозумів не все, буду розбиратися.
Питання по 5 пункту :) в голові документа є title, meta content, куди можна прописати «купи віджет». Напевно це буде важити більше alt. Чи буде воно важити більше або менше записи заголовка H1?
Питання по 10 пункту:
1. Якщо третім рядком у:
background: blue;
width: 150px
прописати higt: 100%, то чи не збільшиться висота контейнера і до якого розміру, якщо збільшиться?
2. Якщо варіант 1 не підходить, то під контейнером navigation створити контейнер такої ж ширини, свідомо більш високий (не знаю як, можливо, обмеживши загальну висоту сторінки min-height і прописавши висоту нового контейнера в пікселях), щоб загальна висота колонки була більше інших колонок і в ньому прописати:
background: blue;
width: 150px
Чи буде розрив смужки на кордоні контейнерів?
@ Ded-pikto
за пунктом 5:
безсумнівно, що тег має більшу вагу, ніж атрибут alt у тега. Весь сенс пункту 5 якраз і полягає в тому, щоб позбутися від картинки в тезі. У підсумку ми отримуємо чистий текстовий тег. який добре розуміється пошуковими системами, тим більше в правильній зв'язці з тегом.
по пункту 10:
1) висота тега буде працювати тільки якщо вказана висота всіх тегів, куди даний тег вкладений. Тому тут потрібно рухатися від висоти батьківського тега.
2) складно говорити без конкретного прикладу, але думаю можна знайти будь-яку потрібну вам рішення. Можете спробувати кілька варіантів і подивитися самі, який з них працює.
Скорочення коду CSS, з точки зору розробки, які не дуже підходящий варіант - гірше Новомосковскется. Як наслідок, складніше супроводжувати продукт. Хоча, якщо стиль тільки використовується, і змінювати його точно ніхто інший не буде, варіант цілком прийнятний, скажімо, для скорочення займаного їм простору (особливо актуально для великих файлів стилів) - буде швидше браузером грузиться
Кращий спосіб заробити в мережі, це працювати на Kwork.
KWORK надійний спосіб заробити, виконуючи завдання за 500 р.
- Admitad - заробіток на партнерських програмах
- 7offers - заробіток на партнерських програмах
- etxt - заробіток на продажу та купівлі текстів
- TravelPayouts - заробіток на продажу авіаквитків
- Вктаргет - заробіток в Контакте, Facebook, Instagram, Youtube, Twitter
- BestChange - моніторинг обмінників, де платять по $ 0.35 за кожного клієнта
Залишайтеся на зв'язку
Читаючи цей сайт Ви даєте свою згоду на використання файлів Cookie. В іншому випадку покиньте цей сайт. погоджуюся