Guilherme Araújo Silva
Color
Google Colorpicker
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;
Background
• background-attachment: fixed;
• background-attachment: scroll;
• background-position: (right ou left) (top ou bottom);
• background-position: right top;
• background-position: left bottom;
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:
Font
• As famílias das fontes:
Font
• font-family: "Times New 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;
Font
• font-style: normal;
• font-style: italic;
• font-weight: normal;
• font-weight: bold;
• font-variant: normal;
• font-variant: small-caps;
Font - medidas
• font-size: 20px; • font-size: 1.5em;
Pixel
Em
1em = 16px
pixels / 16 = em
• font-size: 10vw;
vw
viewport width
responsivo
Font - Google Fonts
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
Text
• background-color: black;
• color: #FFFFFF;
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
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;
Links
• Podem ser aplicados 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;
}
Table
Table - border
Table - border
Table - size
Table - alignment
Table - responsive

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.
  • 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.
  • 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.
  • 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.