Skip to content

Commit 6c4ac6b

Browse files
estelleestelle
committed
New files: cascade layers
1 parent 4d69eb3 commit 6c4ac6b

File tree

1 file changed

+96
-0
lines changed

1 file changed

+96
-0
lines changed

‎learn/layers/layer-precedence.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Cascade Layers: layer order</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
@layer A, B;
14+
15+
h1 {
16+
color: orange;
17+
background-color: green;
18+
text-decoration: overline pink !important;
19+
box-shadow: 5px 5px lightgreen !important;
20+
}
21+
22+
@layer A {
23+
h1 {
24+
color: grey;
25+
background-color: black !important;
26+
text-decoration: line-through grey;
27+
box-shadow: -5px -5px lightblue !important;
28+
font-style: normal;
29+
font-weight: normal !important;
30+
}
31+
}
32+
@layer B {
33+
h1 {
34+
color: aqua;
35+
background: yellow !important;
36+
text-decoration: underline aqua;
37+
box-shadow: -5px 5px magenta !important;
38+
font-style: italic;
39+
font-weight: bold !important;
40+
}
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<section class="preview">
47+
<div>
48+
<h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
49+
</div>
50+
</section>
51+
52+
<textarea class="playable playable-css" style="height: 300px;">
53+
@layer A, B;
54+
55+
h1 {
56+
color: orange;
57+
background-color: green;
58+
text-decoration: overline pink !important;
59+
box-shadow: 5px 5px lightgreen !important;
60+
}
61+
62+
@layer A {
63+
h1 {
64+
color: grey;
65+
background-color: black !important;
66+
text-decoration: line-through grey;
67+
box-shadow: -5px -5px lightblue !important;
68+
font-style: normal;
69+
font-weight: normal !important;
70+
}
71+
}
72+
@layer B {
73+
h1 {
74+
color: aqua;
75+
background: yellow !important;
76+
text-decoration: underline aqua;
77+
box-shadow: -5px 5px magenta !important;
78+
font-style: italic;
79+
font-weight: bold !important;
80+
}
81+
}
82+
</textarea>
83+
84+
<textarea class="playable playable-html" style="height: 100px;">
85+
<div>
86+
<h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
87+
</div>
88+
</textarea>
89+
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset">
92+
</div>
93+
</body>
94+
<script src="../playable.js"></script>
95+
96+
</html>

0 commit comments

Comments
 (0)