Transferir como PDF, PPTX
Carregado porGuilherme Araújo Silva
CSS - 02 propriedades
O documento apresenta as principais propriedades CSS para estilização de backgrounds, fontes, textos, links e tabelas. Inclui propriedades para definir cores, imagens e repetições de backgrounds, famílias, estilos e tamanhos de fontes, alinhamento e decoração de textos, estados de links e bordas, tamanhos e alinhamento de células em tabelas.
CSS - 02 propriedades
- 1.
- 2.
- 3. Background • background-color: lightblue; •background-color : rgb(235, 64, 52); • background-color : rgb(235, 64, 52, 0.5); • background-image: url("paper.png"); • background-image: url("paper.jpg"); • background-image: url("paper.gif"); • background-repeat: repeat; • background-repeat: repeat-x; • background-repeat: repeat-y; • background-repeat: no-repeat;
- 4. Background • background-attachment: fixed; •background-attachment: scroll; • background-position: (right ou left) (top ou bottom); • background-position: right top; • background-position: left bottom;
- 5. Background - shorthand(abreviação) •background: lightgray url("img_tree.png") no-repeat right top fixed; • Uma única declaração, juntando várias propriedades do background: • background-color: • background-image: • background-repeat: • background-position: • background-attachment:
- 6. Font • As famíliasdas fontes:
- 7. Font • font-family: "TimesNew Roman", Georgia, serif; • font-family: Arial, Helvetica, sans-serif; • Selecionando as fontes por nível de importância; • Sequência de busca: da esquerda para direita; • Esquerda mais importante (a preferência do desenvolvedor); • Terminar com a família da fonte;
- 8. Font • font-style: normal; •font-style: italic; • font-weight: normal; • font-weight: bold; • font-variant: normal; • font-variant: small-caps;
- 9. Font - medidas •font-size: 20px; • font-size: 1.5em; Pixel Em 1em = 16px pixels / 16 = em • font-size: 10vw; vw viewport width responsivo
- 10. Font - GoogleFonts
- 11. Font - shorthand(abreviação) •font: italic small-caps bold 12px/30px Georgia, serif; • Uma única declaração, juntando várias propriedades do font: • font-style • font-variant • font-weight • font-size/line-height • font-family
- 12. Text • background-color: black; •color: #FFFFFF;
- 13. Text • text-align: center; •text-align: left; • text-align: right; • text-align: justify; • vertical-align: baselinle; • vertical-align: text-top; • vertical-align: text-bottom; • vertical-align: sub; • vertical-align: super; Imagens dentro de um parágrafo
- 14. Text • text-decoration: overline; •text-decoration: line-through; • text-decoration: underline; • text-decoration: none; • text-transform: uppercase; • text-transform: lowercase; • text-transform: capitalize; • text-ident: 50px; • letter-spacing: 3px; • letter-spacing: -3px; • line-height: 1.5; • text-shadow: 2px 2px 5px red;
- 15. Links • Podem seraplicados estilos diferentes para cada “estado” do link; • Basicamente aceita as mesmas propriedades do text; /* link não visitado */ a:link { color: green; } /* link visitado */ a:visited { color: red; } /* mouse em cima do link */ a:hover { color: yellow; } /* ao clicar no link */ a:active { color: blue; }
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.