10 хитростей CSS

cssПредлагаю вашему вниманию некоторые хитрости, которые могут быть использованы при CSS верстке. Возможно, что с некоторыми из них вы уже знакомы, но, тем не менее, многие могут почерпнуть для себя некоторую часть полезной информации. Итак, не будем терять драгоценного времени, начнем прямо сейчас!

1. Сокращенное правила для Font

Когда вы работаете с оформлениями шрифтов, можете использовать следующие свойства:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

Будет уместно заметить, что есть возможность использовать сокращенное задание этих свойств:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

Намного лучше и короче! Только несколько предупреждений: эта сокращенная версия будет работать только если вы укажете оба свойства font-size и font-family. Команда font-family всегда должна быть указана в конце и font-size должен быть указан непосредственно перед ней. Также, если вы не определили значения font-weight, font-style или font-variant, они будут установлены в значение normal.

2. Два класса вместе

Иногда необходимо использовать несколько атрибутов разных классов в одном классе. Вы думаете это невозможно? Ошибаетесь! Вы можете использовать несколько классов как один! Например:

<p class="text side">...</p>

Использование этих двух классов вместе (разделенных пробелом, не запятой!) подразумевает, что правила этих классов объединяются. В случае использования одного и того-же правила в классах, действительным будет правило того класса, который объявлен ниже (позже).

3. CSS border — значение по умолчанию

Когда мы пишем правила для border обычно указываем color, width и style (в любом порядке). Например:

border: 3px solid #000;

Это правило позволит нам получить сплошную черную рамку толщиной в 3 пикселя. Тем не менее, в данном случае, необходимым свойством является только style.

Если указать только style=solid, то значениями по умолчанию будут: толщина (width) бордюра будет равна значению medium (3px-4px) и цвет по умолчанию будет равен цвету текста, используемого внутри границ. Если border хоть одной из сторон должен быть отличен, тогда указывайте правило полностью.

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

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

Таким образом, заголовок вашей страницы должен содержать ссылки на два CSS-документа, один для отображения (screen), другой для печати (print).

<link href="stylesheet.css" rel="stylesheet" media="screen" type="text/css" />
<link href="printstyle.css" rel="stylesheet" media="print" type="text/css" />

В первой строке кода CSS — для отображения в браузере (включается командой media=»screen») и во второй строке — версия для печати (media=»print»).

Так как же правильно создать CSS-файл для печати? Ничего сложного: копируем stylesheet.css под именем printstyle.css и устанавливаем для него команду media=»screen». Теперь удаляем все лишнее и делаем страницу такой, какой мы ее хотели бы видеть при печати. Готово? Теперь оформляем подключение двух наших CSS-файлов как было указано выше. Теперь и у вас есть версия для печати!

5. CSS — блочная модель. Альтернатива хакам.

Даже и не знал как назвать по-русски этот раздел! У них все просто — CSS box model hack alternative! Ну да ладно, по дальнейшему тексту многие поймут, о чем речь.

Многие используют хаки для исправления ошибок расчета габаритов box-моделей в браузерах IE младше 6-й версии. Ошибочный расчет заключается в том, что border и padding включались в ширину box-модели. Например:

#box {
width: 100px;
border: 5px;
padding: 20px
}

Применим это правило к следующему HTML коду:

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

Это правило устанавливает общую ширину блока равной 150px (100px width + два 5px borders + два 20px paddings) для всех браузеров, кроме IE версий < 6. В этих браузерах ширина рамки будет равна 100px. Соответсвенно одна и таже страница будет смотреться по разному в этих браузерах по сравнению с нормальными.

Простейший способ исправить эту ситуацию следующий:

#box {
width: 150px;
}
#box div
{
border: 5px;
padding: 20px;
}

И новый HTML код должен быть таким:

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

Замечательно! Теперь ширина блока всегда будет равна 150px и ваша страница будет выглядеть одинаково и в старых браузерах IE.

6. Центрирование блочного элемента

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

#content
{
width: 700px;
margin: 0 auto;
}

Теперь вы должны заключить весь HTML контент страницы в <div id=»content»>. Этот метод позволит автоматически отцентрировать содержимое по центру экрана. Казалось бы все отлично, но, как это уже было описано выше, этот способ не работает в версиях IE ниже IE6. Поэтому CSS правило следует немного изменить:

body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}

Так как добавленное правило будет центрировать текст во всех элементах, мы добавили еще одно правило text-align:left. Все работает, убедитесь сами!

7. CSS — выравнивание по вертикали

Вертикальное выравнивание в ячейках таблиц работает хорошо. Но как обстоят дела с вертикальным выравниванием в блоке при помощи CSS? Должно быть тоже все хорошо, ведь есть даже правило vertical-align. Только оно почему-то никак не влияет на выравнивание.

Да уж…неожиданный эффект. Есть ли решение? Оказывается есть! На помощь приходит правило line-height. Допустим вы имеете блок высотой в 2em и мы добавляем в его класс правило line-height:2em. Вот теперь текст расположен в центре вертикали!

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

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

#container
{
position: relative;
}

Теперь любой элемент внутри контейнера будет позиционироваться относительно его границ.

<div id="container">
<div id="navigation">...</div>
</div>

Для того чтобы спозиционировать элемент навигации внутри контейнера с отступом от левого края равным 30px и от верхнего края 5px, достаточно применить следующее правило для этого элемента:

#navigation
{
position: absolute;
left: 30px;
top: 5px;
}

Конечно в этом примере можно было бы использовать следующее позиционирование: margin: 5px 0 0 30px, но в данном случае, нагляднее и более принят вышеуказанный пример.

9. Заливка цветом к основанию экрана

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

#navigation
{
background: blue;
width: 150px;
}

Но в случае с данным примером есть одна неприятность: заливка закончится сразу же в конце меню, так и не дойдя до основания страницы. Как же поступить в данном случае? Все очень просто: готовим изображение синего цвета шириной в 150px и высотой 10px-20px и пишем следующее правило:

body
{
background: url(blue-image.gif) 0 0 repeat-y;
}

Все работает, хотя есть небольшое но: навигационное меню всегда будет фиксированной ширины и никак не будет зависеть от содержащегося в навигации контента.

Оригинал статьи «Ten CSS tricks you may not know»

Вы можете оставить комментарий, или отправить trackback с Вашего собственного сайта.

Написать комментарий