Embed Size (px)
Citation preview
Produção de Sites
Unidade 3 – Introdução ao CSSProf.: Henrique Santos
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?
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
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
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>
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.
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.
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>
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>
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>
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>
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" />
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>
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>
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.
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)
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
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.
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.
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.
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
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
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.
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.
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;
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;
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;
Modelo de CSS
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%.
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%.
Propriedade Position
A propriedade Position define o tipo de posicionamento dos elementos
Possíveis valores: absolute, relative.
Posicionamento
Posicionamento dos elementos é feito através das propriedades top, left, right, bottom
Possíveis valores: auto, inherit, Xpx, Xcm, Xpt, X%.
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
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
