Basico CSS

Introduo CSS
Bernardo Neto
Bsico
NO PASSADO
O HTML era usado para marcao de contedo e para p definir a sua apresentao. Os designers descobriram o <table border=0> border= 0 >. Os layouts ento, se tornaram mais complexos, mas tambm menos semnticos.
O QUE A WEB 2.0 TEM A VER COM CSS

O que : Viso Geral
Cascading Style Sheets Folhas de estilo em cascatas. Tableless Muito mais que ausncia de tabelas.
HTML para marcao do contedo CSS para apresentao t JavaScript para comportamento
CSS MELHOR EXPLICADO

CSS Cascading Style Sheets (Folhas de Estilo em cascata)
uma coleo de regras que define a apresentao de uma pgina web. CSS uma forma de atribuir propriedades visuais a um mesmo elemento html ( ou vrios ) de forma hierrquica e sem ser repetitivo.
HTML a estrutura para o contedo. CSS a aparncia desse contedo.

As regras ditadas, valem para todos os elementos filhos no html, a no ser que exista uma nova regra para um dos filhos filhos.
TIPOS DE USO
Estilos externos arquivo separado aplicando estilo separado, todas as pginas que o chamam.
<link rel=stylesheet type=text/css href=arquivo.css /> y yp q Peso 001
Estilos escritos na pgina fragmento de cdigo na pgina, ser aplicado apenas a pgina que est.
<style type="text/css>p { color:#0FF}</style> Peso 010
Estilos inline fragmento aplicado na tag HTML valendo HTML, apenas para o elemento com o estilo.
<p style=color: #666 ;>texto muito importante</p> Peso 100
MODO DE USAR
Sintaxe CSS
seletor { propriedade : valor ; } Seletor: elemento HTML ( h1 p, strong ) l t h1, t ); classe ( .minhaclass ); id ( #nonedoid ) ). Propriedade: o atributo a ser declarado a regra ( color, font, border, background... ) Valor: o valor da propriedade ( cor azul, fonte Arial, borda de 1 pixel)
ALGUMAS PROPRIEDADES
A seguir mostrado o uso de algumas das propriedades de formatao:
color: cor
background color background-color: cor de fundo border: estilo da borda border-width: largura da borda border-color: cor da borda font-family: fonte font-size: tamanho font-style: estilo height: altura letter-spacing: espaamento das letras no texto margin: margem em relao ao container opacity: transparncia padding: espaamento do texto em relao caixa criada para o elemento text-align: alinhamento do texto width: l idth largura d caixa da i
EXEMPLO
REGRAS: REGRAS EXEMPLO

h1{ h1 { color:red; backgroundcolor:yellow; border:solid; borderwidth:10px; bordercolor:green; fontfamily:"ArialBlack"; fontsize:50px; font style:italic; fontstyle: italic; fontweight:bolder; height:140px; letterspacing:30px; letter spacing: 30px; margin:50px50px50px50px; opacity:0.4; padding:50px50px50px50px; ddi 50 50 50 50 textalign:center; textdecoration:blink; width:300px; }









h1{ h1 { color:red; backgroundcolor:yellow; border:solid; borderwidth:10px; bordercolor:green; fontfamily:"ArialBlack"; fontsize:50px; font style:italic; fontstyle: italic; height:140px; letterspacing:30px; margin:50px50px50px50px; margin: 50px 50px 50px 50px; opacity:0.4; padding:50px50px50px50px; textalign:center; t t li t textdecoration:blink; width:300px; }



h1{ h1 { color:red; backgroundcolor:yellow; border:solid; borderwidth:10px; bordercolor:green; fontfamily:"ArialBlack"; fontsize:50px; font style:italic; fontstyle: italic; height:140px; letterspacing:30px; margin:50px50px50px50px; margin: 50px 50px 50px 50px; opacity:0.4; padding:50px50px50px50px; textalign:center; t t li t textdecoration:blink; width:300px; } NoIE:filter:alpha(opacity=40);



h1{ h1 { color:red; backgroundcolor:yellow; border:solid; borderwidth:10px; bordercolor:green; fontfamily:"ArialBlack"; fontsize:50px; font style:italic; fontstyle: italic; height:140px; letterspacing:30px; margin:50px50px50px50px; margin: 50px 50px 50px 50px; opacity:0.4; padding:50px50px50px50px; textalign:center; t t li t width:300px;
ESTRUTURA
h1{color:red;background color:yellow;} h1 { color: red; backgroundcolor: yellow;}

seletor
ESTRUTURA

Blocodedeclarao
ESTRUTURA

Declarao
ESTRUTURA

Propriedade Valor Propriedade Valor
AGRUPAMENTO
Podem ser agrupados: Seletores (h1 p { ... }) (h1, Declaraes (h1 { color: red; background: yellow;})
AGRUPAMENTO SELETORES
SELETORES CLASS E ID
So usados para aplicar estilo para elementos marcados pelo desenvolvedor com os atributos class e id class: vrios elementos podem ser da mesma classe Podem ser usados vrios valores para o atributo class simultaneamente (ex.: class=urgente) id apenas um elemento d id: l t deve t o mesmo id ter id.
EXEMPLO: EXEMPLO CLASS
EXEMPLO 2: CLASS 2
EXEMPLO: ID
UM EXEMPLO
Um layout de 3 colunas com largura varivel e mesma altura.
<div id=principal"> <div id=centro"> Contedo principal<br /> largura: toda a rea disponvel<br /><br /> altura: se o contedo cresce, o sidebar acompanha cresce </div> <div id=colunaEsquerda"> Contedo < esquerda<br /> largura: 150pixels </div> <div id= colunaDireita > id=colunaDireita"> Contedo > direita<br /> largura: 200pixels </div> </div>
UM EXEMPLO
Cdigo CSS usado
<style type="text/css"> body{ font: 12px Tahoma; margin: 0; padding:0 200 0 150 ddi 0 200px 150px; } #principal{ g ; background-color:#9cc; float:left; width:100%; border-left:150px solid #cf9; border-right:200px solid # 33 b d i ht 200 lid #c33; margin-left:-150px; margin-right:-200px; display:inline; position: relative; } #colunaEsquerda{ float:left; width:150px; margin-left:-150px; i l ft 150 position:relative; } { #centro{ float:left; width:100%; margin-right:-100%; } #colunaDireita{ float:right; width:200px; margin-right:-200px; position:relative; } </style>
UM EXEMPLO - resultado
Layout testado em
Windows = IE 6, IE 7, Firefox 2, Safari 3, pera 9
DICAS PARA UM BOM CDIGO

Utilize as tags HTML para aquilo que elas foram criadas
h1, h2 h6 para definir ttulos; ul, ol, ul ol dl para fazer listas; p para pargrafos; strong ao invs de b para dar mais nfase; table para dados tabulares
e toda as outras que no caberiam neste documento.
Feche corretamente e ordenadamente o que voc abriu

<br /> <strong><a href=#></a></strong>
Utilize CSS para ditar como elas devem se apresentar
VALIDAO
Ser ou no ser um site vlido vlido. A ferramenta W3C de validao, apenas um dispositivo para ajudar no , p p p j desenvolvimento do cdigo, no sendo de forma alguma um carimbo de site bom ou ruim U site pode ser i lid para o W3C se possui li k com urls d Um it d invlido i links l do tipo: http://urldosite.com.br/pagina?parametro valor&parametro2 valor http://urldosite.com.br/pagina?parametro=valor&parametro2=valor
Um cdigo vlido no significa um bom cdigo. Um site todo construdo em tabelas, pode ser um site vlido.
SELETORES DE ATRIBUTOS
Pode ser interessante selecionar apenas elementos que possuam um certo atributo. Ou mais de um... (h1[class][id])
E tambm de atributos + valores
E de atributos + valores parciais: ~ contm a palavra inteira
SELETORES DE DESCENDENTES
A estrutura de um documento HTML pode ser usada para aplicar estilo em determinados elementos pertencentes a uma hierarquia. Note que os elementos formam uma rvore Exemplo: T d os pargrafos d t d t b l Todos f dentro de tabelas Todos os itens dentro de listas ordenadas Todas as nfases dentro de elementos h1
EXEMPLO > SELETORES DE DESCENDENTES
EXEMPLO > APENAS DESCENDENTES DIRETOS
EXEMPLO > ELEMENTOS IRMOS O OS OS ADJACENTES
COMBINAO DE SELETORES
Estes seletores podem ser combinados para formar selees mais complexas. Por exemplo, a seleo: html > body table + ul {color: red;} Pode ser lida como: Selecione qualquer elemento ul que seja imediatamente adjacente a um elemento table que descenda de um body que seja descendente direto de html
PSEUDO-CLASSES PSEUDO CLASSES

Existem algumas formataes que dependem da ocorrncia de eventos e que no podem ser previstas apenas atravs da anlise da estrutura de um documento. Exemplos: Links visitados e no visitados Elementos que recebem foco Elementos que so apontados pelo mouse Elementos ativos (clicados)
EXEMPLO > PSEUDO CLASSES DE A PSEUDO-CLASSES
EXEMPLO > PSEUDO CLASSES DE INPUT PSEUDO-CLASSES
PSEUDO-ELEMENTOS PSEUDO ELEMENTOS

Funcionam de maneira similar aquela das pseudoclasses. So elementos que no existem explicitamente na estrutura dos documentos. Exemplo Primeira letra, primeira linha, antes, depois
EXEMPLO > PSEUDO ELEMENTOS PSEUDO-ELEMENTOS
CONFLITOS
possvel definir regras conflitantes (vrias regras que se aplicam a um mesmo elemento). Em geral, as regras so escolhidas por: Importncia (!important) Especificidade (id, class, elemento e pseudoelemento) l t ) Ordem Pode no ser trivial saber quais regras so aplicadas.
Introduo CSS
Bernardo Neto

Basico CSS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Basico CSS

Transféré par

Droits d'auteur :

Formats disponibles

Introduo CSS

O QUE A WEB 2.0 TEM A VER COM CSS

CSS MELHOR EXPLICADO

HTML a estrutura para o contedo. CSS a aparncia desse contedo.

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

REGRAS: REGRAS EXEMPLO

h1{color:red;background color:yellow;} h1 { color: red; backgroundcolor: yellow;}

h1{color:red;background color:yellow;} h1 { color: red; backgroundcolor: yellow;}

h1{color:red;background color:yellow;} h1 { color: red; backgroundcolor: yellow;}

h1{color:red;background color:yellow;} h1 { color: red; backgroundcolor: yellow;}

EXEMPLO: EXEMPLO CLASS

DICAS PARA UM BOM CDIGO

Feche corretamente e ordenadamente o que voc abriu

Utilize CSS para ditar como elas devem se apresentar

EXEMPLO > SELETORES DE DESCENDENTES

EXEMPLO > APENAS DESCENDENTES DIRETOS

EXEMPLO > ELEMENTOS IRMOS O OS OS ADJACENTES

PSEUDO-CLASSES PSEUDO CLASSES

EXEMPLO > PSEUDO CLASSES DE A PSEUDO-CLASSES

EXEMPLO > PSEUDO CLASSES DE INPUT PSEUDO-CLASSES

PSEUDO-ELEMENTOS PSEUDO ELEMENTOS

EXEMPLO > PSEUDO ELEMENTOS PSEUDO-ELEMENTOS

Vous aimerez peut-être aussi