Si vous êtes web designer, vous devez toujours faire en sorte de coder rapidement et proprement pour la lisibilité du code. Aujourd’hui, nous verrons quelques astuces en CSS pour écrire moins !
Les couleurs
Les couleurs en informatique, sont formés de 6 chiffres hexadécimaux (de 0 à F) et commencent par une dièse (#).
Formule longue: Pour les nuances de gris, c’est parfois le même chiffre qui est répété six fois:
body { color: #333333; }
Formule courte: Pour ces nuances, voici une petite astuce, c’est de n’écrire que les 3 chiffres.
body { color: #333; }
Propriété "background"
Formule longue: il y a cinq propriétés pour modifier le fond d’un élément en CSS.
#logo {
background-color: #cccccc;
background-image: #url(logo.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-attachment: scroll;
}
Formule courte: Au lieu de passer tout son temps à écrire ces 5 propriétés, pourquoi ne pas tout taper en une seule ligne !
#logo { background: #ccc url(logo.png) no-repeat 0px 0px fixed; }
Propriété "border"
Formule longue: Ces propriétés sont faites pour ajouter une bordure à un élément.
#exemple {
border-width: 2px;
border-style: solid;
border-color: #333;
}
Formule courte:
#exemple { border: 2px solid #333; }
Propriété "margin" et "padding"
Formule longue: La propriété margin sert à ajouter une marge extérieur à un élément. Tandis que la propriété padding ajoute une marge intérieur à un élément.
#exemple {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 5px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 5px;
Formule courte:
#exemple { margin: 5px 10px 10px 5px;
paddding: 5px 10px 10px 5px; }
0 commentaires:
Enregistrer un commentaire