Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » No se reflejan las modificaciones de background-color y border-color en enlace

CSS - No se reflejan las modificaciones de background-color y border-color en enlace

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Israel
Val: 66
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

No se reflejan las modificaciones de background-color y border-color en enlace

Publicado por Israel (51 intervenciones) el 08/04/2020 21:56:19
He visto en w3school que entre las propiedades que es posible modificar de los enlaces <a> se encuentra el colo del texto así como el color de fondo y el borde. Lo primero si se modifica, en cuanto a las propiedades "background-color" y "border-color" no.

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hola Alumnos</title>
 
        <style>
            html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
                padding: 0;
                margin: 0;
                font-size: 100%;
                font-weight: normal;
            }
            table { border-collapse: collapse; border-spacing: 0; }
            td, th, caption { font-weight: normal; text-align: left; }
            img, fieldset { border: 0; }
            ol { padding-left: 1.4em; list-style: decimal; }
            ul { padding-left: 1.4em; list-style:square; }
            q:before, q:after { content:''; }
 
 
            a:visited{
                color:red;
                background-color:blue;
                border-color:red;
            }
        </style>
 
    </head>
 
    <body>
 
        <a href="https://www.google.com/" target="_blank">Ve a Google</a>
 
    </body>
</html>

Un saludo y gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de William Atef
Val: 2
Ha aumentado su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

No se reflejan las modificaciones de background-color y border-color en enlace

Publicado por William Atef (1 intervención) el 11/04/2020 01:08:49
Buenas noches. Aquí te dejo la solución.

Básicamente tenías dos errores: 1º: Para asignar valores a un borde en CSS tienes que primero definirlo
2º: No se puede poner un background a un elemento "inline" digamos. No se puede poner background a elementos que sean texto, para eso tienes que situarlos en un div padre con display inline-block, por ejemplo.

He comentado el código para que veas que había que cambiar :) Un saludo

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
<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <title>Hola Alumnos</title>
 
 
 
        <style>
 
            html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 
                padding: 0;
 
                margin: 0;
 
                font-size: 100%;
 
                font-weight: normal;
 
            }
 
            table { border-collapse: collapse; border-spacing: 0; }
 
            td, th, caption { font-weight: normal; text-align: left; }
 
            img, fieldset { border: 0; }
 
            ol { padding-left: 1.4em; list-style: decimal; }
 
            ul { padding-left: 1.4em; list-style:square; }
 
            q:before, q:after { content:''; }
 
 
 
 
 
            a:visited{
 
                color:red;
 
                background-color:blue;
 
                border-color:red;
 
            }
 
            /* RESPUESTA */
 
            a {
                border: 2px solid /* De esta forma declaramos un borde de 2px y con línea sólida(es decir, es un borde lleno, no son lineas de puntos ni nada por el estilo (encontrarás más bordes en W3Schools)) */
            }
 
            div.contenedor_enlace {
                display: inline-block;
                background-color: blue;
            }
 
        </style>
 
 
 
    </head>
 
 
 
    <body>
 
 
        <div class="contenedor_enlace">
            <a href="https://www.google.com/" target="_blank">Ve a Google</a>
        </div>
 
 
    </body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar