170 lines
3.1 KiB
CSS
170 lines
3.1 KiB
CSS
p {
|
|
color: darkcyan;
|
|
}
|
|
#italgras :is(i,strong) {
|
|
color: orangered;
|
|
}
|
|
.pas_important {
|
|
font-weight: normal;
|
|
color: red;
|
|
}
|
|
|
|
.important {
|
|
font-weight: bolder;
|
|
color: red;
|
|
}
|
|
.pas_important {
|
|
font-weight: normal;
|
|
color: #000;
|
|
}
|
|
#important_wrapper {
|
|
margin-left: 10px;
|
|
border-left: 3px solid red;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
|
|
/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
|
|
#test_margin_padding {
|
|
padding: 30px; /* PADDING */
|
|
margin: 30px; /* MARGIN */
|
|
border: 1px solid;
|
|
background-color: #e3dcff;
|
|
border: 3px solid red;
|
|
}
|
|
/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding */
|
|
#test_wrapper {
|
|
border: 1px solid gainsboro;
|
|
background: #fdffdf; /* jaune */
|
|
padding: 10px;
|
|
}
|
|
/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
|
|
#inner_content {
|
|
background-color: #cff0fb;
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
|
|
#mousehover_movemargin_element {
|
|
height: 130px;
|
|
width: 130px;
|
|
background: red;
|
|
color: #FFF;
|
|
padding: 20px;
|
|
text-align: center;
|
|
display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
|
|
}
|
|
#mousehover_movemargin:hover > #mousehover_movemargin_element {
|
|
margin-left: calc(100% - 130px - 50px);
|
|
background:yellow;
|
|
transition: all 1s;
|
|
}
|
|
|
|
|
|
#test_wrapper:before {
|
|
content: "margin";
|
|
margin: 0px;
|
|
font-size: 10px;
|
|
position: absolute;
|
|
margin-top: -5px;
|
|
}
|
|
#test_margin_padding:before {
|
|
content: "padding";
|
|
margin: 0px;
|
|
font-size: 10px;
|
|
position: absolute;
|
|
margin-top: -25px;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ID */
|
|
#text_principal {
|
|
font-family: sans-serif;
|
|
line-height: 0.4em;
|
|
}
|
|
/* CLASSE */
|
|
.para {
|
|
background-color: yellowgreen;
|
|
}
|
|
/* CLASSE, autres instructions */
|
|
.fond_bleu {
|
|
background-color: blue;
|
|
color: #FFF;
|
|
}
|
|
/* CLASSE/ID plusieures cibles en même temps */
|
|
.para, #sad {
|
|
font-weight: bold;
|
|
}
|
|
/* PSEUDO CLASSE :last-child */
|
|
p:last-child .para {
|
|
background-color: orangered;
|
|
}
|
|
|
|
|
|
|
|
|
|
#margin_first,
|
|
#margin_seconde,
|
|
#margin_last {
|
|
display: inline-block;
|
|
border: 1px solid;
|
|
}
|
|
.margin_left {
|
|
margin-left: 100px
|
|
}
|
|
.margin_right {
|
|
margin-right: 100px
|
|
}
|
|
.large {
|
|
width:500px;
|
|
}
|
|
.petite {
|
|
width:200px;
|
|
}
|
|
|
|
|
|
#top_margin_block {
|
|
width: 100%
|
|
}
|
|
#margin_exemples_wrapper {
|
|
background: greenyellow;
|
|
border: 1px solid #000;
|
|
display: block;
|
|
clear: both;
|
|
float: left;
|
|
width: 100%;
|
|
margin-bottom: 4rem;
|
|
}
|
|
.margin_exemples {
|
|
display: inline;
|
|
border: 1px solid #000;
|
|
background: chartreuse;
|
|
padding: 5px 5px 0 5px; /* EXEMPLE Padding */
|
|
height: 100px; width: 100px;
|
|
float: left;
|
|
}
|
|
.margin_exemples.margin_autour {
|
|
margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
|
|
height: auto; width: auto;
|
|
min-height: 100px;
|
|
background: lavender
|
|
}
|
|
|
|
.border {
|
|
border:1px solid #000;
|
|
}
|
|
.cascade {
|
|
margin-left: 10px;
|
|
background: #FFF;
|
|
text-align: center;
|
|
}
|
|
.cascade:hover {
|
|
background: fuchsia;
|
|
}
|
|
#enfant p {
|
|
text-transform: uppercase;
|
|
} |