Carregar apresentação
A apresentação está carregando. Por favor, espere
1
CSS-Folha de Estilo
2
Folhas de Estilo Folhas de estilo é um conjunto de regras que informa como deve ser a formatação e a organização da página, definindo características e comportamento dos elementos HTML. Vantagens: Separa a estrutura da forma de apresentação Maior Controle da aparência da página Páginas mais leves Maior facilidade para fazer manutenção num site.
3
Exemplo <html> <head>
<title>Teste com folhas de Estilos </title> <style type=“text/css”> <!-- Body {font-size:10pt;color:808080;font-family:Arial,Sans-serif} H {font-size:24pt;color:990000;font-style:italic} A:link {font-size:10pt;color:003366;text-decoration:none} A:visited {font-size:10pt;color:003300;text-decoration:none} - -> </style> </head> <body> </body> </html>
4
Múltiplas Declarações e Seletores
Ex1: H1 {font-size:18pt; color:blue;font-family:Caslon,serif} ou H1 {font-size:18pt; color:blue; font-family:Caslon,serif} Ex2: P {font:12pt “Times New Roman” bold} H2 {font-family: Arial,Helvetica, Sans-serif} Ex3: H1,H2,H3 {color:blue; font-size:18pt; font-family:Arial, Helvetica}
5
3 Formas de Utilizar Estilos
Especificamente dentro de um descritor : <H1 style=“color:navy”> Autorama </H1> Aplicando estilo localmente dentro de uma página: <head> <style type=“text/css”><!-- P {font:12pt “Times New Romam” bold; color:red} I {color:black} --> </style> </head>
6
3. Permitindo que um estilo seja utilizado em várias páginas (arquivo externo)
Criar um arquivo texto com extensão .css com as definições, Criar um vínculo em todas as páginas que utilizarão o estilo: <head> <link rel = stylesheet href= type=“text/css”> </head>
7
DHTML = Dinamic HTML CSS + Script + DOM Estilos Javascript Modelo de
Objetos do Documento
8
Revisão de Estilos (CSS) (Folha de Estilos em Cascata)
Definição de Estilo Inserção de Estilo Propriedades Classes Pseudo-classes
9
Definição de Estilo elemento {propriedade:valor [; propriedade:valor]}
H1 {font-size:18pt;} BODY {font-family:"Verdana", "Arial"; font-size:10pt; color:navy; background-color:#C0C0FF} elementos: BODY, H1, H2, H3, P, A, LI, TABLE etc.
![Definição de Estilo elemento {propriedade:valor [; propriedade:valor]}](http://slideplayer.com.br/slide/345603/2/images/9/Defini%C3%A7%C3%A3o+de+Estilo+elemento+%7Bpropriedade%3Avalor+%5B%3B+propriedade%3Avalor%5D%7D.jpg "H1 {font-size:18pt;} BODY {font-family: Verdana , Arial ; font-size:10pt; color:navy; background-color:#C0C0FF} elementos: BODY, H1, H2, H3, P, A, LI, TABLE etc.")
10
Inserção de Estilo Na linha (inLine) Na página inteira (incorporação)
<P style="font-size:12pt; color:red">texto a ser formatado</P> Na página inteira (incorporação) <HEAD> <STYLE> <!-- H1 {font-size:16pt;} P {font-size:12pt; color:red} --> </STYLE> </HEAD> Em várias páginas (vinculação) <LINK rel=stylesheet href="arquivo.css" type="text/css">
11
Propriedades (algumas, N4 e IE4)
pt = pontos in = polegadas cm = centímetros px = pixels % = porcentagem Propriedades (algumas, N4 e IE4) font-family: "Trebuchet MS", "Sans-serif"; font-size: 12pt; font-weight: bold; [normal | bold] font-style: italic; [normal | italic] color: #0000FF; background: url(fundo.gif) repeat-y #FFFFFF; [no-repeat,repeat,repeat-x,repeat-y] background-color: white; text-align: right; text-indent: 30px; // identação da primeira linha do parágrafo text-decoration: underline; [none | underline | overline | line-through] text-transform: capitalize; [capitalize | uppercase | lowercase] line-height: 120%; // distância entre as linhas letter-spacing: 2pt; // só no IE4+ margin-left: 20px; margin-right:10px; margin-top: -20pt; margin-bottom: 20pt; border-color: green; border-style: outset; [none | solid | double | groove | ridge | inset | outset]
12
Classes Definição Utilização: class=“idClasse” elemento | div | span
<STYLE> P {font-family:"Verdana", "Arial"; font-size:12pt;} P.padrao {text-align:justify} P.dica {text-align:center; color:#808000} .codigoHTML {font-family: "Fixedsys"; background:#C0C0C0;} </STYLE> Utilização: class=“idClasse” elemento | div | span <BODY> <P class="padrao">Texto do parágrafo padrão</P> <P class="dica">Texto sobre uma dica</P> <P>Com o elemento <span class="codigoHTML">span</span> é possível aplicar o estilo somente a fragmentos da página.</P> </BODY>
13
Pseudo-classes Estilos para cada estado da Âncora (A): Exercitar!
<STYLE> A:link {color:green; text-decoration:none} A:hover {color:lime; text-decoration:underline} A:active {color:red; text-decoration:underline} A:visited {color:green; text-decoration:none} </STYLE> Exercitar!
Apresentações semelhantes
