Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Cambiar el color de un link [bootstrap]

  1. #1
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    17 jul, 21
    Mensajes
    1
    Poder de Reputación
    0

    Angry Cambiar el color de un link [bootstrap]

    Hola !! Necesito ayuda. En una web que estoy haciendo tengo mi header con bootstrap pero los links me quedan en color azul. Puse todas las clases posibles en css para que me queden en negro (que es el color que tiene que ser) y aun no cambia.

    Este es mi html:

    <header class="header">

    <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="index.html"><img src="Vectores/Logo1.png"></a>
    </nav>

    <div class="container">
    <ul class="nav justify-content-end">
    <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="nosotros.html">Nosotros</a>
    </li>
    <li class="nav-item">
    <a class="nav-link active" href="quehacemos.html">¿Qué hacemos?</a>
    </li>
    <li class="nav-item">
    <a class="nav-link active" href="contacto.html">Contacto</a>
    </li>
    </ul>
    </div>

    </header>

    Y este es mi css:

    .header {
    color:black;
    background-color:rgb(240, 241, 243);
    top: 0;
    position: fixed;
    z-index: 100;
    margin-left: 50px;
    padding: 10px;
    width: 100%;
    font-size: 18px;
    display: flex;
    align-items: center;
    text-decoration: none;
    }


    Alguien sabe?!? Gracias!

  2. #2
    Recien Llegado! Habitante
    Fecha de Ingreso
    13 jul, 21
    Mensajes
    16
    Poder de Reputación
    1
    Estás cambiando las propiedades del header, no las de los links. Estos tienen un estilo por defecto, que predomina por encima de los estilos de los elementos que tiene por encima, sus contenedores.
    En CSS siempre las reglas más específicas pisan las reglas más genéricas. Soluciones:

    1. Puedes dar un estilo a todos los enlaces de tu sitio web:

    a {
    color:black;
    text-decoration: none;
    }


    2. Puedes dar estilo a todos los links que estén dentro del header

    header a {
    color:black;
    text-decoration: none;
    }


    o usando la clase "header":

    .header a {
    color:black;
    text-decoration: none;
    align-items: center;
    font-size: 18px;
    }


    3. Si no funciona, puedes ser aún más específico:

    Ej: Links que sean hijos directos de un li, que sea hijo directo de un ul, que sea hijo directo de un nav, que sea hijo directo de un div con clase "container"

    div.container > nav > ul > li > a {
    color:black;
    text-decoration: none;
    align-items: center;
    font-size: 18px;
    }


    O usa la clase de tus links:

    a.nav-link {
    color:black;
    text-decoration: none;
    align-items: center;
    font-size: 18px;
    }


    PD: Consejo: Usa el inspeccionador de elementos del navegador para editar estilos en vivo, y ver qué reglas están funcionando y cuales están siendo "pisadas" por otras.

  3. #3
    Administrador CCTW Webmaster de CCTWHabitante
    Fecha de Ingreso
    24 dic, 20
    Mensajes
    30
    Poder de Reputación
    10
    Normalmente a los enlaces hay que darles las propiedades de color dentro de sus etiquetas a. No suelen tomar propiedades si las declaras en su contenedor.

    Un abrazo!

Temas Similares

  1. Respuestas: 0
    Último Mensaje: 05/07/2012, 23:13
  2. Respuestas: 2
    Último Mensaje: 20/02/2012, 18:34
  3. Como Ocultar o Cambiar la Dirección del Link
    Por Zzzz en el foro Tutoriales Varios
    Respuestas: 1
    Último Mensaje: 13/08/2008, 00:54

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •