Основные трюки CSS стилей для начинающих вебмастеров

Бывают ситуации при веб-разработке, когда требуются быстрые решения и наиболее простым выходом будет использование простых, но эффективных CSS-трюков. Некоторые трюки настолько простые, что веб-дизайнеры о них и не задумываются и используют их в автоматическом режиме. А для использования некоторых CSS-трюков приходится немного «погуглить», чтобы убедиться, что тот, или иной способ используется верно. Мы решили собрать основные способы программирования CSS в одном месте. Поэтому, в этом посте вы найдете наиболее часто используемые решения при работе со стилями CSS.

Данная статья предназначена для начинающих вебмастеров, но может быть полезна и более продвинутым пользователям.

 

 

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

Центрирование элементов – это один из самых сложных трюков в CSS, который можно провернуть по-разному. Решение может принимать различные очертания и в основном зависит от того, что именно вам нужно отцентрировать. Ниже рассмотрены основные варианты решений для центрирования различных элементов на странице.

 

Текстовый элемент

Текст выравнивается по центру страницы (или отдельного блока) с помощью стиля text-align: center;.

.blok {
  text-align: center;
}

 

Тег (контейнер или блок)

Элемент div (или любой другой элемент) можно отцентрировать, если, например, задать ему свойство block, а затем использовать автоматический горизонтальный отступ (слева и справа).

Пример кода:

.blok {
  display: block;
  margin: 0 auto;
  width: 100%;
}

В примере используется ширина в 100% от размера блока (или страницы), а также отступ (margin) сверху и снизу 0, а слева и справа auto, что позволяет браузеру высчитывать центр контейнера и, соответственно, по нему центрировать.

 

 

Вертикальное выравнивание (центрирование по вертикали)

Это тоже довольно распространенный трюк в CSS и он заслуживает рассмотрения. Главная задача при вертикальном центрировании – использовать одинаковые значения стилей line-height и height. Это также позволяет браузеру высчитывать высоту элемента и, соответственно, находить его центральную ось. Если вам нужно выровнять что-то внутри блока по вертикальной центральной оси, тогда используйте свойство vertical-align: middle;.

Пример кода:

.blok {
  line-height: 100px;
  height: 100px;
  vertical-align: middle;
}

 

по ссылке описаны все способы вертикального выравнивания в CSS

 

 

Абсолютное позиционирование

Если вам нужен полный контроль над расположением любого блока на странице, тогда вам нужно использовать абсолютное позиционирование (position: absolute;). Абсолютное позиционирование позволяет с точностью до 1 пикселя расположить блок в нужном месте. С помощью свойств top, right, bottom и left (это своего рода отступы с соответствующей стороны страницы) можно указать точные «координаты» нужного блока.

Пример кода:

.blok {
  position: absolute;
  top: 25px;
  left: 50px;
}

В этом примере блок с классом blok имеет отступ от верхнего края браузера (страницы) в 25px, а с левого края отступ в 50px. Если у родительского блока позиционирование отличное от static, тогда отсчет отступов ведется от краев этого родительского элемента. Например, если блок с классом blok вложен в другой блок (например, с position: relative;), у которого задан отступ сверху в 35px, тогда у blok будет общий отступ сверху 60px (35px + 25px).

 

 

Выбор прямых дочерних элементов

Довольно часто нужно указывать не только общие стили для всего блока, но и отдельные стили для прямых потомков (дочерних элементов, вложенных элементов). Для этого есть соответствующий трюк в CSS – достаточно использовать >, чтобы указать прямые дочерние элементы.

Пример кода:

.blok > a {
  font-size: 33px;
}

 

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

 

 

Выбор определенного дочернего элемента

Этот трюк тоже может вам пригодиться. Чтобы применить стиль определенному дочернему элементу, используйте селектор вида

:nth-child(порядковый номер дочернего элемента относительно своего родителя)

Пример кода:

.blok img:nth-child(2) {
  width: 50%;
  border: 1px solid #333;
}

 

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

 

 

Подгонка размеров изображения под размеры блока

Иногда нужно вместить картинку в блок, который имеет другие размеры. Например, в блок с шириной 250px вместить картинку размерами 500х500px. Если не указать стили для таких ситуаций, картинка будет «вылезать» за края блока, или наоборот, не заполнять полностью нужный блок (если блок шире за размеры картинки). Самый простой способ для этого – использовать динамическую ширину для отображения картинки.

Пример кода:

 

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

 

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

 

 

Псевдоэлемент :before

С помощью этого псевдоэлемента можно вставлять нужный контент перед содержимым определенного блока. Очень часто с помощью этого трюка веб-мастера вставляют некие мини-иконки перед нужными тегами. Например, чтобы стилизировать определенным образом маркированный список (ul). Для этого используется свойство content. Контентом может быть, например, определенный текст или картинка. Очень часто для этого используются также иконические шрифты (например, FontAwesome).

Пример кода для использования картинки в качестве контента:

 

.blok ul li:before {
  content: url(img/kartinka.jpg);
}

 

Пример кода для использования текста в качестве контента:

 

.blok ul:before {
  content: "Привет, мир!";
}

 

 

Псевдоэлемент :after

Подобным псевдоэлементу :before образом работает и псевдоэлемент :after. Отличие заключается в том, что контент при этом вставляется после нужного элемента.

 

 

Изменение элементов с помощью CSS-фильтров

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

Пример кода для обесцвечивания картинки:

 

.blok img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

 

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

 

Пример кода для возвращения цвета обесцвеченной картинке:

 

.blok img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

 

Параметры CSS-фильтров работают практически во всех современных браузерах (кроме Internet Explorer).

 

 

 

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