CSS (Cascade Style Sheets

CSS (Cascade Style Sheets)
Sumário
• CSS - Histórico e Motivação
• Sintaxe Básica
• Aplicação
• Posicionamento
• Exemplos de Uso
CSS:Introdução
Folhas de estilos em cascata — Cascading Style

Sheets (CSS) — permite a construção do layout dos
seus websites.
Possibilita uma considerável redução de tempo de
trabalho. Conhecer CSS é uma necessidade para
qualquer um envolvido com o projeto web.
CSS:O que eu posso fazer

CSS é uma linguagem para estilos que define o
layout de documentos HTML. Por exemplo, CSS
controla fontes, cores, margens, linhas, alturas,
larguras, imagens de fundo, posicionamentos e
muito mais. Aguarde e você verá!

HTML pode ser (in)devidamente usado para
definir o layout de websites. Contudo CSS
proporciona mais opções e é mais preciso e
sofisticado. CSS é suportado por todos os
navegadores atuais.
CSS:Qual a diferença entre
CSS e HTML

HTML é usado para estruturar conteúdos. CSS é
usado para formatar conteúdos estruturados.

Oferece meios sofisticados de projetar layouts
suportados por todos os navegadores.

Ao mesmo tempo a separação dos estilos de
apresentação da marcação dos conteúdos torna a
manutenção dos sites bem mais fácil.
CSS:Problema

Teremos uma reunião aqui na empresa, na
segunda-feira às 08:00h com um potencial
comprador e é nossa intenção fazer uma
apresentação dos nossos produtos através do site
que você criou e mantém.
CSS:Problema

Seguindo uma sugestão do nosso departamento
de marketing precisamos mudar a cor de todos os
títulos no site de verde para vermelho, pois que
esta é a cor principal da marca do nosso
comprador e com isso pretendemos fixar uma
cumplicidade subliminar. Isto é bem simples de
fazer, não é? Afinal é só mudar a cor! Dá para
você 'botar no ar' até às 19:30h ? Quero dar uma
olhadinha antes de encerrar o expediente. OK?
CSS:Problema

Agora imagine que são 180 páginas onde o layout
está “chumbado” no HTML conforme a figura
abaixo...

Você terá que alterar todos os 180 arquivos
manualmente....
CSS:Vantagens
CSS é uma revolução no mundo do web design.

Os benefícios concretos do uso de CSS incluem:

Controle do layout de vários documentos a partir
de uma simples folha de estilos (arquivo.css);

Precisão no controle do layout;

Aplicação de diferentes layouts para servir
diferentes mídias (tela, impressora, etc.);

Emprego de variadas, sofisticadas e avançadas
técnicas de desenvolvimento.
CSS: Histórico e Motivação
-Possibilidades de formatação de páginas

-Facilidades de aplicação e alteração de estilos
-Template: controle do formato associado aos

marcadores de documentos HTML
- CSS-P: posicionamento de elementos

CSS: Sintaxe Básica
Seletor { propriedade : valor }

Marcadores
HTML
Marcadores
HTML
Característica a
ser definida/alterada
Marcadores
HTML
Característica a
ser definida/alterada
Conteúdo atribuído
à propriedade selecionada
P { color : #FF00FF; }
Seletor { propriedade : valor ; propriedade : valor }
P { color : #FF00FF ; }
P { color: #FF00FF; font-family:Arial; font-size:12pt;}
seletor, seletor{ propriedade : valor ; propriedade : valor }
P { color : #FF00FF ; }
P { color: #FF00FF; font-family:Arial; font-size:12pt;}
H1,H2,H3 { color: #FF0000; font-family:Arial; }
CSS: Aplicação
-Ligação (linking)
-Incorporação (embeding)
-Inclusão (Inline)
CSS: Aplicação
- Carga de um arquivo externo ao documento HTML
contendo as definições de estilo
- Uso da extensão “css”
-Uso do marcador LINK dentro do cabeçalho (<head>)
CSS: Aplicação
- Carga de um arquivo externo ao documento HTML
contendo as definições de estilo
- Uso da extensão “css”
-Uso do marcador LINK dentro do cabeçalho (<head>)
-Formato geral:
<LINK REL=StyleSheet
HREF=“endereço/nome_arquivo_css”
TYPE=“text/css”>
CSS: Aplicação - Ligação
Exemplo: arquivo externo (.css) [estilo1.css]
body{font-family:Arial, sans-serif; font-size:12pt;

font-style:normal; color:#0000FF}
H1{font-size:22pt; color:#FF0000}
STRONG{ font-size:20pt; font-style:italic; color:#0000FF}
Exemplo: arquivo html
<html> <head>
<LINK REL=STYLESHEET
HREF=“estilo1.css"
TYPE="text/css"> </head>
<body >
<p>Aqui inicia o documento.</p>
<h1>Aqui temos um H1</h1>
<p>texto normal...</p>
<strong>... e texto com strong</strong>
</body>
</html>

<p>Aqui inicia o documento.

</p>
<strong>... e texto com strong
</strong>
.html
link
.css
.html ........ .html

.html
.html
link
.css
CSS: Aplicação
-Incorporação (Embedding)
- Descrição das definições de estilo dentro do documento
HTML
- Possibilidade restrita ao documento
- Uso do marcador STYLE, dentro do cabeçalho (head)
CSS: Aplicação
-Incorporação (Embedding)
- Descrição das definições de estilo dentro do documento
HTML
- Possibilidade restrita ao documento
- Uso do marcador STYLE, dentro do cabeçalho (head)
-Formato geral:
<HEAD>
<STYLE TYPE=“text/css”>
..... Definições......
</STYLE>
</HEAD>
CSS: Aplicação - incorporação
<html>
<head>
<style type="text/css">

</style>
</head>
<body >
</body>
</html>
CSS: Aplicação - incorporação
.html
link
.html
.css .css
CSS: Aplicação
-Inclusão (Inline)
- Com o método Inline a aplicação do estilo ocorre em
apenas um elemento
- Possibilidade restrita ao elemento
- Uso do atributo STYLE, junto ao marcador desejado
CSS: Aplicação
-Inclusão (Inline)
apenas um elemento
-Formato geral:
<MARCADOR STYLE=“propriedade:valor”>
CSS: Aplicação
-Inclusão (Inline)
apenas um elemento
-Formato geral:
<MARCADOR STYLE=“propriedade:valor”>
-Em seções:
<DIV STYLE= “propriedade:valor”>
.........
<DIV>
CSS: Aplicação - inline
<html>
<head>
<LINK REL=STYLESHEET
HREF="estilo1.css"
TYPE="text/css">
</head>
<body >
<p STYLE="font-weight:bold; font-style:italic; color=#00FF00">
texto com uso de especificação inline ...</p>
</body>
</html>
CSS: Aplicação
-Uso de classes
- Descrição das definições de estilo associadas ou não a
marcadores específicos
- Identificação das diferentes definições
- Uso do atributo CLASS, associado ao marcador
desejado
-Formato geral:
<STYLE TYPE=“text/css”>
.tipo1 {Definições....}
........
<P CLASS=“tipo1”>
CSS: Aplicação - classes
<html>
H1.vermelho{font-size:18pt; color:#FF0000}
H1.verde{font-size:18pt; color:#00FF00}
H1.azul{font-size:18pt; color:#0000FF}
</style>
<body >
<h1 class="vermelho">Aqui temos um H1 vermelho</h1>
<h1 class="verde">Aqui temos um H1 verde</h1>
<h1 class="azul">Aqui temos um H1 azul</h1>
</body>
</html>
<html>
.vermelho{font-size:18pt; color:#FF0000}
.verde{font-size:18pt; color:#00FF00}
.azul{font-size:18pt; color:#0000FF}
</style>
<body >
</body>
</html>
<html>
.vermelho{ color:#FF0000}
.verde{ color:#00FF00}
.azul{ color:#0000FF}
</style>
<body >
</body>
</html>
<html>
.vermelho{ color:#FF0000}
.verde{ color:#00FF00}
.azul{ color:#0000FF}
</style>
<body >
</body>
</html>
Fontes
• http://srv1.saojose.senai.br/prof/Prof_MOR
ETTO/Webdesign/Aula5_Webdesign
.ppt
• http://www.inf.unisinos.br/~rigo/graduacao/
topicosv/material/aula1-css
.ppt

CSS (Cascade Style Sheets

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS (Cascade Style Sheets

Enviado por

Direitos autorais:

Formatos disponíveis

CSS (Cascade Style Sheets)

Folhas de estilos em cascata — Cascading Style

CSS é uma revolução no mundo do web design.

-Possibilidades de formatação de páginas

-Template: controle do formato associado aos

- CSS-P: posicionamento de elementos

Seletor { propriedade : valor }

Seletor { propriedade : valor }

Seletor { propriedade : valor }

Seletor { propriedade : valor }

Seletor { propriedade : valor }

Seletor { propriedade : valor ; propriedade : valor }

seletor, seletor{ propriedade : valor ; propriedade : valor }

Exemplo: arquivo externo (.css) [estilo1.css]

body{font-family:Arial, sans-serif; font-size:12pt;

body{font-family:Arial, sans-serif; font-size:12pt;

<p>Aqui inicia o documento.

.html ........ .html

Você também pode gostar