A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

CSS-Folha de Estilo. Folhas de Estilo 4 Folhas de estilo é um conjunto de regras que informa como deve ser a formatação e a organização da página, definindo.

Apresentações semelhantes


Apresentação em tema: "CSS-Folha de Estilo. Folhas de Estilo 4 Folhas de estilo é um conjunto de regras que informa como deve ser a formatação e a organização da página, definindo."— Transcrição da apresentação:

1 CSS-Folha de Estilo

2 Folhas de Estilo 4 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. 4 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 Teste com folhas de Estilos

6 3. Permitindo que um estilo seja utilizado em várias páginas (arquivo externo) 4 Criar um arquivo texto com extensão.css com as definições, 4 Criar um vínculo em todas as páginas que utilizarão o estilo:

7 DHTML = Dinamic HTML CSS + Script + DOM EstilosJavascriptModelo 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 4 elemento {propriedade:valor [; propriedade:valor]} H1 {font-size:18pt;} BODY {font-family:"Verdana", "Arial"; font-size:10pt; color:navy; background-color:#C0C0FF} 4 elementos: BODY, H1, H2, H3, P, A, LI, TABLE etc.

10 Inserção de Estilo 4 Na linha (inLine) texto a ser formatado 4 Na página inteira (incorporação) 4 Em várias páginas (vinculação)

11 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] pt = pontos in = polegadas cm = centímetros px = pixels % = porcentagem

12 Classes 4 Definição 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;} 4 Utilização: class=idClasse elemento | div | span Texto do parágrafo padrão Texto sobre uma dica Com o elemento span é possível aplicar o estilo somente a fragmentos da página.

13 Pseudo-classes 4 Estilos para cada estado da Âncora (A): 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} Exercitar!


Carregar ppt "CSS-Folha de Estilo. Folhas de Estilo 4 Folhas de estilo é um conjunto de regras que informa como deve ser a formatação e a organização da página, definindo."

Apresentações semelhantes


Anúncios Google