Оператор CSS If
Каскадная таблица стилей состоит из кода, который используется для добавления стиля в код HTML. Он содержит несколько свойств и эффектов для содержимого HTML, чтобы отображение выглядело эстетично. HTML и CSS работают вместе для создания внешнего интерфейса веб-страницы. Эффекты, которые вводит CSS, — это цвет шрифта, размер, выравнивание, эффект наведения и т. д. В этом руководстве будут рассмотрены некоторые логические части обсуждения HTML и CSS.
CSS состоит из трех типов. Здесь внутренний CSS используется для выполнения всех примененных эффектов. Для обработки CSS нам нужен внутренний и внешний CSS.
Оператор if-else
Оператор if или if-else — это логический код, предоставляемый любому языку программирования. Этот код используется в тот момент, когда мы хотим применить какое-либо одно условие из двух или более вариантов. Этот оператор также известен как условный оператор. Это явление работает таким образом, что когда условие, применяемое программой, истинно, выполняется определенный фрагмент кода.
В противном случае они переходят на следующую строку либо в часть «else», либо в часть «if-else». К ним применяется логика, если условие выполнено, и она решает, перейти ли к следующей части else или выйти за пределы тела «если».
Оператор if
Мы не можем использовать оператор if в CSS, поскольку CSS не поддерживает логику. Но в качестве альтернативы этому утверждению «если» используются другие методологии. Оператор «if» в CSS работает так же, как простое объявление класса во внутреннем или внешнем CSS. Имена классов упоминаются только тогда, когда нам нужно применить все эффекты, упомянутые в классе. Мы будем использовать эту концепцию в различных примерах нашего кода.
Синтаксис оператора CSS If:
if(line1){
свойство: эффект;
}else{
Свойство1: эффект;
}
Синтаксис содержит оператор, в котором предоставляется условие, относящееся к элементам. В CSS, поскольку нет концепции прямого использования CSS, мы используем классы и объявляем их внутри HTML-тегов и добавляем CSS к этим классам.
Пример 1. Стиль оператора if в коде CSS
Этот пример представляет собой простой способ использования стиля оператора if в коде CSS. Во-первых, рассмотрим теги HTML body. Мы используем базовую единицу содержимого HTML для отображения этой концепции в виде веб-страницы, то есть текста. Заголовок применяется первым. Этому заголовку присваивается встроенное свойство CSS, стиль которого добавляется к тегу со свойством цвета шрифта.
Затем мы используем простой заголовок. Мы используем тег span, чтобы добавить два абзаца на веб-страницу. Оба этих интервала сопровождаются именами классов в качестве объявления класса CSS внутреннего свойства CSS.
Привет! Я первая строка
После этого закрываем тело. Теперь мы увидим, как классы CSS объявляются как концепция оператора «if-else».
Как мы упоминали ранее, объявление класса CSS каким-то образом работает с тем же оператором if-else.
Теперь посмотрите на объявление класса «color-line1» и «color-line2» внутри тега стиля.
<стиль>
.color-line1 {
Цвет: фиолетовый; }
Первое условие применяется как фиолетовый цвет к строке 1. Для линии 2 применяется оранжевый цвет. Какой бы ни была последовательность объявления класса CSS, но согласно строкам, эффект применяется к тегам HTML соответственно.
После этого сохраните код с расширением html. Это расширение позволяет им выполняться в браузере на веб-странице.
После выполнения страницы вы увидите, что веб-страница создана с заголовком, который был объявлен с помощью встроенного CSS. Затем все три содержимого, заголовок и диапазон объявляются в соответствии с тегами HTML, содержащими имя класса внутри них.
Пример 2. Оператор If-else через SAAS
Таблица стилей Syntactically Awesome — это тип CSS, который дает истинное утверждение, содержащее условия, которые они применяют в стиле, который преобразует синтаксис CSS в синтаксис CSS W3C.
Это также помогает быстрее создать таблицу стилей по сравнению с ручным CSS.
Основная концепция использования этого подхода заключается в том, что используются три разных файла с разными расширениями. Сначала мы создаем файл «.scss», а затем код, стоящий за ним, преобразуется в расширение «.css». Затем мы можем легко увидеть изменения из-за этого действия.
Сначала рассмотрим основной HTML-код. Здесь создается div с именем класса «контейнер». Простой заголовок и абзац объявляются внутри тела div.
Код тела HTML:
Теперь рассмотрим код, присутствующий в файле SASS, который был сохранен с расширением «.scss».
Синтаксис показывает, что тег абзаца является целевым. Все варианты абзаца пишутся с «2» в начале.
Согласно SAAS количество опций отображается перед содержимым HTML. Условие, которое имеет какой-либо смысл или может быть истинным.
Затем свойство, написанное внутри этого условия, применяется к содержимому HTML. Первый вариант выглядит следующим образом:
@if 2+ 2 == 4 {
Граница: сплошная 2 пикселя;
}
Утверждается, что если сложить два числа, чтобы получить результирующее значение, и оно равно true, к абзацу применяется граница. Это условие кажется верным, так как обе «2» объединяются, чтобы сформировать 4.
@if 4 < 2 {
Граница: 1px пунктирная;
}
Другое условие показывает, что если первое значение меньше второго, к абзацу применяется граница заданного размера. Это условие неверно, поэтому не применяется. Переходим к следующему условию.
@if null {
border: 2px double;
}
Это условие не содержит значения. Если условие равно NULL, применяется тип границы, который в два раза превышает указанный размер. Вы также можете применить любое свойство CSS, кроме свойства границы. Номер условия также можно изменить.
Теперь мы просто преобразуем этот код в код CSS, он содержит следующий код.
Среди всех условий первое было истинным, поэтому оно выбирается и применяется к абзацу HTML.
Применяется сплошная граница 2px. Когда мы выполняем код, мы получаем веб-страницу. Взгляните на небольшой фрагмент, прикрепленный здесь:
Вы можете видеть, что граница применяется к абзацу в соответствии с истинным условием.
Заключение
В этой статье мы попытались объяснить концепцию работы над оператором «если» в HTML и CSS. Как мы выяснили в предыдущем обсуждении, не существует стандартного синтаксиса или какого-либо подхода для использования оператора if непосредственно в тегах CSS. Но мы используем его соответственно, как SAAS. SAAS содержит свойства в соответствии с условиями. Если логика, указанная в условии, выполняется, то указанное свойство применяется к содержимому HTML соответственно. Во-первых, мы кратко рассказали об операторе if в CSS. Затем на двух примерах объясняется работа этой концепции.
Комбинаторы — Семинар по компоновке CSS
- Назад к списку курсов: Основы CSS
Добавление класса или идентификатора — не единственный способ изменить стиль некоторых частей документа. Наши более сложные селекторы позволяют выбирать элементы в зависимости от того, где они находятся в документе. Первый набор селекторов, на который мы можем обратить внимание, — это комбинаторы. Есть четыре разных комбинатора, и они работают, комбинируя другие селекторы.
Семинар по компоновке CSS: Комбинаторы
Селектор потомков
Выберите все элементы, являющиеся потомками указанного родителя.
Когда вы используете селектор потомков, вы можете указать родительский селектор, а затем элемент, который вы хотите стилизовать. Итак, если у меня есть такая разметка:
Содержимое здесь <дел>Содержимое внутри класса box.
Если бы я выбрал элемент p с помощью селектора элементов, который стилизовал бы оба абзаца — один внутри div с классом box, а другой снаружи. Чтобы оформить только p внутри .box, я использую селектор потомков.
.box p { } Здесь .box — указанный родитель, а p — селектор внутри этого родителя, к которому мы собираемся применить стили CSS.
В списке может быть более одного потомка. Например, выбор только тех элементов li, которые являются дочерними элементами элемента ul внутри родителя с классом box.
.box ul li { } Приведенный выше селектор не выбрал бы элемент li , если бы он находился внутри ol . С длинными цепочками селекторов вы снова можете попасть в ловушку создания CSS, который очень сложно использовать повторно. Если ваши селекторы содержат более трех элементов, это часто указывает на то, что существует лучший способ структурировать ваш CSS.
Селектор дочерних элементов
Выбрать все элементы, которые являются непосредственными дочерними элементами указанного родителя
Селектор дочерних элементов будет нацелен на всех дочерних элементов, даже если между родительским и дочерним элементами есть другие элементы.
Например, если мы возьмем следующую разметку:
- Первый элемент
- Элемент 2 <ул>
- Элемент 2а
- Элемент 2b
Если бы мы использовали селектор потомков:
.items li { } Это выберет все li элементов, вложенные в первый ul и те, что внутри ul, вложенные в li для второго элемента. Если вместо этого мы используем дочерний селектор:
.items > li { } Это выберет только элементов li , которые являются прямыми дочерними элементами .items . Если между ними есть другой элемент, то li не будет выбран. Примером того, где вы можете использовать эту технику, является удаление маркеров списка из внешнего списка, но сохранение их для вложенных списков.
.items > li {
стиль списка: нет;
} Смежный родственный элемент
Выбрать элементы, являющиеся соседними одноуровневыми элементами элемента
Селектор соседнего родственного элемента является полезным селектором, который позволяет выбирать элемент, когда он находится рядом с другим элементом.
Вот как мы можем работать с такими вещами, как сложенные заголовки в CSS.
Обычный запрос состоит в том, чтобы сделать абзац, который идет сразу после заголовка, каким-то образом другим, чтобы он выделялся. Этого можно добиться с помощью соседнего брата и сестры, следующий селектор выбирает элемент p только тогда, когда он идет после h3.
h3 + p { } Конечно, вы можете их комбинировать. Если вы хотите, чтобы это происходило только для контента внутри оболочки с классом .box , вы можете комбинировать селектор потомков с соседним братом.
.box h3 + p { } Приведенный выше селектор выберет только элемент p, который следует за элементом h3, где оба находятся внутри чего-то с классом .box.
General Sibling
Выберите элементы, которые являются родственными элементами элемента
Общий селектор родственных элементов работает аналогично соседнему родственному элементу, но выбирает все одноуровневые элементы, идущие после указанного элемента, даже если они не являются смежными друг с другом.