Aulas I A IV - 2 Bim

CSS
Cascading Style Sheet
CSS
CSS ou Folha de Estilo em Cascata
usado para alterar cores, fontes, tamanho, espaamentos etc., vantagens: -Maiores recursos estticos: Sublinhar com linhas duplas, trocar cores do link quando passa o mouse em cima; - Maior controle de objetos na pgina: Controlar posicionamento de cada campo, tabela, imagem, boto ou texto de forma exata. Layouts mais bonitos e sofisticados; - Identificao das formataes; - Reaproveitamento de cdigo: criando uma folha de estilo a formatao pode ser utilizada em diversas pginas.
CSS
Usando Estilos
Estilos In-Line Utilizados na prpria tag, criados tag a tag com seu prprio estilo. Assemelha-se aos atributos de formatao das tags HTML. Para utilizar-se do estilo deve-se inserir os estilos no atributo STYLE:
Sintaxe: <[tag] STYLE=[estilo:valor]; [estilo:valor]> Exemplo: <P STYLE=font-family: arial> texto </P>
Obs: Os estilos so separados por ponto-e-vrgula.
CSS
Usando Estilos
Estilos Incorporado Criao de todos os estilos da pgina no incio dela com uma folha de estilos padro. mais prtica que Estilos InLine, mas define estilos de apenas uma pgina. Os estilos podem ser utilizados em toda pgina mas no com outras.
<HTML> <HEAD> <TITLE> Estilo Incorporado </TITLE> <STYLE TYPE=text/css> P {font-family:arial} </STYLE> </HEAD> <BODY> <P> texto </P> </BODY> </HTML>
CSS
Usando Estilos
Estilos Vinculado Conhecido como pagina de estilos, onde todos os estilos so determinados numa nica pgina e todas as pginas vinculadas seguiro o estilo definido. Facilita o desenvolvimento e manuteno de sites.
Exemplo: Arquivo estilo10-03.css P {font-family: arial}
<HTML> <HEAD> <TITLE> Estilo Vinculado </TITLE> <LINK REL=stylesheet HREF=css/estilo10-03.css TYPE=text/css> </HEAD> <BODY> <P> texto </P> </BODY> </HTML>
CSS
Mais vantagens Para especificar a cor, a fonte e o tamanho da fonte, usar CSS ao invs do marcador <font>.
Exemplo:
<style type="text/css"> <!-.style1 { font-family: verdana; font-size: 15px; font-weight: bold; color: #FF0000; } --> </style>
CSS
Manipulando Estilos
Estilo Atribudo a uma tag Podemos atribuir os estilos diretamente a uma tag. Desta forma, toda vez que utilizarmos a tag na pgina, ela possuir os atributos definidos no estilo. Exemplo:
<head> <style type="text/css"> P {font-style: italic} H1 {text-align: center} </style> </head> <body> <H1>Capitulo 1</H1> <P>Texto 1</P> <H1>Capitulo 2</H1> <P>Texto 2</P> </body>
CSS
Manipulando Estilos
Agrupando Estilos Em classes de estilos repitidos, para no termos que digitar novamente, podemos agrupar as caractersticas comuns em uma s atribuio, separando por vrgula. Exemplo:
<head> <style type="text/css"> .texto, H1, .titulo2{font-family: Verdana; color; blue} .texto {font-style: 10pt} H1 {font-size: 16pt; text-align: center} .titulo2 {font-size: 12pt} </style> </head> <body> <H1> Capitulo 1</H1> <P class=texto>Texto 1</P> <P class=titulo 2>Capitulo 2</H1> <P class=texto>Texto 2</P> </body>
CSS
Estilos em Eventos Os links possuem eventos especficos, como quando colocamos o mouse sobre eles ou clicamos neles. Podemos atribuir estilos especficos a cada um desses eventos: -active: quando o link selecionado; -hover: quando passamos o mouse sobre o link; -link: formatao padro do link; -visited: quando o link j foi visitado.
CSS
Exemplo: <head> <title> Estilos em eventos </title> <style type=text/css> a:active (color:red) a:hover (color:blue) a:link (color:yellow) a:visited (color:green) </style> </head> <body> <a href=ex10-07.html> Exemplo</a> </body>
CSS
Retomando Os atributos do CSS ficam sempre dentro de Chaves { } e podemos fazer quantos estilos quisermos. Vamos criar um estilo para um texto, de forma que este fique na fonte Verdana, tamanho 12 e na cor verde.
O cdigo ficar assim:
CSS
Estilos e Valores
Formatao de Texto:
FONT-FAMILY Define a famlia de fontes do texto. FONT-VARIANT Possui 2 valores: normal, para apresentao padro do texto e smallcaps que apresenta todo o texto em maiscula, porm as letras originalmente em minsculas apresentam-se menores que as originalmente em maisculas. FONT-STYLE Define o estilo itlico (italic) ou oblquo (oblique) para o texto. O valor padro normal. FONT-WEIGHT Define o estilo negrito para o texto. O padro normal.
CSS
Estilos e Valores
Formatao de Texto:
TEXT-DECORATION Define uma decorao para o texto. Voc pode definir uma decorao de sublinhado (uncerline), riscado (line-through), com uma linha acima (overline) ou piscando (blink). O padro none. TEXT-TRANSFORM Determina a caixa do texto, ou seja, se o texto ficar masisculo (uppercase), minsculo (lowercase) ou com as iniciais em maisculas (capitalize). O padro none. FONT-SIZE Define o tamanho da fonte.
CSS
Estilos e Valores
Formatos de Tamanho:
So aceitos valores de tamanho em vrios formatos:
-em: tamanho relativo ao tamanho-padro da fonte, aceita valores reais; -ex: tamanho relativo a metade do tamanho padro,aceita valores reais; -pt: tamanho da fonte em pontos equivalentes aos definidos no desenvolvimento da fonte (padro 12), aceita nmeros inteiros; -px: tamanho das fontes em pixels, aceita valores inteiros; -cm: tamanho em centmetros, aceita nmeros reais; -mm: tamanho em milmetros, aceita nmeros reais; -in: tamanho em polegadas, aceita nmeros reais; -%: tamanho em porcentagem, aceita nmeros reais.
Obs: Os formatos ex e pt so exclusivos para definio do tamanho da fonte, os outros podem ser atribudos em todos os estilos de dimensionamento como definio de margens, blocos, caixas, etc..
CSS
Estilos e Valores
Formatao de Tamanho:
LETTER-SPACING Define o espaamento entre as letras do texto.
WORD-SPACING Define o espaamento entre as letras do texto.
<head> <style type=text/css> .texto1 {letter-spacing: 6px} .texto2 {word-spacing: 0.5in} </style> </head> <body> <p>Texto Normal</p> <p class=texto1> Texto com as letras espaçadas</p> <p class=texto2> Texto com as palavras espaçadas</p> </body>
CSS
Estilos e Valores
Cores e Fundos:
COLOR Determina a cor do texto. BACKGROUND-COLOR Determina a cor de fundo. Podem ser utilizados em qualquer tag continer, mas seu resultado melhor apreciado em tags BODY, TABLE, TD e TH. Formatos de cores: -Em RGB hexadecimal: #FF00CC -Em RGB decimal: a sintaxe rgb ([valor do vermelho]) -Em porcentagem no RGB: rgb (100%, 50%, 0%) -Utilizando o nome da cor
CSS
Estilos e Valores
Cores e Fundos:
BACKGROUND-IMAGE Define uma imagem para o fundo. Para definir o endereo da imagem, devemos utilizar a funo url ().
background-image: url([url da imagem]);

BACKGROUND-REPEAT Determina o comportamento da imagem em relao ao scroll da pgina. Os valores vlidos so: fixed (a imagem de fundo no acompanha o scroll da pgina) e scroll (padro, a imagem de fundo movimenta-se conforme o scroll da pgina).
CSS
Estilos e Valores
Cores e Fundos:
BACKGROUND-POSITION Determina em que posio a imagem de fundo ser apresentada. Devemos definir um valor para o posicionamento vertical (top, bottom e center) e em seguida, para o horizontal (left, right e center). background-position: [posio verticial] [posio horizontal]); Obs.: Se o estilo BACKGROUND-REPEAT estiver definido como repeat, ele ser ignorado.
CSS
Estilos e Valores
Exemplo:
<head> <style type=text/css> body { background-image: url (img/imagem.gif); background-color: burlywood; background-repeat: no-repeat; background-attachment: fixed; background-position: center center;} </style> </head> <body> Exemplo de Controle de Fundo </body>
CSS
Estilos e Valores
- Lay-Outs avanados - Formatao de Pargrafo
- Formatao de Listas
-Formatao de Tabelas -Usando CSS para editar links
CSS

Aulas I A IV - 2 Bim

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Aulas I A IV - 2 Bim

Caricato da

Copyright:

Formati disponibili

CSS

Cascading Style Sheet

background-image: url([url da imagem]);

- Lay-Outs avanados - Formatao de Pargrafo

Potrebbero piacerti anche