<a class="leia-mais" href = "#">Leia mais</a>
.leia-mais {
text-align: center;
font-size: 24px;
background-color: #E6E7E8;
padding: 8px;
margin: 16px;
display: block;
}
Solucionado
<a class="leia-mais" href = "#">Leia mais</a>
.leia-mais {
text-align: center;
font-size: 24px;
background-color: #E6E7E8;
padding: 8px;
margin: 16px;
display: block;
}hoje, com a Alura e o Google Gemini
Samara, como está a sua página html? Posta ela também...
file:///C:/Documents%20and%20Settings/Administrador/Desktop/Samara/alura_html/blog.html
acho que isso não vai abrir, não sei como postar a página.
<!DOCTYPER html>
<html>
<head>
<meta charset = "UTF-8"></meta>
<title>Blog - João da Silva </title>
<link rel="icon" href="favicon.png"></link>
<link rel="stylesheet" href="reset_eric_meyer.css"></link>
<link rel="stylesheet" href="site.css"></link>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600"></link>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700"></link>
</head>
<body>
<main>
<h1 class="titulo-principal">Blog</h1>
<div class="conteudo">
<article>
<h2>O essencial de design responsivo</h2>
<time datetime = "2014-07-01">01 de julho de 2014</time>
<p>Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
<a class="leia-mais" href = "#">Leia mais</a>
<footer>Tags: <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a>.</footer>
</article>
<article>
<h2>Por que fazer páginas acessíveis?</h2>
<time datetime = "2014-06-15">15 de junho de 2014</time>
<p>Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>
<a class="leia-mais" href = "#">Leia mais</a>
<footer>Tags: <a href="#">acessibilidade</a>, <a href="#">boas práticas</a>.</footer>
</article>
<article>
<h2>JavaScript não obstrusivo</h2>
<time datetime = "2014-05-28">28 de maio de 2014</time>
<p>JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>
<a class="leia-mais" href = "#">Leia mais</a>
<footer>Tags: <a href="#">javascript</a>, <a href="#">boas práticas</a>.</footer>
</article>
</div>
</main>
<aside>
<h1>João da Silva</h1>
<nav>
<ul class="atalhos">
<li><a href="index.html">Home</a></li>
<li><a href="portifoli.html">Portifolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="redes-sociais">
<li><a class="github" href="https://github.com/joaodasilva">"Github"</a></li>
<li><a class="twitter" href="https://twitter.com/joaodasilva">"Twitter"</a></li>
<li><a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">"Linkedin"</a></li>
</ul>
</aside>
<footer class="rodape">
© João da Silva 2014
</footer>
</body>
</html>
Oi Samara, tudo bem?
Testei seus códigos aqui e está tudo normal.
Verifica se você está alterando o arquivo CSS correto e se ele está na raíz do projeto, junto com o arquivo HTML.
Também pode tirar a tag fechamento dos elementos link (</link>) e meta (</meta>). Eles são elementos que fecham sozinho, como o elemento <img> por exemplo.
Aguardo seu feedback,
Abcs!
Oi Natan, tudo bem e você? Obrigada, eu verifiquei e é o arquivo correto, mas continua sem mostrar as alterações.
Esse é o arquivo css todo se achar algum erro me diga
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 120%;
line-height:1.5;
}
blockquote, aside, footer {
padding:20px;
}
.titulo-principal {
background-color: rgb(133,25,68);
color: rgb(255,255,255);
text-align: center;
font-family:"Open Sans Condensed", sans-serif;
padding:25px;
margin:0;
border-bottom:10px solid #000;
font-size:60px;
text-transform:uppercase;
}
.conteudo {
width:720px;
margin-left:auto;
margin-right:auto;
padding:30px 0;
}
main a {
color: #851944;
}
aside h1 {
font-size:30px;
margin-bottom:25px;
}
aside a {
font-family: "Open Sans Condensed", sans-serif;
color:inherit;
}
.redes-sociais li {
display:inline-block;
}
.redes-sociais a {
display:block;
width:40px;
height:40px;
text-indent:-99999;
}
h2 {
font-family:"Open Sans Condensed", sans-serif;
font-size:30px;
}
p {
text-align: justify;
font-family:"Crimson Text", serif;
margin:20px 0;
}
blockquote {
background-color: #D9E5E3;
border:10px solid #C2CCCA;
width:250px;
margin:20px 40px;
box-sizing: border-box;
}
aside {
background-color:#3C1D3D;
color: rgb(255,255,255);
text-align:center;
}
.rodape {
background-color: #000;
color: #F2FFFC;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
article (
padding-bottom:30px;
border-bottom:1px solid #ccc;
margin-bottom:20px;
)
.leia-mais {
text-align: center;
font-size: 24px;
background-color: #E6E7E8;
padding: 8px;
margin: 16px;
display: block;
}
nav a {
text-transform: lowercase;
}
.github {
background-image: url(github.png);
}
.twitter {
background-image: url(twitter.png);
}
.linkedin {
background-image: url(linkedin.png);
}Achei o erro eu havia colocado () no lugar de {}
Oi Samara!
Vejo que o código esta correto, então podemos ter um problema bem comum do desenvolvimento html, que é a memória CACHE do navegador, que pode ser qualquer um como o Google Chrome ou Firefox.
Esta memória serve para gravar todas as imagens e códigos dos sites que você acessa em seu computador, fazendo com que o site carregue mais rápido quando você for utiliza-lo em uma próxima ocasião. Evitando que o navegador tenha que baixar todo o site novamente para o seu computador.
Para resolver isso, basta excluir esta memória cache do computador e depois tentar novamente. Pressionando no teclado as teclas CTRL + SHIFT + DEL ao mesmo tempo, neste momento uma tela com opções de quais arquivos deve excluir vai aparecer, marque apenas as opções de arquivos e imagens e o período que vai desde o começo, depois clique em ok e teste novamente o seu site.
Abraço!
Oi Samara,
O leia-mais não tem nenhum problema de sintaxe, você consegue ver algum problema na regra logo acima dela?
Tenta achar, se nao conseguir, leia a frase abaixo:
blablablablabla-parenteses-no-lugar-das-chaves-blablablablabla.
Coisas assim são normais de acontecer, então relaxe, ok? Recomendo que você use um editor de texto como o Sublime ou o Brackets.
Abcs e bons estudos!
edit:
demorei demais hahaha, achou o erro, boa!