Unb 2012.1 - dweb - 05 - css3 - fundamentos

1 Monday, 19 de March de 12 Capítulo 5 - CSS3: Fundamentos

Curso Superior de Tecnologia em Design Gráfico

“E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus..” Romanos 12:2

5 CSS3: Fundamentos

DWEB - Design para Web

DWEB - Design para Web / Carlos José


Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Apresentar os fundamentos da linguagem de formatação CSS.



Agenda

n O que é CSS? n  Sintaxe CSS n Como inserir CSS em documentos HTML n  Seletores n Medidas



CSS - Cascading Style Sheets

n  O que é CSS? î CSS é a sigla para Cascading Style Sheets, que pode ser

traduzida para Folhas de Estilo em Cascata. n  A especificação CSS1 foi criada em 1996 pela W3C (World Wide

Web Consortium www.w3c.org), com o objetivo de substituir as marcações HTML de formatação, separando assim a camada de apresentação (CSS) e a camada de informação (xHTML).

î CSS é uma linguagem simples e de fácil aprendizagem para a criação de layouts para web sites.

n  É trabalho do CSS controlar cores, tamanho, tipografia e posicionamento dos elementos em um site.




n  Por que devemos utilizar CSS? î CSS apesar de simples e de fácil aprendizagem,

é uma poderosa e precisa linguagem de formatação, que reduz drasticamente o consumo de banda do usuário pelo site.

n  É uma linguagem padronizada pela W3C e é bem suportada por todos os navegadores modernos.

n  Segue o link oficial com todas as referências do CSS î  http://www.w3schools.com/css/css_reference.asp




n Quais as vantagens em se usar CSS? î Separando a formatação do conteúdo, a

manutenção do site torna-se mais fácil. î Alterações no layout podem ser feitas sem a

necessidade de se alterar o documento HTML, e o contrário também é verdadeiro;

î Separar a formatação do conteúdo torna o site mais acessível.



CSS + HTML

HTML = conteúdo CSS = aparência



XHTML

n Comparando o velho com o novo!

HTML XHTML



Comparando o velho com o novo!

HTML




XHTML




HTML




XHTML



HTML - uma estrutura de árvore

html

header

title

body

ul

li li li



HTML - uma estrutura de árvore

html

header

title

body

ul

li li li

Antecessor

Descendente

Descendente




n  Regra CSS î Escrever regras de CSS é muito simples.

A sintaxe segue o seguinte modelo:

seletor {propriedade: valor; propriedade: valor}

seletor { propriedade: valor; propriedade: valor }

Quando existir mais de uma propriedade, costuma-se endentar a declaração para facilitar a leitura!



n  Sintaxe CSS


p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000 }

Seletor

Propriedade Valor




n  Sintaxe CSS î Comentário em CSS

n  Deve-se usar os delimitadores /* */, e deve ser usado para fazer comentário de uma única linha de texto ou de um bloco de texto.

/* inicio da formatacao*/ seletor { propriedade: valor; propriedade: valor } /*fim*/




n  Antes de qualquer coisa!

CSS3 - Fundamentos

inline.html

incorporado.html

externo.html

css

style.css




n  Como inserir um CSS num documento HTML î Existem 3 formas:

n  Estilos inline; n  Estilos incorporados; n  Estilos externos.




n  Como inserir um CSS num documento HTML î Estilos inline;

n  Folhas de estilo inline são declaradas diretamente na marcação HTML que se quer formatar, através do atributo style.

n  Sua formatação só é válida para aquele elemento em particular.

n  Seu uso deve ser extremamente limitado ou restrito a poucas páginas, pois essa técnica retira toda a flexibilidade do CSS: quaisquer mudanças na formatação deverá ser feita diretamente na marcação que se deseja mudar.




<!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>CSS3 - Fundamentos</title> </head> <body> <h1>CSS3 - Fundamentos</h1> <p style="color:#ff0000;font-weight:bold;text-align:center; border:1px solid #ff0000">O texto deste parágrafo será vermelho, negrito e centralizado, e terá uma borda vermelha de 1 pixel de largura ao redor dele.</p> <p>O texto deste parágrafo está sem formatação.</p> </body> </html>

inline.html




n  Como inserir um CSS num documento HTML î Estilos incorporados;

n  Folhas de estilo incorporados só são válidas para apenas um documento específico.

n  A especificação do CSS é feita dentro do elemento <head>, através da marcação <style>.

n  Os atributos possíveis para a marcação <style> são: î  type: especifica o tipo de conteúdo dentro do elemento.

Seu valor para CSS é text/css; î  media: especifica o tipo de mídia ao qual serão aplicados os

estilos.



CSS - Cascading Style Sheets <!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>CSS3 - Fundamentos</title> <style type=“text/css”> p{ color:#ff0000;

font-weight:bold; text-align:center; border:1px solid #ff0000"

} </style> </head> <body> <h1>CSS3 - Fundamentos</h1> <p>O texto deste parágrafo será vermelho, negrito e centralizado, e terá uma borda vermelha de 1 pixel de largura ao redor dele.</p> <p>O texto deste parágrafo também está com a formatação.</p> </body> </html>

incorporado.html




n  Como inserir um CSS num documento HTML î Estilos externos;

n  É um simples arquivo de texto, mas com extensão css, onde ficam contidas as declarações das regras de estilo.

n  Este arquivo é vinculado a um ou mais documentos XHTML através da marcação <link>, que deve ser escrita dentro do cabeçalho do documento, ou seja, dentro da marcação <head></head>.

n  Esta é a melhor forma de se inserir CSS em um site.

n  Toda a formatação do site ficará contida em um único arquivo, e qualquer alteração neste arquivo, mudará a formatação em todos os demais documentos do site.




n  Como inserir um CSS num documento HTML î Estilos externos;

n  Os atributos possíveis para a marcação <link > para CSS são:

î  rel: especifica o tipo de relação existente entre o documento atual e o documento para qual a marcação <link /> está apontando. §  O valor declarado para este atributo será: stylesheet.

î  type: especifica o tipo de conteúdo dentro do elemento. §  Seu valor para CSS é: text/css;

î  href: deve indicar o local em que o arquivo CSS está armazenado. §  Seu valor deve ser uma URL.




<!DOCTYPE html> <html> <head> <meta charset=“utf-8” /> <title>CSS3 - Fundamentos</title> <link rel=“stylesheet” type=“text/css” href=“css/style.css”/> </head> <body> <h1>CSS3 - Fundamentos</h1> <p>O texto deste parágrafo será vermelho, negrito e centralizado, e terá uma borda vermelha de 1 pixel de largura ao redor dele.</p> <p>O texto deste parágrafo também está com a formatação.</p> </body> </html>

externo.html




@charset "utf-8"; /* CSS Document */ p { color: #ff0000; font-weight: bold; text-align: center; border: 1px solid #ff0000; }

style.css



Perguntas

?



Considerações Finais

Fonte: Silva, Maurício Samy., CSS3: Desenvolva Aplicações Web Profissionais com o uso dos poderosos recursos de estilização das CSS3, São Paulo, Novatec Brasil, 2012; http://www.w3schools.com

Unb 2012.1 - dweb - 05 - css3 - fundamentos

Documents

Transcript of Unb 2012.1 - dweb - 05 - css3 - fundamentos