Jump to content
Fórum Script Brasil
  • 0

Color Font


Question

Sou novo na área , estou aprendendo agora , gostaria de uma ajuda , estou tentando fazer um menu estou seguindo alguns tutoriais no youtube , fiz um menu só que não consigo mudar a cor da fonte nem tirar o sublinhado , se alguém poder me ajudar agradeço muito !!

site.thumb.PNG.9bcc43e2751c380151fa384a5f55a3d6.PNG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-image: url(../PLANILHAS%20CAIO/projeto/imagens/fundo.jpg);
}
</style>
</head>


<body>


			<div id="logo">
					</div>			<!--div final do logo-->
			<div id="topo"></div>			<!--div final topo-->   
            <div id="menufundo"><nav id="menu">
       		<ul>
        		<li><a href="#">Pagina Inicial</a></li> 
        		<li><a href="#">Produtos</a></li>
        		<li><a href="#">Missão</a></li>
        		<li><a href="#">Links</a></li>
        		<li><a href="#">Contato</a></li>
    		</ul>
       </nav>                
</div>                
			<div id ="fundoinicial">
</div>			<!--div final fundoinicial-->
                    
                    
          
                  	
                        
              			
                   
                        
</body>
</html>

@charset "utf-8";
/* CSS Document */


#topo {
	background:url(../imagens/topo.png);	
	position:inherit;
	width:1024px;
	height:190px;
	border-bottom:none;
	margin:auto;

}

#logo {
	float: left;
	background:url(../imagens/logoc.png);
	position:relative;
	top:50px;
	left:230px;
	width:541px;
	height:133px;
}
	
#fundoinicial {
	background-image:url(../imagens/fundoof.png);
	width:1024px;
	height:1080px;
	margin:auto;
	
}

#menufundo {
	background:url(../imagens/menu.png);
	position:relative;
	width:1024px;
	height:30px;
	margin:auto;
}


#menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	font-size:26px;
	line-height:30px;
	display:inline;
    padding:30px;
    margin:20px;
	color:#FFF;
	
}

 

Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Por padrão os navegadores já tem algumas configurações de css como por exemplo o sublinhado dos links e a cor azul, diferentes tamanhos de fonte para h1,h2,h3 e etc...

a melhor forma de aprender esse tipo de coisa é usando o inspecionar elemento do chrome ou qualquer outro similar em outros navegadores e procurando dentro do seu html e mudando o css deles no painel que vai aparecer a sua direita. 

Dessa forma você pode ir fazendo "teste" antes de aplicar no seu código.

se clicar com o botão direito e marcar uma das opções de :hover, :focus e etc você pode fazer o mesmo para ações, ao selecionar ele simula aquele estado para você poder testar. Mas vale lembrar que depois de realizados os testes você precisa aplicar no seu código. o inspecionar elemento (F12 no crhome) é só para testes.

Nesse seu caso você precisa usar:
 

#menu ul li a{
  color: blue;
  text-decoration: none; // text-decoration é o sublinhado
}
Link to post
Share on other sites
  • 0

Olá amigo!

https://jsfiddle.net/gdu0260L/

da uma olhadinha coloquei o código alterado aqui para você;

 

att

@Caio Wesley Vi que você está estudando front-end. 
Vou te dar algumas dicas aqui para você começar da maneira mais fácil e preparada para fazer dinheiro possível hoje em dia, dei uma olhada em algumas coisas e as ferramentas que você está usando são bem limitadas tecnicamente você estaria perdendo tempo.

Oque aconselho você a fazer é utilizar o programa de sua preferencia para criar o layout, mas o mais usando hoje em dia é o photoshop.

Mas para criar o html+css aconselho você a utilizar o bootstrap.

Bootstrap é uma ferramenta que já tem diversas coisas prontas como menus, buttons, inputs e etc. 

Já tem tabulação responsiva para você não precisar ficar fazendo tudo do zero como você está fazendo.

 

A principio pode parecer coisa demais para sua cabeça mas acredite você vai decolar na frente da galera.

Muita gente prefere aprender tuuuudoo para depois aprender o certo.

Obviamente você vai precisar saber html + css para personalizar os elementos do bootstrap e deixar do jeito que você desenhou, mas MUITA coisa você não vai precisar perder tempo entende?

estude a estrutura de um site usando sections, containers, row e cols. Estude o comportamento dos cols xs, md, lg e etc.

depois disso é só sucesso.

 

aqui tem uma playlist de bootstrap:

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148856
    • Total Posts
      644851
×
×
  • Create New...