Logo HTML5 Logo CSS3

index.php

style.css
  1. @charset "UTF-8";
  2. /**************************************************/
  3. @{ LISTE DES REGLES CSS listeDesReglesCSS.css 1907a }
  4. /**************************************************/
  6. Le sélecteur ".listeDesReglesCSS" applique la plupart des attributs CSS2 et CSS3, avec les valeurs possibles.
  7. Les attributs sont classés par usage, et du général au particulier.
  9. Cette bibliothèque peut aussi servir à copier-coller des règles (lignes) dans votre code.
  11. En couleur à gauche, les couples attribut:valeur présentent la valeur par défaut de l'attribut CSS.
  12. En commentaire à droite, les valeurs possibles de l'attribut sont séparées par le caractère "|".
  13. Les mots en minuscules sont les termes du langage CSS.
  14. Les mots commençant par une majuscule sont à remplacer par des valeurs (Couleur, Longueur, Entier...).
  15. Tous les attributs peuvent également recevoir la valeur "initial" : retour à la valeur par défaut.
  17. Le style CSS représente donc le style par défaut : tous les attributs sont à leur valeur par défaut.
  18. En appliquant la classe "defaut" à un élément du DOM, on ramène cet élément aux valeurs par défaut.
  20. © michelandrieux@online.fr
  22. /**************************************************/
  24. /* Déclaration du jeu de caractères à utiliser dans les règles CSS */
  25. @charset "UTF-8 ou ISO-8859-1 ...";
  27. /* Ajout d'une police de caractères */
  28. @font-face{
  29. font-family: "nom"; /* nom de la police tel qu'il sera appelé dans les styles CSS */
  30. src: url(fontes/police.ttf); /* chemin vers le fichier de la police */
  31. font-weight: normal; /* normal | bold | 100-900 */
  32. font-style: normal; /* normal | italic | oblique */
  33. }
  36. .listeDesReglesCSS, .defaut { /* Sélecteur universel : ,* */
  39. /* Affichage */
  40. display: inline; /* block | inline | inline-block | none | flex | list-item | table | grid ... */
  41. visibility: visible; /* visible | hidden */
  42. cursor: auto; /* auto | pointer | text | crosshair | none ... */
  43. opacity: 1; /* [0.0 -> 1.0] Précision à 3 décimales */
  46. /* Positionnement */
  47. position: static ; /* static | absolute | fixed | sticky | relative (pour le parent de référence) */
  48. top: auto; /* auto | px | % | em */
  49. right: auto; /* auto | px | % | em */
  50. bottom: auto; /* auto | px | % | em */
  51. left: auto; /* auto | px | % | em */
  52. z-index: auto; /* auto | Entier négatif ou positif */
  55. /* Flottement */
  56. float: none; /* none | left | right */
  57. clear: none; /* none | left | right | both */
  60. /* Dimensions */
  61. width: auto; /* auto | px | % | em */ /* (pour les block et les inline-block ) */
  62. height: auto; /* auto | px | % | em */ /* (pour les block et les inline-block ) */
  63. max-width: none; /* none | px | % | em */
  64. max-height: none; /* none | px | % | em */
  65. min-width: 0px; /* px | % | em */
  66. min-height: 0px; /* px | % | em */
  67. box-sizing: content-box; /* content-box | border-box */
  68. overflow: visible; /* visible | hidden | scroll | auto */
  69. overflow-x: visible; /* visible | hidden | scroll | auto */
  70. overflow-y: visible; /* visible | hidden | scroll | auto */
  73. /* Marges et remplissage */
  74. margin: 0px 0px 0px 0px; /* (Haut ± px | % | em) (Droit ± px | % | em) (Bas ± px | % | em) (Gauche ± px | % | em) */
  75. margin-top: 0px; /* ± px | % | em */
  76. margin-right: 0px; /* ± px | % | em */
  77. margin-bottom: 0px; /* ± px | % | em */
  78. margin-left: 0px; /* ± px | % | em */
  79. padding: 0px 0px 0px 0px; /* (Haut px | % | em) (Droit px | % | em) (Bas px | % | em) (Gauche px | % | em) */
  80. padding-top: 0px; /* px | % | em */
  81. padding-right: 0px; /* px | % | em */
  82. padding-bottom: 0px; /* px | % | em */
  83. padding-left: 0px; /* px | % | em */
  86. /* Flex : élément parent */
  87. display: flex; /* Valeur par défaut de display : inline */
  88. flex-direction: row ; /* row | row-reverse | column | column-reverse */
  89. flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
  90. justify-content: flex-start; /* flex-start | flex-end | center | space-around | space-between */
  91. align-items: stretch; /* stretch | baseline | center | flex-start | flex-end */
  92. align-content: stretch; /* stretch | center | flex-start | flex-end | space-around | space-between */
  95. /* Flex : éléments enfants */
  96. flex-grow: 0; /* Entier positif */
  97. flex-shrink: 1; /* Entier positif */
  98. flex-basis: auto; /* px | % | em */
  99. flex: 0 1 auto; /* (Entier positif) (Entier positif) (px | % | em) */
  100. order: 0; /* Entier positif */
  101. align-self: auto; /* auto | stretch | center | flex-start | flex-end | baseline */
  104. /* Texte */
  105. text-align: left; /* left | right | center | justify */
  106. text-indent: 0px; /* px | % | em */
  107. line-height: normal; /* normal | px | % | em */
  108. vertical-align: baseline ; /* baseline | sub | super | top | text-top | middle | bottom | text-bottom | ±px | ±% | ±em */
  109. white-space: normal; /* normal | nowrap | pre | pre-line | pre-wrap */
  110. word-wrap: normal; /* normal | break-word */
  111. font-family: Times, serif; /* none | serif | sans-serif | cursive | fantasy | monospace */
  112. font-size: medium; /* medium | px | % | em */
  113. font-weight: normal; /* normal | bold */
  114. font-style: normal; /* normal | italic | oblique */
  115. font-variant: normal; /* normal | small-caps | all-small-caps */
  116. font-kerning: auto; /* auto | normal | none */
  117. color: rgb(0,0,0); /* #rrvvbb | #rvb | rgb(r,v,b) | rgba(r,v,b,a) | Couleur nommée */
  118. text-shadow: none; /* (H-Décalage ± px | em) (V-Décalage ± px | em) (Flou px | em) Couleur */
  119. text-transform: none; /* none | capitalize | uppercase | lowercase */
  120. text-decoration: none; /* none | underline | overline | line-through */
  121. letter-spacing: normal; /* normal | px | % | em */
  122. word-spacing: normal; /* normal | px | % | em */
  123. hyphens: none; /* none | manual | auto */
  126. /* Listes */
  127. list-style-type: disc; /* none | disc | circle | square | decimal | decimal-leading-zero |
  128. lower-alpha | lower-greek | lower-latin | lower-roman |
  129. upper-alpha | upper-greek | upper-latin | upper-roman */
  130. list-style-position: outside ; /* outside | inside */
  131. list-style-image: none; /* none | url() */
  132. list-style: disc outside none; /* Type Position | Position url() */
  135. /* Texte à colonnes */ /* avec préfixes vendeurs -webkit */
  136. column-count: auto; /* auto | Entier positif */
  137. column-fill: balance; /* balance | auto */
  138. column-gap: normal; /* normal | length */
  139. column-rule: 0px none rgba(0,0,0,0);/* (Epaisseur px | em) Style Couleur */
  140. column-span: none; /* none | all */
  141. column-width: auto; /* auto | Largeur */
  144. /* Tableau */
  145. caption-side: top; /* top | bottom */
  146. empty-cells: show; /* show | hide */
  149. /* Arrière-plan */
  150. background-color: rgba(0,0,0,0); /* Couleur | transparent */
  151. background-clip: border-box; /* padding-box | border-box | content-box */
  152. background-origin: padding-box; /* padding-box | border-box | content-box */
  153. background-image: none; /* none | url() */
  154. background-size: auto auto; /* auto auto | px px | % % | em em | cover | contain */
  155. background-repeat: repeat; /* repeat | repeat-x | repeat-y | no-repeat */
  156. background-position: 0% 0%; /* H-Décalage(left | center | right | ±px | ±% | ±em) V-Décalage(top | center | bottom | ±px | ±% | ±em) */
  157. background-attachment: scroll; /* scroll | fixed | local */
  158. border: 0px none rgba(0,0,0,0); /* (Epaisseur px | em) Style Couleur */
  159. border-top: 0px; /* (Epaisseur px | em) Style Couleur */
  160. border-right: 0px; /* (Epaisseur px | em) Style Couleur */
  161. border-bottom: 0px; /* (Epaisseur px | em) Style Couleur */
  162. border-left: 0px; /* (Epaisseur px | em) Style Couleur */
  163. outline: 0px none rgba(0,0,0,0); /* (Epaisseur px | em) Style Couleur */
  164. /* Styles: hidden | dotted | dashed | solid | double | groove | ridge | inset | outset */
  165. border-radius: 0px 0px 0px 0px; /* px px px px | % % % % | em em em em */
  166. border-spacing: 2px; /* px | em */
  167. border-collapse: separate; /* separate | collapse */
  168. box-shadow: none; /* none | (H-Décalage: ± px | em) (V-Décalage: ± px | em) (Flou: px | em) (Grossi: px | em) Couleur inset */
  169. box-decoration-break: slice; /* slice | clone */
  172. /* Images */
  173. clip: auto; /* auto | Rectangle (Top, Right, Bottom, Left) */
  174. object-fit: fill; /* fill | contain | cover | scale-down | none */
  175. filter: none; /* none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
  176. hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */
  178. /* Transformations */
  179. perspective: none; /* none | px */ /* Pour le parent */
  180. perspective-origin: 50% 50%; /* (X left | center | right | px | % | em) (Y top | center | bottom | px | % | em) */
  181. transform: none; /* Fonction de transformation :
  182. translate(x,y) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z) |
  183. scale(x,y) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z) |
  184. rotate(Angle) | rotate3d(x,y,z,Angle) | rotateX(Angle) | rotateY(Angle) | rotateZ(Angle) |
  185. skew(X-angle,Y-angle) | skewX(Angle) | skewY(Angle) | perspective(N) */
  186. transform-origin: 50% 50% 0; /* (X-axis (left|center|right|Longueur|%)) (Y-axis (top|center|bottom|Longueur|%)) (Z-axis (Longueur)) */
  188. /* Transitions */
  189. transition-property: none; /* none | all | Propriétés... */
  190. transition-duration: 0s; /* Durée en s ou ms */
  191. transition-timing-function: ease; /* ease | linear | ease-in | ease-out | ease-in-out |
  192. step-start | step-end | steps(Entier, start | end) | cubic-bezier(n,n,n,n) */
  193. transition: none 0s ease ; /* écriture simplifiée */
  195. /* Animations */
  196. animation-name: nom;
  197. animation-duration: 0s; /* Durée en s */
  198. animation-timing-function: ease; /* linear | ease | ease-in | ease-out | ease-in-out |
  199. step-start | step-end | steps(Entier, start | end) | cubic-bezier(n,n,n,n) */
  200. animation-delay: 0s; /* Durée en s */
  201. animation-iteration-count: 1; /* number | infinite | initial | inherit */
  202. animation-direction: normal; /* normal | reverse | alternate | alternate-reverse | initial | inherit */
  203. animation-fill-mode: none; /* none | forwards | backwards | both | initial | inherit */
  204. animation-play-state: running; /* running | paused | initial | inherit */
  205. animation: nom 0s ease 0s 1 normal none running; /* écriture simplifiée */
  206. }
  207. /* Images clés des Animations */
  208. @keyframes nom { /* écriture avec images clés début et fin */
  209. from {attr1: vala1; attr2: valb1;...}
  210. to {attr1: vala2; attr2: valb2;...}
  211. }
  212. @keyframes nom { /* écriture avec images clés multiples */
  213. 0% {attr1: vala1; attr2: valb1;...}
  214. 50% {attr1: vala2; attr2: valb2;...}
  215. 100% {attr1: vala3; attr2: valb3;...}
  216. }
  219. .prefixesVendeurs { /* A utiliser pour quelques attributs CSS */
  220. /* hyphens, column, transform... */
  221. /* Descrition type d'une propriété CSS exprimée avec tous les préfixes vendeurs */
  222. -webkit-propriete: 0; /* pour Chrome et Safari */
  223. -moz-propriete: 0; /* pour Firefox */
  224. -ms-propriete: 0; /* pour Explorer */
  225. -o-propriete: 0; /* pour Opera */
  226. propriete: 0; /* écriture standard, toujours à la fin */
  228. /* Propriétés CSS nécessitant des préfixes vendeurs au 19/09/2018 (https://autoprefixer.github.io) */
  230. /* Dimensions */
  231. -webkit-box-sizing: content-box;
  232. box-sizing: content-box; /* content-box | border-box */
  234. /* Flex : élément parent */
  235. display: -webkit-box;
  236. display: -ms-flexbox;
  237. display: flex; /* Valeur par défaut de display : inline */
  238. -webkit-box-orient: horizontal;
  239. -webkit-box-direction: normal;
  240. -ms-flex-direction: row ;
  241. flex-direction: row ; /* row | row-reverse | column | column-reverse */
  242. -ms-flex-wrap: nowrap;
  243. flex-wrap: nowrap; /* nowrap | wrap-reverse | wrap-reverse */
  244. -webkit-box-pack: start;
  245. -ms-flex-pack: start;
  246. justify-content: flex-start; /* flex-start | flex-end | center | space-around | space-between */
  247. -webkit-box-align: stretch;
  248. -ms-flex-align: stretch;
  249. align-items: stretch; /* stretch | baseline | center | flex-start | flex-end */
  250. -ms-flex-line-pack: stretch;
  251. align-content: stretch; /* stretch | center | flex-start | flex-end | space-around | space-between */
  253. /* Flex : éléments enfants */
  254. -webkit-box-flex: 0;
  255. -ms-flex-positive: 0;
  256. flex-grow: 0; /* Entier positif */
  257. -ms-flex-negative: 1;
  258. flex-shrink: 1; /* Entier positif */
  259. -ms-flex-preferred-size: auto;
  260. flex-basis: auto; /* px | % | em */
  261. -ms-flex: 0 1 auto;
  262. flex: 0 1 auto; /* (Entier positif) (Entier positif) (px | % | em) */
  263. -webkit-box-ordinal-group: 1;
  264. -ms-flex-order: 0;
  265. order: 0; /* Entier positif */
  266. -ms-flex-item-align: auto;
  267. align-self: auto; /* auto | stretch | center | flex-start | flex-end | baseline */
  269. /* Texte */
  270. -webkit-font-kerning: auto;
  271. font-kerning: auto; /* auto | normal | none */
  272. -webkit-hyphens: none; /* none | manual | auto */
  273. -ms-hyphens: none; /* none | manual | auto */
  274. hyphens: none; /* none | manual | auto */
  276. /* Texte à colonnes */ /* avec préfixes vendeurs -webkit */
  277. -webkit-column-count: auto;
  278. column-count: auto; /* auto | Entier positif */
  279. -webkit-column-fill: balance;
  280. column-fill: balance; /* balance | auto */
  281. -webkit-column-gap: normal;
  282. column-gap: normal; /* normal | length */
  283. -webkit-column-rule: 0px none rgba(0,0,0,0);
  284. column-rule: 0px none rgba(0,0,0,0);/* (Epaisseur px | em) Style Couleur */
  285. -webkit-column-span: none;
  286. column-span: none; /* none | all */
  287. -webkit-column-width: auto;
  288. column-width: auto; /* auto | Largeur */
  290. /* Arrière-plan */
  291. -webkit-box-shadow: none;
  292. box-shadow: none; /* none | (H-Décalage: ± px | em) (V-Décalage: ± px | em) (Flou: px | em) (Grossi: px | em) Couleur inset */
  294. -webkit-box-decoration-break: slice;
  295. box-decoration-break: slice; /* slice | clone */
  297. /* Images */
  298. -webkit-filter: none;
  299. filter: none; /* none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
  300. hue-rotate() | invert() | opacity() | saturate() | sepia() | url() */
  302. /* Effets */
  303. -webkit-transition-property: none;
  304. -o-transition-property: none;
  305. transition-property: none; /* none | all | Propriétés... */
  306. -webkit-transition-duration: 0s;
  307. -o-transition-duration: 0s;
  308. transition-duration: 0s; /* Durée en s ou ms */
  309. -webkit-transition-timing-function: ease;
  310. -o-transition-timing-function: ease;
  311. transition-timing-function: ease; /* ease | linear | ease-in | ease-out | ease-in-out |
  312. step-start | step-end | steps(Entier, start | end) | cubic-bezier(n,n,n,n) */
  313. -webkit-perspective: none;
  314. perspective: none; /* none | px */ /* Pour le parent */
  315. -webkit-perspective-origin: 50% 50%;
  316. perspective-origin: 50% 50%; /* (X left | center | right | px | % | em) (Y top | center | bottom | px | % | em) */
  317. -webkit-transform: none;
  318. -ms-transform: none;
  319. transform: none; /* Fonction de transformation :
  320. translate(x,y) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z) |
  321. scale(x,y) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z) |
  322. rotate(Angle) | rotate3d(x,y,z,Angle) | rotateX(Angle) | rotateY(Angle) | rotateZ(Angle) |
  323. skew(X-angle,Y-angle) | skewX(Angle) | skewY(Angle) | perspective(N) */
  324. -webkit-transform-origin: 50% 50% 0;
  325. -ms-transform-origin: 50% 50% 0;
  326. transform-origin: 50% 50% 0; /* (X-axis (left|center|right|Longueur|%)) (Y-axis (top|center|bottom|Longueur|%)) (Z-axis (Longueur)) */
  328. }
  331. /* Liste alphabétique complète des sélecteurs des balises HTML5 */
  332. a {} abbr {} address {} area {} article {} aside {} audio {}
  333. b {} base {} bdi {} bdo {} blockquote {} body {} br {} button {}
  334. canvas {} caption {} cite {} code {} col {} colgroup {} command {}
  335. datalist {} dd {} del {} details {} dfn {} div {} dl {} dt {}
  336. em {} embed {}
  337. fieldset {} figcaption {} figure {} footer {} form {}
  338. h1 {} h2 {} h3 {} h4 {} h5 {} h6 {} head {} header {} hgroup {} hr {} html {}
  339. i {} iframe {} img {} input {} ins {}
  340. keygen {} kbd {}
  341. label {} legend {} li {} link {}
  342. map {} mark {} math {} menu {} meta {} meter {}
  343. nav {} noscript {}
  344. object {} ol {} optgroup {} option {} output {}
  345. p {} param {} pre {} progress {}
  346. q {}
  347. rp {} rt {} ruby {}
  348. s {} samp {} script {} section {} select {} small {} source {} span {} strong {} style {} sub {} summary {} sup {} svg {}
  349. table {} tbody {} td {} textarea {} tfoot {} th {} thead {} time {} title {} tr {} track {}
  350. u {} ul {}
  351. var {} video {}
  352. wbr {}
Illustration téléphone

Basculez votre écran pour une meilleure expérience.