Organisieren Sie die Überprüfungsnotizen von HTML CSS3, die Sie zuvor gelernt haben

1. Neue Funktionen von HTML5

Häufig verwendete semantische Tags: Navigations-Fußzeilen-Kopfzeilenabschnittsmarkierung

Funktionstag Video Audio Iframe Canvas (Leinwand und Zeichenfunktion)

Geben Sie einen neuen Typ ein: URL/Nummer/Bereich/Datum (Datum, Monat, Woche, Uhrzeit usw.)/Suche/Farbe

2. CSS3

1 Rand

border-radius: verschiedene Zuweisungsmethoden

Box-Shadow:10px 10px 5px rot;

Rahmenbild: Aufgabeninhalt

border-image-source Der Pfad zu dem im Rahmen verwendeten Bild.

border-image-slice Der Bildrand wird nach innen versetzt.

border-image-width Die Breite des Bildrandes.

border-image-outset Der Betrag, um den der Randbildbereich über den Rand hinausragt.

border-image-repeat

Ob der Bildrand wiederholt, abgerundet oder gestreckt werden soll.

Hinweise: IE9 unterstützt border-radius und box-shadow .

IE11, Firefox, Opera 15, Chrome und Safari 6 unterstützen das Attribut border-image .

2 Text

text-shadow:5px 5px 5px gelb (die Bedeutung jeder Position)

3 Schriftarten Wir stellen weitere Schriftarten vor

So verwenden Sie @font-face

@font-face{

Schriftfamilie:"Bazaha";

src: url(Chen Daiming Chalk Style Demonstration Version 2.otf);

}

4 Animationen

transformieren:translate(px)/drehen(Grad) /scale(2)/skew()/matrix()

Hinweis: IE10, Firefox- und Opera-Unterstützung Transform Attribut

Chrome und Safari erfordern das Präfix -webkit- Internet Explorer 9 erfordert das Präfix -ms-

5 animierte 3D

transform-origin ermöglicht es Ihnen, die Position des zu transformierenden Elements zu ändern. Zuweisung erfordert die Beherrschung von Schlüsselwörtern!

transform-origin: x-axis y-axis z-axis; // x-axis Definiert, wo die Ansicht auf der X-Achse platziert wird. Mögliche Werte:

transform-style gibt an, wie verschachtelte Elemente im 3D-Raum angezeigt werden!!!

Perspektive!!!

backface-visibility definiert, ob das Element sichtbar ist, wenn es nicht auf den Bildschirm blickt

Rückseitensichtbarkeit: ausgeblendet;

6 Übermäßiger Übergang

Hinweis:

IE10, Firefox, Chrome und Opera unterstützen das Übergangsattribut.

Safari erfordert das Präfix -webkit-.

Hinweis: IE9 und frühere Versionen unterstützen das Übergangsattribut nicht.

Übergangskürzelattribut, das zum Festlegen von vier Übergangsattributen in einem Attribut verwendet wird.

Transition-Property gibt den Namen der CSS-Eigenschaft an, auf die der Übergang angewendet wird.

Die Übergangsdauer definiert, wie lange der Übergangseffekt dauert. Der Standardwert ist 0.

Transition-Timing-Funktion gibt den Zeitverlauf des Übergangseffekts an. Der Standardwert ist „einfach“. Verschiedene Attributwerte müssen bekannt sein.

Transition-Delay gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0.

7-Frame-Animation

zB:

@keyframes myfirst

{

von {Hintergrund: rot;}

zu {Hintergrund: gelb;}

}

8 Flow-Layout Medienabfrage Responsive

Flüssiges Layout: Prozentuales Layout, alle Größen beziehen sich auf das übergeordnete Element. Referenzbreite

Medienabfrage @media screen () und () Responsiv: einheitliches Schreiben im Ansichtsfenster

Beispielhinweis:

Textschatten

Horizontaler Schatten, vertikaler Schatten, Unschärfeabstand und Schattenfarbe

Textschatten: 5px 5px 5px #FF0000;

Die Eigenschaft

box-shadow gilt für box-shadow

Box-Shadow: H-Shadow-Y-Shadow-Unschärfe-Spread-Farbeinsatz;

Position des horizontalen Schattens Position des vertikalen Schattens Unschärfeabstand Größe des Schattens Farbe des Schattens Ändern Sie den inneren Schatten des Schattens vom äußeren Schatten (Anfang)

div{box-shadow: 10px 10px 5px #888888;}

Transformation-Ursprung: x-Achse, y-Achse, z-Achse; x-Achse Definieren Sie, wo auf der X-Achse die Ansicht platziert wird.

Mehrere Spalten

Spaltenanzahl:n;

Spaltenabstand:10px; Abstand

Spaltenregel: 2 Pixel durchgehend rot; //Entspricht dem Randteiler

Größe ändern: keine|beide|horizontal|vertikal;

horizontal Der Benutzer kann die Breite des Elements anpassen.

vertikal Der Benutzer kann die Höhe des Elements anpassen.

div{resize:both;

overflow:auto;

}