«
»
CSSWEBWordPress - CSSWordPress - HTML

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; }

Источник записи: https://mediadoma.com

Связанные записи
Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

WEBПолезные сайты

50 бесплатных сайтов для ваших проектов графического дизайна в 2020 году | Бесплатные Графика, Фото и Видео стоки, Шрифты, Макеты и не только

JoomlaWEBWordPressПлагиныПолезные сайты

Обзор уникального конструктора страниц Nicepage 2020 (WordPress, Joomla, HTML и не только)

CSSWEBПримеры

Мистический inline-flex и что он делает - Stas Bagretsov - Medium