null

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

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

Содержимое:

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

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

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

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

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

<link rel="stylesheet" href="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

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

nav#site-navigation ul#primary_top_center > li:nth-child(n+3) {
    display:none;
}

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

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

:nth-child(n+9)

В таком случае будет выбрано два последних элемента, то есть 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

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

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

footer#footer {
   background: linear-gradient(0deg,rgba(0, 0, 0, 0.53),rgba(0, 0, 0, 0.53)),url(/wp-content/uploads/2018/01/background-2.jpg);
   background-position: center center;
   background-size: auto;
   background-repeat: repeat;
   background-color: #906b39;
   /* background-size: cover; */
   background-attachment: fixed;
}