Fassen Sie die neuen Funktionen von CSS3 zusammen (wichtig für Vorstellungsgespräche)

CSS ist eine „Sprache“, die sich ständig weiterentwickelt. Sie ist ein unverzichtbarer Wissenspunkt, wenn wir in unserem täglichen Leben Interviews führen. Der folgende Artikel stellt Ihnen hauptsächlich das neue CSS3 vor, das für Front-End-Interviews unerlässlich ist. Die relevanten Informationen zu den Merkmalen werden durch Beispielcode ausführlich vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.

Vorwort

Wir haben Ihnen bereits die neuen Funktionen von HTML5 vorgestellt CSS3 wird auch oft in Interviews gefragt. Im Folgenden gibt es nicht viel zu sagen. Freunde in Not können dem Herausgeber folgen, um einen Blick auf die ausführliche Einführung zu werfen.

Selektor

Viele neue Selektoren wurden zu CSS3 hinzugefügt, wodurch viele Layoutprobleme gelöst werden, die zuvor JavaScript erforderten.

1. element1~element2: Wählen Sie jedes Element2-Element aus, dem ein Element1-Element vorangestellt ist.

2. [Attribut^=Wert]: Wählen Sie ein Element aus, dessen Attribut Attribut mit Wert beginnt.

3. [Attribut$=Wert]: Wählen Sie ein Element aus, dessen Attribut Attribut mit Wert endet.

4. [Attribut*=Wert]: Wählen Sie ein Element aus, dessen Attribut Attribut die Wertzeichenfolge enthält.

5. E:first-of-type: Wählt jedes E-Element aus, das das erste E-Element seines übergeordneten Elements ist.

6. E:last-of-type: Wählt jedes E-Element aus, das das letzte E-Element seines übergeordneten Elements ist.

7. E:only-of-type: Wählt jedes E-Element aus, das das einzige E-Element seines übergeordneten Elements ist.

8. E:only-child: Wählt jedes E-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist.

9. E:nth-child(n): Wählt jedes E-Element aus, das das n-te untergeordnete Element seines übergeordneten Elements ist.

10. E:nth-last-child(n): Wählen Sie jedes E-Element aus, das das n-te untergeordnete Element vom unteren Rand seines übergeordneten Elements ist.

11. E:nth-of-type(n): Wählt jedes E-Element aus, das zum n-ten E-Element seines übergeordneten Elements gehört.

12. E:nth-last-of-type(n): Wählen Sie jedes E-Element aus, das zum n-ten E-Element vom letzten seines übergeordneten Elements gehört.

13. E:last-child: Wählt jedes E-Element aus, das das letzte untergeordnete Element seines übergeordneten Elements ist.

14. :root: Wählen Sie das Stammelement des Dokuments aus.

15. E:empty: Wählt jedes E-Element (einschließlich Textknoten) aus, das keine untergeordneten Elemente hat.

16. E:target: Wählen Sie das aktuell aktive E-Element aus.

17. E:aktiviert: Wählt jedes aktivierte E-Element aus.

18. E:disabled: Wählen Sie jedes deaktivierte E-Element aus.

19. E:checked: Wählen Sie jedes ausgewählte E-Element aus.

20. E:not(selector): Wählen Sie jedes Element aus, das kein Selektorelement ist.

21. E::selection: Wählen Sie das vom Benutzer ausgewählte Element aus.

Übergang, Transformation und Animation

Diese drei Funktionen sind neue animationsbezogene Funktionen von CSS3.

Übergang

Übergang fügt Elemente Effekte hinzu, wenn sie von einem Stil zu einem anderen übergehen, ohne Flash-Animationen oder JavaScript zu verwenden.

Übergang hat die folgenden Eigenschaften:

1. transition-property: Gibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet.

2. Übergangsdauer: Gibt an, wie lange es dauert, bis der Übergangseffekt abgeschlossen ist.

3. Übergangsverzögerung: Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.

4. Übergangs-Timing-Funktion: Gibt die Zeitkurve des Übergangseffekts an, der Standardwert ist „ease“, es gibt auch linear, Ease-in, Ease-out, Ease-in -out und kubisch -bezier und andere Übergangstypen.

5. Übergang: Kurzschriftattribut, das zum Festlegen von vier Übergangsattributen in einem Attribut verwendet wird.

Verwenden Sie alle Übergangsattribute in einem Beispiel wie folgt:

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;
}

Verwenden Sie die Abkürzung des Übergangsattributs wie folgt:

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;
}

Transformation

Transformation wird verwendet, um verschiedene 2D- und 3D-Transformationen auf Elemente anzuwenden ., Bewegen oder Neigen und andere Vorgänge. Die Verwendung ist wie folgt:

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 */
}

Transformationstyp

Transformation kann verschiedene Transformationstypen haben, d. h. Attributwerte:

1. none: Die Definition wird nicht konvertiert.

2. matrix(n,n,n,n,n,n): Definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten.

3. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3D-Transformation definieren , unter Verwendung einer 4x4-Matrix mit 16 Werten.

4. translate(x,y): 2D-Verschiebungstransformation definieren.

5. translate3d(x,y,z): Definieren Sie die 3D-Verschiebungstransformation.

6. translateX(x): Definieren Sie die Verschiebungstransformation, indem Sie einfach den Wert der X-Achse verwenden.

7. translateY(y): Definieren Sie die Verschiebungstransformation, indem Sie einfach den Wert der Y-Achse verwenden.

8. translateZ(z): Definieren Sie die 3D-Verschiebungstransformation, indem Sie einfach den Wert der Z-Achse verwenden.

9. scale(x,y): Definieren Sie die 2D-Skalierungstransformation.

10. scale3d(x,y,z): Definieren Sie die 3D-Skalierungstransformation.

11. scaleX(x): Definieren Sie die Skalierungstransformation, indem Sie den Wert der X-Achse festlegen.

12. scaleY(y): Definieren Sie die Skalierungstransformation, indem Sie den Wert der Y-Achse festlegen.

13. scaleZ(z): Definieren Sie die 3D-Skalierungstransformation, indem Sie den Wert der Z-Achse festlegen.

14. rotate(angle): Definieren Sie die 2D-Rotation und geben Sie den Winkel in den Parametern an.

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属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

Das obige ist der detaillierte Inhalt vonFassen Sie die neuen Funktionen von CSS3 zusammen (wichtig für Vorstellungsgespräche). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!