CSS: полезные советы и трюки

Есть вещи, которые могут стать решающим фактором. Существует также множество советов по CSS, которые могут помочь во время разработки. Ниже приведены несколько советов, которые помогут улучшить ваш код.

Сброс браузеров по умолчанию
По умолчанию в браузерах назначены стили к определенным элементам. Следующий пример кода от Эрика Мейера – про то как сбросить настройки CSS по умолчанию.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=»0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: «»;
}
blockquote, q {
quotes: «» «»;
}

Курсор подсказка через CSS

Если CSS стили не прописывать, то кнопки при наведении не будут реагировать. Чтобы это исправить добавьте 1 строчку:

input[type="button"] { cursor: pointer; }

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

CSS спрайт

CSS спрайт — это термин для объединения нескольких изображений в одно изображение, с помощью CSS. Обычно используется в качестве фона для каких-либо элементов. Чтобы увидеть, как это работает, вернитесь к предыдущему уроку.

Этот метод уменьшает нагрузку HTTP запросов, которые ускоряют работу вашего сайта. Это также помогает избежать «глюков» с загрузкой изображений, когда основная картинка загрузилась, а картинка, которая будет показывать при наведении — нет.

Примеры:

Фокус в форме поля.

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

input:focus { border: 2px solid #972324; }

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

Примеры:

Полезность комментирование

Воспользоваться вставкой комментариев в CSS файл может любой администратор сайта. Также комментарии помогут и вам самому, напоминая о предыдущих участках кода. Eliot Jay Stocks показывает вам, что используя такие комментарии, вы помогаете людям, которые не имеют времени на просмотр и поиск отдельных участков кода.

Пример:

/* TUTORIAL: http://perishablepress.com/press/2008/08/04/two-column-horizontal-sequence-wordpress-post-order */

Включая ссылку на урок, который вы использовали при создании сайта, вы помогаете другим людям интересующимся css стилями. Таким образом при использовании данной методики вы тем самым облегчаете поиск какого-либо участка кода в будущем.

Центрирование элементов по горизонтали

CSS никогда не предназначалась в качестве метода содержания структуры, но она успешно адаптировалась в этой сфере, после того как была официально выпущена. Поэтому вы увидите структуры, созданные со свойствами, такими как floats и negative margins, которые, используются не по предназначению.
Другие открытия CSS -это элементы центрирования. Это код, находящийся ниже центра элемента и содержащий ID контейнера.

#container { width: 960px; margin: 0 auto; }

Использование этого кода уравнивает ваш сайт по центру. Установка параметра «Margin» до 0, автоматически уравнивает сайт по центру, по вертикали и горизонтали. При этом ширина должна быть фиксированной.
К сожалению, просто так вы не можете установить значение на 0 и автоматически центрировать элементы по вертикали, с этой проблемой я уже встречался, когда только начал изучать css.Встроенные стили

В некоторых случаях, встроенные стили имеют приоритет. Единственный способ не делать встроенные стили — это делать стили в отдельном файле.

div { color: #fff !important; }

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

Простой поиск элементов для решение проблем

На время добавьте элементам красную границу через css, если вдруг у вас возникли проблемы с поиском DIV’a, заголовка или любого другого элемента.

.element { border: 1px solid red; }

Этот просто метод, которым пользуются многие разработчики и он творит чудеса :)

Печать веб-сайта на бумаге

Вы не хотите печатать веб-сайт на бумаге, как вы его видите на экране, потому что:

— пустая трата чернил
— пустая трата бумаги
— включает в себя ненужную информацию

Путём создания отдельного CSS файла для печати, вы можете создать новую структуру, которая будет получена, большей своей частью из СМИ. Такие простые вещи, как скрытие общих веб-элементов, таких как «навигация», «сайдбар» и «футер». Все эти разделы не соответствуют рамкам мировой печати, особенно «навигация». Делая это, вы можете сосредоточиться на содержании, которое является частью печатаемого. Размещайте ваш логотип в верхней части экрана, как эталон вашего бренда.

Заключение:

И в заключении нашей статьи, я бы хотел вам посоветовать почитать статьи «CSS-Tricks» от Криса Коуера .