-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-font-text-practise.html
116 lines (110 loc) · 2.99 KB
/
css-font-text-practise.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
/* 只能在这里写css，不能改变页面的HTML结构 */
h1 {
text-shadow:
0.5px 0.5px #808080,
1px 1px #808080,
1.5px 1.5px #808080,
2px 2px #808080,
2.5px 2.5px #808080;
}
h1 span {
color: blue;
}
h3 {
color: white;
font-size: 50px;
text-shadow:
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red,
0px 0px 1px red;
}
.b {
font-size: 36px;
}
.b > input {
width: 10em;
font-size: inherit;
font-family: serif;
text-transform: uppercase;
}
h2 {
font-variant: small-caps;
text-transform: capitalize;
font-family: 'Courier New', Courier, monospace;
}
.a {
font-size: 32px;
font-style: italic;
text-align: right;
}
b, b>span {
color: rgb(255, 0, 255);
text-decoration: underline red;
}
.a>span {
text-decoration:line-through underline;
}
.d {
text-align: justify;
text-indent: 2em;
line-height: 200%;
word-spacing: 0.5em;
letter-spacing: 0.35em;
}
.c span {
font-size: 1.5em;
}
.f {
white-space: pre;
}
</style>
</head>
<body>
<h1>大<span>喵</span></h1>
<h3>大<span>喵</span></h3>
<p class="b">
请输入序列号：
<input placeholder="我的字号会跟外面一样大" type="text"><br>
</p>
<h2>
'Returnal' players need to take a break before a bug eats their save files
'篝火'玩家需要在游戏的 bug 吃掉他们的存档之前先休息一下
</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure <b>aaa <span>suscipit</span> aaa</b> doloremque magnam delectus, reiciendis architecto ipsam nihil numquam <span>nesciunt sapiente, accusantium, dolore.</span> Culpa repudiandae incidunt delectus. Officia, veritatis voluptas accusantium.</p>
<p class="d">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, autem, ad. Quos fugit quam, vitae doloribus quo quisquam aut iure! Exercitationem ea in voluptatibus a, perspiciatis libero, eum quod? Et!</p>
<p class="c">
<span>aa <span>bb <span>cc <span></span>dd</span></span></span>
</p>
<div class="f">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Cumque,
quibusdam cupiditate ratione dolore nihil dolores,
consequuntur aliquam voluptas expedita minima labore,
a sapiente fuga magni voluptatibus porro cum eius tempore.
</div>
</body>
</html>