pense-bête de bruno sanchizAccueil > Programmation > Html Css Javascript... > css3 : éléments divers
css3 : éléments divers
Publié le 15 août 2023, dernière mise-à-jour le 20 septembre 2024, > 9 visites, >> visites totales.
les variables en css3
définitions
:root {
--largeur:100%;
--largeur_Un: 44%;
--largeur_Deux:calc( 100% - var(--largeur_Un) );
}
utilisation
width:var(--largeur);
background
- background met totues les propriétés sur une ligne
-
background-color : white , #FFFFFF , rgb(255,255,255) , rgba(255,255,255,1.0) , hsla(100, 100%, 100%, 1.0) - background-attachment
- background-attachment : scroll ;
- background-attachment : fixed ;
- background-attachment : local ;
- background-blend-mode : https://developer.mozilla.org/fr/docs/Web/CSS/blend-mode
- normal , multiply , screen , overlay , darken , lighten , color-dodge , color-burn , hard-light , soft-light , difference , exclusion , hue , saturation , color , luminosity
:target
si un élement s’appelle id=blach, le :target sapplique à lui si l’url est machin.html#blach
ex :
:target{display:block;} permet d’afficher le id=blach auparavant en none
https://developer.mozilla.org/fr/docs/Web/CSS/:target
bordures
.dotted {border-style: dotted; border-color: red;}
.dashed {border-style: dashed;border-width:3px;}
.solid {border-style: solid;border-width:15px; border-color: red green blue yellow;border-radius:13px;}
.double {border-style: double;}
.groove {border-style: groove;border-color: green black;}
.ridge {border-style: ridge;border-color: blue red black;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: dotted dashed solid double;}
<p class="dotted">dotted border. border-color: red;</p>
<p class="dashed">dashed border. border-width: 3px;</p>
<p class="solid">solid border. border-color: red green blue yellow; border-radius:13px;</p>
<p class="double">double border.</p>
<p class="groove">groove border. The effect depends on the border-color value. border-radius:normal border-color: green black;</p>
<p class="ridge">ridge border. The effect depends on the border-color value.border-radius:round border-color: blue red black</p>
<p class="inset">inset border. The effect depends on the border-color value. border-radius:rounder</p>
<p class="outset">outset border. The effect depends on the border-color value. border-radius:roundest</p>
<p class="none">none border.</p>
<p class="hidden">hidden border.</p>
<p class="mix">A dotted dashed solid double border.</p>
mysql - mariadb
PHP
python