desenvolvimento web professor horácio soares escm desenvolvimento web i css - cascating styles...
TRANSCRIPT
Desenvolvimento Web Professor Horácio Soares
ESCM
Desenvolvimento Web ICSS - Cascating Styles Sheet
Professor Horácio Soares
Tel.: 9223-7512E-mail: [email protected]
Desenvolvimento Web Professor Horácio Soares
CSS – Cascating Styles Sheet
Trata-se de um padrão de formatação para
páginas web que vai além das limitações
impostas pelo html. Proposto pelo W3
Consortium <http://www.w3.org> - uma espécie
de comitê que define os padrões de
programação para a WWW - o CSS foi
introduzido pela primeira vez pela Microsoft, no
lançamento do Internet Explorer 3.0.
01
Desenvolvimento Web Professor Horácio Soares
CSS – Cascating Styles Sheet
A style sheet consiste em uma ou mais regras que descrevem
como os elementos de uma página Web, que correspondem
particularmente aos Tags HTML serão apresentados (displayed).
Toda regra em CSS tem duas partes, o Seletor e a declaração.
H1 {color : purple;}seletor declaração
propriedade valor
02
Desenvolvimento Web Professor Horácio Soares
Exemplos:
body { color: black; }
p { font-family: sans serif; }
p { text-align:center;}
CSS – Cascating Styles Sheet
03
Desenvolvimento Web Professor Horácio Soares
Como adicionar Style Sheet ao HTML:
CSS – Cascating Styles Sheet
Inline Style SheetEsta forma de aplicar CSS em documentos HTML perde algumas das vantagens de sua aplicação misturando conteúdo e apresentação. Utilize este método com parcimônia.
Para utilizar estilos Inline, aplique o atributo “style” nos tags HTML. O atributo poderá conter qualquer propriedade CSS. Veja a aplicação abaixo:
<p style="color: sienna; margin-
left: 20px;">
Isto é um parágrafo...
</p>
04
Desenvolvimento Web Professor Horácio Soares
Como adicionar Style Sheet ao HTML:
CSS – Cascating Styles Sheet
Internal Style SheetUm Style Sheet Interno deverá ser aplicado quando um simples documento tem um único estilo. Os estilos internos deverão ser definidos no HEAD do documento, utilizando o tag <STYLE> como exemplo abaixo:
<head> <style type="text/css">
hr { color: blue; }p { margin-left: 20px; }body { background-image:
url("brasil.gif") }
</style></head>
05
Desenvolvimento Web Professor Horácio Soares
Como adicionar Style Sheet ao HTML:
CSS – Cascating Styles Sheet
External Style SheetPara incluir um arquivo *.css com todos os estilos que serão usados por todas as páginas do seu site, basta incluir no HEAD do documento HTML um link para o
arquivo CSS como descrito no exemplo abaixo:
<head><link rel="stylesheet" type="text/css" href="arq.css" />
</head>
Um arquivo Style Sheet externo pode ser escrito em qualquer editor de textos. O arquivo não deverá conter TAGs HTML. Seu Style Sheet deverá ser salvo com a extensão “.css”.
06
Desenvolvimento Web Professor Horácio Soares
Como adicionar Style Sheet ao HTML:
CSS – Cascating Styles Sheet
External Style Sheet
Outra técnica é importar um Style Sheet externo com um elemento
STYLE usando a “directive” @import
<head>
<style type=“text/css”>
@import url(arq.css);
</style>
</head>
07
Desenvolvimento Web Professor Horácio Soares
Seletores:
CSS – Cascating Styles Sheet
Efeito CascataComo a tradução de CSS já diz, é uma folha de estilos em camadas, desta forma, os estilos seguem uma hierarquia como descrita abaixo:
1. Browser default
2. External Style Sheet
3. Internal Style Sheet (dentro do tag <head>)
4. Inline Style (dentro de elementos HTML)
Obs.: O item (4) sobrepõem o (3), que sobrepõem o (2), que por sua vez
sobrepõem o (1).
08
Desenvolvimento Web Professor Horácio Soares
Seletores:
CSS – Cascating Styles Sheet
Elemento SeletorSão os próprios tags HTML
p { text-align:center; color:red;}
Para fazer com que as definições de estilo fiquem mais fáceis de entender, você pode colocar cada propriedade em uma linha.
p{ text-align: center; color: black; font-family: arial;}
Agrupando: Vc pode agrupar seletores, para isto, coloque uma vírgula para separar os seletores. Cada um dos headers terá cor verde.
h1,h2,h3,h4,h5,h6 {color: green;}
09
Desenvolvimento Web Professor Horácio Soares
Seletores:
CSS – Cascating Styles Sheet
Seletor ContextualEste seletor especifica os atributos style para elementos HTML baseados no contexto em que ele é apresentado. Neste exemplo abaixo o seletor contextual especifica que o texto bold com uma lista “purple”
li b {color: purple;}
Nos seletores contextuais, os seletores individuais são separados por um espaço em branco.
10
Desenvolvimento Web Professor Horácio Soares
Seletores:
CSS – Cascating Styles Sheet
Seletor de ClasseEspecifica que os elementos HTML podem ser agrupados em uma classe utilizando o atributo CLASS:
<H1 CLASS=“teste”>Testando</H1>
<p CLASS=“teste”>Testando com o parag...</H1>para especificar um style para elementos de uma classe particular, coloque o nome da classe logo após o Seletor separados por um (.) ponto.
H1.teste {color:red;}Para aplicar um Style para todos os elementos HTML através de uma classe retire a tag
.teste {color:red;}
11
Desenvolvimento Web Professor Horácio Soares
Seletores:
CSS – Cascating Styles Sheet
Seletores de IDO Seletor ID é diferente do Seletor Classe. Com Seletor de Classe vc pode ser aplicado a diversos elementos em uma página HTML, com o Seletor ID será sempre aplicado a um único elemento.
O atributo ID deve ser único no documento.
<p ID=“pri-paragrafo”>Primeiro Parágrafo...</p>
para aplicar um Style em um elemento com ID, crie seu ID colocando o símbolo # na frente do nome do seletor.
#pri-paragrafo {font-weight:bold;}
12
Desenvolvimento Web Professor Horácio Soares
Seletores:
CSS – Cascating Styles Sheet
Seletores de ID
A regra de estilo abaixo, serra aplicada ao elemento p que tem o valor de ID = “para1”
p#para1{ text-align: center;color: red; }
A regra de estilo abaixo será aplicada ao primeiro elemento que tem valor deID = “wer345”
#wer345 {color: green;}A regra será aplicada ao elemento H1
<h1 id="wer345">Some text</h1>
13
Desenvolvimento Web Professor Horácio Soares
Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos:
CSS – Cascating Styles Sheet
Elementos lock-Level
Elementos como parágrafos (P), títulos (H1), listas, tabelas, DIV´s e BODY. Geralmente, elementos do tipo block-level aparecem na página HTML em uma linha própria, começando uma nova linha e forçando qualquer outro elemento a fazer o mesmo.
Elementos Inline
Elemento como a ancora (A), EM, e a maioria dos elementos, como imagens, campos de entrada de dados de um formulário. Elementos Inline, não forçam a quebra de linha antes e depois como o Block-level.
14
Desenvolvimento Web Professor Horácio Soares
Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos:
CSS – Cascating Styles Sheet
Elementos List-item
Elementos que no HTML incluem apenas os elementos de listas (LI). Eles são especialmente definidos para terem uma apresentação aspectos como um marcador (bullet, letra, numero).
15
Desenvolvimento Web Professor Horácio Soares
Caixas e Bordas:
CSS – Cascating Styles Sheet
Todos os elementos em CSS geram uma caixa retangular em volta dele próprio chamado “element box”. Está caixa descreve quanto espaço em um elemento deve ocupar.
Existem diversas propriedades para ajustar os espaços entre o conteúdo do elemento e sua borda, do elemento com outros elementos, etc.
16
Desenvolvimento Web Professor Horácio Soares
bord
er-right
Width(largura)
height(altura)
padding-top - espaço entre a parte superior do objeto e a borda
border-top
border-bottom
margin-top (espaço entre borda superior e outros objetos)b
ord
er-l
eft
padding-bottom - espaço entre a parte inferior do objeto e a borda
pad
din
g-le
ftp
add
ing-righ
t
margin- bottom
mar
gin
-lef
tm
argin-righ
tDetalhes da Box Model:
17
Desenvolvimento Web Professor Horácio Soares
Problemas da Box Model:Existe uma diferença entre a aplicação de valores no Box Model do Internet Explorer e do resto dos navegadores.
IE - Quando definimos a largura de um elemento em 100px e incluímos, por exemplo, um valor para o padding (espaço entre o conteúdo e a borda do elemento) a esquerda e direita em 10 px, a largura do elemento continua em 100px, só que a área do conteúdo do elemento agora passou a ser de 80px.
Outros – Nos outros navegadores, quando temos o mesmo elemento com largura de 100px e incluímos um valor para o padding a esquerda e direita em 10px, a largura do elemento passa a ser de 120px e enquanto a área do conteúdo do elemento continua em 100px.
Rack para funcionar da mesma maneira em todos os navegadores:
.teste1{background:gray;width:400px; padding:10px;}
.teste2{background:gray;width:400px; _width:420px; padding:10px;}
18
Desenvolvimento Web Professor Horácio Soares
Referência CSS2
http://www.w3schools.com/css/css_reference.asp
CSS – Cascating Styles Sheet
19
Desenvolvimento Web Professor Horácio Soares
Box Model:
CSS – Cascating Styles Sheet
H1 { width: 880px; height: 50px;padding: 15px 5px 15px 50px;border-top: red 5px solid;border-left: red 2px dashed;border-right: red 2px dashed;border-bottom: red 1px solid;margin: 12px 10px 1px 10px; color: #336699; font-size: 20px; font-family: arial, sans-serif; background-color: #eeeeee; text-align: left; }
20
Desenvolvimento Web Professor Horácio Soares
Diferentes tipos para especificar tamanhos:
CSS – Cascating Styles Sheet
in (Polegadas)
cm (Centimetros)
mm (Milimetros)
pt (Pontos - Padrão em tipografia, usados em impressoras. Existem 72 pontos para cada polegada)
pc (Picas - equivalente a 12 pontos)
em (por exemplo, 1.2em é o mesmo que 120%)
px (Pixels)
% (Percentual) - por exemplo: H1 {line-height:120%} seta a separação entre linhas para 120% do tamanho corrente de altura.
21
Desenvolvimento Web Professor Horácio Soares
Cores:
CSS – Cascating Styles Sheet
#RRGGBB (Hexadecimal para vermelho, verde e azul)
#RGB (Uma forma curta para os valores em Hexa para com valores repetidos. Ex: #F8C #FF88CC
rgb (rrr, ggg, bbb) - especifica valores de 0 até 255 ex.: verde puro rgb(0, 255, 0)
Palavras chaves baseadas nas cores originais do Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow.
22
Desenvolvimento Web Professor Horácio Soares
Comentários:
CSS – Cascating Styles Sheet
/* isso eh um comentario */
p { text-align: center; /* isso eh outro comentario */
color: black; font-family: arial }
23
Desenvolvimento Web Professor Horácio Soares
Background:CSS – Cascating Styles Sheet
body{ background: #FF0000 }body{ background: url(imagem.gif) no-repeat top }body{ background: #00FF00 url(imagem.gif) no-repeat fixed top }
Valores possíveis para posicionamento:top left top center top rightcenter left center center center rightbottom left bottom center bottom right Obs.: o primeiro valor é de posicionamento horizontal e o segundo vertical. O canto supetior esquer é 0 0. Pixels pode ser uma medida utilizada (0px 0px)
24
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Aplicando cor ao texto
25
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Aplicando cor ao background
26
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Alterando o espaçamento entre as letras
27
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Alinhando o texto
28
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Decoração do texto
29
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Identação do texto
30
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Caixa alta, baixa e as apenas as iniciais em caixa alta
31
Desenvolvimento Web Professor Horácio Soares
Aparência dos textos em CSSCSS – Cascating Styles Sheet
Tipo de fonte, tamanho, estilo, etc.
p.tipo{ font-family:arial,verdana}
p.tamanho1{font-size:10px;} p.tamanho2{font-size:14pt;}p.tamanho3{font-size:2em;}
p.peso1{font-weight:bold;} p.peso2{font-weight:bolder;}p.peso3{font-weight:normal;} p.peso4{font-weight:lighter;}
p.estilo1{font-style:normal;} p.estilo2{font-style:italic;} p.estilo3{font-style:oblique;}
Dica – propriedades em uma só declaração: p{font: italic small-caps bolder 12px arial;}
32
Desenvolvimento Web Professor Horácio Soares
Definição - sentido do relógioCSS – Cascating Styles Sheet
border: 10px; margin:1px; padding:5px;
Propriedade: a b;Border: 1px (em cima e em baixo) 5px (esquerda e direita)
Border-top:1px; border-bottom:1px;border-left:5px; border-right:5px;
Propriedade: a b c d;border:1px 20px 5px 10px;border-top:1px; border-right:20px;border-bottom:5px; border-left:10px
a
a
a
a
a
b
a
b
a
b
c
d
1px
20px
5px
10px
33
Desenvolvimento Web Professor Horácio Soares
Bordas dos elementos - estilosCSS – Cascating Styles Sheet
34
Desenvolvimento Web Professor Horácio Soares
Bordas (border) - estilosCSS – Cascating Styles Sheet
p{border-style: solid; (estilo da borda)
border-color: #0000ff; (cor da borda que também pode ser aplicada das seguintes formas - border-color:blue;
border-color:#00f; ou border-color:rgb(0,0,255); )
border-bottom-width: 15px (espessura da linha)}
Todos os estilos em uma única declaração:p { border: 16px double rgb(250,0,255); }
35
Desenvolvimento Web Professor Horácio Soares
Margens (margin) – espaço entre a borda do elemento e outros objetos a sua volta.
CSS – Cascating Styles Sheet
p{margin-top:10px;margin-right:20px;margin-bottom:15pxmargin-left: 5px;}
Todos os estilos em uma única declaração:p { margin: 16px; }p { margin: 16px 24px; }p{ margin: 10px 15px 20px;}p { margin:10px 20px 15px 5px; }
a
b
a
b
a
b
c
d
dois valores
quatro valores
36
Desenvolvimento Web Professor Horácio Soares
Padding (espaçamento entre o conteúdo do elemento e sua borda)
CSS – Cascating Styles Sheet
p{padding-top:10px;padding-right:20px;padding-bottom:15pxpadding-left: 5px;}
Todos os estilos em uma única declaração:p {padding: 16px; }p {padding: 16px 24px; }p{padding: 10px 15px 20px;}p {padding:10px 20px 15px 5px; }
a
b
a
b
a
b
c
d
dois valores
quatro valores
37
Desenvolvimento Web Professor Horácio Soares
Listas CSS – Cascating Styles Sheet
<html><head><style type="text/css">ul {list-style-type:square; list-style-position:inside; list-style-image:url('arrow.gif')}</style></head><body><ul><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul></body></html>
38
Desenvolvimento Web Professor Horácio Soares
Dimensões CSS – Cascating Styles Sheet
Height- Altera a altura do elemento auto
length%
line-height- Altera a distância entre linhas normal
numberlength
Width- Altera a largura do elemento auto
%length
39
Desenvolvimento Web Professor Horácio Soares
Display CSS – Cascating Styles Sheet
DisplayComo o elemento será apresentado: none
inlineblocklist-item
VisibilitySe o elemento está ou não visível: visible
hidden
40
Desenvolvimento Web Professor Horácio Soares
Posicionamento CSS – Cascating Styles Sheet
PositionSe a posição do elemento será: relativa, absoluta, estática ou fixa: static
relativeabsolutefixed
Posição: bottom (auto, 50% ou 100px)left (auto, 50% ou 100px)right (auto, 50% ou 100px)top (auto, 50% ou 100px)
41
Desenvolvimento Web Professor Horácio Soares
Posicionamento CSS – Cascating Styles Sheet
Overflow:<style type="text/css">div {
background-color:#00FFFF;width:150px;height:150px;overflow: scroll
}</style>
42
Desenvolvimento Web Professor Horácio Soares
Posicionamento CSS – Cascating Styles Sheet
Vertical align an image:<style type="text/css">
img.top {vertical-align:text-top}img.bottom {vertical-align:text-bottom}
</style>
43
Desenvolvimento Web Professor Horácio Soares
Posicionamento CSS – Cascating Styles Sheet
Z-index:<style type="text/css">img.x {
position:absolute;left:0px;top:0px;z-index:-1}
</style>
44
Desenvolvimento Web Professor Horácio Soares
Posicionamento CSS – Cascating Styles Sheet
FloatComo o elemento será apresentado junto com outros: left
rightnone
<style type="text/css">img {float:right}</style>
45