null

CSS – фишки, полезности и хитрости

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

Содержимое:

Выносим блоки CSS стилей в отдельные файлы

Точечное применение nth-child для ПОТОМКОВ

Бекграунд с изображением и оверлеем

Выносим блоки CSS стилей в отдельные файлы:

Начнем с начала, допустим у нас есть основной файл стилей темы style.css. По умолчанию он будет подключен чем-то наподобии:

Конечно мы можем все стили впихнуть сразу в один файл, но лучше разбить стили на основные группы и в файл style.css прописать импорт например

@import url(colors.css);
@import url(grid.css);
@import url(ContactForm7.css);

+ все остальные файлы стилей (.css).

Вы так же можете размещать свои файлы стией не в корне емы а в другом каталоге, тогда Вам нужно будет в @import указать следующее

@import url(root/variable.css);

B все будет в порядке, Вы сможете легко получить любую часть кода для редактирования.

Полезная статья по данной теме:
http://qaru.site/questions/78824/how-should-i-organize-the-contents-of-my-css-files

Точечное применение nth-child для ПОТОМКОВ:

На самом деле :nth-child() – это цикл.

Допустим если у нас есть 6

и нам необходимо скрыть все кроме первых двух потомков, тогда применяем:

Если имеется 10

потомков, и необходимо отобразить только 9тый и 10тый, то можно использовать:

В таком случае будет выбрано два последних элемента, то есть 9 и 10.

А вот при таком :nth-child(-n+4) выберется с 1 по 4 элементы.

Потомков можно комбинировать :nth-child(n+3):nth-child(-n+8) с 3 по 8.

Это все доступные комбинации с nth. То же самое делает :nth-last-child – только с конца

Подробне здесь:

http://htmlbook.ru/css/nth-child

Бекграунд с изображением и оверлеем

Готовые стили которые можно применять для Ваших решений. Благодаря данным стилям у Вас получится отобразить блок с фиксированным фоном и если пожелаете с градиентом цвета.

 

CSS – фишки, полезности и хитрости
5 (100%)
Всего проголосовало: 1