Хитрости CSS которые вы должны знать


Дорогие друзья, сегодня хотел бы обратить внимание на некоторые моменты работы со стилями. Все вы наверное часто сталкиваетесь с таблицами каскадных стилейили CSS. Чтобы успешно работать с CSS нужна практика и знание некоторых особенностей поведения браузеров. Из-за того, что разные браузеры отображают вашу страничку по разному, вы должны сделать так, что бы она выглядела одинаково во всех браузерах. Сегодня я и хотел бы вспомнить некоторые хитрости при работе с CSS. Наверное многие из вас уже знают о них, а кому то эта информация будет полезной. Как всегда, если у вас есть что добавить, вы можете свободно писать об этом в комментариях.

1. Сокращенный код для CSS шрифта

Когда вы задаете слить для шрифта в CSS, вы обычно описываете правила так:

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

Думаю так намного лучше! И еще пару слов: такое сокращение для CSS будет работать только если вы определите два правила вместе: font-size и the font-family. Причем правило font-family должно располагаться в самом конце строки, а правило font-size должно располагаться, строго перед ним. Также вы можете не указывать  правила font-weightfont-styleи font-variant. В этом случае значения для них автоматически будут выставлены в normal. Об этом вы должны помнить.

2. Использование нескольких классов.

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

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

Здесь, как мы видим, параграфу назначены два класса text и side. Использование этих классов вместе (разделенных пробелом, а не запятой) означает, что к параграфу буду применены правила, назначенные в классах text and side. Если в классах содержаться одинаковые правила, то применяться будут правила того класса, который расположен ниже в документе  CSS.

3. значение по умолчанию для бордюра (border) в CSS.

Когда вы пишете правило для бордюра, вы обычно указываете цвет (color), толщину (width) и стиль (style). Например, написав border: 3pxsolid#000 вы получите черную сплошную границу, толщиной в 3 пикселя. Однако,единственным обязательным значением здесь будет стиль бордюра. Если бы вы написали только border: solid, то остальные параметры для него были бы использованы по умолчанию. Но что используется по умолчанию? Все описано в стандарте CSS, который нужно знать или хотя бы прочитать. В качестве ширины, по умолчанию, для бордюра используется значение medium (это примерно 3 - 4 пикселя). В качестве цвета, по умолчанию, для бордюра используется цвет текста внутри бордюра. 
Таким образом, если ваши значения параметров совпадают со значениями параметров по умолчанию, то вы можете не указывать эти параметр.

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" />

Первая строка кода вызывает CSS для дисплея (используя media="screen") а вторая строка кода вызывает CSS для печати (используя media="print").
Создайте простой текстовый документ и назовите его printstyle.css. Запишите в него те CSS команды, которые сформируют вашу страницу для печати. 

5. Техника подмены изображениями.

При верстке страниц очень важно использовать основные теги HTML для разметки текста. А использовать изображения для замены текста не стоит. Это плохо. И это одна из серьезных ошибок начинающих веб мастеров. И хотя я сам, с самого начала не очень любил использовать изображения, но иногда без них все де не обойтись. Разметка стандартными тегами HTML имеет много преимуществ. И главная причина здесь в том, что страницу сверстанную тегами HTML хорошо понимают поисковые машины. К тому же страница намного быстрее загружается. Есть и еще преимущества, но сейчас речь не об этому.

Предположим, что вы настолько любите разные красивые шрифты, что применили их для заголовков в дизайне сайта. И теперь сидите и думаете, как же это все верстать. Ведь наверняка у посетителей вашего будущего сайта на компьютерах будет отсутствовать ваш замечательный шрифт. Следовательно, вы не сможете сверстать страницу только тегами HTML. Что же, остается только заменить теги изображением с вашим замечательным заголовком. Казалось бы все просто. Но нет, однако и здесь появляется проблема.  Поисковые машины не смогут прочитать текст на изображении и правильно проиндексировать вашу страницу.

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

<h1><img src="widget-image.gif" alt="купи виджет" /></h1>

Вы можете предположить, что и так все хорошо. Но вполне очевидно, что поисковые машине не придадут такого значения тегу alt, как если бы это был просто текст. Поскольку ушлые веб мастера часто записывают в этот тег что попало, его вес слишком мал.

Так что же делать? - спросите вы. А вот здесь и нужно как раз применить технику подмены изображением:

<h1>Buy widgets</h1>

Сейчас мы имеем текст пригодный для поисковых машин, но он не использует ваш художественный шрифт. Решаем это в файле стилей:

h1
{
background: url(widget-image.gif) no-repeat;
height: высота изображения 
text-indent: -2000px
}

Здесь нужно выставить высоту блока равной высоте изображения.
И вот теперь ваша замечательная картинка с красивым текстом появиться на месте тега <h1>, а текст будет сдвинут из области видимости. Благодаря правилам CSS текст будет сдвинут влево на 2000 пикселей, что явно за пределами экрана. Такой текст не будет виден. В результате получим:

  • Пользователи увидят красивую картинку с текстом
  • Поисковые машины увидят текст в стандартном теге

 Вот такой  компромисс мы получили. Хотя тоже не без изъяна. Я говорю о том, что еще есть такие пользователи, которые умудряются отключать просмотр картинок в браузере. Ну что же, это их право. Однако в этом случае они не увидят ни текста ни картинку.

6. альтернативный хак CSS для бокса (box model).

Альтернативный хак CSS обычно используется для фиксации проблемы отображения в браузерах Internet Explorer версии 6 и ниже на PC, когда border и padding входят в ширину элемента.
Например, чтобы задать размеры контейнера, вы описываете правила CSS следующим образом:

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

А затем, назначте эти правила CSS для контейнера:

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

Это значит, что общая ширина контейнера  равна 150px (100px ширина + два бордера по 5px + два отступа по 20px ) для всех браузеров, за исключением браузеров Internet Explorer версии 6 и ниже на PC. В этих браузерах общая ширина равна 100px, а отступы и бордюр включены в эту ширину. Альтернативный хак CSS для бокса исправляет это несоответствие, но может внести настоящую путаницу.
Простейшая альтернатива может быть такие правила CSS:

#box
{
width: 150px
}

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

А код HTML нужно изменить так:

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

Отлично! Теперь ширина контейнера будет всегда равной  150px независимо от браузера!

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

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

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

Теперь заключив контент в тэг <div id="content"> в теле документа HTML, границы слева и справа будут автоматически выровнены. Это позволит вашему контенту расположиться посередине экрана.  Все очень просто. Но раз мы говорим об этом здесь, значит не все гладко. Как вы уже, наверное, догадались спокойно жить нам не дает все тот же старый знакомый, браузер Internet Explorer версии 6 и ниже для PC. Эти браузера вообще не умеют выравнивать при помощи  CSS. Но вы можете немного изменить код CSS:

body
{
text-align: center
}

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

Теперь главный контент будет расположен посередине. А внутри контейнера нам пришлось принудительно выровнять по левому краю. Но это работает!

8. Выравнивание блока по центру по вертикали при помощи CSS.

Самый легкий способ вертикального выравнивания это использование таблиц. Но табличная верстка устарела и неэффективна. Чтобы контент выровнять по центру  по вертикали нужно использовать  vertical-align: middle. Но, к сожалению это не работает.

Предположим , что вы хотите установить высоту пункта меню равной 2em. Вы используете в CSS вертикальное выравнивание, но это не работает. Текст упрямо отображается в верхней части.

Хм ... Это не то сто мы ожидали увидеть. Как же решить эту проблему?

Решение такое: задайте высоту строки line-height равной высоте пункта меню. Так как наша высота равна 2em, то мы должны создать правило CSS : line-height: 2em. Отлично! Теперь наш текст расположился вертикально по центру.

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

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

Вы также можете (и это часто используется) расположить объекты внутри контейнера.

Это также очень легко сделать. Просто назначьте контейнеру следующее правило CSS:

#container
{
position: relative
}

Теперь любой элемент внутри контейнера будет располагаться относительно самого контейнера.
Предположим, что у вас есть такая HTML структура:

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

И чтобы расположить контейнер navigation точно на 30 пикселей слева и 5 пикселей сверху от границы контейнера container, вы должны использовать следующий CSS код:

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

Отлично! Те, кто хорошо знает CSS, конечно скажут, что в этом примере вы должны использовать margin: 5px0 0 30px.Все это так, но в некоторых случаях все же желательно использовать позиционирование .

10. Вертикальный фон до конца страницы.

Как вы уже наверное знаете, CSS невозможно контролировать вертикально. И это является одним из недостатков CSS, и создает ряд проблем, усложняя нам жизнь. Хотя табличная верстка и лишена этого недостатка, но мы попробуем что-нибудь придумать. 

Представим, у вас есть колонка в левой части страницы шириной 150px. Вам нужно, чтобы она проходила через всю страницу сверху донизу. Фон вашей страницы белый, а фон вашей колонки синий.  Соответственно вы пытаетесь применить следующий код CSS:

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

Всего одно замечание: в том случае если содержимое контейнера navigationне использует всю высоту колонки и скажем его хватает только на половину высоты, то вашфон будет обрезанпосле окончания контента. То есть фон вашей колонки будет синим только до середины экрана. И это определенно испортит ваш замечательный дизайн.  Что же с этим делать!?
К сожалению, единственным решением этой проблемы является использование фонового изображения.  Вы должны использовать изображение с белым фоном и синей колонкой, по ширине точно совпадающей с вашим дизайном. Назначьте его следующим кодом CSS:

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

Изображение, которое вы используете в качестве фона должно быть по ширине 150px и залито синим цветом, как и ваша колонка.

Недостатком этого метода, как вы уже, наверное, догадались, это жесткая привязка к ширине. Если пользователь увеличит шрифт и ширина колонки измениться, то он увидит несовпадение ширины фона и колонки. Используя этот метод, вы должны указывать ширину в пикселях (px).

 

Заключение

Сегодня мы рассмотрели некоторые моменты работы с CSS. Таких моментов на самом деле намного больше. Это тема не одной статьи. Надеюсь эта информация будет полезна для вас. Спасибо за внимание.

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

8 комментариев

  1. Антон Бугров15/09/2011
  2. BlacKKaT12/03/2011
  3. ded-pikto08/01/2011
    • Николай08/01/2011
  4. Олег19/08/2010
  5. intero05/08/2010
  6. Чуваш05/08/2010

Добавить коментарий

10 − 4 =