Здравствуйте друзья, в данной записи я собираю разного рода хитрости которые можно применять при верстке сайта то есть при работе с 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тый, то можно использовать:
: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;
}
Источник записи: https://mediadoma.com