10 CSS-уловок, которые Вы могли не знать
Источник статьи
1. Записываем CSS-правила для шрифта в сокращенном виде.
Вместо того, чтобы прописывать все свойства по отдельности, например, так:
font-size: 12 px;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
Мы можем использовать более короткий вариант:
font: 12px/1.5em bold italic small-caps verdana,serif;
Намного лучше!
Но учтите, что эта сокращенная формулировка работает только в том случае, когда Вы указываете и свойство font-size, и font-family, т.е. нельзя опустить какое-то из этих двух свойств. Также имейте в виду, что если Вы не указываете свойства font-weight, font-style и font-variant, то они автоматически принимают значение normal.
2. Два класса вместе.
Обычно все CSS-правила, с помощью которых мы хотим изменить внешний вид элемента, прописываются в один класс. Но это совершенно не означает, что нельзя использовать два класса одновременно.
Например, так:
<p class="text side">Текст абзаца</p>
При использовании двух классов вместе параграф примет внешний вид в соответствии с правилами, описанными в обоих классах. Если правила будут перекрывать друг друга (например, и там и там задан размер шрифта), то приоритет получит второй класс.
3. Значение CSS-рамки по умолчанию.
Когда Вы пишите правило для рамки, Вы обычно указываете значения цвета, толщины и стиля (в любом порядке). Например, написав border:3px solid #000000, Вы получите сплошную рамку черного цвета в 3 пикселя толщиной.
Однако иногда совсем не обязательно прописывать все свойства т.к. достаточно бывает указать только стиль рамки.
Например, Вы можете написать просто border: solid. В этом случае, остальные два параметра (толщина и цвет) примут значения по умолчанию.
Что это за значения по умолчанию?
По умолчанию толщина рамки ставится в значение medium, что эквивалентно примерно 3-м или 4-м пикселям в толщину. А цвет рамки по умолчанию будет таким же, как и цвет текста, который находится внутри рамки.
Так что имейте это в виду и прописывайте только те значения, которые должны отличаться от тех, что ставятся по умолчанию.
4. !important игнорируется браузером Internet Explorer.
Обычно в CSS, когда два правила описывают одно и то же свойство, приоритет получает правило, которое расположено ниже.
Например, если Вы укажете:
margin-top: 10 px;
margin-top: 20 px;
то все браузеры сделают отступ в 20 пикселей.
Однако если Вы допишете после команды строку !important, то Вы отмените приоритеты, и уже свойство с такой командой будет иметь более высокий приоритет, даже если стоит выше.
Например, если Вы укажете:
margin-top: 10 px !important;
margin-top: 20 px;
то браузер сделает отступ в 10 пикселей.
Это справедливо для всех браузеров, кроме Internet Explorer, т.е. этот браузер просто не понимает смысл строки !important и в любом случае сделает отступ в 20 пикселей.
Эту особенность IE Вы можете использовать в разных ситуациях, например, когда Ваш сайт по-разному выглядит в разных браузерах.
5. Техника замены изображения.
В этой технике мы рассмотрим такую ситуацию. Допустим, Вы продавец холодильников и у Вас есть сайт, с которого Вы эти холодильники продаете. Если Вы хотите, чтобы поисковые системы привлекали на Ваш сайт посетителей по запросу "Холодильники", то желательно, чтобы на всех страницах Вашего сайта вверху были текстовые заголовки "Холодильники".
Но проблема в том, что если Вы напишете просто слово "Холодильники" и поместите это слово, например, в тэг заголовков <h1></h1>, то это может испортить весь Ваш дизайн, т.к. это слово, написанное через обычную html-разметку будет отображаться одним из обыкновенных шрифтов, - таким как Verdana, Arial и т.д.
Скорее всего, вместо простого текста вверху страницы Вы хотели бы видеть какую-нибудь красивую графическую шапку.
Как же совместить ключевые слова, которые важны для поисковиков, и графическую шапку, которая важна для посетителей?
Эта проблема может быть решена следующим образом:
Поместите в верхнюю часть сайта такой код:
<h1><span>Холодильники</span></h1>
А в CSS-файле, который прикреплен к данной странице, пропишите такой код:
h1
{
background: url('/image.gif') no-repeat;
}
h1 span
{
position: absolute;
left:-2000px;
}
Теперь у Вас вверху страницы будет видна только красивая графическая шапка (картинка image.gif), а обычный текст уйдет за пределы страницы в соответствии с правилом left:-2000px.
6. CSS box model hack alternative.
Здесь мы будем решать проблему с неверным отображением блоков в браузере Internet Explorer 6 и ниже. Суть проблемы состоит в том, что внутренние отступы и рамки, которые мы задаем, должны расширять границы блока, но этого не происходит в IE 6.
Вот пример:
У нас есть CSS правило:
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
Это CSS-правило будет применяться так:
<div id="#box">Текст</div>
Во всех браузерах, кроме IE, это означает, что общая ширина блока будет 150 пикселей (100 пикселей ширина (width), рамка с каждой стороны по 5 пикселей и два отступа по 20 пикселей). В IE же общая ширина блока будет равна 100 пикселей, и туда войдут и отступы, и рамки.
Сейчас мы с Вами будем исправлять эту ситуацию и сделаем так, чтобы во всех браузерах ширина блока была одинаковой.
Для этого пишем CSS-правила таким образом:
#box
{
width: 150px;
}
#box div
{
border: 5px;
padding: 20px;
}
Новый HTML-код будет выглядеть следующим образом:
<div id="box"><div>Текст</div></div>
Отлично! Теперь ширина в любом случае будет 150 пикселей, независимо от браузера!
7. Выравнивание по центру блочного элемента.
Предположим, Вы хотите создать сайт фиксированной ширины, который должен располагаться строго по центру экрана.
В этом случае Вы можете использовать следующее CSS-правило:
#content
{
width: 700px;
margin: 0 auto;
}
Затем Вы можете обернуть всё, что находится между тэгами <body></body>, в тэг
<div id="content"></div> и Вы получите нужный результат - Ваш сайт всегда будет автоматически выравниваться по центру экрана.
Все просто, если не учитывать тот факт, что браузер Internet Explorer до 6-й версии игнорирует эти правила и не выравнивает элемент по центру.
Чтобы исправить эту ситуацию и добиться одинакового внешнего вида сайта во всех браузерах, нужно использовать такие CSS-правила:
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
В этом случае мы достигнем нашей цели, но при этом весь текст у нас так же будет выравниваться по центру. Чтобы этого избежать мы добавили дополнительное правило text-align: left;
8. Вертикальное выравнивание в CSS.
Сделать вертикальное выравнивание текста в ячейке таблицы - дело простое. Для этого есть правило vertical-align.
А вот в блоках вертикальное выравнивание сделать уже сложнее. Например, Вы делаете элемент навигации высотой в 30 пикселей и хотите, чтобы текст внутри этого блока по вертикали был выровнен по центру.
Если написать так:
#item {
height:30px;
width:200px;
border:1px solid black;
vertical-align:middle;
}
И применить это к нашему навигационному элементу:
<div id="item">Текст</div>
То текст все равно останется вверху блока, т.е. в данном случае правило vertical-align:middle не срабатывает.
Как же это исправить?
А исправляется это заменой правила height:30px на line-height:30px
т.е., в итоге, CSS-код будет выглядеть так:
#item {
line-height:30px;
width:200px;
border:1px solid black;
vertical-align:middle;
}
9. CSS-позиционирование внутри контейнера.
Одна из лучших возможностей CSS заключается в том, что Вы можете позиционировать объект на странице как Вам угодно. Также возможно (а иногда и желательно) позиционировать объект внутри контейнера. Сделать это просто. Для этого можно просто написать такое правило:
#container
{
position: relative;
}
Теперь любой объект внутри этого контейнера будет позиционирован относительно него.
Скажем, у Вас есть такая HTML-структура:
<div id="container"><div id="navigation">Текст</div></div>
Теперь, чтобы позиционировать блок с идентификатором navigation внутри контейнера точно на 30 пикселей от левого борта и на 5 пикселей от верхнего, Вы должны написать так:
#navigation
{
position: relative;
left: 30px;
top: 5px;
}
Отлично!
Хотя в данном примере также можно было использовать внешние отступы (margin), но все равно, часто бывают ситуации, когда предпочтительнее использовать позиционирование.
10. Фоновый цвет колонки до самого низа экрана.
Один из недостатков CSS-верстки состоит в том, что Вы не можете контролировать вертикаль, из-за чего возникает одна специфичная проблема, которой лишена табличная верстка.
Допустим, Ваша страница двухколоночная и сделана без использования таблиц. В левой колонке у Вас расположена навигация, и Вы хотите, чтобы вся левая колонка всегда имела голубой фон, хотя в правой колонке фон всегда должен быть белым, т.к. там будет весь контент.
Здесь напрашивается такое правило для левой колонки:
#navigation
{
background: blue;
width: 150px;
}
Однако здесь есть проблемка, т.к. навигация, скорее всего, не будет доставать до самого низа страницы, и из-за этого фоновый голубой цвет будет "обрезаться" на том месте, где заканчиваются навигационные элементы.
Что Вы можете здесь сделать?
К сожалению, единственное решение в данном случае - это использовать специальный чит, добавив к тэгу body фоновую картинку точно такого же голубого цвета, как и в левой колонке.
Вот как это выглядит:
body
{
background: url('/blue-image.gif') 0 0 repeat-y;
}
Эта фоновая картинка должна быть точно 150 пикселей по ширине и иметь такой же голубой цвет как в навигационном блоке.
Недостаток этого метода в том, что Вы не можете указать ширину этой навигационной колонки в относительных единицах em , т.к. в этом случае, если пользователь увеличит размер шрифта на Вашем сайте (через браузер), то фон у Вас собьется, поэтому такую колонку можно задавать только в пикселях.