2APartProx

Outils pour utilisateurs

Outils du site

Piste: • 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 07:55]
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 | 23px | Marge intérieur droite | 
-|  |  |  | +| padding-bottom | 23px | Marge intérieur bas | 
-|  |  |  | +| padding-top | 23px | Marge intérieur haut | 
-|  |  |  | +| padding | 23px 5px 23px 5px (haut, droite, bas, gauche) | Super-propriété de marge intérieure. | 
-|  |  |  |+| border-width | 3px | Epaisseur de bordure | 
 +| border-color | nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence),#CF1A20... | Couleur bordure | 
 +| border-style | solide, dotted, dashed, double, groove, ridghe, inset, outset | Type de bordure | 
 +| border | 3px solid black | Super propriété de bodure. On peut également utiliser border-top,border-right, border-bottom, border-left | 
 +| border-radius | 5px | Bordure arrondie | 
 +| box-shadow | 6px 6px 0px black | Ombre de boîte |
  
  
 +==== Propriétés de positionnement et d'affichage ====
 +^ 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.1651132537.txt.gz · Dernière modification: 2022/04/28 07:55 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