1. Скорочені правила CSS для шрифту
Визначити стиль шрифту в CSS можна наприклад так:
Однак в цьому немає необхідності, оскільки можна використовувати наступний скорочений варіант:
Вже краще. АЛЕ! Така скорочена форма запису буде працювати тільки в тому випадку, якщо явно задані font-size і font-family. Якщо ж не поставити такі властивості, як font-weight. font-style або font-variant. то їм будуть присвоєні значення за замовчуванням, тобто normal. майте це на увазі.
2. Два класу відразу
Як правило, для тега задається тільки один клас одночасно, проте це не означає, що не можна задати більше. Насправді можна задати стільки класів, скільки захочеться, наприклад:
Використання цих двох класів разом (розділених пропуском, а не коми) означає, що при верстці використовуються правила, задані як в text. так і в side. Якщо якісь правила різних класів перекриваються, то пріоритет має той клас, який заданий пізніше інших в таблиці стилів.
3. Значення товщини рамки в CSS за замовчуванням
При написанні правила CSS для рамки, як правило, встановлюються колір, ширина і стиль (не обов'язково в такому порядку :). Наприклад, border: 3px solid # 000 дасть вам чорну рамку, забарвлену в суцільний чорний колір товщиною в три пікселя.
Якби ви просто поставили: border: solid. то для визначення інших параметрів були б використані параметри за замовчуванням. А вони такі: товщина має значення medium, тобто десь 3-4 пікселя, а колір задається кольором тексту всередині рамки. Якщо ж ці параметри як раз ті, які вам потрібні, ви можете не визначати їх явно!
4. ігнорованих IE властивість! Important
Для правил CSS характерно наступне поведінка: скільки б їх не було, найвищий пріоритет має останній. Однак якщо використовувати! Important після команди, то ця команда CSS буде мати найвищий пріоритет незалежно від того, що знаходиться після неї. Це справедливо для всіх браузерів, крім IE. наприклад:
В цьому випадку відступ буде дорівнює 3,5em для всіх браузерів, крім IE, для якого величина відступу буде дорівнює 2em.
5. Методика заміни нестандартних шрифтів зображеннями
Наприклад, вам потрібно, щоб в заголовку кожної сторінки був напис "Купити віджет". А оскільки ви саме ними і торгуєте, то вам потрібно, щоб ця фраза перебувала пошуковою машиною. І оскільки ви хочете використовувати нестандартний шрифт, то ви вставляєте зображення:
Рішення саме по собі нормальне, проте треба врахувати, що пошукові машини не приділяють стільки уваги альтернативним текстом для ізобрженій, скільки звичайного тексту (бо вебмастера мають звичку писати в альтернативний текст всілякі дурниці). Тому альтернативою буде такий спосіб:
Однак тут уже не використовується ваш нестандартний шрифт. Щоб вийти з цієї ситуації, помістіть наступні команди в документ CSS:
6. Альтернатива box model hack в IE
Box model hack використовується для усунення проблеми в браузерах молодше 6-ий версії IE, де рамка і набивка включені в ширину елемента, а не додаються. Наприклад, при завданні розмірів контейнера можна використовувати наступне правило:
Правило CSS застосовується тоді наступним чином:
Це означає, що повна ширина боксу дорівнює 150 пікселів (100 пікселів безпосередньо ширина + по 5 пікселів кожна рамка + по 20 пікселів набивка по обидва боки) у всіх браузерах, крім молодших 6-го IE. У цих браузерах повна ширина дорівнюватиме 100 пікселів, причому набивка і товщина рамки вже включені в ширину. Модель дозволяє виправити таку поведінку, але це не найкращий спосіб.
Простим рішенням буде використання такої таблиці стилів:
А новий код HTML буде тоді таким:
Тепер ширина боксу завжди буде 150 пікселів, незалежно від браузера.
7. Вирівнювання блокових елементів по центру
Ну ось захотілося вам, щоб у вас був сайт з постійною шириною, вміст якого знаходилося б посередині екрану. Це можна зробити наприклад так:
Потім кожен елемент полягає в
Таким чином ми отцентріруем основний вміст, однак і текст буде вирівнюватися по середині. Для зміни останнього ми задаємо властивість align: left в елементі div.
8. Вертикальне вирівнювання за допомогою CSS
Хм, дивна поведінка. Ось рішення. Встановіть висоту лінії такий же, як і висота самого боксу в CSS. Зокрема, для нашого прикладу бокс висотою 2em, тому потрібно вставити в правило CSS line-height: 2em. і текст тепер буде знаходитися посередині боксу!
9. Позиціонування всередині контейнера
Одним з незаперечних переваг CSS є те, що з їх допомогою ми можемо помістити об'єкт в будь-якому місці документа. Також можна (а іноді і бажано) розташувати об'єкти в контейнері. Це теж робиться просто. Просто створіть наступне правило CSS для контейнера:
Тепер будь-який елемент, який знаходиться в цьому контейнері, буде розташовуватися щодо нього. Припустимо, у нас є такий HTML-код:
Для того, щоб помістити меню на відстані точно 30 пікселів зліва і 5 зверху від кордону контейнера, можна використовувати наступне правило CSS:
У цьому прикладі можна було також використовувати правило margin: 5px 0 0 30px. але є деякі випадки, коли переважно використовувати саме позиціонування.
10. Поширюємо фоновий колір комірки до нижнього краю сторінки
Одним з недоліків таблиць стилів є неможливість контролювати стан по висоті, на відміну від табличної верстки. Припустимо, вам потрібно отримати зліва колонку з навігацією по сайту. І ви хочете, щоб її фон був блакитним, в той час, як фон сторінки білий. Для цього застосовується просте правило:
Але тут є одна заковика: так як висота меню менше висоти екрану, то під нею внизу до кінця екрану буде видно білий фон сторінки. Це сильно псує дизайн сторінки. І що нам з цим робити?
На жаль, єдиним рішенням є обман - тобто завдання тілу документа фонової картинки того ж кольору і тієї ж ширини, що і наша колонка. Зробимо це так:
Ширина картинки, яку ви поставите в якості фонової, повинна бути рівно 150 пікселів, відповідно, і її колір повинен бути тим же, що і фоновий колір лівої колонки. Недоліком такого способу є те, що ви не можете задати ширину колонки в em, тобто неможливо зробити "гумову" сторінку.
На момент написання статті цей спосіб був єдиним вирішенням проблеми лівої колонки. Будемо сподіватися, що CSS3 надасть-таки кошерний спосіб її вирішення.