CSS No se carga correctamente
Publicado por Axel Juan (1 intervención) el 17/01/2021 20:31:23
Hola a todos, hace años que no programo y no sé qué estoy haciendo mal.
Estoy en un gran dilema con CSS.
Resulta que quiero que mi página se muestre con una imagen de fondo, y letras blancas.
PROBLEMA:
Si cargo el CSS con <link href="..."> la imagen de fondo y las letras blancas nunca se cargan.
https://prnt.sc/x1timj
Pero si copio/pego la misma fuente de mi archivo css dentro del tag <style>...</style>, la imagen de fondo y los colores se cargan correctamente PERO el texto se ve alineado a la izquierda.
https://prnt.sc/x1u0c3
Me gustaria entender por qué pasa esto.
Código de ejemplo1:
https://prnt.sc/x1timj
Codigo de ejemplo 2:
https://prnt.sc/x1u0c3
En un ejemplo 3, dio como resultado exactamente lo mismo que en ejemplo 1:
https://prnt.sc/x1timj
CUAL ES EL PROBLEMA CON CSS en 2021??????????????
Aclaro que estoy usando Chrome ULTIMA VERSION, actualizado, reinicié la compu, reinicié el server, reinicié el router, borré caché, historial, etc (todas las soluciones noob que sugieren en los foros).
PD: Quiero aclarar una cosa más:
No importa si utilizo una URL relativa o absoluta para importar el style.css, el resultado es el mismo.
O sea,
produce lo mismo que:
y también probé cerrando el tag link de diferentes maneras:
TAMBIEN PROBÉ AGREGARLE EL ATRIBUTO type="text/css".
PD 2:
Revisé los permisos de mi archivo style.css y son correctos.
Estoy en un gran dilema con CSS.
Resulta que quiero que mi página se muestre con una imagen de fondo, y letras blancas.
PROBLEMA:
Si cargo el CSS con <link href="..."> la imagen de fondo y las letras blancas nunca se cargan.
https://prnt.sc/x1timj
Pero si copio/pego la misma fuente de mi archivo css dentro del tag <style>...</style>, la imagen de fondo y los colores se cargan correctamente PERO el texto se ve alineado a la izquierda.
https://prnt.sc/x1u0c3
Me gustaria entender por qué pasa esto.
Código de ejemplo1:
https://prnt.sc/x1timj
1
2
3
4
5
6
7
8
9
10
11
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{hx_description}">
<meta name="keywords" content="{hx_keywords}">
<link href="theme/css/normalize.css" rel="stylesheet">
<link href="http://axelmod.great-site.net/l4d2/theme/css/style.css" rel="stylesheet" >
<!-- <title></title> --></head>
Codigo de ejemplo 2:
https://prnt.sc/x1u0c3
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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{hx_description}">
<meta name="keywords" content="{hx_keywords}">
<link href="theme/css/normalize.css" rel="stylesheet">
<!-- <link href="http://axelmod.great-site.net/l4d2/theme/css/style.css" rel="stylesheet" > --> <!-- <title></title> --><style type="text/css">
body{font-family:"Arial", "Helvetica", "sans-serif", "Verdana";
color: #FFFFFF;
font-size:18px;
background-color: black;
background-image: url("http://axelmod.great-site.net/l4d2/theme/img/spacewarp.gif");
background-attachment: scroll;
background-repeat: no-repeat;
background-size: 100% 100%;
} container{max-width:650px;
min-width:250px;
margin:0 auto; }.container button{
border:0;background:#fff;
margin-left:3px;
}.container button:hover{
color:#0015ff;
text-decoration:underline;
}.container h2{
font-size:20px;
line-height:40px;
margin-bottom:0;
}.container a{
color: white;line-height:40px;
text-decoration:none;
}.container a:hover{
color: white;text-decoration:underline;
}</style>
</head>
En un ejemplo 3, dio como resultado exactamente lo mismo que en ejemplo 1:
https://prnt.sc/x1timj
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{hx_description}">
<meta name="keywords" content="{hx_keywords}">
<link href="theme/css/normalize.css" rel="stylesheet">
<!-- <link href="http://axelmod.great-site.net/l4d2/theme/css/style.css" rel="stylesheet" > --> <!-- <title></title> --><style type="text/css">
@import url("http://axelmod.great-site.net/l4d2/theme/css/style.css");
</style>
</head>
CUAL ES EL PROBLEMA CON CSS en 2021??????????????
Aclaro que estoy usando Chrome ULTIMA VERSION, actualizado, reinicié la compu, reinicié el server, reinicié el router, borré caché, historial, etc (todas las soluciones noob que sugieren en los foros).
PD: Quiero aclarar una cosa más:
No importa si utilizo una URL relativa o absoluta para importar el style.css, el resultado es el mismo.
O sea,
1
<link href="http://axelmod.great-site.net/l4d2/theme/css/style.css" rel="stylesheet" >
1
<link href="theme/css/style.css" rel="stylesheet" >
y también probé cerrando el tag link de diferentes maneras:
1
2
<link href="theme/css/style.css" rel="stylesheet" />
<link href="theme/css/style.css" rel="stylesheet"></link>
TAMBIEN PROBÉ AGREGARLE EL ATRIBUTO type="text/css".
PD 2:
Revisé los permisos de mi archivo style.css y son correctos.
Valora esta pregunta
0
