quinta-feira, 26 de março de 2015

HTML5 CSS3: Aula 23, position (relative, absolute, fixed e static)

Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.
O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visível do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemento pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.

Código fonte HTML (dessa vídeo aula): 
<section class="paragrafos">
    <p>Existem algumas propriedades que posicionam o elemento na página, tais como <font style= 'font-style:italic;'>top, left, bottom e right</font>, mas essas propriedades que já vimos em aulas anteriores, dependem da propriedade <font style= 'font-style:italic;'>position</font>, ela determina o modo do posicionamento do elemento, podendo receber atualmente quatro valores: <font style= 'font-style:italic;'>static, relative, absolute ou fixed</font>.</p>
    <p>O static é o valor padrão de todos os elementos. O relative aceita coordenadas. O absolute é complexo, mas por base, ele toma por padrão o elemento pai. E o fixed tem como referência a parte visivel do navegador, e permanece na mesma posição, mesmo com a rolagem da tela e, se tiver um elemnto pai, as configurações do elemento pai são ignoradas com relação ao elemento em questão.</p>
</section>

Código fonte CSS (sobre.css):
 .paragrafos {
    text-align: justify;
    font-size: 10px;
    width: 1000px;
    font-weight: bold;
}
.transform {
    position: absolute;
    top: 50px;
    right: 30px;
}
.decoration {
    position: absolute;
    top: 130px;
    right: 30px;
}
<! Código fonte exclusivo do documento padrao.css>
[...]
    word-spacing: 2px; /*espaço entre palavras*/
[...]



Nenhum comentário:

Postar um comentário