1

Hola estoy empezando con el desarrollo web y no se mucho al respecto, comencé un proyecto para practicar junto con compañeros y todo iba bien hasta que de repente dejaron de aparecer los cambios que hacia en el CSS, por alguna razón solo se reflejan si cambio de nombre el archivo CSS y por consecuente en el HTML lo enlazo con el nuevo nombre, ya investigue bastante y lo que muchos dicen es que posiblemente sean las medidas erróneas en el CSS, sin embargo he verificado a ojo e incluso me recomendaron una pagina (http://jigsaw.w3.org/css-validator/#validate_by_upload) el cual solo me menciona 1 error, comente la linea para que no se tomara en cuenta y siguió sin detectar nada, no entiendo por que solo cambiando el nombre del CSS y de su enlace en el HTML me deja proseguir con los cambios, dejo mi código para que puedan darme su opinión y si es posible una solución, gracias

@import url('fuentes.css');

*{
    padding: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    /*box-sizing: border-box;*/
}
body{
    background: #F2FAFF;
}
header{
    /*position: relative;*/
    width: 100%;
}
.menu-navegacion{
    display: flex;
    background: #6D94B4;
    padding: 20px;
    height: 50px;
    justify-content: flex-start;
    align-items: center;
}
.menu-navegacion .catalopedia h1{
    font-size: 36px;
    padding-left: 25px;
    font-weight: 400;
}
.menu-navegacion .catalopedia h1 a{
    color: #e6f4f1;
    text-decoration: none;
    font-family: hyeon;
}

.secciones{
    color: #2BADFA;
    font-family: Rajdhani-SemiBold;
    margin-left: 80px;
    background: #E6F4F1;
    font-size: 24px;
    border: none;
    height: 35px;
    padding: 2px 10px;
    border-radius: 5px 0 0 5px;
    outline: none;
    cursor: pointer;
    transition: .20s;
}
.secciones:hover, .fa-search:hover, .fa-shopping-cart:hover{
    background: #2BADFA;
    color: #E6F4F1;
}
.busqueda{
    background: #F0FAFF;
    outline: none;
    border: none;
    border-radius: 0px 0 0 0px;
    font-size: 17px;
    padding-left: 15px;
    width: 55%;
    height: 35px;
}
.fa-search{
    font-size: 24px;
    color: #2BADFA;
    background: #E6F4F1;
    border: none;
    height: 35px;
    width: 60px;
    border-radius: 0 5px 5px 0;
    outline: none;
    cursor: pointer;
    margin-right: 50px;
}
.fa-shopping-cart{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;

    font-size: 24px;
    color: #2BADFA;
    background: #E6F4F1;
    height: 25px;
    width: 25px;
    padding: 21px;
    border-radius: 50%;
    transition: .20s;
}

/*subheader*/

.list-container{
    width: 100%;
    height: 45px;
    background: #2BADF8;

    display: flex;
    justify-content: center;
    align-items: center;
}
.list-container .lists{
    display: flex;
}
.list-container li{
    list-style: none;
}
.list-container li a{
    text-decoration: none;
    font-family: Rajdhani-SemiBold;
    font-size: 24px;
    margin: 0px 100px;
    color: #E6F4F1;
    padding: 7.5px;
}
.list-container li a:hover{
    color: #6B95BC;
    background: #F0FAFF;
}
/*Seccion de productos*/

.productos-container{
    /*background: #000;*/
    width: 90%;
    height: 100px;
    max-width: 800px;
    margin: auto;
}
.productos-container .titulo{
    text-align: center;
    margin-top: 20px;
    color: #000;
    font-size: 20px;
}
.productos-container form{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px;
}
.barra_busqueda{
    width: 70%;
    height: 40px;
    line-height: 40px;
    background: #fff;
    position: 0 20px;
    border-radius: 50px 0 0 50px;
    border: none;
    outline: none;
    padding: 0 20px;
    text-align: center;
    font-size: 19px;
    transition: .3s;
}
.buscar{
    border-radius: 0 50px 50px 0;
    font-size: 19px;
    padding: 0 20px;
    height: 40px;
}
.barra_busqueda:focus{
    font-size: 16px;
}
/* categorias */
.categorias__container .categorias{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.categorias a{
    text-decoration: none;
    margin: 25px 15px;
    color: #858181;
    font-weight: 700;
    font-size: 17px;
    background: #CFC9C9;
    padding: 10px;
    border-radius: 15px;
    transition: .2s;
}
.categorias a.activo, .categorias a:hover{
    color: #000;
    background: #3ADCB4;
    font-size: 20px;
}

/*Grid*/
.imagenes-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    width: 80%;
    margin-left: 10%;
}
.productos__item{
    text-align: center;
}
.productos__img{
    width: 80%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
}
.productos__img:hover{
    opacity: .8;
}
.imagenes-container .productos__item h3{
    text-align: center;
    margin: 3px 0;
}
.imagenes-container .productos__item h3 a{
    color: #2A2727;
    text-decoration: none;
    transition: .2s;
}
.imagenes-container .productos__item h3 a:hover{
    color: #554D4D;

}
.imagenes-container .productos__item p{
    color: #565151;
    font-size: 14px;
    text-align: center;
}

/*Paginacion*/

.paginacion{
    display: flex;
    justify-content: center;
    align-items: center;
}
.paginacion ul{
    list-style: none;
    margin: 20px 0;
}
.paginacion ul li{
    display: inline-block;
    margin-right: 10px;
}
.paginacion ul li a{
    font-size: 18px;
    background: #BFD0E6;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    color: #4B1DC0;
    transition: .2s;

    display: flex;
    justify-content: center;
    align-items: center;
}
.paginacion ul li a:hover, .paginacion ul li a.active{
    background: #62a6c9;
    color: #fff;
}
/*footer*/

footer{
    width: 100%;
    /*height: 500px;*/
}
.footer-container{
    width: 100%;
    background: #6D94B0;
}
.footer-main{
    width: 80%;
    max-width: 1000px;
    margin: auto;
    padding: 15px 0px;

    display: flex;
    flex-wrap: wrap;
}
.footer-main .footer-columna{
    width: calc(100% / 3);
    text-align: justify;
}
.footer-main .footer-columna h3{
    font-size: 28px;
    color: #474553;
    margin-bottom: 15px;
}
.footer-columna p, .footer-columna i{
    margin-bottom: 5px;
}
.footer-columna p .fa-whatsapp{
    color: #00bb2d;
    font-size: 20px;
}
.footer-columna p .fa-facebook-square{
    color: #3b5998;
    font-size: 20px;
}
.footer-columna p .fa-envelope{
    color: #db4a39;
    font-size: 20px;
}
.footer-columna a{
    text-decoration: none;
    color: #524C64;
    padding: 5px;
}
.footer-columna .fa-user-plus{
    font-size: 50px;
    color: #E8E4E4;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: .4s;
}
.footer-columna .fa-user-plus:hover{
    opacity: .5;
    color: #000;
}
.footer-columna .centrar{
    margin: 0 80px;
}
.footer-columna .centrar .fa-address-card{
    font-size: 50px;
    color: #E8E4E4;
    cursor: pointer;
    transition: .4s;
}
.footer-columna .centrar .fa-address-card:hover{
    opacity: .5;
    color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/4226b428c0.js" crossorigin="anonymous"></script>
    <link href="css/estilos.css" rel="stylesheet" type="text/css">
    <title>Catalopedia</title>
</head>
<body>
    <header>
        <nav class="menu-navegacion">
            <div class="catalopedia">
                <h1><a href="#">CATALOPEDIA</a></h1>
            </div>

            <button type="submit" class="secciones">Secciones</button>

            <input type="text" name="busqueda" class="busqueda" placeholder="Buscar">

            <button type="submit" class="icono fa fa-search"></button>

            <button type="submit" class="icono fas fa-shopping-cart"></button>
        </nav>

        <div class="list-container">
            <ul class="lists">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Productos</a></li>
                <li><a href="#">Ofertas</a></li>
                <li><a href="#">Sesión</a></li>
            </ul>
        </div>
    </header>

    <section id="anuncios" class="anuncios">
        <a href="#"><img src="imagenes/anuncios/tupper.jpg"/></a>
    </section>

    <section id="departamentos" class="departamentos">
        <a href="#"><img src="imagenes/departamentos/damas.jpg"/></a>
        <a href="#"><img src="imagenes/departamentos/caballeros.jpg"/></a>
        <a href="#"><img src="imagenes/departamentos/niñas.jpg"/></a>
        <a href="#"><img src="imagenes/departamentos/niños.jpg"/></a>
    </section>

    <aside class="filtros">
        <div class="catalogos">
            <p>LISTA DE CATALOGOS MAS OPCIONES, MAS PRODUCTOS Y TU ELIGES</p>
            <select name="catalogos">
                 <option value="0">Catalogos</option> 
               <option value="1">Tupperware</option> 
               <option value="2">Andre</option> 
               <option value="3">Palacio de Hierro</option>
            </select>
        </div>

        <div class="vendedoras">
            <p>LISTA DE CATALOGOS VENDEDORAS, ENCUENTRA A TU AMIGA DE CONFIANZA</p>
            <input type="text" name="busqueda" placeholder="vendedoras">
            <button type="submit" class="icono fa fa-search"></button>
            
        </div>
    </aside>

    <section id="departamentos" class="slide">
        <a href="#"><img src="imagenes/slide/calzado.jpg"/></a>
        <a href="#"><img src="imagenes/slide/cocina.jpg"/></a>
        <a href="#"><img src="imagenes/slide/ropa.jpg"/></a>
    </section>

    <footer>
        <div class = "contactanos">
            <a href="#"><p>Contactanos</p></a>
            <button class="fab fa-facebook-f">Facebook</button>
            <button class="fab fa-whatsapp">Whatsapp</button>
        </div>

        <div class = "unete">
            <a href="#"><p>Unete a Nosotros</p></a>
            <button class="fas fa-user-plus"></button>
        </div>

        <div class = "nosotros">
            <a href="#"><p>Sobre Nosotros</p></a>
            <button class="fas fa-exclamation-circle"></button>
        </div>
    </footer>
</body>
</html>

5 respuestas 5

3

Lo más probable es que tu navegador esté leyendo los estilos del caché y no del archivo. Borrar el caché del navegador debería solucionar tu problema.

3
  • 2
    Quiero agregar al comentario que "ctrl + F5" (al menos en Chrome y Firefox) sirven para hacer eso de forma más rápida.
    – Ororok
    Commented el 5 sept. 2020 a las 0:03
  • 1
    Cuando se hacen cambios a las hojas de estilo e incluso a los archivos de scripts es un problema típico con todos los navegadores que muestren el caché y no lo que se hizo. Incluso algunas veces no muestran ni los cambios en el html. La solución es borrar el historial reciente y luego el socorrido F5 ya que en muchos casos, luego de varios F5 uno llega a creer que está haciendo algo mal. Nota a mi me ha ocurrido con chromiun que no basta con borrar varias veces los historiales.
    – quevedo
    Commented el 5 sept. 2020 a las 18:51
  • 1
    Nota adicional: Mientras estés en modo de desarrollo incluye esta directiva meta en <head> <meta name="cache-control" content="no-cache"> ayuda pero no es suficiente pues muchas veces es ignorada por los navegadores.
    – quevedo
    Commented el 5 sept. 2020 a las 18:57
1

Como ya menciono Ortiz es probable que el navegador lea el archivo css desde el caché. Esto lo hacen los navegadores para agilizar el tiempo de carga de una pagina. Y funciona bien cuando una pagina ya esta en linea, pues una vez que entraste a una pagina estos archivos se quedan en el caché tu maquina y ya no es necesarios descargarlos de nuevo.

Pero para el desarrollo esto es un problema. Una forma de evitar tener que borrar el caché periódicamente es usar js para cargar tus archivos css con el atributo ?dev asignado aleatoria mente. Esto lo logramos agregando el siguiente script en el head de tu archivo index.html

  <script>           
        // Obtener el head
        var head = document.getElementsByTagName('HEAD')[0];  
  
        // Crear un elemento link
        var link = document.createElement('link'); 
  
        // Definir los atributos para el elemento link 
        link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'css/estilos.css?dev='+Math.floor(Math.random()*100);  
  
        // Agregar el elemento link al head 
        head.appendChild(link);  
    </script>

Así quedaría tu archivo index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/4226b428c0.js" crossorigin="anonymous"></script>
      <script>           
            // Obtener el head
            var head = document.getElementsByTagName('HEAD')[0];  

            // Crear un elemento link
            var link = document.createElement('link'); 

            // Definir los atributos para el elemento link 
            link.rel = 'stylesheet';  

            link.type = 'text/css'; 

            link.href = 'css/estilos.css?dev='+Math.floor(Math.random()*100);  

            // Agregar el elemento link al head 
            head.appendChild(link);  
        </script>
    <!-- <link href="css/estilos.css" rel="stylesheet" type="text/css"> -->
    <title>Catalopedia</title>
</head>
<body>
    <header>
        <nav class="menu-navegacion">
            <div class="catalopedia">
                <h1><a href="#">CATALOPEDIA</a></h1>
            </div>

            <button type="submit" class="secciones">Secciones</button>

            <input type="text" name="busqueda" class="busqueda" placeholder="Buscar">

            <button type="submit" class="icono fa fa-search"></button>

            <button type="submit" class="icono fas fa-shopping-cart"></button>
        </nav>

        <div class="list-container">
            <ul class="lists">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Productos</a></li>
                <li><a href="#">Ofertas</a></li>
                <li><a href="#">Sesión</a></li>
            </ul>
        </div>
    </header>

    <section id="anuncios" class="anuncios">
        <a href="#"><img src="imagenes/anuncios/tupper.jpg"/></a>
    </section>

    <section id="departamentos" class="departamentos">
        <a href="#"><img src="imagenes/departamentos/damas.jpg"/></a>
        <a href="#"><img src="imagenes/departamentos/caballeros.jpg"/></a>
        <a href="#"><img src="imagenes/departamentos/niñas.jpg"/></a>
        <a href="#"><img src="imagenes/departamentos/niños.jpg"/></a>
    </section>

    <aside class="filtros">
        <div class="catalogos">
            <p>LISTA DE CATALOGOS MAS OPCIONES, MAS PRODUCTOS Y TU ELIGES</p>
            <select name="catalogos">
                 <option value="0">Catalogos</option> 
               <option value="1">Tupperware</option> 
               <option value="2">Andre</option> 
               <option value="3">Palacio de Hierro</option>
            </select>
        </div>

        <div class="vendedoras">
            <p>LISTA DE CATALOGOS VENDEDORAS, ENCUENTRA A TU AMIGA DE CONFIANZA</p>
            <input type="text" name="busqueda" placeholder="vendedoras">
            <button type="submit" class="icono fa fa-search"></button>
            
        </div>
    </aside>

    <section id="departamentos" class="slide">
        <a href="#"><img src="imagenes/slide/calzado.jpg"/></a>
        <a href="#"><img src="imagenes/slide/cocina.jpg"/></a>
        <a href="#"><img src="imagenes/slide/ropa.jpg"/></a>
    </section>

    <footer>
        <div class = "contactanos">
            <a href="#"><p>Contactanos</p></a>
            <button class="fab fa-facebook-f">Facebook</button>
            <button class="fab fa-whatsapp">Whatsapp</button>
        </div>

        <div class = "unete">
            <a href="#"><p>Unete a Nosotros</p></a>
            <button class="fas fa-user-plus"></button>
        </div>

        <div class = "nosotros">
            <a href="#"><p>Sobre Nosotros</p></a>
            <button class="fas fa-exclamation-circle"></button>
        </div>
    </footer>
</body>
</html>

Una vez termines con la edición y antes de publicar tu pagina asegúrate de borrar este script y agregar el link normalmente.

1

Para comprobar si es caché antes de tocar codigo, puedes probar dos cosas:

  • Entrar en incógnito
  • Usar otro navegador (por ejemplo si usas chrome abre ahora firefox)

Si ves que ahora si se ven los estilos ya sabes que es caché

Puedes instalar una extensión para chrome que te refresca la página borrando caché

0
  1. Prueba poniendo el Link CSS al final del HTMl
  2. Comprueba que esten bien escritos los nombres de los archivos
  3. Fijate si la etiqueta src está bien
  4. Si nada de eso funciona, cierra y abre el proyecto ya que quizás es un Bug

PD: Si estás haciendo un proyecto con amigos te recomienda que busques acerca de GIT y Github. Saludos

0

A partir del contenedor:

<section id="anuncios" class="anuncios">
    <a href="#"><img src="imagenes/anuncios/tupper.jpg"/></a>
</section>

No veo que tengas declarado css para tus ID o Clases en tu HTML y asi hasta llegar al footer, no se si el css que colocaste está completo, o en su defecto debiste haber borrado algún bloque grande por error, a menos que lo estés declarando en el archivo:

@import url('fuentes.css');

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.