Eu não consegui pegar só os h1 dentro da tag main, eu acho que alguma coisa está errada no meu bio.css ou no site.css, até agora está assim: https://drive.google.com/file/d/0B8cs_U57mR4wYkswSm9JeHpkR28/view?usp=sharing https://drive.google.com/file/d/0B8cs_U57mR4wSkxodGZUYTJmYms/view?usp=sharing https://drive.google.com/file/d/0B8cs_U57mR4wUEFFUzlyZGQwU00/view?usp=sharing https://drive.google.com/file/d/0B8cs_U57mR4wVTBHaUVKREZaV3c/view?usp=sharing
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas
respostas
main H1 no CSS
Vinícius, boa noite! Insere o seu código no post para visualizarmos melhor sua dificuldade assim fica meio difícil de ver. :D
bio.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biografia - João da Silva</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="bio.css">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main> <!--Conteúdo principal agregando semântica,acessibilidade e usabilidade -->
<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.</p>
<p>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> <!--Citação-->
<cite>José Souza, Fiat</cite> <!--Autor da citação-->
</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>Também não trabalho com prazos fechados: 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>Manoel Santos, Petrobrás</cite>
</blockquote>
<p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="www.uol.com.br">UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. 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.</p>
<p>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 <a href="blog.html">um blog</a>.</p>
</main>
<img src="eu.jpg" alt="Foto de João da Silva"> <!--Insere a Imagem do João da Silva, atributo alt descreve a foto para facilitar que os mecanismos de busca achem-->
<nav>
<h1>João da Silva</h1> <!--Título principal-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</nav>
<footer> <!-- Rodapé -->
© João da Silva 2014
</footer>
</body>
</html>bio.css
h1 {
font-size: 60px;
background-color:rgb(120,30,60);
color:#FAFFFA;
text-align: center;
font-family: "Open Sans",sans-serif;
}
h2 {
font-size: 40px;
font-family: "Opens Sans",sans-serif;
}
site.css
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
}
h1,h2 {
font-family: "Open Sans Condensed", "Arial", sans-serif;
}
h1 {
text-align: center;
background-color: #851944;
color:#FFF;
}
p {
text-align: justify;
}
solução!
Vinícius, boa noite. Lá no arquivo bio.css, é só selecionar o h1 dentro da tag main, existem algumas maneiras de fazer isso.
main h1 {
font-size: 60px;
background-color:rgb(120,30,60);
color:#FAFFFA;
text-align: center;
font-family: "Open Sans",sans-serif;
}ou
main > h1 {
font-size: 60px;
background-color:rgb(120,30,60);
color:#FAFFFA;
text-align: center;
font-family: "Open Sans",sans-serif;
}depois me diz se funcionou :D
Boa noite, quando usei main h1 quer dizer que ele vai pegar só os h1 que estiver dentro da tag main, mas aqui quando usei main h1 não deu certo, o problema é que eu não to conseguindo deixar o João da Silva que é um h1 dentro da tag nav ficar sem estilo. O que acontece sem o main h1 é isso: https://drive.google.com/file/d/0B8cs_U57mR4wRDZBNF80SF9fQ3c/view?usp=sharing com o zoom dá pra ver melhor, com o main h1 o que acontece é isso: https://drive.google.com/file/d/0B8cs_U57mR4wa2FJS0Zpd24waUE/view?usp=sharing
Vinicius, Então eu olhei aqui, fiz as seguintes alterações.
No seu código do site.css
retirei a seguinte propriedade
h1 {
text-align: center;
background-color: #851944;
color:#FFF;
}a propriedade acima estava duplicando os efeitos
no seu código html o nome do h1 joao da silva estava dentro da tag "nav" retirei por não fazer parte da navegação.
<nav>
<h1>João da Silva</h1> <!--Título principal-->adicionei o código da seguinte forma.
site.css ficou assim
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
}
h1,h2 {
font-family: "Open Sans Condensed", "Arial", sans-serif;
}
p {
text-align: justify;
}
aside {
background-color: #3C1D3D;
color: #F2FFFC;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}seu html ficou assim:
<aside>
<h1>João da Silva</h1> <!--Título principal-->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</nav>
</aside>e o arquivo do bio.css, ficou assim:
h2 {
font-size: 40px;
font-family: "Opens Sans",sans-serif;
}
main h1 {
text-align: center;
background-color: #851944;
color: #FFF;
}testei aqui depois dessas alterações funcionou aqui amigo, testa ai se não funcionar me avisa blza \0/
Eu retirei o trecho que estava duplicando os efeitos ai deu certo, mas como o professor fez na aula acho que ele cometeu um equívoco ao colocar dentro da tag nav o título João da Silva como h1 sendo que este deveria fazer parte da tag aside como você mencionou. Eu ainda não vi essa parte da tag aside fiquei um pouco confuso com o código que você mandou, só de tirar aquele trecho que estava duplicando os efeitos deu certo, será necessário colocar o aside? Outro problema que ocorreu a página blog.html perdeu toda formatação
Vinícius, ele conserta isso nas próximas aulas :D. precisando de algo estamos ai Abçs.