Arquivo: estilo.css
@charset "UTF-8";
body {
background-color: white;
color: rgba(0, 0, 0, 1);
}
p {
text-align: justify;
text-indent: 50px;
}
/* Formatação de imagens com legendas */
figure.foto-legenda {
position: relative;
border: 8px solid white;
box-shadow: 1px 1px 4px 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: 10px;
box-sizing: border-box;
transition: opacity 1s;
}
figure.foto-legenda:hover figcaption {
opacity: 1;
}
/* Formatação do Menu*/
nav#menu {
display: block;
}
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: absolute;
top: -20px;
left: 300px;
}
nav#menu li {
display: inline-block;
background-color: #dddddd;
padding: 10px;
margin: 2px;
}
nav#menu h1 {
display: none;
}
padding:
: é o espaço dentro do objeto.
margin:
: é o espaço fora do objeto.
position: absolute;
: ele fica livre dentro site, ou seja vc pode botar ele onde quiser.
position: relative;
: nesse caso essa tag ia fazer ele ficar dentro do contêiner do nav.
display: block;
: Ela faz com que o elemento ocupe toda a largura disponível do seu contêiner pai, forçando qualquer elemento antes ou depois dele a aparecer em uma nova linha.
list-style: none;
: no CSS é usada para remover a formatação padrão aplicada a listas, que geralmente é um marcador de lista (como um ponto sólido para listas não ordenadas <ul>
ou um número para listas ordenadas <ol>
).
text-transform: uppercase;
: no CSS é usada para transformar todo o texto de um elemento selecionado em letras maiúsculas.
top:
: da um espaço de cima para baixo.
left:
: da um espaço a esquerda do objeto.
display: inline-block;
: o elemento fica na mesma linha do elemento anterior e do próximo.
display: none;
: no CSS é usada para remover completamente um elemento do fluxo do documento.