Layout com CSS

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% How to use writeLaTeX: 
%
% You edit the source code here on the left, and the preview on the
% right shows you the result within a few seconds.
%




% Bookmark this page and share the URL with your co-authors. They can
% edit at the same time!
%
% You can upload figures, bibliographies, custom classes and
% styles using the files menu.
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\documentclass[12pt]{article} 

\usepackage{sbc-template}

\usepackage{graphicx,url}

%\usepackage[brazil]{babel}   
\usepackage[utf8]{inputenc}  

     
\sloppy

\title{Layout com CSS}

\author{Guilherme Figueiredo Terenciani\inst{1} }


\address{IFMS -- Instituto Federal de Ciência e Tecnologia de Mato Grosso do sul\\
  R. Hilda, 203 - Conj. Hab. Boa Vista, Naviraí - MS, 79950-000
  \email{guilherme.terenciani@ifms.edu.br}
}

\begin{document} 

\maketitle

\section{Propriedade "display"}

É uma propriedade do CSS para controlar o layout. Cada elemento tem um valor padrão para o display dependendo de seu tipo. Seus valores padrão dos elementos são block ou inline.
Um elemento com valor block é chamado de elemento de nível de bloco ou apenas elemento de bloco. 
Um elemento com valor inline é sempre chamado de elemento de linha.

\section{"block"}

O block faz com que o elemento HTML seja obtido como bloco, como os parágrafos e os cabeçalhos são. Um bloco contém um espaço em branco tanto em cima como embaixo e não permite outros elementos HTML ao lado, exceto quando tiver sido declarado ao contrário (por exemplo, declarar a propriedade float para o elemento próximo ao bloco).

\section{"p"}
O elemento "p" define uma parte que deve ser exibida como um parágrafo.

\section{"form"}

Representa um formulário, que consiste em controles, que podem ser submetidos a um servidor para processamento.

\section{"header"}

Define o cabeçalho de uma página ou seção. Muitas vezes contém um logotipo, o título do site e uma menu de navegação do conteúdo.

\section{"footer"}

Define o rodapé de uma página ou seção. Muitas vezes contém um aviso de copyright, alguns links para informações legal ou endereços para dar feedback.

\section{"section"}

Define seções dentro do Documento.

\section{"inline"}

O "inline" faz com que o elemento HTML seja obtido em linha, ou seja, dentro do bloco na mesma linha. Quando o elemento encontra-se entre dois blocos ele forma o chamado 'bloco anônimo' e é renderizado com a menor largura possível.

\section{ "span"}

Representa um texto sem significado. Ele deve ser usado quando nenhum outro elemento de texto semântico representar um significado adequado.

\section{"a"}

Representa um hyperlink, ligando a outro recurso.

\section{"none"}

A declaração "none" faz com que o elemento HTML não seja renderizado.

\section{"script"}

Define um script interno ou link para um script externo. A linguagem de script é JavaScript.

\section{"visibility"}

A propriedade de visibilidade especifica se um elemento está ou não visível.

\section{"list-item"}

A propriedade "list-item" faz com que o elemento HTML seja renderizado como um item de lista, isto significa que aparecerá um marcador (bullet) na frente de cada item (tal como acontece com o elemento UL).

\section{"table"}

Representa uma tabulação de dados, como por exemplo: uma tabela de informações expressada em duas dimensões através de linhas e colunas.

\section{"div"}

Representa um contêiner genérico sem nenhum significado especial.

\section{"display:inline "}

A propriedade "inline" faz com que o elemento HTML seja renderizado inline, dentro do bloco na mesma linha. Quando o elemento encontra-se entre dois blocos ele forma o chamado 'bloco anônimo' e é renderizado com a menor largura possível.

\section{"li"}

Define um item de uma lista ol ou de uma ul.

\section{"margin: auto;"}

Você pode definir a propriedade de margem auto para centralizar horizontalmente o elemento em seu contêiner.O elemento irá então ocupar a largura especificada, e o espaço restante será dividido igualmente entre as margens esquerda e direita.

\section{"width"}

A propriedade "width" é destinada a definir a largura dos boxes.

\section{"box model"}

Todos os elementos HTML podem ser considerados como caixas. Em CSS, o termo "box model" é usado quando se fala sobre design e layout. O "box model" CSS é essencialmente uma caixa que envolve todos os elementos HTML, e consiste em: margens, bordas, preenchimento e o conteúdo real.

\section{"border"}

São as propriedades para as bordas, definem as características das quatro bordas de um elemento HTML.

\section{"padding"}

A propriedade "padding" se destina a criar um espaçamento interno em um um box entre seus 4 lados e a área de conteúdo do box. As propriedades para declarar o "padding", definem a dimensão de cada uma dos quatro espaçamentos entre a área das bordas e a área de conteúdo de um elemento HTML.

\section{"box-sizing"}

A propriedade CSS "box-sizing" é utilizada para alterar a propriedade padrão da "box model", e é usada para calcular "widths" e "heights" dos elementos.

\section{"border-box"}

 A propriedade "box-sizing" que quando declarada com uso do valor "border-box" altera a forma como o Box Model é calculado, incorporando os valores de "padding" e "border" à largura do box criado pelo elemento HTML.

\section{"Position"}

O Position é uma propriedade de posicionamento e diagramação de layout.

\section{"nav"}

Define uma seção que contém apenas links de navegação.

\section{"Float"}

Float é uma propriedade CSS que usamos para posicionar algo na tela, seja um elemento em bloco ou em linha. Com a propriedade float definida, um elemento pode ser empurrado para esquerda ou para a direita, permitindo que os outros elementos possam organizar em torno dele.

\section{"Clear"}

O "clear" não é para o elemento que flutua, e sim para o próximo elemento na ordem do documento. Ou seja, qualquer conteúdo subsequente a um elemento flutuante irá contorná-lo até que este use a propriedade clear.

\section{"inline-block"}

o valor "inline-block" funciona somente para os elementos HTML que por sejam "display: inline". Um bloco "inline" é colocado "inline" (ou seja, na mesma linha do conteúdo adjacente), mas comporta-se como se fosse um bloco.

\section{"vertical-align"}

É uma propriedade que destina-se a alinhar textos verticalmente que estejam dentro de uma linha ou em uma célula de tabela. 

\section{"column"}

A propriedade "column" pode-se definir colunas de texto de forma automática.

\section{"flexbox"}

O Flexbox, ou Flexible Box Layout, é um novo modo de layout em CSS3, projetado para leiautar aplicações complexas e páginas web.

\bibliographystyle{sbc}
\bibliography{sbc-template}

\end{document}