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}