Introduction à Cheatsheet CSS3
La feuille de style en cascade (CSS) est essentiellement un langage de feuille de style utilisé pour implémenter l'apparence et la mise en forme d'un document développé dans un langage de balisage. La spécification CSS est principalement maintenue par le World Wide Web Consortium (W3C). La principale motivation pour implémenter CSS est de mettre en évidence la séparation de la présentation et du contenu qui comprend les fronts et les formats de mise en page. CSS3 est la dernière version ou norme pour CSS après CSS2. CSS3 est principalement un mélange de spécifications CSS2 et de nouvelles fonctionnalités.
Trouvez ci-dessous quelques modules importants de Cheatsheet CSS3:
- Modèle de boîte
- Sélecteurs
- Effets de texte
- Transformations 2D
- Transformations 3D
- Représentation d'image
- Interphase utilisateur
- Disposition de plusieurs colonnes
- Des animations
- Ajustement et réallocation de contenu
Dans cet article Cheatsheet CSS3, nous discuterons de ce qu'est CSS3 et des différentes commandes CSS3.
Commandes et contenu sur Cheatsheet CSS3
CSS3 possède une bibliothèque complète, interactive, extensible et contient de nombreuses méthodes intégrées pour calculer les opérations courantes. Vous trouverez ci-dessous les commandes Cheatsheet CSS3 mentionnées qui effectuent différentes opérations en ligne de commande:
|
COMMANDER |
LA DESCRIPTION |
| : concentrer | Pour se concentrer sur un élément |
| : actif | Pour afficher et sélectionner un élément actif |
| : activée | Pour afficher un élément activé |
| : vérifié | Pour afficher un élément coché |
| : lang | Pour permettre au développeur de spécifier la langue d'un élément spécifique |
| : sélection | Pour afficher l'élément qui est mis en surbrillance et sélectionné |
| : racine | Pour afficher l'élément racine dans le document |
| :premier enfant | Pour afficher le premier élément frère |
| :dernier enfant | Pour afficher le dernier élément frère |
| :fils unique | Pour afficher le seul élément enfant |
| : premier du type | Pour afficher le premier élément frère d'un type spécifique |
| : dernier de type | Pour afficher le dernier élément frère d'un type spécifique |
| : uniquement de type | Pour afficher le seul élément frère d'un type spécifique |
| : vide | Pour afficher l'élément qui n'a pas d'enfants |
| ::première lettre | Pour ajouter un style spécifique à la première lettre d'un texte |
| ::Première ligne | Pour ajouter un style spécifique à la première ligne d'un texte |
| :: après | Pour insérer du contenu après un élément de texte |
| :: avant | Pour insérer du contenu avant un élément de texte |
Opérateurs: - Les différents types d'opérateurs dans CSS3 sont les opérateurs de comparaison (relationnels), les opérateurs d'affectation, les opérateurs logiques et les opérateurs d'identité.
Échelles de mesure: Les échelles de mesure CSS3 du cheat sheet sont les suivantes
|
ÉCHELLE / PARAMÈTRE |
LA DESCRIPTION |
| em | Taille de police de l'élément courant |
| ex | Hauteur de police de l'élément |
| px | Affichage du pixel de l'appareil |
| rem | Taille de police de l'élément racine |
| vh | Hauteur de la fenêtre |
| vw | Largeur de la fenêtre |
| % | Pourcentage |
| PC | Pica |
| pt | Point |
Code couleur: nom de la couleur = rouge, bleu, vert et vert foncé. Retrouvez ci-dessous les codes des mêmes
|
CODE |
DESCRIPTION / SIGNIFICATION |
| rgb (x, y, z) | Pour rouge = rgb (255, 0, 0) |
| rgb (x%, y%, z%) | Pour rouge = rgb (100%, 0, 0) |
| #rrggbb | Pour rouge = # ff000 |
| flabor | Couleur sélectionnée par l'utilisateur pour personnaliser l'interphase utilisateur |
| rgba (x, y, z, alpha) | Pour rouge = rgb (255, 0, 0) |
Propriétés d'interphase utilisateur: Les propriétés d'interphase utilisateur de CSS3 Cheat Sheet sont les suivantes.
|
VALEURS IMMOBILIÈRES |
LA DESCRIPTION |
| icône | Pour fournir l'icône sur la zone |
| redimensionner | Pour redimensionner les éléments de zone spécifiés |
| dimensionnement de la boîte | Pour fixer la zone d'élément spécifiée |
| apparence | Pour implémenter les éléments en tant qu'éléments d'interface utilisateur |
| nav-down | Pour déplacer les éléments vers le bas en fonction du bouton fléché du clavier |
| nav-gauche | Pour déplacer vers la gauche les éléments selon le bouton fléché gauche du clavier |
| nav-up | Pour remonter les éléments en fonction du bouton flèche gauche du clavier |
| nav-right | Pour déplacer vers la droite les éléments en fonction du bouton flèche droite du clavier |
| décalage de contour | Pour dessiner le contour de la zone de texte sélectionnée |
Types de sélecteurs : Les types de sélecteurs CSS3 de la feuille de triche sont les suivants.
|
NOM DU TYPE |
DESCRIPTION / SIGNIFICATION |
| Universel | Pour afficher n'importe quel élément |
| Type | Pour afficher un élément de type spécifique |
| Classe | Pour afficher plusieurs éléments de différents types |
| Id | Pour afficher et identifier un seul type d'élément spécifique sans affecter les autres |
| Enfant | Pour afficher un élément qui tombe directement sous tombe sous un autre élément |
| Regroupement | Pour identifier plusieurs éléments de différents types |
| Frère ou sœur adjacent | Pour récupérer tous les éléments qui ont le même parent et les mêmes éléments et qui sont dans la séquence immédiate |
| Frère général | Pour récupérer tous les éléments qui ont le même parent et les mêmes éléments et qui ne sont pas nécessairement dans la séquence immédiate |
Trucs et astuces gratuits d'utilisation des feuilles de triche CSS3 Commandes: -
- Le mode de fusion CSS3 peut être utilisé pour unifier l'apparence du contenu spécifié et permet également aux utilisateurs de définir différentes versions de couleur d'image. Il y a environ 15 valeurs de mode de mélange présentes dans CSS3 Cheat Sheet. Il ajoute également un avantage supplémentaire du point de vue de la représentation interphase utilisateur.
- L'écrêtage est une autre grande fonctionnalité de CSS. À l'aide de la fonctionnalité de découpage, un utilisateur peut définir la visibilité de la zone d'image selon l'exigence. Donc, si une partie d'image tombe en dehors de la zone souhaitée, un découpage peut être implémenté pour masquer cette zone d'image supplémentaire.
- Dans le cas de CSS, les propriétés shape-inside et shape-outside peuvent être implémentées pour envelopper le contenu autour du chemin personnalisé CSS et il peut être défini et alloué selon les exigences de l'utilisateur final. Il permet essentiellement à un utilisateur de concevoir l'interphase selon les spécifications définies.
- L'utilisation de l'animation SVG (graphiques vectoriels évolutifs) est un autre avantage pour CSS3. En utilisant SVG avec une animation CSS3, l'interphase deviendra plus interactive et SVG possède également sa propre API DOM.
- La fonction de carte sera appliquée à tous les éléments d'une liste d'entrée.
- La fonction de réduction est utilisée pour appliquer certains calculs sur une liste et renvoie une valeur
- Les effets de survol peuvent être implémentés à l'aide de CSS3 Cheat Sheet
- Un menu gluant peut être implémenté à l'aide de filtres CSS3 et SVG, ce qui facilite une nouvelle approche représentative du point de vue de l'interphase utilisateur
- Du point de vue de la conception Web, des effets de parallaxe peuvent être produits à l'aide de CSS3.
- La structure 3D interactive et l'interphase utilisateur peuvent être produites à l'aide de CSS3
- En utilisant une combinaison de sélecteurs différents, une icône de format de fichier à côté du lien de téléchargement peut être produite à l'aide de CSS3.
Conclusion
Dans cet article de feuille de triche CSS3, nous avons vu que CSS3 est facile à utiliser et sa syntaxe est plus facile à retenir. CSS3 peut être utilisé dans la représentation des technologies de développement Web en utilisant différentes approches et technologies de feuille de style qui prennent en charge CSS3. En fonction du type de besoin du projet, du temps de travail et de tous les autres aspects discutés, CSS3 doit être utilisé pour atteindre l'objectif souhaité.
Articles recommandés
Ceci a été un guide pour la feuille de triche CSS3 ici, nous avons discuté du contenu et de la commande ainsi que des trucs et astuces gratuits de feuille de triche CSS3, vous pouvez également consulter l'article suivant pour en savoir plus -
- Cheat Sheet CSS
- Aide-mémoire HTML
- Incroyable aide-mémoire pour UNIX
- Cheat Sheet JavaScript: Fonctionnalités