CSSdebutant.com

Classification en CSS
Clear, Clip, display, float


bouton de manchette clavierA découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

Classification en CSS

code css Les propriétés clear et clip permettent la gestion d'éléments flotants.

  1. Clear
  2. Clip
  3. Cureur: Apparence du curseur
  4. display :Gestion d'affichage
  5. float : gestion du flottement
  6. overflow
  7. visibility: Visibilité
  8. Z-Index

Héritage Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien)

Clear

La propriété "clear" va etre utilisée pour définir si un élément doit se trouver sur la meme bande horizontale qu'un élément flottant.

On peut donc écrire que cette propriété indique de quelle manière le texte va etre placé par rapport à une boite flottante précédente. clear: valeur;
Valeurs possibles:
  1. none (rien)
  2. both (les deux)
  3. left (gauche)
  4. right (droite)
Allons plus loin dans les explication :
Valeur "None"
La propriété "clear: none;" n'est pas affecté par rapport aux éléments flottants et cette propriété n'influence pas le positionnement en cours.
both
Avec la propriété "clear: both;" la boite générée va se déplacer sous chacune des boites flottantes qui précédent dans le code source.
Left
La propriété "clear: Left;" va placer l'élément en bas juste à droite de celui qui le précéde dans le code source.
Right
A l'inverse du précédent, La propriété "clear: right;" va placer l'élément en bas juste à gauche de celui qui le précéde dans le code source.

Voir un exemple d'une propriété clear avec CSS

Clip

Vous pouvez controler la visibilé des éléments avec la propriété : clip clip: valeur;
Valeurs possibles:
  1. auto
  2. shape
Souvent, "shape est reconnu par le clip rect (rectangle) clip: rect(10px, 10px, 10px, 10px);

Voir un exemple :

Voir le code CSS :
.imageclip { position:absolute ; width: 200px ; clip: rect (0px, 70px, 200px, 0px) ; } Voir le code dans l'élément
<div class= "imageclip"><img src= "images/w3c.gif"></div>

Curseur

code CSS Vous pouvez définir l'apparence de votre curseur grace à la propriété :cursor cursor: valeur;
Valeurs possibles:
  1. auto
  2. crosshair
  3. default
  4. help
  5. move
  6. pointer
  7. text
  8. url
  9. wait
  10. e-resize
  11. ne-resize
  12. nw-resize
  13. n-resize
  14. se-resize
  15. sw-resize
  16. s-resize
  17. w-resize

Voir un exemple

Affichage

Vous avez le controle des éléments à afficher ou non avec la propriété : display display: valeur;
Valeurs possibles:
  1. block
  2. inline
  3. list-item
  4. none

Voir un exemple

flottement

Cette propriété "float" définit le flottement d'une boàte à gauche, à droite ou pas du tout.
On peut l'appliquer à tous les éléments générant des boites sauf si elles sont en position absolue. float: valeur;
Valeurs possibles:
  1. left
  2. right
  3. none

Voir un exemple

Overflow

La propriété de feuille de style css overflow permet de gérer les dépassements de blocs (calque, champ formulaire...). overflow: valeur;
Valeurs possibles:
  1. auto
  2. hidden
  3. visible
  4. scroll
Voir un exemple :
Comme vous pouvez voir, avec cette propriété vous pouvez imiter une iframe. Cette box est définie en "auto" Signifiant que si le contenu de l'élément dépasse les bornes il devrait ajouter un scrollbar.
Voir le code CSS :
#overflow_box { width:200px; height:200px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px; overflow: auto;} Voir le code dans l'élément
<div id="overflow_box">Contents</div>
Visibilité
Vous pouvez rendre un élément visible ou pas grace à la propriété : visibility visibility: valeur;

Valeurs possibles:
  1. hidden
  2. visible

Voir un exemple

Z-Index

La propriété de feuille de style css z-index permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur).
z-index: valeur;
Valeurs possibles:
  1. auto
  2. nombre

Voir un exemple
Positionnement des éléments en CSS >>>

Le CSS en 3 questions/réponses - en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.

🤔 Qu'est-ce que le CSS ?

CSS est l'acronyme de « Cascading Style Sheets » c'est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.

Voulez-vous laisser une note ou un commentaire ?

Donnez votre avis sur ce contenu :
Votes: 4.9 (99%) 61 votes