I can not change the color of my links. I do not know if the problem is encoding in my index or if it is in CSS.
@charset"UTF-8";
@import url(h)
@fonte-face{
font-family:'fontelogo';
src:url("../_fonts/PinyonScript-Regular.otf");
}
body {
font-family:Arial, sans-serif;
background-color:#dddddd;
color:rgba(0,0,0,1);
}
div#interface{
width:900px;
background-color:#ffffff;
margin:-20px auto 0px auto;
box-shadow:0px 0px 10px rgba(0,0,0,.5);
padding:10px 10px 10px 10px;
}
p
{
text-align: justify;
text-indent: 50px;
}
a{/* aqui da erro no index */
color:#606060;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
header#cabecalho img#icone{
position:absolute;
left:780px;
top:70px;
}
header#cabecalho{
border-bottom:1px #606060 solid;
height:150px;
background:url("../_imagens/glass-logo-peq.jpg")no-repeat 0px 80px;
}
header#cabecalho h1{
font-family:'fonteLogo',Pinyon Script;cursive;/* nao consegui alterar a fonte para buble*/
font-size:30pt;
color:#606060;
text-shadow:1px 1px 1px rgba(0,0,0,.6);
padding:0px;
margin-bottom:0px;
}
header#cabecalho h2{
font-family:Arial,sans-serif;
color:#888888;
font-size:15pt;
padding:0px;
margin-top:0px;
}
/*formatação de imagens com legendas*/
figure.foto-legenda{
position:relative;
border:8px solid white;
box-shadow:1px 1px 0px black;
}
figure.foto-legenda img{
width:100%;
height:100%;
}
figure.foto-legenda figcaption{
opacity:0;
position:absolute;
top:0px;
background-color:rgba(0,0,0,.4);
color:white;
width:100%;
height:100%;
padding:1px;
box-sizing:border-box;
transition:opacity 1s;
}
figure.foto-legenda:hover figcaption{
opacity:1;
}
nav#menu{/* formatação de menu*/
display:block;
}
nav#menu ul{
list-style:none;
text-transform:uppercase;
position:absolute;
top:-20px;
left:500px;
}
nav#menu li{
display: inline-block;
background-color:#dddddd;
padding:10px;
margin:2px;
transition:background-color 1s;
}
nav#menu li:hover{
background-color:#606060;
}
nav#menu h1{
display:none;
}
nav#menu a{
color:#000000;
text-decoration:none;
}
nav#menu a:hover{
color:#ffffff;
text-decoration: underline;
}
section#corpo{
display:block;
width:520px;
float:left;
border-right:1px solid #606060;
padding-right:15px;
}
article#noticia-principal h2 {
font-size:12pt;
color:#606060;
background-color:#dddddd;
padding: 5px 0px 5px 10px;
margin: 10x 0px 10px 0px;
}
header#cabecalho-artigo h1{
font-family:'fonteLogo',sans-serif;
font-size:20pt;
color:#606060;
margin-bottom:0px;
margin-top:0px;
}
.direita {
text-align: right;
}
header#cabecalho-artigo h2{
font-size:13pt;
color:#cecece;
background-color:#ffffff;
}
header#cabecalho-artigo h3{
font-size:12px;
color:#606060;
}
table#tabelaspec{
border:1px solid #606060;
border-spacing:0px;
margin-left:auto;
margin-right:auto;
}
table#tabelaspec td {
border:1px solid #606060;
padding:10px;
text-align:right;
vertical-align: middle;
}
table#tabelaspec td.ce {
color:#ffffff;
background-color:#606060;
vertical-align: top;
font-weight: bold;
}
table#tabelaspec td.cd{
background-color:#cecece;
vertical-align:left;
text-align:left;
}
table#tabelaspec caption {
color:#888888;
font-size: 13pt;
font-weight:bolder;
}
table#tabelaspec caption span{
display: block;
float: right;
color: #888888;
font-size: 8pt;
margin-top: 10pt;
}
aside#lateral{
display:block;
width:350px;
float:right;
}
footer#rodape{
clear:both;
border-top:1px solid #606060;
}
footer#rodape p {
text-align:center;
}
-------------------------
<!DOCTYPE html>
<html lang=pt-br>
<head>
<meta charset="UTF-8"/>
<title>Tudo sobre Google Glas</title>
<link rel="stylesheet"href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2> A revolução do Google está chegando</h2>
</hgroup>
<img id="icone"src="_imagens/glass-oculos-preto-peq.png">
<nav id="menu">
<h1>Menu Principal</h1>
<ul type="disc">
<li><a href="index.html">Home<a/></li>
<li><a href="specs.html">Especificações<a/></li>
<li><a href="fotos.html">Fotos<a/></li>
<li><a href="multimidia.html">Multimídia<a/></li>
<li><a href="Fale-conosco.html">Fale conosco<a/></li>
</ul>
</nav>
</header> <!--- header e a tag pa criar cabeçalho--->
<section id="corpo">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<hgroup>
<h3>Tecnologia >Inovações</h3>
<!----' '; tag pra dar espaço--->
<h1>Saiba tudo sobre o Google Glass</h1>
<h2>por Gustavo Guanabara</h2>
<h3 class="direita">Atualizado em 23/Abril/2013</h3>
</hgroup>
</header>
<h2>O que é</h2>
<p>O <span style="font-weight:900;">Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de <a href="http://glass.google.com"target="_blank">Project Glass</a>**<!-- do começo do paragrafo ate aqui fica tudo sublinhado e com a cor diferente-->**, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeo­con­ferên­cias.Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil.Atualmente o <em>Google­Glass</em> encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo.Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p>
<figure class="foto-legenda">
<img src="_imagens/glass-quadro-homem-mulher.jpg"/>
<figcaption>
<h3>Google Glass</h3>
<p>Uma nova maneira de ver o mundo </p>
</figcaption>
</figure>
<h2>Data de lançamento</h2>
<p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>
<h2>Especificações Técnicas</h2>
<table id="tabelaspec">
<caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption>
<tr><td class="ce">Tela</td><td class="cd">Resolução equivalente a tela de 25"</td></tr>
<tr><td rowspan="2"class="ce">Camera</td> <td class="cd"> 5MP para fotos</td></tr>
<tr><td class="cd"> 720p para vídeos</td></tr>
<tr><td rowspan="2" class="ce">Conectividade</td><td class="cd"> Wi-Fi</td></tr>
<tr><td class="cd">Bluetooth</td></tr>
<tr><td class="ce">Memória Interna</td><td class="cd"> 12GB</td></tr>
</table>
<h2>Como funciona</h2>
<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário.Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça</p>
<h2>O que você pode fazer com o Google Glasses</h2>
<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”,já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>
[AQUI ENTRA UM VÍDEO]
</article>
</section>
<aside id="lateral">
<h1>Outras Notícias</h1>
Vídeo mais recente
[AQUI ENTRA UM VÍDEO]
<h2>Novidades no Glass</h2>
<p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>
<p> Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.</p>
</aside>
<footer id="rodape">
<p>Copyright © 2013 - by Gustavo Guanabara<br/>
<a href="http://facebook.com/cursoemvideo"target="blank">Facebook</a> |
<a href="http://twitter.com/cursoemvideo"target="blank">Twitter</a></p>
</footer>
</div>
</body>
</html>