2APartProx

Outils pour utilisateurs

Outils du site

Piste: • html5 • xml • css
code_language:css

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
code_language:css [2022/04/28 09:03]
86.201.9.2 		code_language:css [2025/12/17 23:57] (Version actuelle)
216.73.216.214 ancienne révision (2022/04/28 07:57) restaurée
Ligne 35: Ligne 35:
 ==== Propriétés des boîtes ==== ==== Propriétés des boîtes ====
 ^ Propriété ^ Valeurs ^ Description ^ ^ Propriété ^ Valeurs ^ Description ^
-| width | 150px,80% | Largeur | +| width |  |  | 
-| height | 150px,80% | Hauteur | +| height |  |  | 
-| min-widht | 150px,80% | Largeur minimale | +| min-widht |  |  | 
-| max-widht | 150px,80% | Largeur maximale | +| max-widht |  |  | 
-| min-height | 150px,80% | Hauteur minimale | +| min-height |  |  | 
-| max-height | 150px,80% | Hauteur maximale | +| max-height |  |  | 
-| margin-top | 23px | Marge en haut (écart extérieur) | +| margin-top |  |  | 
-| margin-left | 23px | Marge à gauche (écart extérieur) | +| margin-left |  |  | 
-| margin-right | 23px | Marge à droite (écart extérieur) | +| margin-right |  |  | 
-| margin-bottom | 23px | Marge en bas (écart extérieur) | +| margin-bottom |  |  | 
-| margin | 23px, 5px 23px 5px (haut, droite, bas, gauche| Super-propriété de marge. | +| margin |  |  | 
-| padding-left | 23px | Marge intérieur gauche | +| padding-left |  |  | 
-| padding-right | 23px | Marge intérieur droite | +| padding-right |  |  | 
-| padding-bottom | 23px | Marge intérieur bas | +| padding-bottom |  |  | 
-| padding-top | 23px | Marge intérieur haut | +| padding-top |  |  | 
-| padding | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge intérieure. | +| padding |  |  | 
-| border-width | 3px | Epaisseur de bordure | +| border-width |  |  | 
-| border-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence),#CF1A20... | Couleur bordure | +| border-color |  |  | 
-| border-style | solide, dotted, dashed, double, groove, ridghe, inset, outset | Type de bordure | +| border-style |  |  | 
-| border | 3px solid black | Super propriété de bodure. On peut également utiliser border-top,border-right, border-bottom, border-left | +| border |  |  | 
-| border-radius | 5px | Bordure arrondie | +| border-radius |  |  | 
-| box-shadow | 6px 6px 0px black | Ombre de boîte | +| box-shadow |  |  |
  
 ==== Propriétés de positionnement et d'affichage ==== ==== Propriétés de positionnement et d'affichage ====
 ^ Propriété ^ Valeurs ^ Description ^ ^ Propriété ^ Valeurs ^ Description ^
-| display | block, inline, inline-block, table, table-cell, none... | Type d'élément (block, inline, inline-block, none...) | +|  |  |  | 
-| visibility | visible, hidden | Visibilité | +|  |  |  | 
-| clip | rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche) | Affichage d'une partie d'élément | +|  |  |  | 
-| overflow | auto, scroll, visible, hidden | Comportement en cas de dépassement | +|  |  |  | 
-| float | left, right, none | Flottant | +|  |  |  | 
-| clear | left, right, both, none | Arrêt d'un flottant | +|  |  |  | 
-| position | relative, absolute, static | Positionnement | +|  |  |  | 
-| top | 20px | Position par rapport au haut | +|  |  |  | 
-| bottom | 20px | Position par rapport au bas | +|  |  |  | 
-| left | 20px | Position par rapport à la gauche | +|  |  |  |
-| right | 20px | Position par rapport à la droite | +
-| z-index | 10 | Ordre d'affichage en cas de superposition. La plus grande valeur est affichée par dessus les autres. | +
- +
-==== Propriétés des listes ==== +
-^ Propriété ^ Valeurs ^ Description ^ +
-| list-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower,alpha, upper-alpha, none | Type de liste | +
-| list-style-position | inside, outside | Position en retrait | +
-| list-style-image | url('puce.png') | Puce personnalisée | +
-| list-style | - | Super-propriété de liste. Combine: list-style-type, list-style-position, list-style-image | +
- +
-==== Propriétés des tableaux ==== +
-^ Propriété ^ Valeurs ^ Description ^ +
-| border-collapse | collapse, separate | Fusion des bordures | +
-| empty-cells | hide, show | Affichage des cellules vides | +
-| caption-side | bottom, top | Position du titre du tableau | +
- +
- +
-==== Autres Propriétés ==== +
-^ Propriété ^ Valeurs ^ Description ^ +
-| cursor | crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto... | Curseur de souris. | +
- +
- +
-==== Exemple: ==== +
- +
-<code css [enable_line_numbers="true"]> +
-/* Définition des polices personnalisées */ +
- +
-@font-face +
-{ +
-    font-family: 'BallparkWeiner'; +
-    src: url('polices/ballpark.eot'); +
-    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'), +
-         url('polices/ballpark.woff') format('woff'), +
-         url('polices/ballpark.ttf') format('truetype'), +
-         url('polices/ballpark.svg#BallparkWeiner') format('svg'); +
-    font-weight: normal; +
-    font-style: normal; +
-} +
- +
-@font-face +
-{ +
-    font-family: 'Dayrom'; +
-    src: url('polices/dayrom.eot'); +
-    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'), +
-         url('polices/dayrom.woff') format('woff'), +
-         url('polices/dayrom.ttf') format('truetype'), +
-         url('polices/dayrom.svg#Dayrom') format('svg'); +
-    font-weight: normal; +
-    font-style: normal; +
-} +
- +
-/* Eléments principaux de la page */ +
- +
-body +
-{ +
-    background: url('images/fond_jaune.png'); +
-    font-family: 'Trebuchet MS', Arial, sans-serif; +
-    color: #181818; +
-} +
- +
-#bloc_page +
-{ +
-    width: 900px; +
-    margin: auto; +
-} +
- +
-section h1, footer h1, nav a +
-{ +
-    font-family: Dayrom, serif; +
-    font-weight: normal; +
-    text-transform: uppercase; +
-} +
- +
-/* Header */ +
- +
-header +
-{ +
-    background: url('images/separateur.png') repeat-x bottom; +
-    display: flex; +
-    justify-content: space-between; +
-    align-items: flex-end; +
-} +
- +
-#titre_principal +
-{ +
-    display: flex; +
-    flex-direction: column; +
-} +
- +
-#logo +
-{ +
-    display: flex; +
-    flex-direction: row; +
-    align-items: baseline; +
-} +
- +
-#logo img +
-{ +
-    width: 59px; +
-    height: 60px; +
-} +
- +
-header h1 +
-{ +
-    font-family: 'BallparkWeiner', serif; +
-    font-size: 2.5em; +
-    font-weight: normal; +
-    margin: 0 0 0 10px; +
-} +
- +
-header h2 +
-{ +
-    font-family: Dayrom, serif; +
-    font-size: 1.1em; +
-    margin-top: 0px; +
-    font-weight: normal; +
-} +
- +
-/* Navigation */ +
- +
-nav ul +
-{ +
-    list-style-type: none; +
-    display: flex; +
-} +
- +
-nav li +
-{ +
-    margin-right: 15px; +
-} +
- +
-nav a +
-{ +
-    font-size: 1.3em; +
-    color: #181818; +
-    padding-bottom: 3px; +
-    text-decoration: none; +
-} +
- +
-nav a:hover +
-{ +
-    color: #760001; +
-    border-bottom: 3px solid #760001; +
-} +
- +
-/* Bannière */ +
- +
-#banniere_image +
-{ +
-    margin-top: 15px; +
-    height: 200px; +
-    border-radius: 5px; +
-    background: url('images/sanfrancisco.jpg') no-repeat; +
-    position: relative; +
-    box-shadow: 0px 4px 4px #1c1a19; +
-    margin-bottom: 25px; +
-} +
- +
-#banniere_description +
-{ +
-    position: absolute; +
-    bottom: 0; +
-    border-radius: 0px 0px 5px 5px; +
-    width: 99.5%; +
-    height: 33px; +
-    padding-top: 15px; +
-    padding-left: 4px; +
-    background-color: rgba(24,24,24,0.8); +
-    color: white; +
-    font-size: 0.8em; +
-     +
-} +
- +
-.bouton_rouge +
-{ +
-    height: 25px; +
-    position: absolute; +
-    right: 5px; +
-    bottom: 5px; +
-    background: url('images/fond_degraderouge.png') repeat-x; +
-    border: 1px solid #760001; +
-    border-radius: 5px; +
-    font-size: 1.2em; +
-    text-align: center; +
-    padding: 3px 8px 0px 8px; +
-    color: white; +
-    text-decoration: none; +
-} +
- +
-.bouton_rouge img +
-{ +
-    border: 0; +
-} +
- +
-/* Corps */ +
- +
-section +
-{ +
-    display: flex; +
-    margin-bottom: 20px; +
-} +
- +
-article, aside +
-{ +
-    text-align: justify; +
-} +
- +
-article +
-{ +
-    margin-right: 20px; +
-    flex: 3; +
-} +
- +
-.ico_categorie +
-{ +
-    vertical-align: middle; +
-    margin-right: 8px; +
-} +
- +
-article p +
-{ +
-    font-size: 0.8em; +
-} +
- +
-aside +
-{ +
-    flex: 1.2; +
-    position: relative; +
-    background-color: #706b64; +
-    box-shadow: 0px 2px 5px #1c1a19; +
-    border-radius: 5px; +
-    padding: 10px; +
-    color: white; +
-    font-size: 0.9em; +
-} +
- +
-#fleche_bulle +
-{ +
-    position: absolute; +
-    top: 100px; +
-    left: -12px; +
-} +
- +
-#photo_zozor +
-{ +
-    text-align: center; +
-} +
- +
-#photo_zozor img +
-{ +
-    border: 1px solid #181818; +
-} +
- +
-aside img +
-{ +
-    margin-right: 5px; +
-} +
- +
-/* Footer */ +
- +
-footer +
-{ +
-    display: flex; +
-    background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; +
-    padding-top: 25px; +
-} +
- +
-footer p, footer ul +
-{ +
-    font-size: 0.8em; +
-} +
- +
-footer h1 +
-{ +
-    font-size: 1.1em; +
-} +
- +
- +
-#tweet +
-{ +
-    width: 28%; +
-} +
- +
-#mes_photos +
-{ +
-    width: 35%; +
-} +
- +
-#mes_amis +
-{ +
-    width: 31%; +
-} +
- +
-#mes_photos img +
-{ +
-    border: 1px solid #181818; +
-    margin-right: 2px; +
-} +
- +
-#listes_amis +
-{ +
-    display: flex; +
-    justify-content: space-between; +
-    margin-top: 0; +
-} +
- +
-#mes_amis ul +
-{ +
-    list-style-image: url('images/ico_liensexterne.png'); +
-    padding-left: 2px; +
-}+
  
-#mes_amis a 
-{ 
-    text-decoration: none; 
-    color: #760001; 
-} 
  
  
-</code> 
  
  
code_language/css.1651136639.txt.gz · Dernière modification: 2022/04/28 09:03 de 86.201.9.2

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki