Css

De Design numérique
Révision datée du 6 juin 2025 à 20:34 par Sablebleble (discussion | contributions) (Page créée avec « CSS (Cascading Style Sheets) est un language de programmation, et oui ! CSS peut effectuer des calculs voir calc() et clamp()), CSS a des variables, CSS a des if, des elif... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à : navigation, rechercher

CSS (Cascading Style Sheets) est un language de programmation, et oui ! CSS peut effectuer des calculs voir calc() et clamp()), CSS a des variables, CSS a des if, des elif.
CSS a des portes logiques :

<code>  /* === AND === */
  #and-a:checked ~ #and-b:checked ~ .and-output {
    background: green;
  }

  /* === OR === */
  #or-a:checked ~ .or-output,
  #or-b:checked ~ .or-output {
    background: green;
  }

  /* === NOT A === */
  #not-a:not(:checked) ~ .not-output {
    background: green;
  }

  /* === NAND === = NOT(AND) */
  #nand-a:checked ~ #nand-b:checked ~ .nand-output {
    background: gray;
  }
  #nand-output {
    background: green;
  }
  #nand-a:checked ~ #nand-b:checked ~ #nand-output {
    background: red;
  }

  /* === NOR === = NOT(OR) */
  #nor-output {
    background: red;
  }
  #nor-a:not(:checked) ~ #nor-b:not(:checked) ~ #nor-output {
    background: green;
  }

  /* === XOR === = A != B */
#xor-output {
  background: gray;
  width: 40px;
  height: 40px;
  display: inline-block;
  margin-left: 10px;
}

#xor-a:checked:not(:disabled) ~ #xor-b:not(:checked) ~ #xor-output {
  background: green;
}

#xor-a:not(:checked) ~ #xor-b:checked ~ #xor-output {
  background: green;
}


  /* === XNOR === = NOT(XOR) = A == B */
  #xnor-output {
    background: gray;
  }
  #xnor-a:checked ~ #xnor-b:checked ~ #xnor-output,
  #xnor-a:not(:checked) ~ #xnor-b:not(:checked) ~ #xnor-output {
    background: green;
  }</code>


Eh ouais c'est un peu la classe quand même faut l'avouer, prends ça Julien