CSS – это универсальный способ создания стилей для элементов на страницах сайта. Синтаксис, используемый в CSS, на первый взгляд – довольно прост, но при этом позволяет кардинально влиять на внешний вид элементов на сайте. В CSS3 он стал гораздо мощнее.
Существует много полезных приемов, которые можно использовать в CSS. Приведем некоторые из них, которые можете добавить в свою коллекцию.
1. Установите значение font-size 62.5% в <body> для простого преобразования px в em
Если вы хотите использовать в CSS относительные единицы (em) при указании размеров шрифтов, то для font-size в <body> необходимо установить значение в 62,5%. Тогда, для перевода необходимо значение в пикселях разделить на 10 и получится значение в относительных единицах (например, 24px = 2.4em).
2. Изменить свойство outline для WebKit Браузеров
Наверное, вы уже замечали, что при нахождении в input-элементе (свойство «:focus»), в браузере Safari добавляется синяя рамка (а в Chrome — желтая).
Если необходимо от этого избавиться, то просто прописываем следующее правило в CSS (при этом удаляется рамка из текстовых полей):
Обратите внимание, что такие подсвечивающиеся «бордеры» облегчают жизнь людям с ограниченными способностями, которые как правило используют альтернативные средства навигации на сайте, в отличии от других, для которых достаточно мышки. Также подсветка полей ввода актуальна для тех, кто использует сочетание клавиш для заполнения формы (при подсветке понятно, какое поле активно). Поэтому, вместо того, чтобы полностью обнулять это свойство, посмотрите на свой дизайн и примите решение, как лучше настроить данное свойство.
3. Используйте CSS для настройки внешнего вида элементов :hover.
Для прогрессивного улучшения, можно использовать свойство transform. Но тут стоит учесть, что оно будет отрабатываться только в тех браузерах, которые поддерживают CSS3.
Вот пример: увеличение кнопки при наведении на 110%
4. Кроссбраузерность в IE6 и IE7 без условных комментариев
Вам необходимо, чтобы в IE ничего не разъезжалось? Это можно реализоваться без условных комментариев (только обращаем внимание, что при этом CSS не будет валидным).
Следующий код позволит изменять фон div’а, в зависимости от того, в каком браузере он просматривается. Для браузеров IE7 и ниже – мы добавляем в строку со стилем – ‘*’. Для IE6 и ранее – ‘_’.
5. Поддержка прозрачности/непрозрачность во всех основных браузерах
Приведенный пример устанавливает прозрачность div’а в 70%. Для того, чтобы правильно отрабатывалось в IE, необходимо добавить дополнительные свойства (к сожалению, это также не соответствует стандартам W3C ).
6. Используйте !important, чтобы перезаписывать свойства в CSS
Если в CSS для одного элемента прописаны два одинаковых свойства с разными значениями, то в итоге применяется то, которое идет последним. Но, используя !important, мы можем переопределить приоритеты.
Возьмем, к примеру, этот набор правил:
<h1> будет красным.
Если необходимо изменить приоритет правил, при этом не меняя порядок их объявления, то будем использовать следующий набор:
Теперь, <h1> будет зеленого цвета.
7. Выравнивание элемента фиксированного размера по центру
Вот один из способов, чтобы центр фиксированного по ширине и высоте div’а оказался в центре контейнера. Данный способ может применяться и к отцентровке текста, картинок и т.д. в рамках своих контейнеров. По сути, немного арифметики и мы устанавливаем элемент с помощью абсолютного позиционирования и margin’ов. Обратите внимание, что родительский контейнер должен иметь position:relative.
8. Веб-шрифты с Google Font API
Веб-шрифты позволяют выйти за пределы безопасных шрифтов, используя преимущества CSS – правило @font-face. Однако, сейчас, браузеры не одинаково отображают данное свойство. В частности, веб-браузеры отличаются типами файлов шрифтов, которые они поддерживают (думаем, это изменится с принятием WOFF стандартов). Кроме того, необходимо быть осторожным при использовании шрифтов, поскольку не все они лицензированы для использования в сети.
Обойти проблемы с @font-face вам поможет Google Font API.
Вот пример использования шрифта Cantarell в <h1> с помощью Google Font API.
Если вы хотите использовать шрифт Cantarell от Google Шрифт APIто необходимо обозначить его <head>:
Для использования шрифта в <h1> элементов, просто пропишите font-family в CSS.
9. Препятствуем переносу текста в элементе
Иногда необходимо, чтобы текст в теге не переносился на другую строку из-за того, что не позволяет ширина контейнера.
Вот пример, как обычно переносится текст в ссылке, когда он упирается в границу родительского элемента:
Обратите внимание, что текст по умолчанию может быть перенесен на другую строку на пробелах. Что делать, если нам надо, чтобы ссылка была на одной линии? Выход простой. Мы просто используем white-space.
Теперь, наша ссылка неразрывна.
10. Вертикально выравнивание текста
Мы можем использовать различные методы для горизонтально выравнивание текста (например, text-align: center или margin: 0 auto ), вертикальное выравнивание гораздо сложнее.
Однако, для строки текста, мы можем использовать line-height. Установив значение line-height элемента таким же, как и высота его контейнера, она станет вертикально по центру.
Вот <p> элемент, который в центре div’а 100 × 100 пикселей с использованием text-align: center :
Логично, что, text-align не влияет на вертикаль. Чтобы исправить это, мы можем установить значение line-height, равное высоте div’а (100px).
Отметим, что в данном примере, у <p> отсутствует padding и margin. Если в вашем случае не так, то их необходимо компенсировать, или, что проще, установить значение «0» для данных свойств.
К сожалению, данный способ не годится для текста больше одной строки, так как при переносе будет учитываться значение line-height.
На этом всё!
Существует много полезных приемов, которые можно использовать в CSS. Приведем некоторые из них, которые можете добавить в свою коллекцию.
1. Установите значение font-size 62.5% в <body> для простого преобразования px в em
Если вы хотите использовать в CSS относительные единицы (em) при указании размеров шрифтов, то для font-size в <body> необходимо установить значение в 62,5%. Тогда, для перевода необходимо значение в пикселях разделить на 10 и получится значение в относительных единицах (например, 24px = 2.4em).
Код
body {
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
font-size: 62.5%; /* font-size 1em = 10px */
}
p {
font-size: 1.2em; /* 1.2em = 12px */
}
2. Изменить свойство outline для WebKit Браузеров
Наверное, вы уже замечали, что при нахождении в input-элементе (свойство «:focus»), в браузере Safari добавляется синяя рамка (а в Chrome — желтая).
Если необходимо от этого избавиться, то просто прописываем следующее правило в CSS (при этом удаляется рамка из текстовых полей):
Код
input[type="text"]:focus {
outline: none;
}
outline: none;
}
Обратите внимание, что такие подсвечивающиеся «бордеры» облегчают жизнь людям с ограниченными способностями, которые как правило используют альтернативные средства навигации на сайте, в отличии от других, для которых достаточно мышки. Также подсветка полей ввода актуальна для тех, кто использует сочетание клавиш для заполнения формы (при подсветке понятно, какое поле активно). Поэтому, вместо того, чтобы полностью обнулять это свойство, посмотрите на свой дизайн и примите решение, как лучше настроить данное свойство.
3. Используйте CSS для настройки внешнего вида элементов :hover.
Для прогрессивного улучшения, можно использовать свойство transform. Но тут стоит учесть, что оно будет отрабатываться только в тех браузерах, которые поддерживают CSS3.
Вот пример: увеличение кнопки при наведении на 110%
Код
a {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
4. Кроссбраузерность в IE6 и IE7 без условных комментариев
Вам необходимо, чтобы в IE ничего не разъезжалось? Это можно реализоваться без условных комментариев (только обращаем внимание, что при этом CSS не будет валидным).
Следующий код позволит изменять фон div’а, в зависимости от того, в каком браузере он просматривается. Для браузеров IE7 и ниже – мы добавляем в строку со стилем – ‘*’. Для IE6 и ранее – ‘_’.
Код
div {
background-color: #999; /* all browsers */
*ackground-color: #ccc;/* add a * before the property - IE7 and below *//
_background-color: #000;/* add a _ before the property - IE6 and below *//
background-color: #999; /* all browsers */
*ackground-color: #ccc;/* add a * before the property - IE7 and below *//
_background-color: #000;/* add a _ before the property - IE6 and below *//
5. Поддержка прозрачности/непрозрачность во всех основных браузерах
Приведенный пример устанавливает прозрачность div’а в 70%. Для того, чтобы правильно отрабатывалось в IE, необходимо добавить дополнительные свойства (к сожалению, это также не соответствует стандартам W3C ).
Код
div {
/* standards-compliant browsers */
opacity:0.7;
/* The following is ignored by standards-based browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
/* standards-compliant browsers */
opacity:0.7;
/* The following is ignored by standards-based browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
6. Используйте !important, чтобы перезаписывать свойства в CSS
Если в CSS для одного элемента прописаны два одинаковых свойства с разными значениями, то в итоге применяется то, которое идет последним. Но, используя !important, мы можем переопределить приоритеты.
Возьмем, к примеру, этот набор правил:
Код
h1 { color: green; }
h1 { color: red; }
h1 { color: red; }
<h1> будет красным.
Если необходимо изменить приоритет правил, при этом не меняя порядок их объявления, то будем использовать следующий набор:
Код
h1 { color: green !important; }
h1 { color: red; }
h1 { color: red; }
Теперь, <h1> будет зеленого цвета.
7. Выравнивание элемента фиксированного размера по центру
Вот один из способов, чтобы центр фиксированного по ширине и высоте div’а оказался в центре контейнера. Данный способ может применяться и к отцентровке текста, картинок и т.д. в рамках своих контейнеров. По сути, немного арифметики и мы устанавливаем элемент с помощью абсолютного позиционирования и margin’ов. Обратите внимание, что родительский контейнер должен иметь position:relative.
Код
div {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px; /* 1/2 of your element height*/
margin-left: -200px; /* 1/2 of your element width */
}
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px; /* 1/2 of your element height*/
margin-left: -200px; /* 1/2 of your element width */
}
8. Веб-шрифты с Google Font API
Веб-шрифты позволяют выйти за пределы безопасных шрифтов, используя преимущества CSS – правило @font-face. Однако, сейчас, браузеры не одинаково отображают данное свойство. В частности, веб-браузеры отличаются типами файлов шрифтов, которые они поддерживают (думаем, это изменится с принятием WOFF стандартов). Кроме того, необходимо быть осторожным при использовании шрифтов, поскольку не все они лицензированы для использования в сети.
Обойти проблемы с @font-face вам поможет Google Font API.
Вот пример использования шрифта Cantarell в <h1> с помощью Google Font API.
Если вы хотите использовать шрифт Cantarell от Google Шрифт APIто необходимо обозначить его <head>:
Для использования шрифта в <h1> элементов, просто пропишите font-family в CSS.
Код
h1 {
font-family: 'Cantarell', Arial, serif; /* Use a font stack, just in case. */
}
font-family: 'Cantarell', Arial, serif; /* Use a font stack, just in case. */
}
9. Препятствуем переносу текста в элементе
Иногда необходимо, чтобы текст в теге не переносился на другую строку из-за того, что не позволяет ширина контейнера.
Вот пример, как обычно переносится текст в ссылке, когда он упирается в границу родительского элемента:
Обратите внимание, что текст по умолчанию может быть перенесен на другую строку на пробелах. Что делать, если нам надо, чтобы ссылка была на одной линии? Выход простой. Мы просто используем white-space.
Код
a { white-space: nowrap; }
Теперь, наша ссылка неразрывна.
10. Вертикально выравнивание текста
Мы можем использовать различные методы для горизонтально выравнивание текста (например, text-align: center или margin: 0 auto ), вертикальное выравнивание гораздо сложнее.
Однако, для строки текста, мы можем использовать line-height. Установив значение line-height элемента таким же, как и высота его контейнера, она станет вертикально по центру.
Вот <p> элемент, который в центре div’а 100 × 100 пикселей с использованием text-align: center :
Логично, что, text-align не влияет на вертикаль. Чтобы исправить это, мы можем установить значение line-height, равное высоте div’а (100px).
Код
div { width:100px; height:100px; }
div p { line-height:100px; }
div p { line-height:100px; }
Отметим, что в данном примере, у <p> отсутствует padding и margin. Если в вашем случае не так, то их необходимо компенсировать, или, что проще, установить значение «0» для данных свойств.
К сожалению, данный способ не годится для текста больше одной строки, так как при переносе будет учитываться значение line-height.
На этом всё!