Partage d'expérience sur la technologie CSS3 de développement front-end

Récemment, j'ai résumé certaines connaissances sur le front-end pour faciliter ma propre révision à l'avenir, et aussi les partager avec tout le monde, en espérant que tout le monde évitera les détours. Cet article résume principalement les connaissances pertinentes en CSS3. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

1. Définir la police (compatible avec tous les navigateurs)

@font-face {
font-family: 'iconfont';
src: url("fonts/iconfont/iconfont.eot");
src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont/iconfont.ttf") format("truetype"), 
url("fonts/iconfont/iconfont.woff") format("woff"),
 url("fonts/iconfont/iconfont.svg#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
@font-face { font-family : name ; src : url( url ) ; sRules }

Instructions :

nom : Nom de la police

url : spécifiez les polices OpenType à l'aide d'adresses absolues ou relatives

sRules : définitions de feuilles de style

Définissez les polices intégrées dans les documents HTML.

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

2. div[class^="test"]

Définissez la couleur d'arrière-plan de tous les éléments div dont la valeur d'attribut de classe commence par "test" :

div[class^="test"]
{
background:#ffff00;
}

3. [class*="abc"]

La valeur de la classe contient l'élément "abc".

div[class*="abc"]

représente uniquement le style avec class=abc dans le div

4 Spécifiez le style d'arrière-plan de la dernière balise p

p:last-child{ background:#ff0000;}

<.>

5. Afficher abc (CSS3) lorsque la résolution du périphérique d'affichage est minimale de 768 et maximale de 979

@media (min-width: 768px) and (max-width: 979px) {
.abc{}
}

ie6-ie9 prend en charge

<style>
@media screen and (min-width: 1201px) {
.y-row {
width: 1200px;
border:1px solid #333; height:300px;
min-width: 1200px; } }
@media screen and (max-width: 1200px) {
.y-row {
width: 900px;
border:1px solid #333; height:300px;
min-width: 900px; } }
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

6. div > ; span (non pris en charge par IE6)

div > span{font 12px>

Le style span fils dans la balise div est la police 12px, et le la durée des petits-enfants au sein du div ne fonctionne pas, avec la priorité

7 Font shadow

.blue { background:#01dbff;2px 2px 2px #09a5ef; ;🎜>

Police de l'ombre Distance gauche, distance inférieure, plage de distance de l'ombre, couleur de l'ombre

arrière-plan de la police + ombre de la police

8. Ombre de la boîte

-moz-border-radius :0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset;

-moz représente les propriétés privées du navigateur Firefox

- ms représente les propriétés privées du navigateur IE

-webkit représente les propriétés privées de Chrome et Safari

-o représente le navigateur Opera Apple

paramètres

border- radius:0px 5px 5px 0px; représente les cercles supérieur droit et inférieur droit de la bordure. Le coin est 5px

box-shadow:0px 0px 1px #fff inset signifie que l'espacement de la bordure est de 0 à gauche et de 0. vers le haut et 1px. La plage d'ombre est blanche

Avoir un encart signifie que l'ombre dans la boîte n'est pas Avec l'encart représente l'ombre à l'extérieur de la boîte

Remarque : box-shadow:0px. 0px 1px #fff

Lorsque la première valeur est 0, cela signifie que l'ombre des bordures gauche et droite est de 1px

La première valeur est un entier positif représentant l'ombre de la gauche border

La première valeur est un entier négatif représentant l'ombre de la bordure droite

De même

La deuxième valeur est 0 représentant l'ombre de la bordure haut et bas

La deuxième valeur est un entier positif représentant la distance de l'ombre de 1 px à partir de la bordure supérieure

La première valeur est un entier négatif représentant le paramètre d'ombre de la bordure inférieure

cercle de rayon de bordure angulaire

9. :first-letter

p:first-letter{font-size:20px>

représente le premier de la balise p. la taille de la police est de 20px

10. div:first-line { color:red;font-size:16px; }

signifie la première ligne de texte du DIV. est rouge La police est 16px

11. p a:first-child { color: green }

représente le premier lien hypertexte dans la zone p. vert

12. p:before { content: "Je suis ici" }

représente l'ajout d'un élément de contenu avant l'objet balise p : "Je suis ici"

13. table:after { content: END OF TABLE >

signifie afficher le contenu « FIN OF TABLE » après l'objet table

.

14. Côlon simple et double côlon

Le pseudo-élément se compose d'un double côlon et du nom du pseudo-élément. Le double deux-points a été introduit dans la spécification actuelle pour distinguer les pseudo-classes des pseudo-éléments. Cependant, les pseudo-classes sont compatibles avec les styles existants et les navigateurs doivent en même temps prendre en charge les anciennes pseudo-classes, telles que :first-line, :first-letter, :before, :after, etc.

Vous pouvez désormais répondre entièrement à la question dans le titre. Pour les pseudo-éléments qui existaient avant CSS2, tels que :before, les deux points simples et doubles ::before ont le même effet.

Ainsi, si votre site Web doit uniquement être compatible avec webkit, Firefox, Opera et d'autres navigateurs, il est recommandé d'utiliser la méthode d'écriture à deux points pour les pseudo-éléments. Il est préférable d'utiliser la méthode d'écriture CSS2 avec deux points simples.

15. .uploader input[type=file]{}

signifie que la classe est un téléchargeur et que l'attribut de balise d'entrée dans la zone est stylisé comme type=file

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!