0_intro

public/style_basics.css

@@ -0,0 +1,170 @@
+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;
+}