Unb 2012.1 - dweb - 05 - css3 - fundamentos

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

5 CSS3:
Fundamentos

“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

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

DWEB - Design para Web / Carlos José

Contato

Carlos José

carlosjose.unibratec@gmail.com
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 especiﬁcaçã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, tipograﬁa e
posicionamento dos elementos em um site.




n  Por que devemos utilizar CSS?
î CSSapesar 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 oﬁcial 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 body

title ul

li li li



HTML - uma estrutura de árvore

html
Antecessor

header body
Descendente

title ul

Descendente
li li li




n  Regra CSS
î Escreverregras 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

Seletor

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

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.




î 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
ﬂexibilidade do CSS: quaisquer mudanças na
formatação deverá ser feita diretamente na marcação
que se deseja mudar.




inline.html
<!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>




î 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.



<!DOCTYPE html>
<html>
<head> incorporado.html
<style type=“text/css”>
p{
color:#ff0000;
font-weight:bold;
text-align:center;
border:1px solid #ff0000"
}
</style>
</head>
<body>
<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>




î  Estilos externos;
n  É um simples arquivo de texto, mas com extensão css, onde
ﬁcam 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 ﬁcará contida em um único arquivo, e
qualquer alteração neste arquivo, mudará a formatação em
todos os demais documentos do site.




î Estilos externos;
n  Osatributos possíveis para a marcação <link > para
CSS são:
î  rel: especiﬁca 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: especiﬁca 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> externo.html
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“css/
style.css”/>
</head>
<body>
<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>




style.css
@charset "utf-8";
/* CSS Document */

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



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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Unb 2012.1 - dweb - 05 - css3 - fundamentos

Semelhante a Unb 2012.1 - dweb - 05 - css3 - fundamentos (17)

Mais de Claudenio Alberto

Mais de Claudenio Alberto (18)

Unb 2012.1 - dweb - 05 - css3 - fundamentos