Download - Aw aula 04
CSS
Material elaborado pelo Prof. Bruno GomesMaterial elaborado pelo Prof. Bruno Gomes
Agenda
• Introdução• CSS• Sintaxe CSS• Como usar CSS• Como usar CSS
Introdução
• Problemas:o HTML nunca foi designado para conter formatação
o HTML foi criado para definir o conteúdo de um documentodocumento
o Tags de formatação (fonte, cores, alinhamento) foram adicionados no HTML (versão 3.1) (inicioupesadelo para os desenvolvedores web!!)
o Quando sites eram grandes, se tornava um processo longo e trabalho de formatação
HTML nunca foi designado para conter tags para
HTML foi criado para definir o conteúdo de um
de formatação (fonte, cores, alinhamento) foram adicionados no HTML (versão 3.1) (iniciou-se um pesadelo para os desenvolvedores web!!)Quando sites eram grandes, se tornava um processo longo e trabalho de formatação
Solução?
• A World Wide Web Consortium (W3C) criou o CSS
• No HTML 4.0 toda a formatação pode ser • No HTML 4.0 toda a formatação pode ser removida da página HTML e salva em um arquivo separado
A World Wide Web Consortium (W3C)
No HTML 4.0 toda a formatação pode ser No HTML 4.0 toda a formatação pode ser removida da página HTML e salva em um
CSS
• Cascading Style Sheets (Folhas de Estilo em Cascata)
• Mecanismo simples para adicionar estilos às páginas Webàs páginas Web
• Recomendação W3C• Todos os Browsers suportam CSS
heets (Folhas de Estilo
Mecanismo simples para adicionar estilos
Recomendação W3CTodos os Browsers suportam CSS
CSS
• Características:o Definem como exibir os elementos de uma página web
o Adicionados no HTML 4.0o Simplifica e reduz tempo de trabalhoo Simplifica e reduz tempo de trabalhoo Folhas de estilos externos são armazenados em arquivos CSS
Definem como exibir os elementos de uma
Adicionados no HTML 4.0Simplifica e reduz tempo de trabalhoSimplifica e reduz tempo de trabalhoFolhas de estilos externos são armazenados
CSS
• Vantagemo Facilidade e praticidade na hora de definir os estilos de uma página
o Permite agrupar em poucas linhas a formatação de uma páginade uma página
o Permite alterar a aparência e o layout de todas as páginas em um site apenas editando um arquivo único
Facilidade e praticidade na hora de definir os estilos de uma páginaPermite agrupar em poucas linhas a formatação
Permite alterar a aparência e o layout de todas as páginas em um site apenas editando um
Sintaxe CSS
• Composta por 3 partes:o seletor, propriedade e um valor:
seletor {propriedade:valor}
Composta por 3 partes:seletor, propriedade e um valor:
seletor {propriedade:valor}
Sintaxe CSS
• O seletor é normalmente o elemento HTML (deseja definir
• Propriedade é o atributo que deseja alterar• Propriedade e o valor são separados por dois pontos
body {color: black}
O seletor é normalmente o elemento HTML (tag) que se
Propriedade é o atributo que deseja alterarPropriedade e o valor são separados por dois pontos
body {color: black}
Sintaxe CSS
Observações:• Se o valor tem várias palavras, colocar aspas em volta:
• Se quiser especificar mais de uma propriedade, separar por ponto e vírgula:
p {font-family:"sans serif"}
p {text-align:center;color:red}
Se o valor tem várias palavras, colocar
Se quiser especificar mais de uma propriedade, separar por ponto e vírgula:
family:"sans serif"}
align:center;color:red}
Sintaxe CSS
• Para que as definições de estilo sejam mais legíveis, pode-se descrever uma propriedade em cada linha:
pp{text-align:center;color:black;font-family:arial}
Para que as definições de estilo sejam se descrever uma
propriedade em cada linha:
align:center;color:black;
family:arial
Sintaxe CSS
• Agrupamentoo CSS permite agrupar vários seletores. Eles são separados por uma vírgula:
h1,h2,h3,h4,h5,h6{color:green}
CSS permite agrupar vários seletores. Eles são separados por uma vírgula:
h1,h2,h3,h4,h5,h6
color:green
Sintaxe CSS
• Classe CSSo Permite definir diferentes estilos para o mesmo elemento HTML:
p.right {text-align:right}p.center {text-
o Deve-se usar o atributo class
• Obs.: Não inicie com número o nome da Classe
p.center {text-align:center}
<p class="right">Esse parágrafo será alinhado a direita.</p><p class="center">Esse parágrafo será centralizado</p>
Permite definir diferentes estilos para o mesmo
align:right}
class na página:
Obs.: Não inicie com número o nome da
<p class="right">Esse parágrafo será alinhado a
<p class="center">Esse parágrafo será centralizado</p>
Sintaxe CSS
• Classe CSSo Para adicionar mais de uma classe em um determinado elemento:
<p class="center <p class="center bold">Parágrafo.</p>
Para adicionar mais de uma classe em um determinado elemento:
bold">Parágrafo.</p>
Sintaxe CSS
• Classe CSS:o Para definir um estilo que será utilizado por todos os elementos HTML que possuírem a mesma classe, é só omitir o nome da tag do seletor:
.center {text-
• Na página:
.center {text-align:center}
<h1 class="center">Título centralizado.</h1><p class="center">Parágrafo centralizado.</p>
Para definir um estilo que será utilizado por todos os elementos HTML que possuírem a mesma classe, é só omitir o nome da tag do seletor:
<h1 class="center">Título
<p class="center">Parágrafo
Sintaxe CSS
• Adicionando estilos em elementos com atributos específicos:
input[type="text"] {backgroundcolor:blue}color:blue}
Adicionando estilos em elementos com atributos específicos:
input[type="text"] {background-color:blue}color:blue}
Sintaxe CSS
• O seletor id:o Definição de estilos para elementos com o seletor id
#green #green {color:green}
p#para1{text-align:center;color:red}
Definição de estilos para elementos com o
<div id="green"> ...</div>
Sintaxe CSS
• Comentário CSS:o Inicia com "/*“ e termina com "*/“
/*This is a comment*/pp{text-align:center;/*This is another comment*/color:black;font-family:arial}
Inicia com "/*“ e termina com "*/“
/*This is a comment*/
align:center;/*This is another comment*/color:black;
family:arial
CSS – Como Usar
• Como usar:o CSS Externoo CSS Internoo CSS em Linha
CSS Externo
• Ideal quando o estilo é aplicado a muitas páginas• Pode mudar a aparência de um site inteiro mudando somente um arquivo
• Cada página tem um link para o arquivo através da tag <link>, que fica dentro de <head>:da tag <link>, que fica dentro de <head>:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
Ideal quando o estilo é aplicado a muitas páginasPode mudar a aparência de um site inteiro mudando somente um arquivoCada página tem um link para o arquivo através da tag <link>, que fica dentro de <head>:da tag <link>, que fica dentro de <head>:
<link rel="stylesheet" type="text/css"
CSS Externo
• Um CSS Externo por ser escrito em qualquer editor de texto
• Arquivo não deve ter nenhuma tag HTML• O arquivo deve ser salvo com a extensão • O arquivo deve ser salvo com a extensão .css
• Exemplo:hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}
Estilo.css
Um CSS Externo por ser escrito em qualquer editor de textoArquivo não deve ter nenhuma tag HTMLO arquivo deve ser salvo com a extensão O arquivo deve ser salvo com a extensão
image:url("images/back40.gif")}
Estilo.css
CSS Interno
• Utilizado quando um documento tem um estilo único• Deve-se definir o estilo interno dentro da seção (<head>) da página HTML
• Utiliza a tag <style>• Exemplo:
<head><style type="text/css">hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}</style></head>
Utilizado quando um documento tem um estilo únicose definir o estilo interno dentro da seção header
image:url("images/back40.gif")}
CSS em Linha
• Mistura conteúdo com apresentação (problema!!)• Utilizar o atribulo style na • Pode conter qualquer propriedade CSS• Exemplo:
<p style="color:red;marginleft:20px">Parágrafo.</p>
Mistura conteúdo com apresentação (problema!!)na tag
Pode conter qualquer propriedade CSS
<p style="color:red;margin-left:20px">Parágrafo.</p>
Links
• Validador para CSS: http://jigsaw.w3.org/cssvalidator/
• Mais sobre CSS: http://www.w3schools.com/css
http://jigsaw.w3.org/css-
http://www.w3schools.com/css/