6 css приемов

http://cssmake.ru/component/content/article/6/84

( 0 - user rating )

В данной статье представлены 6 css приемов, которые должен знать каждый кто имеет отношение к css и html.

1. Сокращение записи css свойства font

div{
font-family:tahoma;
font-size:1.01em;
line-height:1.5em;
font-weight:bold;
font-style:italic;
}

Такая запись стилей шрифта не очень удобна, и очень громоздкая. Более компактна и эстетична следующая сокращенная запись стилей шрифта.

div{
font-family:1.01em/1.5em tahoma bold italic;
}

2. Количество классов на один тег

Обычно свойства элемента описаны в одном классе, но можно использовать несколько классов в одном теге. Таким образом можно разделить, к примеру, стили для текста (class="text") и стили для расположения (class="side") контейнера в разные классы.

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

3. Значение border по умолчанию.

Создавая свойства для границ (border) элементов обычно определяют цвет толщину и стиль. Например запись border:3px solid #000 создает черную сплошную границу. Однако единственная ценность в этой записи это стиль границы. Но если вы в описании упустите какой то из атрибутов, то он будет использоваться по умолчанию. Поэтому старайтесь не забывать указывать все атрибуты в описании границ, чтоб не было не предвиденных результатов в разных браузерах.

4. !important

Обычно в css наибольший приоритет имеет запись которая идет последней.
С помощью !important можно установить найвысший приоритет любому параметру css, независимо от его места расположения. Эта параметр работает во всех браузерах. Это свойство может быть очень полезным, если есть различия в IE и других браузерах, так как с помощью !important можно добится одинакового отображения в IE и других браузерах.

div{
font-family:tahoma !important;
font-family:arial;
}

Используя эту запись можна добится эффекта, что в браузере IE семейство шрифта будет arial, а в других браузерах tahoma.

5. Вертикальное центрирование с помощью css

В то время когда табличная верстка была очень популярной, с вертикальным центрированием не было проблем. Чтоб отцентрировать элемент по вертикали использовался vertical-align:middle для ячейки таблицы. К сожалению при использовании css верстки, тоесть использование <div> в качестве контейнера вертикальное центрирование с помощью vertical-align:middle работать не будет и содержание контейнера будет располагатся вверху. Как же добится того, чтоб содержимое контейнера <div> располагалось по центру?

Все очень просто! В этом нам поможет css свойство line-height. Чтоб содержимое контейнера было отцентрировано вертикально нужно установить line-height этого содержимого равному высоте контейнера:

div{
height:100px;
line-height:100px;
}

<div>
Error sit voluptatem assusantium doloremque laudantium, totam rem
</div>

В результате мы получим результат, который и хотели получить: Содержимое контейнера отцентрировано по вертикали.

Error sit voluptatem assusantium doloremque laudantium, totam rem

6. Размещение по блока по центру.

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

div{
width:100px;
margin:0 auto;
}

Для наглядности мы добавили блоку черные границы (border) и высоту. Данный способ является кроссбраузерным и без каких либо ошибок.