2APartProx

Outils pour utilisateurs

Outils du site

Piste:
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 07:57]
86.201.9.2 [Propriétés des boîtes] 		code_language:css [2022/04/28 09:03] (Version actuelle)
86.201.9.2
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 |  |  | +| width | 150px,80% | Largeur | 
-| height |  |  | +| height | 150px,80% | Hauteur | 
-| min-widht |  |  | +| min-widht | 150px,80% | Largeur minimale | 
-| max-widht |  |  | +| max-widht | 150px,80% | Largeur maximale | 
-| min-height |  |  | +| min-height | 150px,80% | Hauteur minimale | 
-| max-height |  |  | +| max-height | 150px,80% | Hauteur maximale | 
-| margin-top |  |  | +| margin-top | 23px | Marge en haut (écart extérieur) | 
-| margin-left |  |  | +| margin-left | 23px | Marge à gauche (écart extérieur) | 
-| margin-right |  |  | +| margin-right | 23px | Marge à droite (écart extérieur) | 
-| margin-bottom |  |  | +| margin-bottom | 23px | Marge en bas (écart extérieur) | 
-| margin |  |  | +| margin | 23px, 5px 23px 5px (haut, droite, bas, gauche| Super-propriété de marge. | 
-| padding-left |  |  | +| padding-left | 23px | Marge intérieur gauche | 
-| padding-right |  |  | +| padding-right | 23px | Marge intérieur droite | 
-| padding-bottom |  |  | +| padding-bottom | 23px | Marge intérieur bas | 
-| padding-top |  |  | +| padding-top | 23px | Marge intérieur haut | 
-| padding |  |  | +| padding | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge intérieure. | 
-| border-width |  |  | +| border-width | 3px | Epaisseur de bordure | 
-| border-color |  |  | +| border-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence),#CF1A20... | Couleur bordure | 
-| border-style |  |  | +| border-style | solide, dotted, dashed, double, groove, ridghe, inset, outset | Type de bordure | 
-| border |  |  | +| border | 3px solid black | Super propriété de bodure. On peut également utiliser border-top,border-right, border-bottom, border-left | 
-| border-radius |  |  | +| border-radius | 5px | Bordure arrondie | 
-| box-shadow |  |  |+| box-shadow | 6px 6px 0px black | Ombre de boîte | 
  
 ==== 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.1651132659.txt.gz · Dernière modification: 2022/04/28 07:57 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