Aw aula 04

CSS

Material elaborado pelo Prof. Bruno Gomes

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

Introdução
• Problemas:
o HTML nunca foi designado para conter tags para
formatação
o HTML foi criado para definir o conteúdo de um
documento
o Tags de formatação (fonte, cores, alinhamento) foram
adicionados no HTML (versão 3.1) (iniciou
(iniciou-se um
pesadelo para os desenvolvedores web!!)
o 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
removida da página HTML e salva em um
arquivo separado

CSS
• Cascading Style Sheets (Folhas de Estilo
heets
em Cascata)
• Mecanismo simples para adicionar estilos
às páginas Web
• Recomendação W3C
• Todos os Browsers suportam CSS

CSS
• Características:
o Definem como exibir os elementos de uma
página web
o Adicionados no HTML 4.0
o Simplifica e reduz tempo de trabalho
o Folhas de estilos externos são armazenados
em arquivos CSS

CSS
• Vantagem
o 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ágina
o Permite alterar a aparência e o layout de todas
as páginas em um site apenas editando um
arquivo único

Sintaxe CSS
• Composta por 3 partes:
o seletor, propriedade e um valor:

seletor {propriedade:valor}

Sintaxe CSS
• O seletor é normalmente o elemento HTML ( (tag) que se
deseja definir
• Propriedade é o atributo que deseja alterar
• Propriedade 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 quiserpespecificar mais serif"}
{font-family:"sans de uma
family:"sans
propriedade, separar por ponto e vírgula:

p {text-align:center;color:red}
align:center;color:red}

Sintaxe CSS
• Para que as definições de estilo sejam
mais legíveis, pode-se descrever uma
se
propriedade em cada linha:
p
{
text-align:center;
align:center;
color:black;
font-family:arial
family:arial
}

Sintaxe CSS
• Agrupamento
o 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 CSS
o Permite definir diferentes estilos para o mesmo
elemento HTML:
p.right {text-align:right}
align:right}
p.center {text-
o Deve-se align:center} class na página:
usar o atributo

<p class="right">Esse parágrafo será alinhado a
direita.</p>
• Obs.: Não inicie com número o nome da
<p class="center">Esse parágrafo será centralizado</p>
Classe

Sintaxe CSS
• Classe CSS
o Para adicionar mais de uma classe em um
determinado elemento:

<p class="center
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-
align:center}
• Na página:

<h1 class="center">Título
centralizado.</h1>
<p class="center">Parágrafo
centralizado.</p>

Sintaxe CSS
• Adicionando estilos em elementos com
atributos específicos:
input[type="text"] {background
{background-
color:blue}

Sintaxe CSS
• O seletor id:
o Definição de estilos para elementos com o
seletor id
#green
{color:green}
p#para1 <div
{ id="green">
text- ...
align:center; </div>
color:red
}

Sintaxe CSS
• Comentário CSS:
o Inicia com "/*“ e termina com "*/“

/*This is a comment*/
p
{
text-align:center;
align:center;
/*This is another
comment*/
color:black;
font-family:arial
family:arial
}

CSS – Como Usar
• Como usar:
o CSS Externo
o CSS Interno
o 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>:

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

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
.css
• Exemplo:
hr {color:sienna}
p {margin-left:20px}
body {background-
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 header
se
(<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>

CSS em Linha
• Mistura conteúdo com apresentação (problema!!)
• Utilizar o atribulo style na tag
• Pode conter qualquer propriedade CSS
• Exemplo:

<p style="color:red;margin
style="color:red;margin-
left:20px">Parágrafo.</p>

Links
• Validador para CSS: http://jigsaw.w3.org/css
http://jigsaw.w3.org/css-
validator/
• Mais sobre CSS: http://www.w3schools.com/css
http://www.w3schools.com/css/

Aw aula 04

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aw aula 04

Aw aula 04