Résumé de 20 compétences CSS avancées (recommandé) _CSS tutorial_CSS_web page production

2020-05-14

L'utilisation des compétences rendra les gens de plus en plus paresseux, oui, je veux juste vous rendre paresseux. Voici les conseils CSS avancés que j'ai recueillis, j'espère que vous êtes paresseux hors du domaine.

1. Image en noir et blanc

Ce code fera apparaître vos photos en couleur comme des photos en noir et blanc, est-ce cool?


 img.desaturate {
     filtre: niveaux de gris (100%);
     -webkit-filter: niveaux de gris (100%);
     -moz-filter: niveaux de gris (100%);
     -ms-filter: niveaux de gris (100%);
     -o-filtre: niveaux de gris (100%);
 } 
 

2. Utilisez: not () pour appliquer / désappliquer les bordures dans le menu

Ajoutez d'abord une bordure à chaque élément de menu


 / * ajouter une bordure * /
 .nav li {
   bordure droite: 1px solide # 666;
 }
 ... puis supprimez le dernier élément ...
 // supprimer la bordure /
 .nav li: dernier enfant {
   frontière-droite: aucune;
 }
 ... vous pouvez directement utiliser la pseudo-classe: not () pour appliquer des éléments:
 .nav li: pas (: dernier enfant) {
   bordure droite: 1px solide # 666;
 } 
 

Ce code est propre, facile à lire et facile à comprendre.

Bien sûr, si votre nouvel élément a un élément frère, vous pouvez également utiliser le sélecteur universel frère (~):


 .nav li: premier enfant ~ li {
   bordure gauche: 1px solide # 666;
 } 
 

3. Ombre en haut de la page

L'extrait de code CSS3 simple suivant peut ajouter un bel effet d'ombre supérieure à une page Web:


 corps: avant {
           contenu: "";
           position: fixe;
           en haut: -10px;
           gauche: 0;
           largeur: 100%;
           hauteur: 10px;
           -webkit-box-shadow: 0px 0px 10px rgba (0,0,0, .8);
           -moz-box-shadow: 0px 0px 10px rgba (0,0,0, .8);
           boîte-ombre: 0px 0px 10px rgba (0,0,0, .8);
           indice z: 100;
 } 
 

4. Ajoutez une hauteur de ligne au corps

Vous n'avez pas besoin d'ajouter séparément la hauteur de ligne à chaque balise p, h, etc. Ajoutez-le simplement au corps:


 corps {
   hauteur de ligne: 1;
 } 
 

De cette façon, les éléments de texte peuvent être facilement hérités du corps.

5. Tout est centré verticalement

Il est trop facile de centrer tous les éléments verticalement:


 html, corps {
   hauteur: 100%;
   marge: 0;
 }
 corps {
   -webkit-align-items: centre;
   -ms-flex-align: centre;
   align-items: centre;
   affichage: -webkit-flex;
   affichage: flex;
 } 
 

Regardez, est-ce très simple.

Remarque: Soyez prudent avec flexbox dans IE11.

6. Liste séparée par des virgules

Faire ressembler les éléments de la liste HTML à une véritable liste séparée par des virgules:


 ul> li: not (: dernier-enfant) :: after {
   contenu: ",";
 } 
 

Utilisez la pseudo-classe: not () pour le dernier élément de la liste.

7. Utilisez nth-child négatif pour sélectionner les éléments

Utilisez nth-child négatif en CSS pour sélectionner l'élément 1 à l'élément n.


 li {
   affichage: aucun;
 }
 / * sélectionnez les éléments 1 à 3 et affichez-les * /
 li: nième enfant (-n + 3) {
   bloc de visualisation;
 } 
 

8. Utilisez SVG pour les icônes

Nous n'avons aucune raison de ne pas utiliser SVG pour les icônes:


 .logo {
   fond: url ("logo.svg");
 } 
 

SVG a une bonne évolutivité pour tous les types de résolution et prend en charge tous les navigateurs pour revenir à IE9. Cela peut éviter les fichiers .png, .jpg ou .gif.

9. Optimiser le texte d'affichage

Parfois, les polices ne sont pas affichées de manière optimale sur tous les appareils, vous pouvez donc laisser le navigateur de l'appareil vous aider:


 html {
   -moz-osx-font-smoothing: gris
www.xd1998.com@2001-2030Partage De Technologie