Unidade 3 – Introdução ao CSS Prof.: Henrique Santos Produção de Sites Unidade 3 – Introdução ao CSS Prof.: Henrique Santos
O que CSS? 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.
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; text-transform:capitalize; 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 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 CSS http://www.w3schools.com/css/css_reference.asp