Десять лучших советов по использованию CSS в дизайне веб-страниц

1. Правила сокращения шрифтов cs
При использовании css для определения шрифтов вы можете сделать следующее:

Фактически вы можете сократить эти свойства:

Сейчас ситуация намного лучше, но следует отметить одну вещь: чтобы использовать этот сокращенный метод, вы должны указать как минимум свойства font-size и font-family. Если другие свойства (например, шрифт-вес, шрифт-стиль, шрифт-. varient) не указаны, они будут автоматически использоваться значение по умолчанию.

2. Используйте два класса одновременно

Обычно мы указываем для атрибута только один класс, но это не значит, что вы можете указать только один. На самом деле вы можете указать столько, сколько захотите, например:

При одновременном использовании двух классов (разделяя их пробелами вместо запятых) в этом абзаце будут применяться правила, указанные в обоих классах. Если какое-либо из правил пересекается, последнее будет иметь приоритет.

3. Значение границы по умолчанию в CSS

При написании правила границы вы обычно указываете цвет, ширину и стиль (в любом порядке). Например: граница: 3 пикселя сплошная #000 (черная сплошная рамка шириной 3 пикселя). Фактически, единственное значение, которое необходимо указать в этом примере, — это стиль. Если вы укажете стиль как сплошной, то для остальных значений будут использоваться значения по умолчанию: ширина по умолчанию — средняя (эквивалентна 3–4 пикселям), цвет по умолчанию — цвет текста в рамке; . Если это именно то, что вы хотите, вам не нужно указывать это в css.

4. !important будет игнорироваться IE.

В CSS обычно приоритет имеет последнее указанное правило. Однако для браузеров, отличных от IE, любой оператор, отмеченный !important, получит абсолютный приоритет, например:

Верхнее поле составляет 3,5em во всех браузерах, кроме IE, и 2em в IE. Иногда это полезно, особенно при использовании относительных значений полей (как в этом примере), чтобы показать разницу между IE и другими браузерами.

(IE здесь означает: IE6 и ниже, исключая IE7. Фактически, IE7 поддерживает атрибут !important, и то же самое верно для подселекторов CSS)

5. Навыки замены изображений

Часто разумнее использовать стандартный HTML вместо изображений для отображения текста, помимо ускорения загрузки и повышения удобства использования. Но если вы решили использовать шрифт, который может быть недоступен на компьютере вашего посетителя, вы можете выбрать только изображения.

Например, вы хотите использовать заголовок «Купить виджеты» вверху каждой страницы, но вы также хотите, чтобы его обнаруживали поисковые системы. Если вы используете редкий шрифт для эстетики, вам придется использовать изображение для отображения. это. Получил:

Это, безусловно, так, но есть свидетельства того, что поисковые системы ценят реальный текст гораздо больше, чем замещающий текст (потому что слишком много веб-сайтов уже используют замещающий текст в качестве ключевых слов), поэтому нам придется использовать другой метод:

Купите виджеты, а как насчет красивых шрифтов? Следующий CSS может помочь:

Теперь у вас есть и красивое изображение, и хорошее скрытие настоящего текста — с помощью CSS текст позиционируется на расстоянии -2000 пикселей от левой части экрана.

6. Еще один вариант взлома блочной модели CSS. Хак блочной модели CSS используется для решения проблем с отображением в браузере до IE6 . Версии до IE6.0 будут включать значение границы и значение заполнения элемента внутри ширины (вместо добавления к ней). значение ширины). Например, вы можете использовать следующий CSS для указания размеров контейнера:

Затем примените в html:
Общая ширина поля составляет 150 пикселей почти во всех браузерах (ширина 100 пикселей + две границы по 5 пикселей + два заполнения по 20 пикселей), за исключением браузеров до IE6, она по-прежнему составляет 100 пикселей (значение границы и значение заполнения включены в значение ширины), хак блочной модели предназначен для решения этой проблемы, но он также вызовет проблемы. Более простой способ заключается в следующем:

В результате общая ширина поля составит 150 пикселей в любом браузере.

7. Элементы центрального блока

Предполагая, что ваш веб-сайт использует макет фиксированной ширины и весь контент размещен в центре экрана, вы можете использовать следующий CSS:

Вы можете поместить любой элемент в тело HTML, и этот элемент автоматически получит равные значения левой и правой границ, чтобы обеспечить центрированное отображение. Однако это по-прежнему проблема в браузерах до IE6, и она не будет центрирована, поэтому ее необходимо изменить следующим образом:

Установка тела приведет к центрированию основного содержимого, но даже весь текст будет центрирован. Вероятно, это не тот эффект, который вам нужен. По этой причине в элементе div #content также необходимо указать значение: text-align: left.

8. Используйте CSS для достижения вертикального центрирования

Вертикальное центрирование для таблиц проще простого, просто укажите ячейку с вертикальным выравниванием: по середине, но это не работает в макете CSS. Предположим, вы установили высоту меню навигации на 2em, а затем указали правила вертикального выравнивания в CSS, текст по-прежнему будет располагаться в верхней части поля, никакой разницы нет.

Чтобы решить эту проблему, просто установите высоту строки поля такой же, как высота поля. В этом примере высота поля равна 2em, тогда вам нужно только добавить еще одну высоту строки: 2em в CSS. Достигнуто вертикальное центрирование!

9. CSS-позиционирование внутри контейнера

Одним из самых больших преимуществ CSS является то, что объекты можно размещать в любом месте документа, а также объекты можно размещать внутри контейнера. Просто добавьте правило CSS в контейнер:

Затем любой элемент внутри контейнера позиционируется относительно контейнера. Предположим, вы используете следующую структуру HTML:

...

Если вы хотите расположить навигацию внутри контейнера на расстоянии 30 пикселей от левого края и 5 пикселей сверху, вы можете использовать следующий оператор CSS:

10. Цвет фона доходит до нижней части экрана.

Одним из недостатков CSS является отсутствие вертикального контроля, что вызывает проблемы, с которыми не сталкивается табличная верстка. Предположим, вы создали столбец в левой части страницы для размещения навигации по вашему веб-сайту. Страница имеет белый фон, но вы хотите, чтобы столбец навигации имел синий фон. Просто используйте следующий CSS:

Проблема в том, что элемент навигации не доходит до нижней части страницы, и, естественно, цвет его фона также не доходит до низа. Таким образом, синий фон левого столбца обрезается наполовину на странице, что приводит к потере вашего дизайна. Что нам делать? К сожалению, мы можем использовать только обман, то есть указать фон тела как изображение того же цвета и ширины, что и левый столбец. CSS такой:

Фоновое изображение должно представлять собой синее изображение шириной 150 пикселей. Недостатком этого метода является то, что em нельзя использовать для указания ширины левого столбца. Когда пользователь меняет размер текста и ширина содержимого увеличивается, ширина цвета фона соответствующим образом не изменится.

На момент написания этой статьи это единственное решение проблемы такого типа, поэтому вы можете использовать значения пикселей только для левого столбца, чтобы получить другой цвет фона, который растягивается автоматически.