Le CSS (feuille de style) du site WEB
de toutes les pages de ce site
Vous êtes dans le Cours 1002 CSS (en cours de rédaction)
Retour
body { background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:24px;margin:0;border:0;text-align: center;}
H1 {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#222224;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#222224;}
* {box-sizing: border-box;}
.wrapper > div {
border: 2px solid #ffffff;
background-color: #ffffff;
padding: 10px;
color: #000000;
}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"bandeau"
"ToutMenu"
"content"
"footer";
min-height: 100vh;
}
.bandeau {
grid-area: bandeau;
text-align:center;
}
.ToutMenu {
grid-area: ToutMenu;
text-align:center;
}
.content {
grid-area: content;
text-align:left;
}
.footer {
grid-area: footer;
text-align:center;
}
/* ____________doctype_________________ */
div.Limage_de_droite{position:fixed;top:300px;right:0;z-index:10;overflow:hidden;display:block;}
div.home{position:fixed;top:4px;left:4px;overflow:hidden;z-index:30;}
div.scrollUpB {position: fixed;top : 10px;right: 60px;z-index:60;}
div.scrollUpH {position: fixed;bottom : 10px;right: 60px;z-index:60;}
div.user-info { position :fixed; top :70px; left :4px; overflow :hidden; z-index :80; }
div#pour-user {display: none;z-index :80;}
/* ____________menu_________________ */
.LeLabel,
.LaCheckBox { display: none; }
.menu { display: block;flex-wrap: wrap;margin: 0;padding: 0; }
.menu { max-width:1400px;margin:0 auto;display:flex; justify-content:center;}
a.lemenuA { padding:5px 10px;margin:15px 5px 5px 0px;color:#aa2222; text-decoration:none; font-size:24px;border:solid 1px #aa2222; border-radius:30px;}
a.lemenu { padding:5px 10px;margin:15px 5px 5px 0px;color:#555555; text-decoration:none; font-size:24px;border:solid 1px #000000; border-radius:30px;}
a.lemenu:link {}
a.lemenu:hover {color:#FF2222;}
/* ___________________________________________________________________________ */
img.mescarres{width:250px;border:0px;}
div.mescarres{width:270px;border:1px solid #000000;text-align:center;padding:1px;display:inline-flex; height: 200px; margin:1px;}
div.centre4blanc{height:auto;width:auto;max-width:1100px;margin:auto;text-align:center;}
div.txtleft { text-align:justify;}
div.PetitBloque {height :auto;width :auto; max-width :900px; margin :auto; text-align :center;border: 2px solid #000000; border-radius : 20px;}
label,
textarea {letter-spacing: 1px;}
/* ____________ blog tchat livre-or login phototheque ______________ */
div.LesReponses { height:auto;width:auto;max-width:1000px;margin:auto;text-align:center;}
div.LeRetourL { width:auto;max-width:1000px;margin:auto;text-align:center;}
div.blog {height :auto;width :auto; max-width :700px; margin :auto; text-align :center;border: 2px solid #ffffff; border-radius : 20px;}
textarea.blog {background-color:#f2f2f2;border:#557bee solid 1px;padding:4px;width:400px;height:240px;border-radius:10px;}
figure.blog {display: flex;border: 1px solid #000000;border-radius: 20px;padding:5px;margin:auto;width:80%;align-items: center;}
img.blog {width:80px;width:80px;border-radius:50%; line-height:3em;}
p.blog {text-align:justify;margin:0.5em 0;}
figcaption.blog {padding:0;padding-left:2em;}
h2.blog { margin:0;}
figure.blogREP {display: flex;border: 1px solid #FF2222;border-radius: 20px;padding:5px;margin:auto;width:80%;align-items: center;}
img.blogREP {width:80px;width:80px;border-radius:50%; line-height:3em;}
p.blogREP {text-align:justify;margin:0.5em 0;}
figcaption.blogREP {padding:0;padding-left:2em;}
/* ____________________recherche______________________________ */
img.lesliens2{float:left;margin:10px;vertical-align:middle;}
/* _________________________divers_______________________________________________ */
figure.blogTOPO {display: flex;border: 1px solid #000000;border-radius: 20px;padding: 5px; margin: 2em auto;align-items: center;}
figcaption.blogTOPO {margin: auto;}
.blogTOPO p {text-align: center;margin: 0 auto;color: #0094db;}
img.blogTOPO {width: 130px;height: 130px;}
b.b-bleu,
a.b-bleu {color:#0094db;}
a.b-bleu:hover { color :#B62C0E; }
p.txtjust { text-align:justify;}
span.bordbrun {color:#882222;}
div.choix {width:auto;max-width:400px;padding: 30px;margin:auto;font-family: "Times New Roman", Times, serif;border: 2px solid #000000;border-radius: 20px;text-align:left;}
div.choix2 {width:auto;max-width:600px;padding: 30px;margin:auto;font-family: "Times New Roman", Times, serif;text-align:left;}
input[type=checkbox] { padding: 10px; width: 20px;height: 20px;border-radius: 10px;background: green;}
input.LeSubmit {width: 150px;padding: 10px;}
button.boutonVert {width:20px;height:20px;background:#cc0000;border-radius:50%;border:none;cursor:pointer;}
/* ____________le bas footer_________ */
a.LesAcoryght{font-family:"Times New Roman", Times, serif;color:#111113;text-decoration:none;}
a.LesAcoryght:hover{color:#B62C0E;}
/* ____________les pages____________ */
a.LesA3 {font-family :"Times New Roman", Times, serif;color :#333333; text-decoration :none; }
a.LesA3:hover { color :#B62C0E; }
img.img-circle { border-radius: 50%;width:60px;height:60px; }
img.img-home { width:60px;height:60px; }
/* __________________les div fixes _________________________________ */
div.Limage { position :fixed; top :170px; right :0; z-index :-12; overflow :hidden; }
div.home { position :fixed; top :0px; left :4px; overflow :hidden; z-index :50; }
div.respons-logo { position :fixed; top :4px; right :4px; overflow :hidden; z-index :50;display:none; }
div.centre2menu { top:0px;height :auto;width :auto; max-width :1200px; margin :auto; text-align :center;display:block; }
div.Connecter1 {height:auto;width:auto;max-width:400px;margin:auto;text-align:center;z-index :160;}
div.tchatxx {height :auto;width :auto; max-width :800px; margin :auto; text-align :center;border: 2px solid #000000; border-radius : 20px;}
img.bande2{width:100%;max-width:1000px;display: Flex;margin-left:auto;margin-right: auto; }
a.LesAcoryght{font-family:"Times New Roman", Times, serif;color:#111113;text-decoration:none;}
a.LesAcoryght:hover{color:#B62C0E;}
/* __________________________________________________ */
div.centre01 { width :auto; margin :auto; text-align :center; }
div.blogsaisie{height:auto;width:auto;max-width:600px;margin:auto;text-align:center;}
form.blogsaisie{border:#000000 solid 1px;padding:22px;width:auto;border-radius:10px;text-align:center;}
label.saisie_commentaire{text-align:right;width:100px;display:inline-block;vertical-align:top;font-weight:bold;margin-right:22px;}
input.saisie_commentaire{background-color:#F2F2F2;border:#000000 solid 1px;padding:4px;width:200px;border-radius:10px;}
input.saisie_commentaire{background-color:#F2F2F2;border:#000000 solid 1px;padding:4px;width:200px;border-radius:10px;}
textarea.saisie_commentaire{background-color:#f2f2f2;border:#000000 solid 1px;padding:4px;width:400px;height:240px;border-radius:10px;}
label,
textarea {letter-spacing: 1px;}
textarea { padding: 10px;width:400px;height:240px;border-radius: 10px;border: 1px solid #000000;}
div.centreleft {height : auto;width : 900px;margin : auto;text-align : left;}
div.centrePF { text-align:center; MARGIN:auto; WIDTH:auto; MAX-WIDTH:100%;}
div.centre0 { width:90%; margin:auto; text-align:left; }
div.centrele600 { height :auto;width :100%; max-width :600px; margin :auto; text-align :left; }
div.centre2Left { text-align:left; MARGIN:auto; WIDTH:80%;}
a.LesA3 {font-family :"Times New Roman", Times, serif;color :#333333; text-decoration :none; }
a.LesA3:hover { color :#B62C0E; }
a.LesA32 {font-family :"Times New Roman", Times, serif;color :#0070C0; text-decoration :none;font-weight:bold; }
a.LesA32:hover { color :#B62C0E; }
a.google {font-family :Arial,sans serif; color :#000000; text-decoration :none; }
a.google { color :#000000; }
a.LesAHaut {font-family :Arial,sans serif; color :#ffffff; text-decoration :none; border-bottom:1px;line-height:200%; }
a.LesAHaut:hover { color :#ff9999; }
a.LesA2 {color : #222223;text-decoration : none;}
a.LesA2:hover {color : #B62C0E;}
a.LesAN {color : #222223;text-decoration : none;}
a.LesAN:hover {color : #B62C0E;}
p.Leleft { text-align:left;font-family:"Times New Roman", Times, serif; color :#333333; }
img.leleft2 {float : left;margin : 0 1em 0.5em 0;border : none;visibility : visible !important ;}
p.Leleft2 {text-align : left;font-family : Georgia, "Times New Roman", Times, serif;color : #111122;}
p.center {text-align : center;font-family : Georgia, "Times New Roman", Times, serif;color : #111122;}
img.levide {width:250px;height:150px;}
span.LaFonte_blog { font-family:"Times New Roman", Times, serif; color :#222222; }
span.rouge1 { font-family:"Times New Roman", Times, serif; color :#883333; }
span.vert1 { font-family:"Times New Roman", Times, serif; color :#333388; }
span.LaFonte_blog_left { text-align:left;font-family:"Times New Roman", Times, serif; color :#222222; }
img.leleft {padding: 20px;border-radius:50%;width: 70px;height: 70px;}
img.bande { width :90%; }
ul.ulleft li {
padding:4px 4px 6px 5px;
border-bottom: 1px #666 dashed;
text-align: left;
}
table.tab {width : auto;margin : auto;}
table.tab tr td {border-style : double;border-color : #000000;width : 280px;height : 39px;overflow : hidden;text-align : left;}
img.meni {border : 0;height : 39px;margin : 0;width : 46px;vertical-align : middle;}
img.LivreOr {border : 0;width : 144px;cursor : pointer;}
table.LivreOr {border-style : double;border-color : #000000;font-family : Georgia, TimesNewRoman, Times, serif;letter-spacing : normal;
text-indent : 0;text-transform : none;widows : 1;word-spacing : 0;width : 90%;background-color : rgb(191, 199, 207);}
table.LivreOr tr td {border-style : double;border-color : #000000;width : 90%;text-align : left;}
table.Apro tr td {text-align : left;}
table.Lcadre {width : auto;margin : auto;}
table.Lcadre, td.Lcadre {border : solid 1px;border-color : #000000;}
td.Lcadre {border : solid 1px;border-color : #000000;}
td.Lcadre {width : 250px;overflow : hidden;text-align : center;font-family : Georgia, "Times New Roman", Times, serif;color : #3b747a;}
table.tabX500 {width : auto;margin : auto;}
table.tabX500 tr td {border-style : double;border-color : #000000;width : 500px;overflow : hidden;text-align : left;}
table.ztab {width:auto;margin:auto;max-width :900px;}
img.meniX {border : 0;margin : 0;vertical-align : middle;}
bouton.lesubmite {
cursor:pointer;background:#6f8fcf;font-family:"Times New Roman", Times, serif;
color :#222222;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.blog-dialogue {
height:auto;width:auto;max-width:900px;margin:auto;text-align:center;
border-bottom : 1px solid rgb(124, 124, 124);
border-left : 1px solid rgb(124, 124, 124);
border-top : 1px solid rgb(124, 124, 124);
border-right : 1px solid rgb(124, 124, 124);
padding-top : 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.centreXblanc > article > figure img { max-width:100%; }
/* ______________________________________Users etc.._________________________________________________________ */
div.LesReponses { height: auto; width: auto; max-width: 900px; margin: auto;}
div.centre2blanc{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}
label,
textarea {letter-spacing: 1px;}
input#LinputMdpa { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpa {width:20px;vertical-align: middle;}
input#LinputMdpb { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpb {width:20px;vertical-align: middle;}
input#LinputMdpc { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpc {width:20px;vertical-align: middle;}
input#LinputMdpd { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpd {width:20px;vertical-align: middle;}
input#LinputMdpe { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpe {width:20px;vertical-align: middle;}
input#LinputMdpf { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpf {width:20px;vertical-align: middle;}
.ow-anywhere {
overflow-wrap: anywhere;
}
/* exemple
<em class="ow-anywhere">
*/
pre, samp {overflow-wrap: anywhere;}
/* ____________________media640px en min width___POUR ARTICLE FIGURE etc___________________ */
@media screen and (min-width:640px){
.centreXblanc > article { display:flex; justify-content:center; align-items:center; }
.centreXblanc > article > figure,
.centreXblanc > article > div { flex:1 1 45%; width:45%; }
.centreXblanc > div { display: block; width: auto; }
}
/* ________________________________________________________ */
@media (min-width: 1200px) and (max-width: 1400px) {
div.Limage_de_droite{display:none;}
}
/* ________________________________________________________ */
@media (min-width: 750px) and (max-width: 1200px) {
body { background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:23px;margin:0;border:0;text-align: center;width:auto;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 36px;color:#222224;}
H1 {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 36px;color:#222224;}
div.Limage_de_droite{display:none;}
}
@media (max-width:750px){
body { background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:22px;margin:0;border:0;text-align: center;width:auto;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 34px;color:#222224;}
H1 {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 34px;color:#222224;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%;}
textarea {overflow-wrap:break-word;hyphens:auto;}
pre, samp {overflow-wrap: anywhere;}
img.fade {width:90%;position:absolute;}
img.img-circle { border-radius: 50%;width:60px;height:60px; }
img.img-home { width:60px;height:60px; }
div.home {position:fixed;top:4px;left:4px;overflow:hidden;z-index:50;}
div.user-info { position :fixed; top :70px; left :4px; overflow :hidden; z-index :160; }
div.Limage_de_droite{display:none;}
.menu {display: none;width: 300px;}
.LaCheckBox,.LeLabel {display:block;width:30px;}
.LaCheckBox:checked ~ .menu { display: block;display: flex;flex-wrap: wrap;flex-direction:column; }
.LaCheckBox {opacity: 0; position: absolute; top: -5000px;}
.LaCheckBox:focus + .LeLabel { outline: #000000 auto 5px;}
.LeLabel {justify-content: space-between}
.LeLabel {margin-left: auto;}
}
Ce CSS (feuille de style) est commun à toutes les pages de ce site, à l'exeption de la photothéque (galerie)
