learn-css/11.links.html at main · cesarlpb/learn-css · GitHub

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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links</title>
    <link rel="stylesheet" href="11.links.css">
</head>
<body>
    <h2>Links</h2>
    <p>Este es un link: <a href="https://www.google.com/">ver más</a></p>
    <a href="https://www.google.com/" class="boton">click me</a>

    <h2>Más estilos de enlaces</h2>

    <p><b><a class="one" href="#" target="_blank">This link changes color</a></b></p>
    <p><b><a class="two" href="#" target="_blank">This link changes font-size</a></b></p>
    <p><b><a class="three" href="#" target="_blank">This link changes background-color</a></b></p>
    <p><b><a class="four" href="#" target="_blank">This link changes font-family</a></b></p>
    <p><b><a class="five" href="#" target="_blank">This link changes text-decoration</a></b></p>

    <h2>cursor</h2>

    <p>Mouse over the words to change the cursor.</p>
    <span class="cursor" style="cursor:auto">auto</span><br>
    <span class="cursor" style="cursor:crosshair">crosshair</span><br>
    <span class="cursor" style="cursor:default">default</span><br>
    <span class="cursor" style="cursor:e-resize">e-resize</span><br>
    <span class="cursor" style="cursor:help">help</span><br>
    <span class="cursor" style="cursor:move">move</span><br>
    <span class="cursor" style="cursor:n-resize">n-resize</span><br>
    <span class="cursor" style="cursor:ne-resize">ne-resize</span><br>
    <span class="cursor" style="cursor:nw-resize">nw-resize</span><br>
    <span class="cursor" style="cursor:pointer">pointer</span><br>
    <span class="cursor" style="cursor:progress">progress</span><br>
    <span class="cursor" style="cursor:s-resize">s-resize</span><br>
    <span class="cursor" style="cursor:se-resize">se-resize</span><br>
    <span class="cursor" style="cursor:sw-resize">sw-resize</span><br>
    <span class="cursor" style="cursor:text">text</span><br>
    <span class="cursor" style="cursor:w-resize">w-resize</span><br>
    <span class="cursor" style="cursor:wait">wait</span><br>
</body>
</html>