______________________________________________________________________ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALESTécnico em I...
 Introdução; Folhas de Estilos internas; Folhas de Estilos externas; Folhas de Estilos inline; As Regras CSS; Propri...
 Quando o World Wide Web Consortium(W3C) lançou a versão 4.0 da HTML,incorporou a ela as CSS (CascadingStyle Sheets — Fol...
 Passou a ser possível, separar oconteúdo do documento de suaformatação. Antes de existirem taisfolhas de estilo, recorri...
 É um arquivo de texto separado doarquivo HTML e deve conter apenascódigo CSS; nenhum outro texto podeser inserido, nem t...
 Uma folha de estilos interna — tambémchamada de folha de estilosincorporada — é o código CSS inseridono próprio document...
 Estilos inline são aqueles que são aplicados a umaúnica instância de um elemento. São definidosdentro do próprio element...
 Uma regra CSS é formada de um seletorque antecede as chaves e de umadeclaração que fica dentro das chaves. A declaração...
 Com o seletor de classe pode-se definirvários estilos diferentes para um mesmotipo de elemento. O seletor de classe é f...
 O seletor ID deve ser um nome exclusivoe só pode ser aplicado a UM e somenteUM elemento dentro do documento. É formado ...
 Para fazer a mesma definição paravários elementos, agrupam-se osseletores:
Propriedade Descrição1 - FUNDObackgroundDefine todos os parâmetros referentes ao fundode um elemento. Aceita de 1 a 5 valo...
Propriedade Descrição2 - BORDASborderDefine o estilo, a espessura e a cor das 4 bordas.Aceita de 1 a 3 valores. Valores: b...
Propriedade Descrição3 - LINHAS DE CONTORNOoutlineDefine o estilo, a espessura e a cor da linha decontorno. Aceita de 1 a ...
Propriedade Descrição4 - MARGENSmarginDefine as 4 margens do elemento. Aceita de 1 a 4valores.margin-topmargin-rightmargin...
Propriedade Descrição6 - CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)clearDefine os lados de um elemento onde não sãopermitidos eleme...
Propriedade Descrição6 - CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)positionDefine a posição de um elemento como estática,relativa, ...
Propriedade Descrição7 - POSICIONAMENTOoverflowDefine o que deve ocorrer quando o conteúdode um elemento excede sua área.V...
Propriedade Descrição9 - FONTEfontDefine vários valores da fonte. Valores: font-family | font-size/line-height | font-styl...
Propriedade Descrição9 - FONTEfont-size-adjustDefine que o tamanho da fonte deve serajustado, caso o browser tenha de util...
Propriedade Descrição10 - TEXTOcolorDefine a cor do texto. Valores: nomecor |#rrggbb | #rgb | rgb(d,d,d) |rgb(d%,d%,d%)tex...
Propriedade Descrição10 - TEXTOletter-spacingword-spacingDefinem um aumento ou diminuição noespaço entre os caracteres ou ...
Propriedade Descrição11 - LISTAS E MARCADORESlist-styleDefine todos os parâmetros referentes auma lista. Aceita de 1 a 3 v...
Propriedade Descrição12 - TABELASborder-collapseDefine se os traços das bordas serãofundidos ou mantidos separados. Valore...
Próximos SlideShares
Carregando em…5
×

02-Introdução CSS - DDW II

381 visualizações

Publicada em

Nota de aula de DDW II - Etec Jales

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
381
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

02-Introdução CSS - DDW II

  1. 1. ______________________________________________________________________ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALESTécnico em Informática para InternetProfª.: Evelyn K. R. Matos | email: evelynkrm@gmail.comFace: facebook.com/evelynbbl
  2. 2.  Introdução; Folhas de Estilos internas; Folhas de Estilos externas; Folhas de Estilos inline; As Regras CSS; Propriedades CSS.
  3. 3.  Quando o World Wide Web Consortium(W3C) lançou a versão 4.0 da HTML,incorporou a ela as CSS (CascadingStyle Sheets — Folhas de Estilos emCascata) que têm a finalidade de daruma forma de apresentação aoconteúdo do documento HTML.
  4. 4.  Passou a ser possível, separar oconteúdo do documento de suaformatação. Antes de existirem taisfolhas de estilo, recorria-se a elementose atributos da própria HTML para isso.
  5. 5.  É um arquivo de texto separado doarquivo HTML e deve conter apenascódigo CSS; nenhum outro texto podeser inserido, nem tags HTML. No documento HTML, o arquivo CSSdeverá ser LINKADO ou IMPORTADO dedentro do elemento <head>.
  6. 6.  Uma folha de estilos interna — tambémchamada de folha de estilosincorporada — é o código CSS inseridono próprio documento HTML, entre astags <style> e </style>, dentro da seção<head>.
  7. 7.  Estilos inline são aqueles que são aplicados a umaúnica instância de um elemento. São definidosdentro do próprio elemento, só para ele. Na tagque o introduz insere-se o atributo style e, a este,atribui-se um valor que é constituído de códigoCSS. Pode-se, por exemplo, definir estilos para umcabeçalho específico, para um parágrafoespecífico, para um link específico, etc.
  8. 8.  Uma regra CSS é formada de um seletorque antecede as chaves e de umadeclaração que fica dentro das chaves. A declaração é constituída depropriedade e valor separados por dois-pontos. A sintaxe geral é a seguinte:
  9. 9.  Com o seletor de classe pode-se definirvários estilos diferentes para um mesmotipo de elemento. O seletor de classe é formado pelonome do elemento (tag), um ponto e onome da classe. Deve-se atribuir umnome descritivo à classe. "Inventa-se"um nome.
  10. 10.  O seletor ID deve ser um nome exclusivoe só pode ser aplicado a UM e somenteUM elemento dentro do documento. É formado pelo nome do elemento(tag), um sinal # e um nome. Deve-se atribuir um nome descritivo aoID. "Inventa-se" um nome.
  11. 11.  Para fazer a mesma definição paravários elementos, agrupam-se osseletores:
  12. 12. Propriedade Descrição1 - FUNDObackgroundDefine todos os parâmetros referentes ao fundode um elemento. Aceita de 1 a 5 valores.background-colorDefine a cor de fundo de um elemento.Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d)| rgb(d%,d%,d%) | transparentbackground-imageDefine uma imagem como fundo de umelemento.Valores: url | nonebackground-repeatDefine se a imagem vai repetir (formando ummosaico) ou não e a direção da repetição.Valores: repeat | repeat-x | repeat-y | no-repeatbackground-attachmentDefine se a imagem de fundo de um elementoficará fixa ou se irá rolar junto com o conteúdo.Valores: scroll | fixedbackground-positionDefine o ponto onde inicia o desenho da imagemde fundo.Valores: top left | top center | top right | centerleft | center center | center right | bottom left |bottom center | bottom right | x% y%
  13. 13. Propriedade Descrição2 - BORDASborderDefine o estilo, a espessura e a cor das 4 bordas.Aceita de 1 a 3 valores. Valores: border-style |border-width | border-colorborder-topborder-rightborder-bottomborder-leftDefinem o estilo, a espessura e a cor das bordassuperior, direita, inferior e esquerda. Aceitam de 1a 3 valores. Valores: border-style | border-width |border-colorborder-styleDefine o estilo das 4 bordas. Aceita de 1 a 4valores. Valores: none | hidden | dotted |dashed | solid | double | groove | ridge | inset |outsetborder-widthDefine a espessura das 4 bordas. Aceita de 1 a 4valores. Valores: thin | medium | thick | unids_cssborder-colorDefine a cor das 4 bordas. Aceita de 1 a 4 valores.Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) |rgb(d%,d%,d%)
  14. 14. Propriedade Descrição3 - LINHAS DE CONTORNOoutlineDefine o estilo, a espessura e a cor da linha decontorno. Aceita de 1 a 3 valores. Valores: outline-style | outline-width | outline-coloroutline-styleDefine o estilo da linha de contorno. Valores: none| hidden | dotted | dashed | solid | double |groove | ridge | inset | outsetoutline-widthDefine a espessura da linha de contorno. Valores:thin | medium | thick | unids_cssoutline-colorDefine a cor da linha de contorno. Valores:nomecor | #rrggbb | #rgb | rgb(d,d,d) |rgb(d%,d%,d%) | invert
  15. 15. Propriedade Descrição4 - MARGENSmarginDefine as 4 margens do elemento. Aceita de 1 a 4valores.margin-topmargin-rightmargin-bottommargin-leftDefinem as margens superior, direita, inferior eesquerda. Valores: auto | unids_css | %5 - ESPAÇO EM BRANCO (PADDING)paddingDefine o espaço entre o conteúdo e os 4 limitesdo elemento. Aceita de 1 a 4 valores.Valores: padding-top | padding-right | padding-bottom | padding-leftpadding-toppadding-rightpadding-bottompadding-leftDefinem o espaço entre o conteúdo e os limitessuperior, direito, inferior e esquerdo.Valores: unids_css | %
  16. 16. Propriedade Descrição6 - CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)clearDefine os lados de um elemento onde não sãopermitidos elementos flutuantes.Valores: left | right | both | nonecursorDefine um formato para o cursor. Valores: url |auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize |sw-resize | s-resize | w-resize | text | wait | helpdisplayDefine se um elemento deve ser apresentado e aforma de apresentação.Valores: none | inline | block | list-item | run-in |compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-captionfloatDefine o alinhamento de um elemento e controlao fluxo de texto ou de outros elementos ao seuredor. Valores: left | right | none
  17. 17. Propriedade Descrição6 - CLASSIFICAÇÃO (FORMA DE EXIBIÇÃO)positionDefine a posição de um elemento como estática,relativa, absoluta ou fixa.Valores: static | relative | absolute | fixedvisibilityDefine se um elemento deve ficar visível ouinvisível.Valores: visible | hidden | collapse7 - POSICIONAMENTOtoprightbottomleftDefinem a distância do elemento em relação aolimite do elemento que o contém.Valores: auto | unids_css | %vertical-alignDefine o alinhamento vertical do elemlento.Valores: baseline | sub | super | top | text-top |middle | bottom | text-bottom | unids_css | %clipDefine a forma de um elemento.Valores: auto | shape
  18. 18. Propriedade Descrição7 - POSICIONAMENTOoverflowDefine o que deve ocorrer quando o conteúdode um elemento excede sua área.Valores: visible | hidden | scroll | autoz-indexDefine a ordem de apresentação dos elementosquando há sobreposição. Valores: auto | número8 - DIMENSIONAMENTOwidthheightDefinem a largura e a altura de um elemento.Valores: auto | unids_css | %max-widthmax-heightDefinem a largura máxima e a altura máxima deum elemento. Valores: none | unids_css | %min-widthmin-heightDefinem a largura mínima e a altura mínima deum elemento. Valores: unids_css | %line-heightDefine a distância entre linhas de texto.Valores: normal | número | unids_css | %
  19. 19. Propriedade Descrição9 - FONTEfontDefine vários valores da fonte. Valores: font-family | font-size/line-height | font-style |font-weight | font-variant | caption | icon |menu | message-box | small-caption |status-barfont-familyDefine o tipo de fonte. Valores: family-name| generic-familyfont-sizeDefine o tamanho da fonte. Valores: xx-small| x-small | small | medium | large | x-large| xx-large | smaller | larger | unids_css | %font-styleDefine o estilo da fonte. Valores: normal |italic | obliquefont-weightDefine a espessura do traço da fonte.Valores: normal | bold | bolder | lighter |100 | 200 | 300 | 400 | 500 | 600 | 700 |800 | 900
  20. 20. Propriedade Descrição9 - FONTEfont-size-adjustDefine que o tamanho da fonte deve serajustado, caso o browser tenha de utilizaroutro tipo de fonte que não o escolhido emfont-family. Valores: none | númerofont-variantDefine se deve ser utilizado um tipo de fonte"small-caps" ou normal.font-stretchDefine uma contração ou expansão nalargura da fonte. Valores: normal | wider |narrower | ultra-condensed | extra-condensed | condensed | semi-condensed| semi-expanded | expanded | extra-expanded | ultra-expanded
  21. 21. Propriedade Descrição10 - TEXTOcolorDefine a cor do texto. Valores: nomecor |#rrggbb | #rgb | rgb(d,d,d) |rgb(d%,d%,d%)text-alignDefine o alinhamento do texto. Valores: left| right | center | justifytext-indentDefine um deslocamento para a direita ouesquerda da primeira linha do texto. Valores:unids_css | %text-decorationDefine um efeito decorativo para o texto.Valores: none | underline | overline | line-through | blinktext-transformDefine que o texto deve ser capitalizado ouser exibido todo em maiúsculas ouminúsculas. Valores: none | capitalize |uppercase | lowercase
  22. 22. Propriedade Descrição10 - TEXTOletter-spacingword-spacingDefinem um aumento ou diminuição noespaço entre os caracteres ou entre aspalavras. Valores: normal | unids_csswhite-spaceDefine o tratamento a ser dado ao espaçoem branco existente dentro de umelemento. Valores: normal | pre | nowrapdirectionDefine a direção em que é escrito o texto.Da esquerda para a direita ou da direitapara a esquerda. Valores: ltr | rtl
  23. 23. Propriedade Descrição11 - LISTAS E MARCADORESlist-styleDefine todos os parâmetros referentes auma lista. Aceita de 1 a 3 valores. Valores:list-style-type | list-style-position | list-style-imagelist-style-typeDefine o tipo de marcador de item da lista.Valores: none | disc | circle | square |decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha |upper-alpha | lower-greek | lower-latin |upper-latin | hebrew | armenian | georgian| cjk-ideographic | hiragana | katakana |hiragana-iroha | katakana-irohalist-style-positionDefine a posição do marcador de item dalista. Valores: inside | outsidelist-style-imageDefine a imagem a ser utilizada comomarcador de item da lista. Valores: none |url
  24. 24. Propriedade Descrição12 - TABELASborder-collapseDefine se os traços das bordas serãofundidos ou mantidos separados. Valores:collapse | separateborder-spacingDefine a distância entre as bordas decélulas adjacentes. Só aplicável quandoborder-collapse for separate. Valores:unids_cssempty-cellsDefine se as células sem conteúdo visíveldevem ter bordas ou não. Só aplicávelquando border-collapse for separate.Valores: show | hidecaption-sideDefine a posição da legenda na tabela.Valores: top | bottom | left | righttable-layoutDefine como será desenhada a tabelaValores: auto | fixed

×