Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Aula de Css - Básico
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Construção de WebSites
Css
Mirla Rocha de Oliveira Ferreira
Css
• Consiste em um conjunto de informações
sobre a formatação do layout de uma página
WEB.
• É um código separado que altera as
características da página.
– Ao invés de colocar a formatação dentro do
documento, cria-se um link para uma página que
contém os estilos. Quando for necessário alterar a
aparência do portal, basta modificar um arquivo.
Css
• Aplicando o CSS:
– Método In-line, usando o atributo style:
<html>
<head>
<title> Exemplo</ title>
</ head>
<body>
<p style="color: red;"> Vermelho </ p>
</ body>
</ html>
Css
– Método interno, usando a tag style:
<html>
<head>
<title> Exemplo</ title>
<style type="text/css“>
p {color: red;}
</ style>
</ head>
<body>
<p> Vermelho </ p>
</ body>
</ html>
Css
– Método Externo, usando link para uma folha de
estilo (método recomendado):
<html>
<head>
<title> Exemplo</ title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</ head>
<body>
<p> Vermelho </ p>
</ body>
</ html>
Css
• A sintaxe básico CSS é:
seletor {propriedade: valor}
Onde o seletor é em qual tag será usada a configuração, a
propriedade é o tipo de configuração que será
determinada (cor, letra, tamanho, etc) e o valor é a
configuração de formatação em si.
Css
• Para escrever em CSS
– Quando colocamos no html o atributo id em
alguma tag, ou seja, <p id="textoPadrao">
Texto
</p>, significa nome exclusivo
a um elemento, que pode ser usado uma única
vez na página. No CSS é representado como
#textoPadrao {color: red}.
Css
– Quando colocamos no html o atributo class em
alguma tag, ou seja, <p class="textoPadrao">
Texto
</p>, significa que pode ser
usado na mesma página várias vezes. No CSS é
representado como .textoPadrao {color: red}.
Propriedades CSS
• Elementos do CSS:
– Colors e backgrounds:
• color, background-color, background-image
• background-repeat
– repeat-x (repete horizontalmente)
– repeat-y (repete verticalmente)
– no-repeat
– repeat (repete verticalmente e horizontalmente)
• background-attachment
– scroll (imagem que ‘rola’ com a tela
– fixed (imagem fixa na tela)
Propriedades CSS
• background-position
– top left (topo à esquerda)
– top center (topo ao centro)
– top right (topo à direita)
– center center (centro ao centro)
– Center left (centro à esquerda)
– center right (centro à direita)
– bottom left (embaixo à esquerda)
– bottom center (embaixo ao centro)
– bottom right (embaixo à direita)
– x-% y-% (posição horizontal e vertical. Top left é 0% 0% e
bottom right é 100%, 100%. Ao especificar apenas um valor, o
outro será considerado como 50%.
Propriedades CSS
– Font:
• color
• font-family (tipo da fonte)
• font-style
– normal, italic, oblique
• font-variant (fontes maiúsculas com tamanho menor)
– Small-caps
• font-weight (espessura dos caracteres)
– 100 a 900, bold, bolder, inherit, lighter, normal.
• font-size (tamanho da fonte)
– %, xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger, length (px, cm)
Propriedades CSS
– Text:
• color
• text-indent (recuo do texto)
– %, lenght (px, cm, ...)
• text-align (alinhamento do texto)
– left, right, cente, justify
• text-decoration
– none, underline, overline (sobrelinhado), line-through (linha
em cima do texto), blink (faz o texto piscar).
• word-sapacing (espaço entre palavras)
– lenght (px, cm, ...)
• letter-spacing (espaço entre letras)
– lenght (px, cm, ...)
Propriedades CSS
• text-transform (forma das letras)
– none, capitalize (primeiras letras em maiúsculas), uppercase
(todas as letras em maiúsculas), lowercase (todas as letras em
minúsculas)
• white-space (como o browser trata os espaços em branco)
– normal (os espaços em branco serão ignorados pelo browser)
– pre (os espaços em branco serão preservados pelo browser)
– nowrap (o texto será apresentado todo ele numa linha única
na tela. Não há quebra de linha até ser encontrada uma tag
<br>)
• direction (direção do texto)
– ltr (texto escrito da esquerda para a direita)
– rtl (texto escrito da direita para a esquerda)
Propriedades CSS
– Margin e padding:
• margin-top (margem superior)
• padding-top (espaçamento superior)
• margin-right (margem direita)
• padding-right (espaçamento da direita)
• margin-bottom (margem inferior)
• padding-bottom (espaçamento inferior)
• margin-left (margem esquerda)
• padding-left (espaçamento da esquerda)
– auto
– length (px, cm, ...)
– %
Propriedades CSS
– Border:
• border-width (espessura da borda)
– thin (borda fina)
– medium (borda média)
– thick (borda grossa)
– length (px, cm, ...)
• border-style (estilo da borda)
– none, hidden (escondida)
– dotted (pontilhada), dashed (tracejada)
– Solid (contínua), double (dupla)
– groove (entalhada), ridge (ressalto)
– inset (baixo relevo), outset (alto relevo)
• border-color (cor da borda)
Propriedades CSS
• border-top-width, border-top-style, border-top-color
• border-bottom-width, border-bottom-style, border-
bottom-color
• border-right-width, border-right-style, border-right-
color
• border-left-width, border-left-style, border-left-color
Propriedades CSS
Propriedades CSS
• border-collapse (borda em tabelas):
– collapse (tabela com a mesma borda)
– separate (tabela com duas bordas: interna e externa)
– Exemplo no css:
.classetabela { border-collapse: collapse; }
.classetabela tr td { border-style: solid; border-width: 10px; }
Propriedades CSS
– List-style:
• list-style-image (imagem como marcador)
• list-style-position (onde o marcador é posicionado)
– outside (marcador fora do alinhamento do texto)
– inside (marcador alinhado com texto)
• list-style-type (tipo do marcador)
– none (sem marcador)
– disc (bolinha cheia), circle (bolinha vazia), square (quadrado cheio)
– decimal (1, 2, 3, 4, ...), decimal-leading-zero
– lower-roman (i, ii, iii, iv, ...), upper-roman (I, II, III, IV, ...)
– lower-alpha (a, b, c, d, ...), upper-alpha (A, B, C, D, ...)
– lower-greek, lower-latin, upper-latin, hebrew
– armenian, georgian, cjk-ideographic, hiragana
– katakana, hiragana-iroha, katakana-iroha
Propriedades CSS
– Links:
• a:link (define o estilo do link no estado inicial)
• a:visited (define o estilo do link visitado)
• a:hover (define o estilo do link quando passa o mouse
sobre ele)
• a:active (define o estilo do link ativo)
• Para a configuração de qualquer tipo de link, usa-se as
propriedades de “text”.
• Exemplo:
a:link, a:visited, a:active {text-decoration: underline;}
a:hover {text-decoration: underline overline; color:#f00;}Materiais relacionados
219 pág.
Perguntas relacionadas
Compartilhar