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"]

4 Geben Sie den Hintergrundstil des letzten p-Tags an

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

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

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

7. Schriftschatten

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

Boxschatten

-moz stellt private Eigenschaften des Firefox-Browsers dar

9

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

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.

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!