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

Обычно CSS используется для установки атрибутов шрифта:
шрифт-вес: жирный;
стиль шрифта: курсив;
вариант шрифта: маленькие прописные;
размер шрифта: 1em;
высота строки: 1,5em;
семейство шрифтов: verdana, без засечек;
Вы можете записать их все в одну строку:
шрифт: жирный курсив капитель 1em/1,5em verdana,sans-serif;
Не кажется ли это намного проще? Следует отметить только одну вещь: этот сокращенный метод работает только тогда, когда свойства Font-size и Font-Family указаны одновременно. Кроме того, если вы не установите шрифт, стиль шрифта и вариант шрифта, они будут использовать значения по умолчанию, так что имейте это в виду.

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

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

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

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

…

Дайте элементу P два класса одновременно, разделенные пробелами, чтобы к элементу P были добавлены все атрибуты текстового и бокового классов. Если существует конфликт между атрибутами в двух классах, вступит в силу тот, который установлен позже, то есть вступят в силу атрибуты класса, помещенные позже в файл CSS.
Дополнение: для идентификатора нельзя писать

…

и нельзя писать вот так

4. CSS для печати документов

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


Строка 1 предназначена для отображения, строка 2 — для печати, обратите внимание на атрибут media.
Но что же следует писать в печатном CSS? Вы можете настроить его так же, как и обычный CSS. При проектировании вы можете настроить этот CSS для отображения CSS, чтобы проверить его эффект. Возможно, вы будете использовать команду display: none, чтобы отключить некоторые декоративные изображения, отключить некоторые кнопки навигации и т. д.

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

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

Конечно, это возможно, но для поисковых систем, по сравнению с обычным текстом, замена текста в alt малоинтересна. Это связано с тем, что многие дизайнеры помещают сюда множество ключевых слов, чтобы обмануть поисковые системы. Итак, метод должен быть таким:

Купить виджеты

Но тогда специальных шрифтов нет. Чтобы добиться того же эффекта, вы можете создать CSS следующим образом:
h1 {background: url(widget-image.gif) no-repeat height: высота изображения text-indent: -2000px }
Обратите внимание на замену высоты изображения на высоту реального изображения. Здесь изображение будет отображаться в качестве фона, а поскольку установлен отступ -2000 пикселей, реальный текст появится через 2000 точек в левой части экрана и будет невидимым. Но люди, отключившие изображение, могут вообще его не увидеть, поэтому будьте осторожны.

6. Еще один метод блочной модели CSS.

Настройка этой модели Box предназначена в основном для браузеров IE до IE6, которые учитывают ширину границы и пробелы в ширине элемента. например:
#box {ширина: 100 пикселей; граница: 5 пикселей, отступ: 20 пикселей }
Назовите это так:

Полная ширина поля теперь должна составлять 150 пунктов, что верно для всех браузеров, кроме IE до IE6. Но в таких браузерах, как IE5, его полная ширина по-прежнему равна 100 точкам. С этой разницей можно справиться, используя метод регулировки Box, придуманный предыдущими людьми.
Но той же цели можно достичь с помощью CSS, чтобы обеспечить единообразие их отображения.
#box { ширина: 150 пикселей }
#box div { граница: 5 пикселей отступ: 20 пикселей }
Вызывается так:

Таким образом, неважно в каком браузере ширина будет 150 пунктов.

7. CSS устанавливает элементы блока горизонтально выровненными по центру.

Если вы хотите создать веб-страницу фиксированной ширины и разместить ее по центру по горизонтали, обычно это выглядит так:
#content {ширина: 700 пикселей поле: 0 авто }
Вы должны использовать