-
Notifications
You must be signed in to change notification settings - Fork 1
/
08.text_formatting.html
84 lines (65 loc) · 4.2 KB
/
08.text_formatting.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formato de Texto</title>
<link rel="stylesheet" href="08.text_formatting.css">
</head>
<body>
<h2>Formato de Texto</h2>
<p class="text-left">lorem</p>
<p class="text-center">lorem</p>
<p class="text-right">lorem</p>
<p class="text-justify">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis fuga odio quidem reprehenderit ipsa magnam illo, suscipit distinctio iure tempora inventore architecto, quaerat voluptatem recusandae in rem veniam minima laborum cumque ab hic eligendi quibusdam! Nesciunt illum est officia aliquid voluptate eveniet laboriosam error animi nisi delectus, tenetur natus culpa!</p>
<p class="right">hola</p>
<p class="bdo">Ana lava lana. Ana lleva al oso la avellana. Anita lava la tina. Anula la luna.</p>
<h2>vertical align</h2>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="logo.png" width="10" height="10"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="logo.png" width="10" height="10"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="logo.png" width="10" height="10"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="logo.png" width="10" height="10"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="logo.png" width="10" height="10"> image with a super alignment.</p>
<h2>underline, overline</h2>
<h1><span class="overline">Overline text decoration</span></h1>
<h2 class="line-through">Line-through text decoration</h2>
<h3 class="underline">Underline text decoration p q y j</h3>
<h3 class="underline-2">Underline text decoration p q y j</h3>
<p class="ex">Overline and underline text decoration.</p>
<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses
the reader.</p>
<h2>transform</h2>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>
<h2>Espacios</h2>
<h3 class="letter-spacing">Título con letter-spacing</h3>
<p class="indent">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam non enim deleniti libero ratione dignissimos id nulla pariatur esse maiores perspiciatis similique magni necessitatibus, dolor odit quo voluptas molestiae aperiam.</p>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
<p>This is a paragraph with normal word spacing.</p>
<p class="one">This is a paragraph with larger word spacing.</p>
<p class="two">This is a paragraph with smaller word spacing.</p>
<p class="nowrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit debitis iusto dolore nesciunt suscipit ab quasi dolorum, autem obcaecati ipsum, modi, laborum perferendis? Nesciunt dolorem suscipit velit at similique doloribus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum debitis nulla quam quis impedit corporis reprehenderit, provident eaque quas ab enim, doloremque consequatur minima, ipsum dolorem expedita adipisci excepturi alias.</p>
<h2>shadow</h2>
<p class="shadow-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nostrum!</p>
<p class="shadow-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nostrum!</p>
<p class="shadow-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nostrum!</p>
<p class="shadow-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nostrum!</p>
</body>
</html>