Maison >interface Web >tutoriel CSS >Intégrez 20 propriétés CSS/CSS3 courantes

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

Y2Joriginal: 2017-05-23 11:03:002156parcourir

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 : e1b56a1c06f517d8a0e17306668ca118237108f1ef7d7a41515987f25c0284995db79b134e9f6b82c0b36e0489ee08ed
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.

024db780eb8416657e62fa483f255092Test5db79b134e9f6b82c0b36e0489ee08ed
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 :

e388a4556c0f65e1904146cc1a846bee
1eaaf10debc01a4318506e0d001e42db53faedac456a1536a2726f80512ef6d06ed09268cbdd0015bce8dcbbdfa9bfe4
94b3e26ee717c64999d7867364b1b4a3
//La situation ci-dessus montre exactement trois images94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee
🎜>
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 bug 6.Table

Syntaxe

Le code est la suivante :

3c4b6e445bf66979c5bebb6f8f216b29...f16b1740fad44fb09bfe928bcc527e08Position de la table, gauche97aaabdc3e1ae66003636b0a55f0177f...< ;/table> Position du tableau, centré e35788f4c07633c157bccb8a96fb9672...f16b1740fad44fb09bfe928bcc527e08L'URL de l'image d'arrière-plan=est l'URL du chemin

304cdcd847b5821daa11aa798f6ae664...f16b1740fad44fb09bfe928bcc527e08Définir la couleur d'arrière-plan du tableaud97de80c29e17e7894377fdc17bfe300...f16b1740fad44fb09bfe928bcc527e08Définir la couleur de la bordure du tableau
1fb8ae098638c358e22d5f1921ba1eb3...f16b1740fad44fb09bfe928bcc527e08Définir la couleur de la bordure sombre du tableau
d049e7beff2206fc930287a674513079...f16b1740fad44fb09bfe928bcc527e08Définir la couleur de la bordure lumineuse du tableaufd85c7302c31aea5fd661b846dc6f90b. ..f16b1740fad44fb09bfe928bcc527e08 Spécifiez la distance entre le contenu et la grille (utilisez des nombres)
68860378dc0cab27840f576295d167bf...f16b1740fad44fb09bfe928bcc527e08Spécifiez la distance entre la grille et la grille (utilisez des nombres )
< ;table cols=parameters>...f16b1740fad44fb09bfe928bcc527e08Spécifiez le nombre de colonnes dans le tableau
ca7a2072c5cdea6f1e9234b5c7820827...f16b1740fad44fb09bfe928bcc527e08Définissez la méthode d'affichage de le contour du tableau
625671aa16d3271ffded979c119ba518...f16b1740fad44fb09bfe928bcc527e08Spécifiez la largeur du tableau (utilisez des chiffres)5c986e56edf0c0a64f5537785f8c3fbe..f16b1740fad44fb09bfe928bcc527e08Spécifiez la hauteur du tableau (utilisez des nombres)
e33b5ade3a6ac21f238a29bd370df005...b90dd5946f0946207856a8a37f441edfSpécifiez le nombre de colonnes dans la colonne de fusion de cellules (utilisez des nombres)
b901786a6377c9b8e80942735d640559...b90dd5946f0946207856a8a37f441edfSpécifiez le nombre de colonnes dans lesquelles fusionner les cellules (à l'aide de nombres)

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 : 90d745d2c50cb8b1d9bd0212f35ff180 fee6a593242f1bb4d528b906132ca264

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：h5 et CSS3 créent une zone de saisie avec un texte d'inviteArticle suivant：h5 et CSS3 créent une zone de saisie avec un texte d'invite

Articles Liés

Voir plus