Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.
Transcript of Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.
![Page 1: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/1.jpg)
Produção de Sites
Unidade 3 – Introdução ao CSSProf.: Henrique Santos
![Page 2: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/2.jpg)
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata)
Estilos definem como exibir elementos HTML
Estilos foram adicionados ao HTML 4.0 para resolver um grande problema de exibição de elementos HTML.
• HTML não foi projetado para conter tags de formatação de documentos
• Quando tags como <font> e atributos de cores foram adicionadas a especificação do HTML 3.2, começou um pesadelo para desenvolvedores web.
O que CSS?
![Page 3: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/3.jpg)
CSS a Grande Solução
Em HTML 4.0, toda formatação deve ser removida do documento HTML e armazenada em um arquivo CSS separado.
O arquivo CSS permite a alteração da aparência e layout de todas páginas em um Web site, apenas editando um arquivo.
Todos Navegadores suportam CSS atualmente
![Page 4: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/4.jpg)
Sintaxe CSS
A sintaxe básica de CSS seria:propriedade:valor
Por exemplo mudar a cor usa-se a propriedade color, o valor seria o código RGB da cor, então para mudar a cor para vermelho usando CSS seria:color:#FF0000
Se houver mais de uma propriedade use ; para separá-los:propriedade1:valor1;propriedade2:valor2
![Page 5: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/5.jpg)
Atributo Style
Toda Tag HTML possui o atributo style
Este atributo pode ser usado para atribuir estilos CSS ao elemento
Exemplo:<p style="color:#0000FF"> Este parágrafo é azul. </p>
<p style="color:#00FF00;text-align:center"> Já este é verde centralizado. </p>
![Page 6: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/6.jpg)
Propriedades CSS
Algumas propriedades mais comuns de CSS
• color:#FFFFFF – Muda a cor do texto.• text-align:center – Muda o alinhamento do
texto. • text-decoration:underline – Coloca (ou retira)
alguma forma de decoração do texto. Possíveis valores: none, underline, overline, line-through, blink.
• font-size:2.5em – Muda o tamanho da fonte. Possíveis valores: Xem, Xpx, X%, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
• background-color:#000000 – Muda a cor do fundo.
![Page 7: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/7.jpg)
Outras Propriedades
Existem diversas outras propriedades CSS que lidam com bordas, margens, listas, tabelas, posicionamento, entre outros.
Veremos diversos no decorrer da disciplina mas aconselha-se procurar tutoriais de CSS para aprender essas propriedades.
![Page 8: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/8.jpg)
CSS Interno
É muito chato ficar formatando cada elemento individualmente usando o atributo style
Por isso é possível declarar ‘classes de estilos’ no documento HTML para usar nos elementos
Sempre declare esses estilos dentro da tag <head>
![Page 9: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/9.jpg)
CSS Interno
A declaração de estilo começa com a tag <style type="text/css"> e termina com </style>
Exemplo:<style type="text/css">.azul {color:#0000FF}.verde_grande { color:#00FF00; font-size:2.5em }</style>
![Page 10: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/10.jpg)
CSS Interno
Para usar as classes de estilo declaradas no começo do texto basta usar o atributo class que todo elemento HTML possui.
Exemplo: <p class="azul"> Este parágrafo é azul </p> <p class="verde_grande"> Enquanto esse é maior e verde. </p>
![Page 11: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/11.jpg)
Mudando o padrão dos Elementos
CSS Interno facilita muito a vida mas e se quiser mudar o comportamento de todos elementos de um tipo?
• Basta declarar o elemento na tag de estilo e mudar seus atributos
Exemplo: <style type="text/css"> p {color:#0000FF} h1{color:#00FF00; font-size:2.5em; text-align:center}</style>
![Page 12: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/12.jpg)
CSS Externo
O CSS Interno ajuda bastante mas e se for preciso usar o mesmo padrão em várias páginas diferentes?
• Basta criar um arquivo CSS separado e importá-lo no começo dos documentos HTML
Um arquivo CSS é um arquivo texto comum com extensão .css
Lembre de importar dentro da tag <head> Importe o arquivo usando a tag:<link rel="stylesheet" type="text/css" href="MeuArquivoEstilo.css" />
![Page 13: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/13.jpg)
Comentário em CSS
Pode fazer comentários dentro do CSS Interno ou Externo.
Comentário começa com /* e termina com */
Exemplo:<style type="text/css">p {color:#0000FF} /* Isto seria um comentário */
</style>
![Page 14: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/14.jpg)
Tag <span> do HTML
Como formatar somente parte de um elemento (parágrafo por exemplo), sem sair do padrão CSS? Solução: Use a tag <span> do HTML.
• A tag <span> por si só, faz nada com os dados contidos nela.
• Usando o CSS no entanto, é possível criarmos formatação para partes de um elemento.
Exemplo:•<p> Este parágrafo <span class= "atencao"> exemplifica bem </span> o que se pode fazer.</p>
![Page 15: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/15.jpg)
Tag <div> do HTML
Elemento HTML usado para agrupar informação mas que sozinha não faz coisa alguma.
Grosso modo, tem a mesma função da tag Span.
Para critério de elegância, usa-se a tag div para agrupar informações, ou blocos de informação; enquanto use-se o span para formatar partes de elementos.
![Page 16: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/16.jpg)
Propriedade CSS
Veremos com mais detalhes as seguintes propriedades CSS:
• Background (Cor de Fundo)• Font (Fonte)• Text (Texto)• Border (Borda)• Margin (Margem)• Padding (Preenchimento)• Width (Comprimento)• Height (Altura)• Position (Posicionamento)
![Page 17: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/17.jpg)
Propriedade Background
As propriedades de background mudam o fundo do elemento background-color:#000000
• Muda a cor do fundo. • Possíveis valores: nome da cor (inglês),
código rgb da cor, transparent. background-image:url('arquivo.gif')
• Coloca imagem no fundo background-repeat:no-repeat
• Indica se a imagem do fundo deve ser repetida.
• Possíveis valores: repeat, repeat-x, repeat-y, no-repeat
![Page 18: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/18.jpg)
Propriedade Background
background-position:top right • Onde começa a imagem do fundo. • Possíveis valores: top left, top center, top
right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, posição_x posição_y.
background-attachement:scroll• Indica se a imagem de fundo deve rolar
juntamente com a página. • Póssíveis valores: fixed, scroll.
![Page 19: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/19.jpg)
Propriedade Font
As propriedades de Font mudam a fonte do elemento font-family:"Times New Roman", serif;
• Define uma lista de fontes a serem usadas na exibição da pagina
• Possíveis valores: Nome da fonte. font-style:italic;
• Define o estilo da fonte• Possíveis valores: normal, italic, oblique.
![Page 20: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/20.jpg)
Propriedade Font
font-variant:small-caps;• Indica uma variação na fonte.• Possíveis valores: normal, small-caps.
font-weight:bold;• Muda o negrito da fonte.• Alguns navegadores suportam números de 100-
900 para definir o peso da fonte.• Possíveis valores: normal, bold.
font-size:2.5em;• Muda o tamanho da fonte.• Possíveis valores: Xem, Xpx, X%, xx-small, x-
small, small, medium, large, x-large, xx-large, smaller, larger.
![Page 21: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/21.jpg)
Propriedade Text
As propriedades de text lidam com formatação do Texto text-ident:30px;
• Aplica um recuo à primeira linha do texto (normalmente parágrafo).
• Possíveis valores: Xpx, X% text-align:center;
• Muda o alinhamento do texto.• Possíveis valores: left, right, center, justify
![Page 22: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/22.jpg)
Propriedade Text
text-decoration:underline;• Coloca (ou retira) alguma forma de
decoração do texto. • Possíveis valores: none, underline, overline,
line-through, blink. text-transform:capitalize;
• Muda o formato maiúscula/minúscula do texto.
• Possíveis valores: none, uppercase, lowercase, capitalize
![Page 23: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/23.jpg)
Propriedade Border
A propriedade border lida com a borda dos elementos border-width:thin;
• Define a espessura da borda.• Possíveis valores: thin, medium, thick, Xpx.
![Page 24: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/24.jpg)
Propriedade Border
border-color:#00FF00;• Muda a cor da borda• Possíveis valores: nome da
cor (inglês), código rgb da cor
border-style:double;• Muda o estilo (ou tipo) da
borda.• Possíveis valores: solid,
dotted, dashed, double, groove, ridge, inset, outset.
![Page 25: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/25.jpg)
Propriedade Border
Para mudar somente uma das bordas basta usar a sua posição (left, right, top, bottom) no elemento.
Exemplo• border-style:solid;
border-left-color:#0000FF;border-bottom-color:#00FF00;border-right-color:#FF0000;border-top-style:dashed;
![Page 26: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/26.jpg)
Propriedade Margin
A propriedade margin define a margem entre as bordas dos elementos. Use a propriedade margin, seguida da
posição (left, right, top, bottom) Possíveis valores: auto, inherit, Xpx,
Xcm, Xpt, X%. Exemplo:
• margin-left: 20px;margin-top: 50px;
![Page 27: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/27.jpg)
Propriedade Padding
A propriedade padding define a distância entre a borda e o conteúdo do elemento. Use a propriedade margin, seguida da
posição (left, right, top, bottom) Possíveis valores: inherit, Xpx, Xcm, Xpt,
X%. Exemplo:
• padding-left: 20px;padding-bottom: 50px;
![Page 28: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/28.jpg)
Modelo de CSS
![Page 29: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/29.jpg)
Propriedade Width
A propriedade width define a largura ou comprimento do elemento width:50%;
• Define a largura padrão do elemento. min-width: 100px;
• Define a largura mínima do elemento max-width: 500px;
• Define a largura máxima do elemento Possíveis valores: auto, inherit, Xpx,
Xcm, Xpt, X%.
![Page 30: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/30.jpg)
Propriedade Height
A propriedade height define a altura do elemento height:10%;
• Define a altura padrão do elemento min-height: 10px;
• Define a altura mínima do elemento max-height: 20px;
• Define a altura máxima do elemento Possíveis valores: auto, inherit, Xpx,
Xcm, Xpt, X%.
![Page 31: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/31.jpg)
Propriedade Position
A propriedade Position define o tipo de posicionamento dos elementos
Possíveis valores: absolute, relative.
![Page 32: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/32.jpg)
Posicionamento
Posicionamento dos elementos é feito através das propriedades top, left, right, bottom
Possíveis valores: auto, inherit, Xpx, Xcm, Xpt, X%.
![Page 33: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/33.jpg)
Zen Garden
O Zen Garden é um bom exemplo do que pode ser alcançado com o bom uso de CSS
Esse site possui vários modelos de CSS enquanto o documento HTML permanece EXATAMENTE o mesmo.
http://www.csszengarden.com
![Page 34: Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos.](https://reader035.fdocuments.net/reader035/viewer/2022062512/552fc16a497959413d8eba55/html5/thumbnails/34.jpg)
Fontes
W3C School – CSS Tutorial (inglês) http://www.w3schools.com/css/css_intro.asp
HTML .net – CSS Tutorial(português) http://pt-br.html.net/tutorials/css/
Lista com todas propriedades CSShttp://www.w3schools.com/css/css_reference.asp