CSS
0 gostou383 visualizações
O documento apresenta os principais conceitos e sintaxes de CSS, incluindo seletores, propriedades, valores e unidades comuns. Explica como aplicar estilos a elementos HTML através de regras CSS internas ou externas, e como manipular propriedades como cores, fontes, bordas, espaçamentos e posicionamento.
![Elementos que contêm o atributo
a[href] { ... }
.foto > a[target] { ... }
body select[multiple]{ ... }](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-16-320.jpg)
![Elementos que contêm o atributo com o
valor específico
a[target=“_blank”] { ... }
#cadastro input[type=“text”] { ... }
img[alt=“Help”] { ... }](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-17-320.jpg)
![#menu a:hover { … }
input[type=text]:focus { … }
td:first-child { … }](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-19-320.jpg)
![img, a[target=“_blank”] { ... }
.foto, .peixe, #cadastro input[type=“text”] { ...
}
table, thead, img[alt=“Help”] { ... }](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-20-320.jpg)
![font: [font-style] [font-variant] [font-weight]
font-size/[line-height] font-family](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-25-320.jpg)
![list-style: [type] [position] [image]](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-27-320.jpg)
![background: [background-color]
[background-image] [background-repeat]
[background-attachment] [background-
position]](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-29-320.jpg)
![border: [width] [style] [color]
border-top: [width] [style] [color]
border-right: [width] [style] [color]
border-bottom: [width] [style] [color]
border-left: [width] [style] [color]](https://image.slidesharecdn.com/css-111017201859-phpapp01/85/CSS-38-320.jpg)
CSS
- 1. Unifesp - Cursos de Verão 2010 Luiz Gustavo Soares @luizgrs
- 7. Descrição do alvo; Quais tags estilizar;
- 8. O que e como mudar; borda fonte preenchimento posição ...
- 9. Qualquer elemento; * { ... }
- 10. Um tipo de tag específica; a { ... } table { ... }
- 11. Elemento específico; Baseado no atributo ID; #header { ... } #menu { ... }
- 12. Elementos específicos; Baseado no atributo class; .botao { ... } .foto { ... }
- 13. Elementos “dentro” de outros; table a { ... } div .foto { ... } #header img { ... }
- 14. Elementos filhos; table > a { ... } div > .foto { ... } #header > img { ... }
- 15. Elementos que estão “ao lado” de outros; table + a { ... } div + .foto { ... } #header + img { ... }
- 16. Elementos que contêm o atributo a[href] { ... } .foto > a[target] { ... } body select[multiple]{ ... }
- 17. Elementos que contêm o atributo com o valor específico a[target=“_blank”] { ... } #cadastro input[type=“text”] { ... } img[alt=“Help”] { ... }
- 18. :focus Ativado quando elemento recebe foco :hover Ativado quando mouse está em cima do elemento :first-child Ativado quando elemento é o primeiro filho de seu pai
- 19. #menu a:hover { … } input[type=text]:focus { … } td:first-child { … }
- 20. img, a[target=“_blank”] { ... } .foto, .peixe, #cadastro input[type=“text”] { ... } table, thead, img[alt=“Help”] { ... }
- 21. Valores pré-definidos, keyword URLs url(‘http://…’) Número Unidades em px in cm mm
- 22. Cores nome rgb(x, y, z) #rrggbb #rgb
- 23. color: #cor text-align: center | right | left | justify text-decoration: none | underline | overline line-through | blink text-indent: unidade;
- 24. font-family: “fonte 1”, fonte2, fonte3 font-style: normal | italic | oblique font-size: unidade; font-variant: small-caps | normal font-weight: normal | bold | 100 | … | 900;
- 25. font: [font-style] [font-variant] [font-weight] font-size/[line-height] font-family
- 26. list-style-type: none | disc | circle | square decimal | lower-alpha | upper-alpha | lower-roman | upper-roman list-style-image: url() list-style-position: inside | outside
- 27. list-style: [type] [position] [image]
- 28. background-color: #cor background-image: url() background-repeat: repeat | no-repeat | repeat-x | repeat-y background-attachment: scroll | fixed background-position: top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x% y% |
- 29. background: [background-color] [background-image] [background-repeat] [background-attachment] [background- position]
- 30. Font e
- 31. width: unidade height: unidade max-height: unidade min-height: unidade max-width: unidade min-width: unidade
- 32. padding-top: unidade padding-right: unidade padding-bottom: unidade padding-left: unidade
- 33. padding: unidade padding: unidade unidade padding: unidade unidade unidade padding: unidade unidade unidade unidade
- 34. border-left-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset border-left-color: #cor; border-left-width: unidade;
- 35. border-style: tipo border-style: tipo tipo border-style: tipo tipo tipo border-style: tipo tipo tipo tipo
- 36. border-color: #cor border-color: #cor #cor border-color: #cor #cor #cor border-color: #cor #cor #cor #cor
- 37. border-width: unidade border-width: unidade unidade border-width: unidade unidade unidade border-width: unidade unidade unidade unidade
- 38. border: [width] [style] [color] border-top: [width] [style] [color] border-right: [width] [style] [color] border-bottom: [width] [style] [color] border-left: [width] [style] [color]
- 39. margin-top: unidade margin-right: unidade margin-bottom: unidade margin-left: unidade
- 40. margin: unidade margin: unidade unidade margin: unidade unidade unidade margin: unidade unidade unidade unidade
- 41. position: fixed | static | relative | absolute left: unidade top: unidade bottom: unidade right: unidade z-index: numero
- 42. float: left | right | none clear: none | left | right | both
- 43. DEMO
- 44. :nth-child, :last-child, :only-child, :empty, Animações Múltiplos Backgrounds Múltiplas Bordas RGBA Font Face Bordas Arredondadas Sombras
- 45. Homer Simpson CSS Jogo em CSS CSS Animation AT-AT