Layout com CSS
Author:
Vitoria Soares
Last Updated:
há 8 anos
License:
Creative Commons CC BY 4.0
Abstract:
Layout com CSS
\begin
Discover why over 20 million people worldwide trust Overleaf with their work.
Layout com CSS
\begin
Discover why over 20 million people worldwide trust Overleaf with their work.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% 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}