Десять советов по дизайну таблиц стилей CSS

1. Правила сокращений шрифтов CSS

При определении шрифтов с помощью CSS вы можете сделать это:

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

шрифт: 1em/1,5em жирный курсив прописные verdana, с засечками

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

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

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

<p class="textside">...</p>При одновременном использовании двух классов (разделенных пробелами вместо запятых) в этом абзаце будут применяться правила, указанные в обоих классах. Если какое-либо из правил пересекается, последнее будет иметь приоритет.

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

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

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

В CSS обычно приоритет имеет последнее указанное правило. Однако для браузеров, отличных от IE, любой оператор, отмеченный !important, будет иметь абсолютный приоритет, например: Margin-top: 3.5em !important; Margin-top: 2em во всех браузерах, кроме IE. Верхнее поле всегда равно 3,5em, а IE равен 2em. Иногда это полезно, особенно при использовании относительных значений полей (как в этом примере), чтобы показать тонкие различия между IE и другими браузерами. (Многие также могут заметить, что подселекторы CSS также игнорируются IE)

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

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

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

<h1><img src="/widget-image.gif" alt="Купить виджеты" /></h1>

Это, безусловно, так, но есть свидетельства того, что поисковые системы ценят реальный текст гораздо больше, чем замещающий текст (поскольку слишком многие веб-сайты уже используют замещающий текст в качестве ключевых слов), поэтому нам придется использовать другой метод: <h1><span >Купить виджеты< /span></h1>, а как насчет ваших красивых шрифтов? Следующий CSS может помочь:

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

6. Еще один вариант взлома модели CSS-бокса

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

Затем примените в html:

<div id="box">...</div>

Общая ширина поля составляет 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 нельзя использовать для указания ширины левого столбца. Когда пользователь меняет размер текста и ширина содержимого увеличивается, ширина цвета фона соответствующим образом не изменится.

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