Your SlideShare is downloading. ×
0
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
W3C Web Standards CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

W3C Web Standards CSS

830

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
830
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Profa.Andrea Dalforno
  • 2. CSSCSS é a abreviaçãode Cascading StyleSheets (Folhas deEstilo em Cascata).Enquanto o documento HTMLinforma ao navegador a estrutura e afunção de um determinadoelemento, o CSS fornece asinstruções ao navegador sobre comoexibir certo elemento: cores,tipografias, espaçamentos, largurase alturas, cores, etc. Isto é possívelatravés de um conjunto de regras.
  • 3. Estilos Estilos estão normalmentearmazenados em folhas de estilo; Estilos separam a apresentação daestrutura; Folhas de Estilo Externas podemeconomizar o seu tempo; Folhas de Estilo Externas sãoarmazenadas em arquivos CSS.CSS não é uma linguagem deprogramação como JavaScript, enão é uma linguagem de marcaçãocomo HTML.Por exemplo, uma regra CSS podeafirmar:Encontrar todos os elementos <h2> em uma página, emudar a cor do texto para verde.Encontrar todos os elementos <p> com um atributoclass=”author-name”, e apresentar o fundo em vermelho,o texto com o dobro do tamanho do texto do parágrafonormal, e adicionar 10 pixels de espaçamento em tornode cada um.
  • 4. SintaxeCSSA sintaxe CSS é composta de três partes: seletor, propriedade e valor. No código fonteda folha de estilo a sintaxe é escrita da seguinte forma:seletor {propriedade: valor;}As chaves contêm a(s) propriedade(s) e seus valor(es), separada(s) por um ponto evírgula.As propriedades definem as características do elemento ou atributo que vocêselecionou, tais como: cor do texto, cor de fundo, posição na página, fonte, entreoutras.Os valores são atribuídos a cada propriedade de cada elemento/atributo. Porexemplo, a propriedade “color” (cor) pode ter valor atribuído em código hexadecimal(ex.: #336699), ou RGB (ex.: rgb (12,134,22)), ou ainda utilizando nomes de cores (ex.:red (vermelho), green (verde) ou blue (azul)). Propriedades que afetam posição,margens, largura ou altura podem ser medidas em pixels (px), ems, percentagens,centímetros ou outras unidades desse tipo.
  • 5. ComentáriosCSSVocê pode adicionar comentários na folha de estilos, basta escrever entre oscaracteres /* e */./* ESTE É UM COMENTÁRIO. */Comentários podem ocupar várias linhas, pois o navegador vai ignorar tudoque estiver escrito entre os caracteres /* */.Os comentários são usados para explicar o código, e pode ajudar na edição docódigo fonte antigo.
  • 6. SeletoresExistem vários seletores diferentes, cada um combinando uma partediferente da marcação.Os três seletores básicos são: Elemento seletor Seletor class Seletor id
  • 7. Seletores:ElementoseletorElemento seletor pode ser qualquer tag/elemento HTML.Exemplos: body { }p { }a { }
  • 8. Seletores:SeletorclassCom o seletor class é possível definir estilos diferentes para o mesmo tipo deelemento HTML. Porém, é necessário definir no seu documento HTML os dois tiposdo mesmo elemento, utilizando atributos class diferentes. O seletor class é definidocom um ponto antes do nome/valor.Exemplo: HTMLCSSSe a tag não for mencionada no seletor para definir um estilo, então este será usadopor todos elementos do documento HTML que possuem um determinado atributoclass.<p class=”right”> Este texto deverá aparecer alinhado à direita.</p><p class=”center”>Este texto deverá aparecer centralizado.</p>p .right {text-align: right;}p .center {text-align: center;}.right {text-align: right;}.center {text-align: center;}
  • 9. Seletores:SeletoridVocê também pode definir estilos para elementos HTML utilizando o seletor id. Oseletor id é definido com o símbolo cerquilha/cardinal (#) antes do nome/valorExemplos: HTMLCSS<div id=”verde”>O texto desta seção aparecerá na cor verde.</div>#verde {color: green;}
  • 10. SeletorescombinadosOs seletores podem ser combinados para definir regras mais específicas.Por exemplo, vamos supor que o documento HTML tem um elemento <pid=“para1”>, e que este deverá aparecer com o texto centralizado emvermelho, então o estilo será:p #para1{text-align: center;color: red;}
  • 11. AgrupamentoÉ possível também agrupar diferentes seletores para aplicar o mesmo estilo.Separe cada seletor com uma vírgula. No exemplo abaixo foram agrupadostodos os elementos de título, pois todos serão exibidos em cor de textoverde.Veja as referências daW3C para seletores:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletoresh1,h2,h3,h4,h5,h6 {color: green}
  • 12. CSSabreviadaÉ possível combinar várias propriedades CSS relacionadas em uma únicapropriedade para economizar tempo e esforço de sua parte.A abreviação pode ser bem interessante para propriedades como margin epadding.Por exemplo, vamos supor que você precisa definir a propriedade margin doelemento <div id=”col”></div>:Para simplificar, esta regra também pode ser escrita da seguinte forma:#col {margin-top: 1px;margin-right: 1.5px;margin-bottom: 2px;margin-left: 2.5px;}#col {margin: 1px 1.5px 2.5px 2px;}
  • 13. AplicandoCSSaumdocumentoHTMLExistem três maneiras de aplicar CSS a um documento HTML: estilos inline,estilos incorporados, e folhas de estilo externas. É recomendável que utilizefolhas de estilo externas, salvo quando as outras opções se fazemnecessárias.Todos os estilos legam "cascata" pela seguinte ordem de prioridade:1. Estilos inline (dentro de um elemento HTML)2. Estilos internos ou incorporados (dentro da <head>)3. Folhas de estilo externas4. Padrão do navegador
  • 14. EstilosinlineUm estilo inline perde muitas das vantagens das folhas de estilo externas,pois mistura conteúdo com apresentação. Então, use esta opção raramente,com muito critério, quando um estilo for aplicado somente a uma ocorrênciade um elemento.Para usar estilos inline você usa o atributo style na tag relacionada.O atributostyle pode conter qualquer propriedade de CSS. O exemplo mostra comomudar a cor e a margem esquerda de um parágrafo específico:<p style="color: sienna; margin-left: 20px;">Este é um parágrafo específico.</p>
  • 15. EstilosinternosouincorporadosO estilo interno ou incorporado é pertinente apenas ao documento HTML aque pertence.Você define estilos internos dentro da tag <head> usando a tag<style>:<head><style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}</style></head>
  • 16. FolhasdeestiloexternasA folha de estilo externa é a opção mais recomendada para definir a apresentação deum website. Vantagens:1. os estilos serão aplicados a todas as páginas do site; e2. permitem alterar o layout e toda a apresentação do site sem interferir noconteúdo.Atenção! Cada página do site deve conter uma ligação para a folha de estilos externausando a tag <link> ou a tag <style>, que deve ser inserida dentro da tag <head>:<head><link rel="stylesheet" type="text/css" href="style.css" /></head><head><style type="text/css"><!--@import url("style.css");--></style></head>
  • 17. FolhasdeestilosmúltiplasSe algumas propriedades fossem fixadas para o mesmo seletor em folhas de estilodiferentes, os valores serão herdados da folha de estilo de acordo com o nível deprioridade:1. Estilos inline (dentro de um elemento HTML)2. Estilos internos ou incorporados (dentro da <head>)3. Folhas de estilo externas4. Padrão do navegador
  • 18. PropriedadesCores e fundosA propriedade background de CSSpermite que você controle a cor defundo de um elemento, imagem defundo, repetição da uma imagemverticalmente ou horizontalmente, eposicionamento da imagem napágina.Veja as referências daW3C paracores e fundos:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-coresUnidade Descriçãonome dacorUtiliza-se apenas o nome da cor. Apenas 16nomes de cor são suportados pelo padrão daW3C (aqua, black, blue, fuchsia, gray, green,lime, maroon, navy, olive, purple, red, silver, teal,white, e yellow).rgb (x,x,x) Define-se um valor RGB (ex.: rgb(255,0,0)).rgb(x%,x%,x%)Define-se valores de porcentagem do RGB (ex.:rgb(100%,0%,0%)).#rrggbb Define-se um valor hexadecimal (ex.: #ff0000).As cores utilizam as seguintesregras:
  • 19. PropriedadesTextosA propriedade text do CSS permiteque você controle a aparência dotexto. É possível mudar a cor de umtexto, aumentar ou diminuir oespaço entre caracteres, alinhar edecorar um texto, recuar a primeiralinha, etc.Veja as referências daW3C paratextos:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-textoFontes tipográficasA propriedade font do CSS permiteque você mude a família detipográfica, largura e tamanho dafonte, e o estilo de um texto.Veja as referências daW3C parafontes tipográficas:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-fontes
  • 20. PropriedadesBordasA propriedade border do CSS permiteque você especifique o estilo e cor deborda do elemento. Em HTML nósusamos tabelas para criar bordas aoredor um texto, mas com apropriedade border do CSS nóspodemos criar bordas com efeitos,além de poder aplica-las a qualquerelemento.Veja as referências daW3C parabordas:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-bordasMargensA propriedade margin do CSS define oespaço ao redor elementos. É possívelusar valores negativos para sobreporconteúdos. As margens topo, direita,inferior, e esquerda são independentese podem receber valores diferentes. Apropriedade margin (shorthand)também pode ser usada para mudartodas as margens de uma vez.Veja as referências daW3C paramargens:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-margens
  • 21. PropriedadesEspaçamentoAs propriedades de padding do CSSdefinem o espaço entre a borda e oconteúdo de elemento. Os valoresnegativos não são permitidos. O paddingsuperior, direito, esquerdo e inferior sãoindependentes e podem receber valoresdiferentes.A propriedade padding(shorthand) também pode ser usada paramudar todos os espaçamentos de uma vez.Veja as referências daW3C paraespaçamento:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-espacamentoDepois veja o modelo de caixa e entendacomo você deverá definir as bordas,margens e espaçamentos.http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-caixaAgregador de conteúdo, numeraçãoautomática e listasAs propriedades content e list do CSS permitiremque você agregue conteúdos de pseudo-elementos e insira numeração/marcadores emitens de lista respectivamente.Veja as referências daW3C para agregador deconteúdo, numeração automática e listas:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-agregador
  • 22. PropriedadesModelo de formatação visualReúne propriedades do CSS quedefinem dimensões, classificação eposicionamento. Por exemplo,permitem que você controle a alturae largura de um elemento, aumenteo espaço entre duas linhas, controlea exibição de um elemento, posiçãode um elemento em relação a outro,posição de um elemento usando umvalor absoluto, controle avisibilidade de um elemento, bemcomo especifique a posição de umelemento.Veja as referências daW3C paramodelo de formatação visual:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-formatacaoVeja também:Detalhes do modelo de formataçãovisual e os efeitos visuais:http://www.w3c.br/divulgacao/guiasreferencia/css2/
  • 23. PropriedadesTipos de mídiaOs tipos de mídia permitem que vocêespecifique como documentos serãoapresentados em mídias diferentes.Por exemplo, como um documentopode ser exibido com um estilodiferente no monitor, dispositivomóvel, impressão etc.A regra @media, que permite definirestilos diferentes para mídiasdiferentes na mesma folha de estilo.Veja as referências daW3C para tiposde mídia, a sintaxe, e as unidades demedidas:http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-tipos<style>@media screen{p.test{font-family:verdana sans-serif;font-size:14px}}@media print{p.test, {font-family:times serif;font-size:10px}}@media screen,print{p.test {font-weight:bold}}</style>

×