La base de liens Scientil-css
Couleur :
Soumis (x41)
Vérifié (x6)
Référence
Nom
État
Référence
Nom
.b-0-5-s-gris {
border: 0.5px solid #bfbfbf;
}
border: 0.5px solid #bfbfbf;
}
État
🔴Soumis
Référence
Nom
.b-0-5-s-gris_td td {
border: 0.5px solid #bfbfbf;
}
border: 0.5px solid #bfbfbf;
}
| l1-c1 | l1-c2 | l1-c3 |
|---|---|---|
| l2-c1 | l2-c2 | l2-c3 |
| l3-c1 | l3-c2 | l3-c3 |
État
🔴Soumis
Référence
Nom
.b-0-5-s-gris_th th {
border: 0.5px solid #bfbfbf;
}
border: 0.5px solid #bfbfbf;
}
| l1-c1 | l1-c2 | l1-c3 |
|---|---|---|
| l2-c1 | l2-c2 | l2-c3 |
| l3-c1 | l3-c2 | l3-c3 |
État
🔴Soumis
Référence
Nom
.b-c-gris {
border-color: #bfbfbf;
}
border-color: #bfbfbf;
}
Exemple :
État
🔴Soumis
Référence
Nom
.b-w-0-5-px {
border-width: 0.5px;
}
border-width: 0.5px;
}
Exemple :
État
🔴Soumis
Référence
Nom
.d-f {
display: flex;
}
display: flex;
}
Exemple :
État
🔴Soumis
Référence
Nom
.d-i-b {
display: inline-block;
}
display: inline-block;
}
Exemple :
État
🔴Soumis
Référence
Nom
à utiliser avec d-f
Exemple : pour définir une « flexbox » avec des éléments disposés verticalement
Exemple :
.d-f {
display: flex;
}
display: flex;
}
Exemple : pour définir une « flexbox » avec des éléments disposés verticalement
.f-d-c {
flex-direction: column;
}
flex-direction: column;
}
Exemple :
État
🔴Soumis
Référence
Nom
.f-l {
float: left;
}
Exemple :float: left;
}
Span en float left
État
🔴Soumis
Référence
Nom
.f-r {
float: right;
}
Exemple :float: right;
}
Span en float right
État
🔴Soumis
Référence
Nom
.f-s-i {
font-style: italic;
}
Exemple :font-style: italic;
}
Blockquote en italique
État
🔴Soumis
Référence
Nom
.g-h-16 {
max-height: 1rem;
}
max-height: 1rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-h-32 {
max-height: 2rem;
}
max-height: 2rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-h-48 {
max-height: 3rem;
}
max-height: 3rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-w-16 {
max-width: 1rem;
}
max-width: 1rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-w-32 {
max-width: 2rem;
}
max-width: 2rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-w-48 {
max-width: 3rem;
}
max-width: 3rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-w-256 {
max-width: 16rem;
}
max-width: 16rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.g-w-512 {
max-width: 32rem;
}
max-width: 32rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.h-16 {
height: 1rem;
}
height: 1rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.h-32 {
height: 2rem;
}
height: 2rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.h-48 {
height: 3rem;
}
height: 3rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.h-128 {
height: 8rem;
}
height: 8rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.h-1-1 {
height: 100%;
}
height: 100%;
}
Exemple :
État
🔴Soumis
Référence
Nom
.j-c-c {
justify-content: center;
}
justify-content: center;
}
Alignement horizontal avec display flex d-f
.d-f {
display: flex;
}
display: flex;
}
Exemple :
Exemple :
<div class="b-s-p d-f j-c-c">Texte au milieu en horizontal</div>
Texte au milieu en horizontal
État
🔴Soumis
Référence
Nom
.l-w-192 {
min-width: 12rem;
}
min-width: 12rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.o-f-x-a {
overflow-x: auto;
}
overflow-x: auto;
}
État
🔴Soumis
Référence
Nom
.o-f-y-h {
overflow-y: hidden;
}
overflow-y: hidden;
}
État
🔴Soumis
Référence
Nom
.p-8 {
padding: 0.5rem;
}
padding: 0.5rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.p-10 {
padding: 0.625rem;
}
padding: 0.625rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.p-20 {
padding: 1.25rem;
}
padding: 1.25rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.p-32 {
padding: 2rem;
}
padding: 2rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.t-a-c {
text-align: center;
}
text-align: center;
}
Exemple avec la classe b-s-p
.b-s-p {
border-style: dotted;
}
border-style: dotted;
}
Exemple :
<span class="b-s-p">Span en bordure dotted</span>
Span en bordure dotted :<div class="t-a-c b-s-p">Div avec text align center</div>
Div avec text align center
État
🔴Soumis
Référence
Nom
.t-a-l {
text-align: left;
}
text-align: left;
}
Exemple avec la classe b-s-p
.b-s-p {
border-style: dotted;
}
border-style: dotted;
}
Exemple :
<span class="b-s-p">Span en bordure dotted</span>
Span en bordure dotted :<div class="t-a-l b-s-p">Div avec text align left</div>
Div avec text align left
État
🔴Soumis
Référence
Nom
.t-a-r {
text-align: right;
}
text-align: right;
}
Exemple avec la classe b-s-p
.b-s-p {
border-style: dotted;
}
border-style: dotted;
}
Exemple :
<span class="b-s-p">Span en bordure dotted</span>
Span en bordure dotted :<div class="t-a-r b-s-p">Div avec text align right</div>
Div avec text align right
État
🔴Soumis
Référence
Nom
.t-d-t-1-px {
text-decoration-thickness: 1px;
}
text-decoration-thickness: 1px;
}
Exemple avec o-f-x-a
.o-f-x-a {
overflow-x: auto;
}
o-f-y-hoverflow-x: auto;
}
.o-f-y-h {
overflow-y: hidden;
}
(pour éviter le sous-lignage trop épais de Chromium et dérivés) :overflow-y: hidden;
}
<a href="https://emo.bzh#Hf-emo" class="t-d-t-1-px"><div style="font-size:4em;" class="o-f-x-a o-f-y-h">ℍ</div></a>
ℍ
État
🔴Soumis
Référence
Nom
.t-l-f {
table-layout:fixed;
}
table-layout:fixed;
}
Exemple avec la classe w-1-1
.w-1-1 {
width: 100%;
}
width: 100%;
}
Exemple : pour éviter le débordement d’un tableau (par défaut table-layout=auto provoque un débordement) :
<table class="t-l-f w-1-1"><tr><td><div class="cllcode">__________Cellule de tableau avec longue ligne de code__________________________________________________</div></td></tr></table>
__________Cellule de tableau avec longue ligne de code__________________________________________________ |
État
🔴Soumis
Référence
Nom
.w-16 {
width: 1rem;
}
width: 1rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.w-32 {
width: 2rem;
}
width: 2rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.w-48 {
width: 3rem;
}
width: 3rem;
}
Exemple :
État
🔴Soumis
Référence
Nom
.w-1-1 {
width: 100%;
}
width: 100%;
}
Exemple :
État
🔴Soumis
Référence
Nom
.a-i-c {
align-items: center;
}
align-items: center;
}
Alignement vertical avec display flex d-f
.d-f {
display: flex;
}
display: flex;
}
Exemple : (et flex direction row [f-d-r] ⚠️)
Exemple :
<div class="h-128 b-s-p d-f a-i-c">Texte au milieu en vertical</div>
Texte au milieu en vertical
État
🟣Vérifié
Référence
Nom
.b-c-q {
border-color: #FFC000;
}
border-color: #FFC000;
}
Exemple avec la classe b-s-s
.b-s-s {
border-style: solid;
}
border-style: solid;
}
Exemple :
<span class="b-s-s">Span en bordure solid</span>
Span en bordure solid :<span class="b-c-q b-s-s">Span en bordure Carotte</span>
Span en bordure CarotteÉtat
🟣Vérifié
Référence
Nom
.b-g-c-q {
background-color: #FFC000;
}
background-color: #FFC000;
}
Exemple :
<span class="b-g-c-q">Span en fond Carotte</span>
Span en fond CarotteÉtat
🟣Vérifié
Référence
Nom
.b-s-p {
border-style: dotted;
}
border-style: dotted;
}
Exemple :
<span class="b-s-p">Span en bordure dotted</span>
Span en bordure dottedÉtat
🟣Vérifié
Référence
Nom
.b-s-s {
border-style: solid;
}
border-style: solid;
}
Exemple :
<span class="b-s-s">Span en bordure solid</span>
Span en bordure solidÉtat
🟣Vérifié
Référence
Nom
.v-a-m {
vertical-align: middle;
}
vertical-align: middle;
}
Exemple avec les classes d-i-b
.d-i-b {
display: inline-block;
}
display: inline-block;
}
Exemple :, w-48
.w-48 {
width: 3rem;
}
width: 3rem;
}
Exemple :, h-48
.h-48 {
height: 3rem;
}
height: 3rem;
}
Exemple : et b-g-c-q
.b-g-c-q {
background-color: #FFC000;
}
background-color: #FFC000;
}
Exemple :
<span class="b-g-c-q">Span en fond Carotte</span>
Span en fond Carotte :Alignement vertical d'un div <div class="d-i-b v-a-m w-48 h-48 b-g-c-q"></div> par rapport à une ligne de texte.
Alignement vertical d'un div par rapport à une ligne de texte.⚠️ Lorsque l'on désactive d-i-b dans l'inspecteur HTML de Mozilla Firefox
vertical-align n’a aucun effet sur cet élément, car il ne s’agit ni d’un élément « inline » ni d’un élément « table-cell ».
Essayez d’ajouter display:inline ou display:table-cell. En savoir plus
⚠️ ne permet pas de centrer en vertical dans un conteneur (pour cela voir d-f
.d-f {
display: flex;
}
display: flex;
}
Exemple : et a-i-c
.a-i-c {
align-items: center;
}
align-items: center;
}
Alignement vertical avec display flex d-f (et flex direction row [f-d-r] ⚠️)
Exemple :
<div class="h-128 b-s-p d-f a-i-c">Texte au milieu en vertical</div>
Texte au milieu en vertical
)État
🟣Vérifié