Les paddingpropriétés CSS sont utilisées pour générer de l’espace autour du contenu d’un élément, à l’intérieur de toutes les bordures définies. Avec CSS, vous avez un contrôle total sur le rembourrage. Il existe des propriétés pour définir le remplissage de chaque côté d’un élément … Continued
Elliptical border – border-radius: 50px/15px: Elliptical border – border-radius: 15px/50px: Ellipse border – border-radius: 50%: Le code expliqué <style> #rcorners7 { border-radius: 50px/15px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: #8AC007; padding: 20px; … Continued
Quatre valeurs – border-radius: 15px 50px 30px 5px: Trois valeurs – border-radius: 15px 50px 30px: Deux valeurs – border-radius: 15px 50px: Le code expliqué <style> #rcorners4 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; … Continued
La propriété border-radius property permet d’arrondir les coins d’un élément. Rounded corners pour un élément avec un background color précis: Rounded corners! Rounded corners pour un élément avec une bordure: Rounded corners! Rounded corners pour un élément avec une background … Continued
Home News Contact About Le code expliqué <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; display: block; width: 60px; background-color: #dddddd; } </style> <ul> <li><a href= »#home »>Home</a></li> <li><a href= »#news »>News</a></li> <li><a href= »#contact »>Contact</a></li> <li><a href= »#about »>About</a></li> … Continued
Home News Contact About Le code expliqué <style> ul { list-style-type: none; margin: 0; padding: 0; } li { display: inline; } </style> <ul> <li><a href= »#home »>Home</a></li> <li><a href= »#news »>News</a></li> <li><a href= »#contact »>Contact</a></li> <li><a href= »#about »>About</a></li> </ul>
Home News Contact About Un background color a été ajouté pour montrer la ligne du lien. Le code expliqué <style> ul { list-style-type: none; margin: 0; padding: 0; } </style> <ul> <li><span style= »width: 60px; background-color: grey; »><a href= »#home »>Home</a></span></li> <li><span style= »width: 60px; … Continued
Home News Contact About Le code expliqué <style> ul { list-style-type: none; margin: 0; padding: 0; } </style> <ul> <li><a href= »#home »>Home</a></li> <li><a href= »#news »>News</a></li> <li><a href= »#contact »>Contact</a></li> <li><a href= »#about »>About</a></li> </ul>
Home News Contact About Note: Nous utilisons dans cet exemple href= »# » pour tester la ligne. Dans un site réel, il faut utiliser des URLS. Le code expliqué <ul> <li><a href= »#home »>Home</a></li> <li><a href= »#news »>News</a></li> <li><a href= »#contact »>Contact</a></li> <li><a href= »#about »>About</a></li> </ul> <p>Note: Nous utilisons … Continued
Ceci est un titre Ceci est un paragraphe. Ceci est un autre paragraphe. Ceci est encore un paragraphe. Le code expliqué <style> p { border:1px solid grey; padding:10px; margin:30px; } </style> <h1>Ceci est un titre</h1> <p>Ceci est un paragraphe.</p> <p>Ceci … Continued