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 class="textside">…</p>
Дайте элементу P два класса одновременно, разделенные пробелами, чтобы к элементу P были добавлены все атрибуты текстового и бокового классов. Если существует конфликт между атрибутами в двух классах, вступит в силу тот, который установлен позже, то есть вступят в силу атрибуты класса, помещенные позже в файл CSS.
Дополнение: для идентификатора нельзя писать <p id="textside">…</p> и нельзя писать вот так
4. CSS для печати документов
Многие веб-сайты имеют версию, предназначенную для печати, но на самом деле в ней нет необходимости, поскольку печать можно стилизовать с помощью CSS.
Другими словами, вы можете указать для страницы два файла CSS: один для отображения на экране и один для печати:
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
Строка 1 предназначена для отображения, строка 2 — для печати, обратите внимание на атрибут media.
Но что же следует писать в печатном CSS? Вы можете настроить его так же, как и обычный CSS. При проектировании вы можете настроить этот CSS для отображения CSS, чтобы проверить его эффект. Возможно, вы будете использовать команду display: none, чтобы отключить некоторые декоративные изображения, отключить некоторые кнопки навигации и т. д.
5. Навыки замены изображений CSS
Обычно рекомендуется использовать стандартный HTML для отображения текста вместо изображений, что не только быстрее, но и более читабельно. Но если вы хотите использовать какие-то специальные шрифты, вы можете использовать только изображения.
Например, если вы хотите создать значок для продажи вещей, вы можете использовать это изображение:
<h1><img src="widget-image.gif" alt="Купить виджеты" /></h1>
Конечно, это возможно, но для поисковых систем, по сравнению с обычным текстом, замена текста в alt малоинтересна. Это связано с тем, что многие дизайнеры помещают сюда множество ключевых слов, чтобы обмануть поисковые системы. Итак, метод должен быть таким:
<h1>Купить виджеты</h1>
Но тогда специальных шрифтов нет. Чтобы добиться того же эффекта, вы можете создать CSS следующим образом:
h1 {background: url(widget-image.gif) no-repeat height: высота изображения text-indent: -2000px }
Обратите внимание на замену высоты изображения на высоту реального изображения. Здесь изображение будет отображаться в качестве фона, а поскольку установлен отступ -2000 пикселей, реальный текст появится через 2000 точек в левой части экрана и будет невидимым. Но люди, отключившие изображение, могут вообще его не увидеть, поэтому будьте осторожны.
6. Еще один метод блочной модели CSS.
Настройка этой модели Box предназначена в основном для браузеров IE до IE6, которые учитывают ширину границы и пробелы в ширине элемента. например:
#box {ширина: 100 пикселей; граница: 5 пикселей, отступ: 20 пикселей }
Назовите это так:
<div id="box">…</div>
Полная ширина поля теперь должна составлять 150 пунктов, что верно для всех браузеров, кроме IE до IE6. Но в таких браузерах, как IE5, его полная ширина по-прежнему равна 100 точкам. С этой разницей можно справиться, используя метод регулировки Box, придуманный предыдущими людьми.
Но той же цели можно достичь с помощью CSS, чтобы обеспечить единообразие их отображения.
#box { ширина: 150 пикселей }
#box div { граница: 5 пикселей отступ: 20 пикселей }
Вызывается так:
<div id="box"><div>…</div></div>
Таким образом, неважно в каком браузере ширина будет 150 пунктов.
7. CSS устанавливает элементы блока горизонтально выровненными по центру.
Если вы хотите создать веб-страницу фиксированной ширины и разместить ее по центру по горизонтали, обычно это выглядит так:
#content {ширина: 700 пикселей поле: 0 авто }
Вы должны использовать <div id="content"> для окружения всех элементов. Это просто, но недостаточно хорошо, и версии до IE6 не будут отображать этот эффект. Измените CSS следующим образом:
тело {выравнивание текста: центр} #content {выравнивание текста: ширина: 700 пикселей поле: 0 авто};
Это позволит центрировать содержимое веб-страницы, поэтому в поле «Содержимое» будет добавлено выравнивание по левому краю.
8. Используйте CSS для вертикального выравнивания
Вертикального выравнивания можно легко добиться с помощью таблиц. Просто установите вертикальное выравнивание таблицы: по середине. Но это бесполезно с CSS. Если вы хотите установить панель навигации высотой 2 метра и хотите, чтобы текст навигации располагался по центру по вертикали, установка этого атрибута бесполезна.
Что такое метод CSS? Кстати, установите высоту строки этих слов 2em: line-height: 2em, и всё.
9. Расположение CSS внутри контейнера
Одним из преимуществ CSS является то, что вы можете расположить элемент произвольно, даже внутри контейнера. Например, для этого контейнера:
#container { позиция: относительная }
Таким образом, все элементы в контейнере будут расположены относительно друг друга, что можно использовать следующим образом:
<div id="container"><div id="navigation">…</div></div>
Если вы хотите найти 30 точек слева и 5 точек сверху, вы можете сделать это:
#navigation {позиция: абсолютная; слева: 30 пикселей сверху: 5 пикселей};
Конечно, вы также можете сделать это:
поле: 5 пикселей 0 0 30 пикселей
Обратите внимание, что порядок четырех цифр следующий: вверх, вправо, вниз, влево. Конечно, иногда лучше позиционирование, чем поля.
Чтобы узнать больше о макетах и методах CSS, обратитесь к большому количеству руководств на 52CSS.com.
10. Цвет фона прямо в нижней части экрана
Управление в вертикальном направлении находится за пределами возможностей CSS. Если вы хотите, чтобы панель навигации располагалась прямо в нижней части страницы, как панель содержимого, очень удобно использовать таблицу, но если вы используете только CSS следующим образом:
#navigation {фон: синий ширина: 150 пикселей}
Более короткая панель навигации не доходит до конца, а заканчивается на середине содержимого; Что делать?
К сожалению, единственный способ обмануть — это добавить фоновое изображение к более короткому столбцу, той же ширины, что и ширина столбца, и сделать его того же цвета, что и установленный цвет фона.
body {background: url(blue-image.gif) 0 0 повтор-y }
В настоящее время вы не можете использовать em в качестве единицы измерения, потому что тогда хитрость будет раскрыта, как только читатель изменит размер шрифта, и вы можете использовать только px.