Résumer les nouveautés de CSS3 (indispensable pour les entretiens)

Le CSS est un « langage » en constante évolution. C'est un point de connaissance indispensable lorsque nous effectuons des entretiens front-end dans notre vie quotidienne. L'article suivant vous présente principalement le nouveau CSS3 indispensable pour les entretiens front-end. Les informations pertinentes sur les caractéristiques sont présentées de manière très détaillée via un exemple de code. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

Nous vous avons déjà présenté les nouvelles fonctionnalités de html5 En plus des nouvelles fonctionnalités de html5, les nouvelles fonctionnalités de. Les CSS3 sont également des entretiens souvent demandés. Pas grand chose à dire ci-dessous, les amis qui en ont besoin peuvent suivre l'éditeur pour jeter un œil à l'introduction détaillée.

Sélecteur

De nombreux nouveaux sélecteurs ont été ajoutés à CSS3, ce qui résout de nombreux problèmes de mise en page qui nécessitaient auparavant JavaScript.

1. element1~element2 : Sélectionnez chaque élément element2 précédé d'un élément element1.

2. [attribute^=value] : Sélectionnez un élément dont l'attribut attribut commence par valeur.

3. [attribute$=value] : Sélectionnez un élément dont l'attribut attribut se termine par valeur.

4. [attribute*=value] : Sélectionnez un élément dont l'attribut attribut contient la chaîne de valeur.

5. E:first-of-type : sélectionne chaque élément E qui est le premier élément E de son élément parent.

6. E:last-of-type : sélectionne chaque élément E qui est le dernier élément E de son élément parent.

7. E:only-of-type : sélectionne chaque élément E qui est le seul élément E de son élément parent.

8. E:only-child : sélectionne chaque élément E qui est le seul élément enfant de son élément parent.

9. E:nth-child(n) : sélectionne chaque élément E qui est le nième élément enfant de son élément parent.

10. E:nth-last-child(n) : sélectionnez chaque élément E qui est le nième élément enfant à partir du bas de son élément parent.

11. E:nth-of-type(n) : sélectionne chaque élément E qui appartient au nième élément E de son élément parent.

12. E:nth-last-of-type(n) : sélectionnez chaque élément E qui appartient au nième élément E à partir du dernier de son élément parent.

13. E:last-child : Sélectionnez chaque élément E qui est le dernier élément enfant de son élément parent.

14. :root : Sélectionnez l'élément racine du document.

15. E:empty : sélectionne chaque élément E (y compris les nœuds de texte) qui n'a aucun élément enfant.

16. E:target : Sélectionnez l'élément E actuellement actif.

17. E:enabled : sélectionne chaque élément E activé.

18. E:disabled : Sélectionnez chaque élément E désactivé.

19. E:checked : Sélectionnez chaque élément E sélectionné.

20. E:not(selector) : Sélectionnez chaque élément qui n'est pas un élément de sélection.

21. E::selection : Sélectionnez l'élément sélectionné par l'utilisateur.

Transition, Transformation et Animation

Ces trois fonctionnalités sont de nouvelles fonctionnalités liées à l'animation de CSS3.

Transition

La transition ajoute des effets aux éléments lorsqu'ils passent d'un style à un autre sans utiliser d'animations Flash ou JavaScript.

La transition a les propriétés suivantes :

1. transition-property : précise le nom de la propriété CSS qui applique la transition.

2. transition-duration : Spécifie le temps nécessaire pour terminer l'effet de transition.

3. transition-delay : Spécifie quand l'effet de transition commence. La valeur par défaut est 0.

4. transition-timing-function : Spécifie la courbe temporelle de l'effet de transition, la valeur par défaut est "ease", il existe également des fonctions linéaires, easy-in, easy-out, easy-in -out et cubique -bezier et autres types de transition.

5. transition : attribut abrégé, utilisé pour définir quatre attributs de transition en un seul attribut.

Utilisez tous les attributs de transition dans un exemple comme suit :

p {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Firefox 4 */
    -moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;
    /* Safari 和 Chrome */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

Utilisez l'abréviation de l'attribut de transition comme suit :

p {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}

Transform

Transform est utilisé pour appliquer diverses transformations 2D et 3D aux éléments. Cet attribut nous permet de faire pivoter et de mettre à l'échelle des éléments. , déplacer ou incliner et d'autres opérations. L'utilisation est la suivante :

p{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);    /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

Type de transformation

transform peut avoir différents types de transformation, c'est-à-dire des valeurs d'attribut :

1. aucun : La définition n'est pas convertie.

2. matrix(n,n,n,n,n,n) : Définit une transformation 2D à l'aide d'une matrice de six valeurs.

3. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : Définir la transformation 3D , en utilisant une matrice 4x4 de 16 valeurs.

4. translate(x,y) : Définir la transformation de déplacement 2D.

5. translate3d(x,y,z) : Définir la transformation de déplacement 3D.

6. translateX(x) : Définissez la transformation de déplacement, en utilisant simplement la valeur de l'axe X.

7. translateY(y) : Définissez la transformation de déplacement, en utilisant simplement la valeur de l'axe Y.

8. translateZ(z) : Définissez la transformation de déplacement 3D, en utilisant simplement la valeur de l'axe Z.

9. scale(x,y) : définit la transformation de mise à l'échelle 2D.

10. scale3d(x,y,z) : définit la transformation de mise à l'échelle 3D.

11. scaleX(x) : Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe X.

12. scaleY(y) : Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe Y.

13. scaleZ(z) : Définissez la transformation de mise à l'échelle 3D en définissant la valeur de l'axe Z.

14. rotate(angle) : Définissez la rotation 2D et spécifiez l'angle dans les paramètres.

15. rotate3d(x,y,z,angle): 定义3D旋转。

16. rotateX(angle): 定义沿着X轴的3D旋转。

17. rotateY(angle): 定义沿着Y轴的3D旋转。

18. rotateZ(angle): 定义沿着Z轴的3D旋转。

19. skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。

20. skewX(angle): 定义沿着X轴的2D倾斜转换。

21. skewY(angle): 定义沿着Y轴的2D倾斜转换。

22. perspective(n): 为3D转换元素定义透视视图。

浏览器支持

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

Animation

Animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码。使用方法大概如下：

@-webkit-keyframes anim1 { 
   0% { 
        opacity: 0; 
        font-size: 12px; 
   } 
   100% { 
        opacity: 1; 
        font-size: 24px; 
   } 
} 
.anim1p { 
   -webkit-animation-name: anim1 ; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 4; 
   -webkit-animation-direction: alternate; 
   -webkit-animation-timing-function: ease-in-out; 
}

具体用法可以参考教程：CSS3 Animation。

边框

CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。

背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

background-clip

background-clip属性用于确定背景画区，有以下几种可能的属性：

1. background-clip: border-box; 背景从border开始显示

2. background-clip: padding-box; 背景从padding开始显示

3. background-clip: content-box; 背景显content区域开始显示

4. background-clip: no-clip; 默认属性，等同于border-box

通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围。

background-origin

background-clip属性用于确定背景的位置，它通常与background-position联合使用，可以从 border、padding、content来计算background-position（就像background-clip）。

1. background-origin: border-box; 从border开始计算background-position

2. background-origin: padding-box; 从padding开始计算background-position

3. background-origin: content-box; 从content开始计算background-position

background-size

background-size属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

1. background-size: contain; 缩小图片以适合元素（维持像素长宽比）

2. background-size: cover; 扩展元素以填补元素（维持像素长宽比）

3. background-size: 100px 100px; 缩小图片至指定的大小

4. background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

background-break

CSS3中，元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

1. background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）

2. background-break: bounding-box; 把盒之间的距离计算在内；

3. background-break: each-box; 为每个盒子单独重绘背景。

文字效果

word-wrap

CSS3中，word-wrap属性允许您允许文本强制文本进行换行，即这意味着会对单词进行拆分。所有主流浏览器都支持 word-wrap 属性。

p {
    word-wrap:break-word;
}

text-overflow

它与word-wrap是协同工作的，word-wrap设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow则设置或检索当当前行超过指定容器的边界时如何显示。对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。

text-shadow

CSS3中，text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

1. text-fill-color: 设置文字内部填充颜色

2. text-stroke-color: 设置文字边界填充颜色

3. text-stroke-width: 设置文字边界宽度

渐变

CSS3新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变)。具体用法参考教程：CSS3 Gradient

@font-face特性

在CSS3之前，web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上。字体是在 CSS3 @font-face 规则中定义的。Firefox、Chrome、Safari以及Opera支持 .ttf(True Type Fonts)和 .otf(OpenType Fonts)类型的字体。IE9+ 支持新的@font-face规则，但是仅支持 .eot类型的字体(Embedded OpenType)。

在新的@font-face规则中，必须首先定义字体的名称（比如myFont），然后指向该字体文件。
 

如需为HTML元素使用字体，请通过font-family属性来引用字体的名称 (myFont)

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
p{
    font-family:myFirstFont;
}

多列布局

通过CSS3，能够创建多个列来对文本进行布局，IE10和Opera支持多列属性。Firefox 需要前缀-moz-，Chrome和Safari需要前缀-webkit-。主要有如下三个属性：

1. column-count: 规定元素应该被分隔的列数。

2. column-gap: 规定列之间的间隔。

3. column-rule: 设置列之间的宽度、样式和颜色规则

p{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

用户界面

CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。Firefox、Chrome以及Safari 支持resize属性。IE、Chrome、Safari以及Opera支持box-sizing属性。Firefox需要前缀-moz-。
所有主流浏览器都支持outline-offset属性，除了IE。

resize

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

p{
    resize:both; /* none|both|horizontal|vertical; */
    overflow:auto;
}

box-sizing

box-sizing属性可设置的值有content-box、border-box和inherit。

1. content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding)，此属性表现为标准模式下的盒模型。

2. border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (Element width = width)，此属性表现为怪异模式下的盒模型。

outline-offset

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

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!