MKT-MDL-05
Versão 00
DESENVOLVIMENTO DE APLICAÇÕES
PARA INTERNET
CSS – Folhas de Estilo
Prof. Weberty
CSS
CSS
CSS é chamado de linguagem Cascading Style Sheet e é
usado para estilizar elementos escritos em uma linguagem
de marcação como HTML.
O CSS separa o conteúdo da representação visual do site.
<link rel=“stylesheet” ” href=“./css/[Link]”>
link - Cria uma relação entre um documento HTML e um arquivo
de estilo CSS.
rel - Define o tipo de arquivo (stylesheet para CSS).
Href - Define o caminho do arquivo.
CSS - Anatomia
CSS - Anatomia
Seletor - Seleciona o elemento(s) que deve ser estilizado.
Bloco CSS - Engloba as
propriedades {} que serão aplicadas
ao seletor.
Propriedade - Define o que será alterador
Valor - Define o valor do novo estilo.
CSS - Seletores
h1, p – A vírgula permite selecionar múltiplos elementos para a
aplicação de um mesmo estilo.
p a – Seleciona o a que
tiver um p como
elemento pai(não precisa
ser filho direto).
CSS - class
Atributo HTML que adiciona um identificador reutilizável na tag. Esse
identificar pode ser utilizado no CSS para selecionarmos o(s)
elemento(s): .classe
CSS - id
Atributo HTML que adiciona um identificador único na tag. Esse
identificar pode ser utilizado no CSS para selecionarmos o
elemento: #nomeid
CSS – Box Model
Uma interface web é composta de diversas caixas que organizam o
conteúdo
CSS – Box Model
Padding (preenchimento) - Separa o conteúdo das bordas da caixa. É
a margem interna.
Border (borda) - Define bordas para a caixa.
Margin (margem) - Define a distância entre uma caixa e outra.
Width (largura) - A largura total da caixa, por padrão é o somatório
do conteúdo + padding (left/right) + border (left/right).
Height (altura) - A altura total da caixa, por padrão é o somatório do
conteúdo + padding (top/bottom) + border (top/bottom).
CSS – Box Model
CSS - Top, Right, Bottom, Left
Atributo HTML que adiciona um identificador único na tag. Esse
identificar pode ser utilizado no CSS para selecionarmos o
elemento: #nomeid
CSS - Margens
margin-top - define a margem superior
margin-right - define a margem direita
margin-bottom - define a margem inferior
margin-left - define a margem esquerda
margin - define as 4 margens.
CSS - Margens
margin-right - define a margem direita
margin-bottom - define a margem inferior
margin-left - define a margem esquerda
margin - define as 4 margens.
CSS – Borders (bordas)
CSS – Borders (bordas)
Para cada lado do elemento HTML, temos uma propriedade específica.
Confira a seguir quais são:
border-top: Aplica borda na parte superior de um elemento.
border-left: Aplica borda no lado esquerdo de um elemento.
border-right: Aplica borda no lado direito de um elemento.
border-bottom: Aplica borda na parte inferior de um elemento.
CSS – Borders (bordas)
Utilizando apenas a propriedade border, é possível aplicar três valores:
border: 30px solid blue;
O código acima é uma forma abreviada de escrever os mesmos valores
abaixo
border-width: 30px;
border-style: solid;
border-color: blue;
CSS – Padding
A propriedade padding corresponde à distância interna entre um elemento
e a sua borda.
Na prática, cada elemento HTML contém uma largura e altura padrão, que
pode ou não ocupar toda a largura da página independente se o conteúdo
também ocupa esse mesmo espaço.
CSS – Padding
Os elementos que ocupam toda a linha são chamados elementos de bloco
ou block, entre eles: <h1>, <div>, <p>, entre outros.
Os elementos em linha ou inline, são aqueles que ocupam apenas o
espaço correspondente ao seu conteúdo, como: <span>, <a>, <img> etc.