-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchapter16.html
More file actions
166 lines (156 loc) · 5.62 KB
/
chapter16.html
File metadata and controls
166 lines (156 loc) · 5.62 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter 16: CSS Text</title>
<link rel="stylesheet" href="style.css">
<style>
.tag-demo {
margin: 10px 0;
}
.head-demo {
border: 1px solid #ccc;
padding: 10px;
margin: 5px 0;
}
.text-box {
width: 250px;
border: 1px solid #000;
padding: 5px;
margin: 5px 0;
}
</style>
</head>
<body>
<h2 class="chapter-header">Chapter 16: CSS Text</h2>
<!-- Text Rendering -->
<div class="tag-section">
<h3>Text Rendering</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="color:red;">This text is red</p>
<p class="text-box" style="text-decoration-line: line-through;">Line-through</p>
<p class="text-box" style="text-decoration-line: overline underline; text-decoration-color: red;">Overline + Underline</p>
<p class="text-box" style="text-decoration-line: underline; text-decoration-thickness: 5px;">Thick underline</p>
</div>
</div>
</div>
<!-- Text Decoration Style -->
<div class="tag-section">
<h3>Text Decoration Styles</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="text-decoration: underline double;">Double</p>
<p class="text-box" style="text-decoration: underline dotted;">Dotted</p>
<p class="text-box" style="text-decoration: underline dashed;">Dashed</p>
<p class="text-box" style="text-decoration: underline wavy;">Wavy</p>
<p class="text-box" style="text-decoration: underline red wavy 3px;">Shorthand</p>
</div>
</div>
</div>
<!-- Text Transform -->
<div class="tag-section">
<h3>Text Transform</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="text-transform: uppercase;">Uppercase</p>
<p class="text-box" style="text-transform: lowercase;">lowercase</p>
<p class="text-box" style="text-transform: capitalize;">Capitalize First Letter</p>
</div>
</div>
</div>
<!-- White Space -->
<div class="tag-section">
<h3>Handling White Spaces</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="white-space: pre-wrap;">
This text preserves
line breaks and spaces.
</p>
</div>
</div>
</div>
<!-- Text Overflow -->
<div class="tag-section">
<h3>Text Overflow</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="white-space: nowrap; overflow: hidden; text-overflow: clip;">Overflow Clip Example: this text is clipped</p>
<p class="text-box" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Overflow Ellipsis Example: this text will show ...</p>
</div>
</div>
</div>
<!-- Word Wrap -->
<div class="tag-section">
<h3>Word Wrap</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="width:200px; word-wrap: break-word;">
This paragraph has a verylongwordthatneedstobebroken properly.
</p>
</div>
</div>
</div>
<!-- Word Break -->
<div class="tag-section">
<h3>Word Break</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="word-break: keep-all;">
Keep-all: thisisaverylongwordthatdoesnotbreak
</p>
<p class="text-box" style="word-break: break-word;">
Break-word: thisisaverylongwordthatbreaks
</p>
<p class="text-box" style="word-break: break-all;">
Break-all: thisisaverylongwordthatbreakseverywhere
</p>
</div>
</div>
</div>
<!-- Text Spacing -->
<div class="tag-section">
<h3>Text Spacing</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="letter-spacing: -1px;">Letter Spacing -1px</p>
<p class="text-box" style="letter-spacing: 1px;">Letter Spacing 1px</p>
<p class="text-box" style="word-spacing: -5px;">Word Spacing -5px</p>
<p class="text-box" style="word-spacing: 5px;">Word Spacing 5px</p>
<p class="text-box" style="line-height: 80%;">Line Height 80%</p>
<p class="text-box" style="line-height: 2.3;">Line Height 2.3</p>
<div style="height:100px; border:1px solid black; text-align:center; line-height:100px;">Vertically Centered Text</div>
</div>
</div>
</div>
<!-- Text Position -->
<div class="tag-section">
<h3>Text Position</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style="text-align:left;">Left Align</p>
<p class="text-box" style="text-align:center;">Center Align</p>
<p class="text-box" style="text-align:right;">Right Align</p>
<p class="text-box" style="text-align:justify;">Justify Align</p>
<p class="text-box" style="text-indent:30px;">Text Indent 30px</p>
</div>
</div>
</div>
<!-- CSS Fonts -->
<div class="tag-section">
<h3>CSS Fonts</h3>
<div class="tag-demo">
<div class="head-demo">
<p class="text-box" style='font-family: "Helvetica Neue", "Segoe UI", sans-serif;'>Font Family Example</p>
<p class="text-box" style="font-size:2.5rem;">Font Size 2.5rem</p>
<p class="text-box" style="font-weight:bold;">Bold Text</p>
<p class="text-box" style="font-style:italic;">Italic Text</p>
<p class="text-box" style="font-variant:small-caps;">Small Caps Text</p>
<p class="text-box" style="font-family:'Dyna Puff', sans-serif;">@font-face Font Example</p>
</div>
</div>
</div>
</body>
</html>