Css Basico

Introdução
CSS - Cascading Style Sheets •

•
Padrão de Apresentação de Documentos
CSS – Cascate Style Sheets
• Objetivos:
– Conhecer o Histórico;
– Conhecer a Usabilidade;
• Por que usar?
• Quando usar?
• Como usar?
– Conhecer os Atributos;
• Demonstração de Exemplos
• Exercício
Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy
Formatação de Documentos CCS - Cascate Style Sheets
• Histórico • 1990 – Separar Conteúdo de Layout

• Style Sheet – início em 1994 – NE
• Visualização da Estrutura
• Criado em 1996 – Style Sheets – IE3
• Facilidade de Compreensão • Criado pelo W3C
• Manter Identidade e Padrão • CSS – nível 2 – IE4 & N4
• Documento para a WEB - hoje • W3C | Especificações
• Nenhum dos browsers estão de acordo com a
– +imagens, +áudio, +vídeo, +formatação CSS
Especificações
• CSS – nível 3
• http://www.w3c.org/Style/History/CSS-saga
Como usar? Como usar?
• Forma básica: • Exemplos

– Selecionador {propriedade:valor}
• Selecionador é normalmente um – body{color:black}
elemento/tag HTML que se deseja definir
– p {text-align:center;color:red}
• Propriedade é o atributo que se deseja
alterar – h1,h2,h3,h4,h5,h6 {color: green}
• Cada propriedade pode ter um valor

4 Maneiras de Definir CSS Externo com Link
• Externo com Link; <html>

<head>
• Externo com Import;
<link rel="stylesheet" type="text/css" href="estilo.css" />
• Interno; </head>
• Inline; <body>
<h1>Este cabeçalho tem 36 pt</h1>
<h2>Este cabeçalho é azul</h2>
<p>A margem deste parágrafo é de 50 pixels</p>
</body>
</html>
Abrir
Externo com Link Externo com Link
<HTML>
• estilo.css <HEAD>
body {background-color: yellow} <LINK REL=STYLESHEET TYPE="text/css" HREF=“estilo.css" >
h1 {font-size: 36pt} <LINK REL=STYLESHEET TYPE="text/css" HREF=“estilo1.css" >
</HEAD>
h2 {color: blue}
<BODY>
p {margin-left: 50px} <h1>Este cabeçalho tem 36 pt</h1>
• estilo1.css <p>A margem deste parágrafo é de 50 pixels</p>
h1 {color: red} <a href=“www.microsoft.com”>E este é um link, verde</a>
a {color:green} </BODY>
</HTML>
Abrir
Palavra Reservada Externo com Import
<HTML>
• Palavra reservada : !important <HEAD>
<STYLE TYPE="text/css">
@import url(d:\igor\css\ex04\estilo.css);
• Evita estilo em cascata;
</STYLE>
</HEAD>
• Sintaxe: <BODY>
– h2 {color: blue !important} <h1>Este cabeçalho tem 36 pt</h1>
<p>A margem deste parágrafo é de 50 pixels</p>
</BODY>
Abrir </HTML> Abrir

Interno Inline
<HTML>
<HEAD>
! "# ""$% </HEAD>
&' ( ! )* #+,- % <BODY style="background-color: yellow">
&. " # " /)0- % <h1 style="font-size:36pt; color=red">Este cabeçalho tem
- 0 )!"(#12- % 36 pt e agora é vermelho</h1>
&' "# % <h2 style="color: blue">Este cabeçalho é azul</h2>
&. "#0 % <p style="margin-left: 50px">A margem deste parágrafo é
"# % de 50 pixels</p>
<a style="color:green" href=“www.microsoft.com”>E este é
um link, verde</a>
34 </BODY>
556 6 Abrir Abrir
</HTML>
34
Herança Herança
<style TYPE="text/css">
• A estrutura em árvore de um documento h1 { color: red }
p { color: red } <STYLE TYPE="text/css">
HTML, possibilita um dos mecanismos mais li { color: red } body { color: red }
strong { color: red } </STYLE>
importantes das Style Sheets: HERANÇA. </style>
– Os elementos HTML herdam (quase) todas as • Um elemento pode redefinir propriedades herdadas:
propriedades de estilo dos seus pais. – Se existirem regras contraditórias, prevalecem as regras mais específicas.
– Mantém (quase) todas as propriedades não redefinidas.
body { color: red }
h1 { color: blue }
</STYLE>
Classes em CSS Classes em CSS
<HTML>
• Para adicionar granularidade sobre os <HEAD>
selecionadores um novo atributo foi adicionado ao
padrão HTML - a Classe
p.right {text-align: right}
p.center {text-align: center}
</STYLE>
</HEAD>
<BODY>
<p class="right"> Parágrafo a direita </p>
<p class="center"> Parágrafo centralizado</p>
</BODY> Abrir
</HTML>
Classes em CSS Classes em CSS
<HTML> <HTML>
<HEAD> <HEAD>
<STYLE TYPE="text/css"> <STYLE TYPE="text/css">
p.right {text-align: right} .right {text-align: right}
p.center {text-align: center} .center {text-align: center}
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
<p class="right" class="center"> Parágrafo com 2 classes <h1 class="center"> Cabeçalho centralizado</h1>
atribuídas </p> <p class="right"> Parágrafo à direita</p>
</BODY> Abrir </BODY> Abrir
</HTML> </HTML>
Pseudo-Classes Pseudo-Classes
• Pseudo-classes são usadas no CSS para • Exemplo:

adicionar diferentes efeitos em alguns – A:link { color: red } /* link não visitado */
selecionadores; – A:external:visited { color: blue } /* link visitado */
• Trabalham tbm com outras classes; – A:active { color: lime } /* links ativos */
• Sintaxe – A:hover {color: #FF00FF} /* mouse sobre link */
– seletor: pseudo-classe {property: value}
Abrir
ID em CSS Contexto em CSS
<html> • Usado para definir um estilo a um selecionador

<head> dentro de um contexto
<style type="text/css"> • Exemplo:
#xyz34 { text-decoration: underline } – H1 EM { color: red }
</style> – H1 B, H2 B, H1 EM, H2 EM { color: red }
</head> é equivalente a:
<body> – H1 B { color: red }
<H1 ID="XYZ34">A HEADLINE</H1> – H2 B { color: red }
<P ID="XYZ34">UNDERLINED TEXT</P> – H1 EM { color: red }
</body> Abrir – H2 EM { color: red }
</html>
Dimensões Valores - Percentagens
• Referem-se a medidas horizontais e verticais • Valores relativos a outro valor, ex: uma dimensão.
• Existem dois tipos de dimensões: Relativas e Absolutas. • Cada propriedade que pode assumir valores percentuais, também
define a que valor a percentagem se refere.
Unidades Formato Exemplo • Os valores de referência podem ser:
in – inches (polegadas – 2,54 cm) H1 {margin: 0.5in} /* inches */ – outra propriedade do próprio elemento
cm – centímetros H2 {line-height: 3cm} /* centimeters */ – uma propriedade de um elemento pai
H3 {word-spacing: 4mm} /*
Absolutas mm – milímetros millimeters */ – um valor do contexto de formatação (ex: largura do bloco que contém o elemento)
pt – points (1/72 inch) H4 {font-size: 12pt} /* points */
pc – picas (12 pints) H4 {font-size: 1pc} /* picas */
em – dimensão da fonte corrente table { width: 60%; }

h1 { margin: 0.5em } /* em */
ex – altura da letra ‘x’ da fonte h1 { margin: 1ex } /* ex */
Relativas
corrente p { font-size: 12px } /* px */
px – pixels p { font-size: 120% }
URL - Uniform Resource

Unidades de Cor
Locator
São 16 cores reconhecidas pela paleta de cores
• Valores que identificam recursos
do Windows VGA e seus valores RGB não
precisam ser especificados: existentes na WEB
• aqua, black, blue, fuchsia, gray, green, lime, maroon, –Imagens, sons, stylesheets, etc.
navy, olive, purple, red, silver, teal, white, yellow.
Outros valores: • BODY {
• EM { color: #f00 } /* #rgb */
• EM { color: #ff0000 } /* #rrggbb */
background:
• EM { color: rgb(255,0,0) } /* integer range 0 - 255 */ url(http://www.bg.com/pinkish.gif)
• EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
}
Background Texto
Propriedade Valores W3C
background background-color CSS1
Propriedades Valores W3C
background-image color color CSS1
background-repeat background-
attachment background-position letter-spacing normal CSS1
background-attachment scroll CSS1 length
fixed
text-align left CSS1
background-color color-rgb CSS1 right
color-hex center
color-name
transparent
justify
background-image url CSS1 text-decoration none CSS1

none underline
background-position top left CSS1
overline
top center line-through
top right blink
center left
center center text-indent length CSS1
center right %
bottom left
bottom center text-transform none CSS1
bottom right capitalize
x-% y-% uppercase
x-pos y-pos
background-repeat repeat CSS1
Abrir word-spacing
lowercase
normal CSS1
Abrir
repeat-x
repeat-y length
no-repeat

Fontes Fontes
%
$
!
"
Abrir
Listas Alguns outros exemplos
• Cursor
• Posição
%
• Z-index (1)
#
#
• Primeira letra
#
#
&
• Primeira linha
#
'
&
& &
& & Abrir
Sobre a especificação CSS2
• Não é um padrão • Tudo que é válido em CSS1 é válido em CSS2

• É uma especificação • Mudanças divididas em três grupos:
• Usado em XML – Novas funcionalidades
– Atualizações para as funcionalidades
• Os browsers que dão suporte à CSS devem
– Mudanças semânticas
seguir a especificação
• Não é necessário dar suporte a toda a
especificação
• Browsers: IE3++, NE4++, Opera 4++, NeoPlanet
• Em andamento: CSS3 Specification

CSS2 Por que usar?
• Recomenda explicitamente o uso CSS externo; • Usar somente quando o autor do documento
• Pode ser usado com qualquer documento quiser especificar um estilo para seus
estruturado; documentos;
• Especifica formatos para diferentes tipos de • O HTML já possui uma tabela de estilos interna;
mídia
• Analogia a Orientação à Objetos – Herança
• Contadores
• Diminuir tamanho dos arquivos
H1{
content: "Chapter " counter(chapter) ". "; • Facilidade de manutenção
counter-increment: chapter; /* Add 1 to chapter */ • Separar conteúdo e layout
counter-reset: section; /* Set section to 0 */
}
Editores Resumo
• 602 ProSuite – freeware • Padrão de Apresentação de Documentos

• Morphon XML Editor – java • CSS – Cascate Style Sheets
• AceHTML4 – freeware e comercial • Objetivos:
– Conhecer o Histórico;
• WebExpert2000 – editor em francês
– Conhecer a Usabilidade;
• BluesFish – unix • Por que usar?
• TopStyle1.5 – HomeSite4.5 • Quando usar?
• Como usar?
• Amaya – Editor e Browser
– Conhecer os Atributos;
• DreamWeaver • Demonstração de Exemplos
• Exercício
Fonte : www.w3c.org
Bibliografia Exercício
• WebReference – www.webreference.com • Instalar um dos softwares

• W3C – www.w3c.org • Criar um exemplo com texto|imagem|tabela
• MSDN Library – www.msdn.com • Fazer um relatório sobre o software contendo:
• www.w3schools.com – Facilidade de instalação
– Facilidade de manuseio
– Ferramentas – Preview|Inspector|Nivel CSS
– Bom suporte - help

Css Basico

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css Basico

Diunggah oleh

Hak Cipta:

Format Tersedia

Introdução

CSS - Cascading Style Sheets •

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Formatação de Documentos CCS - Cascate Style Sheets

• Histórico • 1990 – Separar Conteúdo de Layout

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Como usar? Como usar?

• Forma básica: • Exemplos

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

• Externo com Link; <html>

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Externo com Link Externo com Link

Palavra Reservada Externo com Import

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Classes em CSS Classes em CSS

• Pseudo-classes são usadas no CSS para • Exemplo:

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

ID em CSS Contexto em CSS

<html> • Usado para definir um estilo a um selecionador

em – dimensão da fonte corrente table { width: 60%; }

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

URL - Uniform Resource

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

background-image url CSS1 text-decoration none CSS1

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Listas Alguns outros exemplos

& & Abrir

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Sobre a especificação CSS2

• Não é um padrão • Tudo que é válido em CSS1 é válido em CSS2

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

• 602 ProSuite – freeware • Padrão de Apresentação de Documentos

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

• WebReference – www.webreference.com • Instalar um dos softwares

Valdeni / Igor/ Eidy Valdeni / Igor/ Eidy

Anda mungkin juga menyukai