Intégrez 20 propriétés CSS/CSS3 courantes

Ici, j'ai résumé 20 styles CSS couramment utilisés que j'utilise souvent dans les projets. Ce sont tous des expériences personnelles. Je les partage avec vous ici. J'espère que cela sera utile à tout le monde

1. à afficher sur une seule ligne : white-space:nowrap;

2. Définissez le texte de débordement à afficher sous forme de points de suspension : text-overflow:ellipsis;
(Remarque : text-overflow : clip | ellipsis | ellipsis-word ; (nouvellement ajouté en CSS3)
où clip signifie couper directement le texte qui déborde ;
la valeur ellipse signifie que lorsque le texte déborde, une marque d'omission (...) est affichée, et la marque d'omission remplace le dernier caractère ;
valeur ellipse-word signifie que lorsque le texte déborde, la marque d'omission (...) est également affichée. La différence est que la marque d'omission remplace le dernier mot)

3. Par exemple, un morceau de code :
Lorsque vous cliquez sur l'image dans la balise a, il y a un cadre en pointillés, et l'image dans IE a également une bordure, comment le résoudre ?
Solution :
a{outline:none;}//Principalement pour les navigateurs tels que Firefox, mais pas IE
img{border:0;}
a:active{noOutline :expression (this.onFocus=this.blur());}//Résoudre la boîte en pointillé dans IE6 et IE7.

Pour la balise a, la solution généralement simple est :
Ajouter le contrôle js à la balise a Lorsque la balise a est focalisée, le focus est forcé d'être annulé à ce moment-là. la balise a ne sera naturellement pas. Il y aura une boîte en pointillés.

Test
Mais quand il y a trop de connexions, ajoutez ce code une à une Pas pratique

Le retour chariot horizontal dans les deux images en 4.html provoque un espace. Comment puis-je le supprimer et ne pas créer d'espace ?

Par exemple : p width 300px; img width 100px; border:0px;

Le code est le suivant :

< img />

                                                               🎜>
Dans ce cas, il est impossible d'afficher trois images horizontalement car le retour chariot provoque un écart entre les deux images .
La solution est de faire
flotter l'image
.

5. Débordement : solution invalide cachée dans CSS ie6 et ie7

Cause : Lorsque le style de l'élément enfant direct ou de l'élément enfant subordonné de l'élément parent a position :relative

est utilisé, l'attribut overflow:hidden de l'élément parent sera invalide.

Solution :
Nous avons constaté dans IE 6 et 7 que l'élément enfant dépassera la hauteur définie par l'élément parent, même si l'élément parent a overflow:hidden défini. Il est très simple de résoudre ce bug. Utilisez *position:relative; dans l'élément parent pour résoudre le bug6.Table

Le code est la suivante :

7.CSS text-transform

La propriété text-transform contrôle la casse du texte.
Valeurs possibles
Description de la valeur
aucune Valeur par défaut. Texte qui définit les normes avec des lettres minuscules et majuscules.
capitaliser Chaque mot du texte commence par une lettre majuscule.
majuscule définit uniquement les lettres majuscules.
La définition minuscule n'a pas de lettres majuscules, seulement des lettres minuscules.
inherit spécifie que la valeur de l'attribut text-transform doit être héritée de l'élément parent .

8. letter-spacing

la propriété letter-spacing augmente ou diminue l'espace entre les caractères (espacement des caractères).
Par exemple : letter-spacing : 2px;

9.textarea Supprimez la barre de défilement à droite et supprimez le glisser dans le coin inférieur droit

Code :

10. Code de compatibilité de transparence en css : filtre : alpha(opacity=80);opacity:0.8;

11. Selon le type d'entrée Pour contrôler le style CSS

a. Utilisez le sélecteur de type en CSS

input[type="text"] { background-color : #FFC ; }
b. Utilisez l'expression CSS pour juger expression

input{ background-color:expression(this.type=="text"?'#FFC':' '); }
c. Utilisez un script javascript pour implémenter (vous semblez inutile, omettez...)

12 : text-stroke
[text-stroke-width] : définir ou récupérer objet L'épaisseur du trait du texte dans [text-stroke-color] : Définissez ou récupérez la couleur du trait du texte dans l'objet

13 : text-stroke
text-stroke ( trait de texte) et text -fill-color (couleur de remplissage du texte) Remarque :
Actuellement, ces deux attributs ne sont pris en charge que par Safari et Chrune partie du noyau du webkit, par exemple : -webkit-text- trait : 3,3 px #2A75BF ;
text-fill-color : valeur de couleur, qui est presque la même que l'attribut color
Utilisez les attributs text-fill-color et color en même temps, text-fill-. color écrasera la valeur de couleur de l'attribut color ;
text-fill-color peut utiliser des valeurs transparentes, à savoir : text-fill-color : transparent

14:text-shadow
text-shadow:0px 0px 0px #333333 ;
Les valeurs d'attribut sont : déplacement horizontal (prend en charge les valeurs négatives), déplacement vertical (prend en charge les valeurs négatives), rayon de flou, couleur de l'ombre
text-shadow peut définir plusieurs ombres pour le même texte, et box -shadow est similaire, séparé par des virgules ",", l'effet de réglage précédent est au-dessus du dernier effet de réglage.

15. Définir la police

Le code est le suivant :

<style> @font-face</p>
<p>{font-family: myFirstFont;</p>
<p>src: url(&#39;Sansation_Light.ttf&#39;),</p>
<p>    url(&#39;Sansation_Light.eot&#39;); /* IE9+ */}</p>
<p>p{font-family:myFirstFont;}</p>
<p></style>

16. Saut de ligne obligatoire en CSS

Le code est le suivant :

{</p>
<p>
word-break:break-all; /支持IE，chrome，FF不支持/
word-wrap:break-word;/支持IE，chrome，FF/
}

17.CSS :premier-enfant sélecteur,:dernier-enfant sélecteur,:ntième-enfant (IE7,8 n'est pas valide, non reconnu)
:ntième- child(2) sélectionne les premières plusieurs balises, "2 peut être le nombre que vous voulez"
:nth-child(2n) sélectionne les balises paires, 2n peut aussi être pair
:nth-child(2n-1) sélectionne les balises impaires, 2n -1 peut être impair
:nth-child(3n+1) étiquette de sélection personnalisée, 3n+1 signifie "en prendre une sur deux"

CSS3 implémente la couleur d'arrière-plan. gradient

Le code est le suivant :

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o -linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,# FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

Le premier paramètre : Définir la position de départ du dégradé

Le deuxième paramètre : Définir la couleur de la position de départ

Le troisième paramètre : Définir la couleur de la position finale
Navigateur IE

Navigateur IELe dégradé ne peut être obtenu que en utilisant le propre filtre d'IE

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);

Le premier paramètre : la couleur du dégradé position de départ

Le deuxième paramètre : la couleur de la position finale du dégradé

Le troisième paramètre : le type de dégradé

0 représente le dégradé vertical 1 représente le dégradé horizontal
19 IE8 ne reconnaît pas l'écriture rgba

20 couleurs RVB et couleurs HSL de css3
Le principe de la couleur RVB est de former une couleur en définissant différentes valeurs de rouge, vert et bleu. color:rgb(254,2,8);
HSL déclare la couleur via les modes teinte, saturation et luminosité. color:hsl(359,99%,40%);

Si vous devez définir un fond transparent, vous pouvez les utiliser :

background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。

20.初始化em，u的斜体

em,u{
font-style: normal;}

【相关推荐】

1. CSS3免费视频教程

2. h5和css3制作带提示文字的输入框

3. 分享几个常用的最新的css3属性

4. 用CSS制作聊天框小尖角、气泡效果

5. 浏览器实现移动端高性能css3动画

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!