18:54 Что такое CSS селектор по своему содержимому | |
 | |
| Каскадные таблицы стилей - это общепринятый способ создания дизайна для добавления визуальных стилей на сайт. С помощью CSS вы можете контролировать макет страницы, цвета, типографии, фоновое изображение и многое другое. В принципе, если это визуальный стиль, то CSS - это способ принести эти стили на ваш сайт. Когда вы добавляете стили CSS в документ, вы можете заметить, что документ начинает становиться все длиннее и длиннее. Даже небольшой сайт с несколькими страницами может содержать большой CSS файл, а очень большой сайт с большим количеством страниц уникального контента может иметь очень большие файлы CSS. Это усугубляется отзывчивыми сайтами, в которых есть много запросов, включенных в таблицы стилей, чтобы изменить внешний вид визуальных изображений и страницу для разных экранов. Да, файлы CSS могут затянуться. Это не является серьезной проблемой, когда дело доходит до производительности сайта и скорости загрузки , потому что даже длинный файл CSS, вероятно, будет довольно небольшим (так как это действительно просто текстовый документ). Тем не менее каждый маленький бит подсчитывается, когда дело доходит до скорости страницы поэтому если вы можете сделать свою таблицу стилей более компактной, это хорошая идея. Здесь «запятая» может оказаться очень удобной в вашей таблице стилей. Запятые и CSS Возможно, вы задавались вопросом, какую роль играет запятая в синтаксисе селектора CSS. Как и в предложениях, запятая приносит четкость, а не код, в разделители. Запятая в селекторе CSS разделяет несколько селекторов в пределах одних и тех же стилей. Например, давайте посмотрим на некоторые CSS ниже. th { color: red; } td { color: red; } p.red { color: red; } div#firstred { color: red; } Это абсолютно приемлемый CSS, но есть два существенных недостатка в написании этого способа: - В будущем, если вы решите изменить цвет шрифта этих свойств на синий, вы должны сделать это изменение четыре раза в своей таблице стилей. - Он добавляет много лишних символов в таблицу стилей, которая вам не нужна. Эти 4 стиля могут показаться излишними, но если вы продолжите делать это во всей таблице стилей, строки будут складываться, и этот лист будет намного больше, чем нужно. Чтобы избежать этих недостатков и упорядочить ваш файл CSS, мы попытаемся использовать запятые. Использование запятых для разделения селекторов Вместо того, чтобы писать 4 отдельных селектора CSS и 4 правила, вы можете объединить все эти стили в одно свойство правила, разделив отдельные селекторы запятой. Вот как это будет сделано: th, td, p.red, div#firstred { color: red; } Символ запятой в основном действует как слово «и» внутри селектора. Таким образом, это относится к тегам t h и тегам td. И абзацам абзаца с красным классом И тегом div с идентификатором. Это именно то, что у нас было раньше, но вместо 4 правил CSS у нас есть одно правило с несколькими селекторами. Это то, что делает запятая в селекторе, это позволяет нам иметь несколько селекторов в одном правиле. Этот подход не только делает более компактные, более чистые CSS файлы, но и облегчает будущие обновления. Теперь, если вы хотите изменить цвет с красного на синий, вам нужно внести изменения только в одном месте, а не в исходные 4 правила стиля, которые у нас были! Подумайте об экономии времени во всем файле CSS, и вы увидите, как это сэкономит вам время Изменение синтаксиса Некоторые люди предпочитают сделать CSS более понятным, разделив каждый селектор на своей строке, вместо того, чтобы писать все на одной строке, как указано выше. Вот как это было бы сделано: th, td, p.red, div#firstred { color: red; } Обратите внимание, что после каждого селектора вы поместите запятую, а затем используйте «enter», чтобы разбить следующий селектор на свою собственную линию. Вы не добавляете запятую после окончательного выбора. | |
|
| |
| Всего комментариев: 0 | |