Создание начальных установок css стилей (часть 2).
В первой части статьи были рассмотрены правила создания файла стилей. Во второй части мы рассмотрим создание необходимых правил для установки
css стилей по умолчанию. Это нужно для того, чтоб приступая к созданию сайта, мы уже имели о
динаковое отображение в разных браузерах (
кроссбраузерность) и не тратили свое время на поиск решения как же добится этой кроссбраузерности. Не стоит считать, что этот листинг файла css (
style.css ), который мы в итоге получим, решит все проблемы, связанные с
кроссбраузерностью, но он поможет избежать разного отображения в браузерах с самого начала. Дальше все зависит от web-мастера.
1. Что означает символ "*" или убираем отступы в браузерах.
К сожалению все браузеры, по умолчанию, имеют собственные отступы от краев окна. Наша задача убрать эти отступы. Для этого служит следуюещее css правило:
*
{
margin:0;
padding:0;
}
Символ "*" означает "для всех тегов"
2. Изображения.
Благодаря этим правилам мы убираем границы (border) вокруг всех изображених и выравниваем все изображения по вертикали, так как они по умолчанию в разных браузерах выравниваются по вертикали не одинаково.
img
{
border:0;
vertical-align:top;
}
3. Таблицы.
По умолчанию у таблиц установлены границы с интервалами между ними и дополнениями. Из-за чего таблицы имеют псевдо "3d" вид. Это не очень красивое оформление убирается двумя спсобами: с помощью html (
cellpadding="0" cellspacing="0" border="0") - этот код нужно прописывать для каждой таблицы, что не совсем удобно да и выглядит не эстетично. А также добавляет к весу страницы ненужные килобайты, что замедляет загрузку страницы.
Более правильным будет написать следующий код в css:
table, td
{
border-collapse:collapse;
border:0;
}
4. Оформляем тело html документа.
На данном этапе устанавливаются значения для тега
<body>. По умолчанию в браузерах цвет заливки установлен белый (
#FFFFFF), но все таки следует указать какого цвета будет заливка во избежания глюков в разных браузерах с заливкой. В этом теге следует также установить все стили для шрифта (семейство шрифта, размер шрифта, межстрочное растояние, и т.д.) Тем самым Вы установите
стили шрифта для Вашего сайта по умолчанию. Можно быть уверенным, что эти
стили кроссбраузерные.
body
{
background:#FFFFFF;
font:11px/14px arial;
color:#292727;
}
В нашем примере мы установили основной шрифт сайта
11px. Установка шифта в пикселях не означает что сайт необходимо дальше создавать с измерениями в пикселях. Вы спокойно можете использовать в своих измерениях относительные значения (em). Данное правило лишь устанавливает размер шрифта по умолчанию.
5. Листинг необходимых стилей по умолчанию.
Далее будет представлен полный листинг необходимых стилей для Вашего сайта, что позволит уже с самого начала сайта получить основу для
создания кроссбраузерного сайта.
*
{
margin:0;
padding:0;
}
img
{
border:0;
vertical-align:top;
}
table, td
{
border-collapse:collapse;
border:0;
}
body
{
background:#FFFFFF;
font:11px/14px arial;
color:#292727;
}
Хочу добавить для тех, кто в танке. Данная статья не описывает начальные установки для всех тегов. Сдесь лишь описывались те свойства, которые нужно обязательно определить изначально в css, чтоб избежать многих проблем с кроссбраузерностью. Данный набор начальных правил css тестировался во всех популярных браузерах и, в том числе, на системе MAC OS.
Добавить комментарий
