Maison > Article > interface Web > Styles courants CSS
Styles courants CSS
- php中世界最好的语言original
- 2018-03-08 15:40:531959parcourir
Cette fois, je vais vous présenter les styles CSS courants. Quelles sont les précautions à prendre pour utiliser les styles CSS courants, jetons un coup d'œil ?
À quoi fait référence CSS Sprite (Sprite) ? Quelle est sa fonction
CSS Sprite est CSS Sprite, certaines personnes l'appellent également CSS Sprite. C'est une technologie de fusion d'images CSS. est Fusionnez la petite icône et l'image d'arrière-plan en une seule image, puis utilisez le positionnement d'arrière-plan CSS pour afficher la partie de l'image qui doit être affichée.
Quelles sont les différences dans les scénarios d'utilisation entre les balises img et les images d'arrière-plan CSS ?
img est utilisé comme balise html, et les images utilisées par img sont généralement utilisées comme contenu.
Les images d'arrière-plan CSS sont généralement utilisées pour la décoration.
Dans une direction plus détaillée, pendant le processus de chargement de la page Web, les images qui existent en tant qu'images d'arrière-plan CSS ne commenceront pas à se charger tant que la structure n'est pas chargée (une fois que tout le contenu de la page Web est affiché), et le La balise img en html est la structure de la page Web. Une partie (du contenu) est chargée lors du chargement de la structure. Lorsque l'image est utilisée comme arrière-plan, lorsque l'image n'est pas chargée ou ne se charge pas, il n'y aura aucune marque d'espace réservé pour l'image et aucune croix rouge n'apparaîtra.
Quelles sont les fonctions des attributs title et alt
L'attribut title spécifie des informations supplémentaires sur l'élément. Ces informations affichent généralement un texte ToolTip lorsque la souris est déplacée sur l'élément. L'attribut alt spécifie un texte alternatif lorsque l'image ne peut pas être affichée.
background:url(abc.png) 0 0 no-repeat; Que signifie cette phrase
Cette phrase est l'abréviation de background, et url représente background-imageInsérez l'adresse de l'image d'arrière-plan. 0 0 représente la valeur de background-position, qui indique le positionnement de l'image d'arrière-plan. Les deux avant et après sont respectivement le positionnement horizontal et le positionnement vertical. Le coin supérieur gauche est 0 0 et no-repeat représente la valeur de background-repeat. Les valeurs disponibles sont répéter, sans répétition, répéter-x, répéter-y et hériter. Indique respectivement la répétition horizontale et verticale, aucune répétition, uniquement la répétition horizontale, uniquement la répétition verticale et l'héritage des éléments parents.
background-sizeQuelle est la fonction ? Comment est la compatibilité ? les valeurs sont auto |length|cover|contain|initial|inherit;
Comment centrer un div horizontalement ? Comment centrer l'image horizontalement
Centrer le div horizontalement :
1. Méthode de marge : en définissant des marges sur le div, marge : 0 auto2. affichage : méthode de bloc en ligne : parent ; élément Définir text-align:center. Vous devez définir display:inline-block sur le div dans la pièce.
3. Méthode flottante : Pour div et son élément parent, float:left, positionnement relatif, élément parent left50%, div right 50%. Centrez l'image horizontalement : placez l'image dans un élément de niveau bloc, en utilisant la méthode ci-dessus.
Comment définir la transparence des éléments ?
La transparence du débit de parole peut être définie via rgba et opcity Pour les navigateurs ie8 et les versions pires, filter:alpha(opacity=x) doit être ajouté.
L'opacité et le rgba peuvent être définis pour être transparents. Quelle est la différence ?
opacity héritera de l'attribut opacity de l'élément parent, tandis que les éléments descendants de l'élément défini par RGBA n'hériteront pas de l'attribut opacity.
, il peut être prouvé que l'opacité peut hériter des attributs de l'élément parent. De plus, l'opacité peut également définir la transparence de l'image.
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
.rgba,.opacity{ margin:0 auto; width:200px; height: 200px; text-align: center; line-height: 200px; font-size: 20px; border:1px solid black; } .rgba{ background: rgba(255,0,0,0.5); } .opacity{ background: red; opacity: 0.5; } </style> </head> <body> <div class="rgba"> 这是RGBA不透明度 </div> <div class="opacity"> 这是opacity不透明度 </div> </body> </html>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Objets temporels JS et types de référence
Utilisez la technologie frontale la plus simple pour créer un lecteur de musique simple
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!