10 CSS советов и приемов, которые Вы должны использовать.

10 CSS советов и приемов, которые Вы должны использовать.

1. Всегда помещайте стили в отдельном файле CSS! Как я писала ранее, стили можно прописать, как на странице кода, так и отдельно, указав на него ссылку

 <link type=»text/css» rel=»StyleSheet» href=»ссылка на Ваш файл CSS» />

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

2. Не забывайте задать в начале Вашего сайта базовые настройки. Дело в том, что разные браузеры используют разные настройки и если Вы их не сделаете, Вы рискуете получить сайт, который будет отображаться по разному в разных браузерах
Вот самый примитивный пример:
Code
body, div, h1,h2, h3, h4, h5, h6, p,ul
{
  margin: 0;
  padding: 0;
}

А вот ссылка на гораздо более полную начальную установку

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

Code
/* рамка картинки при наведении */
a img {
border:3px solid #ffffff;
}
a:hover img {
border:3px solid #A1B144;
}
5. Не забывайте для нужных элементов установить центрирование по горизонтали. Для inline — элементов (встроенных) :
Codetext-align: center;

Для block-элементов (блочных) нужно задать ширину и margin слева и справа в значение auto:
Codetext-align: center;
  width: 200px;
  margin: 0 auto;

Поясню, что блочные элементы — это элементы типа div и p , которые автоматически показывают их содержимое с новой строки.
6. Используйте правильно блочные и встроенные элементы.
Например, span — это встроенный элемент. Но можно сделать его блочным, если указать для него свойство display:block.
Так вот делать это разрешается, не запрещается. Но все же лучше выглядит использование вместо него div, для которого не надо задавать display:block (div — по определению блочный).

7.Используйте CSS — свойство text-transform
Вместо написания текста верхним регистром, например, заголовков используйте код

Code text-transform: uppercase;
8. Используйте CSS — спрайты.
CSS — спрайты — это несколько разных картинок, сделанных в одной.
Вот пример:
10 CSS советов и приемов, которые Вы должны использовать.
Как они используются, я думаю, Вы догадались. Для блока фиксированной ширины задается позиция фона, которую нужно вывести в данный момент.
Подробнее о них я расскажу в следующей статье. как напишу, поставлю тут ссылку. Тут я лишь объясню, в чем их плюс. В этом случае Вы загружаете всего одну(!) картинку и она срабатывает, например при наведении. Не надо подгружаться новой картинке, а значит нет мигания, мерцания и тому подобных вещей. По сути это оптимизация кода. Самый простой пример, поиск Google внизу у него выводится
Gooooooooooogle
Так вот этот кусок выводится не вставкой много раз картинки буквы о, а просто выводом одной и той же позиции. Все картинки со страницы у него собраны в одной: http://www.google.com/images/nav_logo70.png
А Google — это, несомненно, лучший показатель качества.
9. Задавайте шрифт одной строкой
Вместо кода
Code
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;

используйте
Code
font: bold 12px/20px Arial;

10. Постоянно проверяйте на валидность.
Полностью валидным сделать код практически нереально. Но стремиться к этому и решать решаемые задачи, нужно обязательно. Проверить код на валидность можно тут.
Помните, что валидный код говорит о том, что Вы хороший разработчик.
Вот, собственно и все.
Переведено и адаптировано с сайта http://www.red-team-design.com

Комментарии на Facebook