aw aula 04

24
CSS Material elaborado pelo Prof. Bruno Gomes s

Upload: aegospm

Post on 18-Dec-2014

245 views

Category:

Technology


0 download

DESCRIPTION

web

TRANSCRIPT

Page 1: Aw aula 04

CSS

Material elaborado pelo Prof. Bruno GomesMaterial elaborado pelo Prof. Bruno Gomes

Page 2: Aw aula 04

Agenda

• Introdução• CSS• Sintaxe CSS• Como usar CSS• Como usar CSS

Page 3: Aw aula 04

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

Page 4: Aw aula 04

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

Page 5: Aw aula 04

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

Page 6: Aw aula 04

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

Page 7: Aw aula 04

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

Page 8: Aw aula 04

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}

Page 9: Aw aula 04

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}

Page 10: Aw aula 04

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}

Page 11: Aw aula 04

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

Page 12: Aw aula 04

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

Page 13: Aw aula 04

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>

Page 14: Aw aula 04

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>

Page 15: Aw aula 04

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

Page 16: Aw aula 04

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}

Page 17: Aw aula 04

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>

Page 18: Aw aula 04

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

Page 19: Aw aula 04

CSS – Como Usar

• Como usar:o CSS Externoo CSS Internoo CSS em Linha

Page 20: Aw aula 04

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"

Page 21: Aw aula 04

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

Page 22: Aw aula 04

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")}

Page 23: Aw aula 04

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>

Page 24: Aw aula 04

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/