Erfahrungsaustausch in der Front-End-Entwicklung mit CSS3-Technologie

Vor kurzem habe ich einige Kenntnisse im Frontend zusammengefasst, um meine eigene Überprüfung in Zukunft zu erleichtern, und teile sie auch mit allen, in der Hoffnung, dass jeder Umwege vermeidet. Dieser Artikel fasst hauptsächlich das relevante Wissen in CSS3 zusammen. Freunde in Not können darauf zurückgreifen.

1. Schriftart festlegen (kompatibel mit allen Browsern)

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

Anleitung:

Name: Schriftartname

URL: Verwenden Sie absolute oder relative Adressen, um OpenType-Schriftarten anzugeben

sRegeln: Stylesheet-Definitionen

Legen Sie die in HTML-Dokumente eingebetteten Schriftarten fest.

@font-face { Schriftfamilie: verträumt; Schriftstärke: src: url(http://www.example.com/font.eot); 🎜>2. div[class^="test"]

Legen Sie die Hintergrundfarbe aller div-Elemente fest, deren Klassenattributwert mit „test“ beginnt:

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

3. [class*="abc"]

Der Wert von class enthält das Element „abc“.

div[class*="abc"]

stellt nur den Stil mit class=abc im div dar

4 Geben Sie den Hintergrundstil des letzten p-Tags an

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

5. Anzeige Wenn die Geräteauflösung mindestens 768 und maximal 979 beträgt, wird abc (CSS3) angezeigt

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

ie6-ie9 unterstützt

<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 (von IE6 nicht unterstützt)

div > span{font 12px}

Der Son-Span-Stil innerhalb des div-Tags ist Schriftart 12px, der Enkel-Span innerhalb des div nicht Arbeit und hat Priorität

7. Schriftschatten

.blue { background:#01dbff; 🎜>Schattenschrift links Abstand unten Schattenabstand Bereich Schattenfarbe

Schrifthintergrund + Schriftschatten

Boxschatten

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

-moz stellt private Eigenschaften des Firefox-Browsers dar

-ms stellt private Eigenschaften des IE-Browsers dar

-webkit stellt private Chrome- und Safari-Eigenschaften dar

-o stellt Opera-Browser-

-Einstellungen dar

border-radius:0px 5px 5px 0px bedeutet die abgerundeten Ecken oben rechts und unten rechts des Randes sind 5px

box-shadow:0px 0px 1px #fff inset; der Randabstand beträgt 0 nach links, 0 nach oben und 1px. Der Schattenbereich ist weiß >Mit Einschub bedeutet es den Schatten innerhalb der Box ohne Einschub, also den Schatten außerhalb der Box

Hinweis: box-shadow:0px 0px 1px #fff

Wenn der erste Wert 0 ist Dies bedeutet, dass der Schatten des linken und rechten Randes einen Bereich von 1 Pixel hat.

Der erste Wert ist eine positive ganze Zahl. Der linke Randschatten.

Der erste Wert ist eine negative ganze Zahl, die den rechten Randschatten darstellt

Ähnlich

Der zweite Wert ist 0 und stellt die oberen und unteren Randschatten dar

Der zweite Wert ist eine positive Ganzzahl, die den Abstand des 1-Pixel-Schattens vom oberen Rand darstellt

Der erste Wert ist eine negative Ganzzahl, die die Einstellung für den unteren Randschatten darstellt

Randradius abgerundete Ecken

9

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

bedeutet, dass die Größe des ersten Wortes im p-Tag 20px beträgt

10 { color:red;font-size:16px; }

bedeutet, dass die erste Textzeile im DIV rot ist und die Schriftart 16px beträgt

11. first-child { color: green }

stellt den ersten a-Hyperlink im p-Feld dar. Die Schriftfarbe ist grün

12. Ich bin hier“ }

stellt das Hinzufügen eines Inhalts vor dem p-Tag-Objekt dar: „Ich bin hier“

13. table:after { content: END OF TABELLE }

bedeutet, dass der Inhalt „ENDE DER TABELLE“ nach dem Tabellenobjekt angezeigt wird

14 Pseudoelemente bestehen aus Doppelpunkten und dem Namen des Pseudoelements. Der Doppelpunkt wurde in der aktuellen Spezifikation eingeführt, um Pseudoklassen von Pseudoelementen zu unterscheiden. Pseudoklassen sind jedoch mit vorhandenen Stilen kompatibel und Browser müssen gleichzeitig alte Pseudoklassen unterstützen, z. B. :first-line, :first-letter, :before, :after usw.

Jetzt können Sie die Frage im Titel vollständig beantworten. Bei Pseudoelementen, die vor CSS2 existierten, wie z. B. :before, haben der einzelne Doppelpunkt und der doppelte Doppelpunkt::before den gleichen Effekt. Wenn Ihre Website also nur mit Webkit, Firefox, Opera und anderen Browsern kompatibel sein muss, wird empfohlen, für Pseudoelemente die Doppelpunkt-Schreibmethode zu verwenden. Wenn sie mit dem IE-Browser kompatibel sein muss, ist dies der Fall Es ist besser, die CSS2-Methode zum Schreiben mit einem Doppelpunkt zu verwenden.

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

bedeutet, dass die Klasse „Uploader“ ist und das Eingabe-Tag-Attribut im Feld als „type=file“ formatiert ist 🎜>

Das obige ist der detaillierte Inhalt vonErfahrungsaustausch in der Front-End-Entwicklung mit CSS3-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!