Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Mudar a cor de links via CSS

Bom dia a todos. Estou com um problema para mudar a cor dos links via CSS. Se eu colocar na tag body do html, como < body link="#FFFFFF">, funciona normalmente. Mas quando eu tento alterar a cor dos links por CSS eu não estou conseguindo.

5 respostas

Olá Rafael! Como está seu CSS? Por favor nos envie seu código para que possamos ajuda-lo.

Olá, Romário. Aqui está o Html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>João da Silva-Biografia</title>
        <link rel="icon" href="favicon.png">        
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="bio.css">

    </head>
    <body>
        <main>
            <h1>Sobre mim</h1>

            <p>
            Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.
            Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.
            <p>

            <h2>Como trabalho</h2>
                <blockquote>
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite><p>-- José Souza, Fiat</p></cite>
                </blockquote>

            <p>
            Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.
            </p>
            <p>
            <strong>Também não trabalho com prazos fechados</strong>: qualidade é importante demais para ser sacrificada.
            </p>

            <h2>Experiência</h2>
                <blockquote>
                <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                <cite><p>-- Manoel Santos, Petrobrás</p></cite>
                </blockquote>

            <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.
            Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.
            </p>

            <h2>Comunidade</h2>

            <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="blog.html">blog</a>.<p>
        </main>
        <img src="eu.jpg" alt="foto de joão da silva">
        <aside>
            <nav>
                <h1>João da Silva</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contato</a></li>

                </ul>
            </nav>
        </aside>
        <footer>
            &copy; João da Silva 2014
        </footer>
    </body>
</html>


E aqui está o CSS:

body{
        background-color: #F2FFFC;
        font-family: "Crimson Text", serif;
        font-size: 20px;
        padding: 30px 0px;
    }



    main h1{
        font-size:60px;
        background-color: rgb(120,30,60);
        color: #FAFFFA;
        text-align: center;
        font-family: "Open sans", sans-serif;
        padding: 20px;
    }
    h2{
        font-size:30px;
        font-family: "Open Sans", "Arial", sans-serif;
    }
    p {
        text-align: justify;
        margin: 20px 0px;
    }

    blockquote{
        background-color: #D3DDDA;
        padding: 16px;
        border: 10px solid #C2CCCA;
        width: 250px;
        margin: 20px 40px;
        box-sizing: border-box;
    }

    aside{
        background-color: #3C1D3D;
        color: #F2FFFC;
        text-align: center;
        padding: 20px;
        font-family: "Open Sans Condensed", sans-serif;
    }

    nav h1{
        font-size: 30px;
    }
    nav ul{
        margin: 25px;
    }

    strong{
        font-weight: bold;
    }

    em{
        font-style: italic;
    }

Da maneira como está, os links do nav estão sendo exibidos com a cor azul. Eu tentei alterar para branco mas não consegui.

solução!

Rafael você tem várias formas de se fazer isso:

nav a {
    color: #000000;
}
nav ul a {
    color: #000000;
}
nav ul li a {
    color: #000000;
}

Eu particularmente prefiro a ultima pois fica mais especifico os links, garantindo que somente os links dentro de um li que esta dentro de um ul que esta dentro de um nav irá ficar preto.

nav ul li a {
    color: #000000;
}

Espero ter ajudado

Isso mesmo, Matheus. Muito obrigado. Estava me enrolando na sintaxe.

Tranquilo Rafael, o importante é conseguir, qualquer coisa não deixe de criar suas dúvidas.