Apostila_HTML_CSS_E-Jovem 11

abaixo,  encontram­se propriedades e  valores  para  imagens de background e para 
cores.
Propriedade  Descrição  Valores  Exemplo 
cor  Ajusta a cor do texto 
nome da cor Trio RGB 
Código hex Valores RGB 
{ color: blue } { color: #00F } 
{ color: #0000FF } { color: 
RGB 0.0 0.0 1.0 } 
background  
Ajusta as imagens 
de background ou 
cores 
url(URL) (com ou sem 
repeat); nome da cor 
(ou transparent, ou 
dois nomes de cores, 
que serão misturadas, 
separados por um /); 
trio RGB (código hex) 
{ background: url(image1.gif) 
repeat } { background: Red } 
{ background: Red / Blue } 
{ background: transparent } { 
background: #CCCCCC } 
background­
color  
Ajusta a cor do 
background 
nome da cor; trio RGB 
(código hex) 
{ background­color: Red } 
{ background­color: 
#CCCCCC } 
background­
image 
Ajusta a imagem 
de background 
URL  { background­image: 
url(image1.gif) } 
background­
repeat 
Ajusta a repetição 
do entelhamento 
das imagens de 
background 
repeat (horizontalmente 
e verticalmente); repeat­
x (horizontal); repeat­y 
(vertical); no­repeat 
{ background­repeat: repeat­y 
} 
background­
attachment
Fixa a imagem de 
background ou 
permite que ela 
deslize junto com 
a página 
scroll ou fixed  { background: fixed } 
background­
position 
Ajusta a posição 
inicial das 
imagens de 
background 
(Observe que a 
Posição (x y) ou (x% y
%); top, center, bottom 
left, center, right 
{ background­position: 2cm 
1cm } { background­position: 
50% 20% } { background­
position: top center } 
{ background­position: top } 
Projeto e­Jovem ­ Módulo II: CSS 56
posição default, 
0,0 ou 0%,0%, é o 
canto superior 
esquerdo do 
elemento) 
{ background­position: 
bottom right } 
pt = pontos; in = polegadas; cm = centímetros; px = pixels; 
2.8.  Controle de blocos
Uma “caixa” é uma propriedade de qualquer elemento de bloco no HTML: H1, P, DIV, etc, 
que   automaticamente  definem  seu  próprio   bloco   ou  parágrafo.   A   caixa  de   um objeto 
consiste das partes seguintes:
• O elemento em si (texto, imagem)
• As margens internas do elemento (padding)
• A borda em torno das margens internas (border)
• A margem em torno da borda (margin)
             Todo elemento de bloco tem essas propriedades. As propriedades CSS que veremos 
nesta seção mostrarão como alterá­las.  A cor e tamanho da borda podem ser alterados 
assim   como   o   fundo   (como   vimos   na   seção   anterior).   A  margem   externa   é   sempre 
transparente, mas a margem interna herda a cor de fundo do objeto.
       Também são alteráveis as margens internas e externas, larguras de borda, cor de borda 
e estilo de borda de cada um dos quatro lados de uma caixa individualmente, identificados 
pelos nomes top, right, bottom e left:
2.8.1.  margin e padding
As  margens   externas   são   definidas   usando   a   propriedade  margin,   que   afeta   todas   as 
margens ao mesmo tempo; ou as propriedades margin­top, margin­bottom, margin­right e 
margin­left que permitem alterar as margens individualmente. Sintaxe:
• margin­top: comprimento | porcentagem % | auto
• margin­bottom: comprimento | porcentagem % | auto
• margin­right: comprimento | porcentagem % | auto
• margin­left: comprimento | porcentagem % | auto
      Exemplo:
      margin­top: 1cm; margin­left: 12pt;
A propriedade margin afeta vários aspectos das margens externas de uma vez só. A ordem 
dos fatores é importante. Podem ser incluídos todos os quatro valores, apenas um (todas as 
margens iguais) ou dois (margens horizontais e verticais). Sintaxe:
• margin:   margin­top       margin­right        margin­bottom      margin­left
• margin:   margin­top% margin­right% margin­bottom% margin­left%
Projeto e­Jovem ­ Módulo II: CSS 57
• margin:   espaço_vertical         espaço_horizontal
• margin:   margem_de_todos_os_lados
      Exemplos:
      margin: 5cm             // vale para as quatro margens
      margin: 5cm 2cm         // 5cm margs verticais, 2cm margs horizontais
      margin: 5cm 3cm 2cm 1cm // sent. horário: top, right, bottom, left
As margens  internas (padding) são definidas usando a propriedade padding (que afeta 
todas as margens internas ao mesmo tempo) ou as propriedades padding­top, padding­
bottom, padding­right e padding­left. Sintaxe:
• padding­top: comprimento | porcentagem %
• padding­bottom: comprimento | porcentagem %
• padding­right: comprimento | porcentagem %
• padding­left: comprimento | porcentagem %
A propriedade padding afeta vários aspectos das margens internas de uma vez só. A ordem 
dos   fatores  é   importante.  Podem ser   incluídos   todos  os  quatro  valores  ou apenas  um. 
Sintaxe:
• padding: padding­top padding­right padding­bottom padding­left
• padding: padding­top% padding­right% padding­bottom% padding­left%
• padding: espaço_vertical espaço_horizontal
• padding: margem_de_todos_os_lados
2.8.2.  border­width
Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos quatro 
lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito 
de diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border­
style) seja definido. Por exemplo:
       border­style: solid
A espessura das bordas pode ser controlada através da propriedade border­width, afetando 
as espessuras de todos os lados da borda, ou individualmente através de border­top­width, 
border­bottom­width, border­right­width e border­left­width. Sintaxe:
• border­top­width: comprimento | thin | medium | thick
• border­bottom­width: comprimento | thin | medium | thick
• border­right­width: comprimento | thin | medium | thick
• border­left­width: comprimento | thin | medium | thick
       Exemplos:
       border­bottom­width: thick; border­right­width: 5.5px;
       border­left­width: 0.2cm
Projeto e­Jovem ­ Módulo II: CSS 58
As propriedades das bordas podem ser tratadas em grupo, com border­width. A ordem dos 
fatores é   importante. Podem ser  incluídos todos os quatro valores,  dois (referindo­se às 
bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
• border­width: border­top­width I border­right­width 
• border­width: border­bottom­width I border­left­width
       Exemplos:
       border­width: 5cm                // vale para as quatro bordas
       border­width: 5cm 2cm            // 5cm verticais, 2cm horizontais
       border­width: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left
2.8.3.  border­color
A propriedade border­color é um atalho que permite que se altere a cor de uma ou de todas 
as   quatro   bordas   ao   redor   de   um   elemento   que   também   podem   ser   definidas 
individualmente   através   de   border­top­color,   border­bottom­color,   border­right­color   e 
border­left­color. Sintaxe: 
• border­top­color: cor (nome ou código)
• border­bottom­color: cor (nome ou código)
• border­right­color: cor (nome ou código)
• border­left­color: cor (nome ou código)
       Exemplos:
       border­bottom­color: rgb(231,45,112); border­right­color: 0fa97b;
       border­left­color: navy
As propriedades das bordas podem ser tratadas em grupo, com border­color. A ordem dos 
fatores é   importante. Podem ser  incluídos todos os quatro valores,  dois (referindo­se às 
bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
• border­color: border­top­color I  border­right­color I border­bottom­color | border­
left­color
Cada um dos border­xxx­color acima é  uma cor (RGB, hexadecimal ou nome). Pode­se 
alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro 
individualmente.
       Exemplos:
       border­color:      red                 // red para as quatro bordas
       border­color:      rgb(255, 0, 0)      // red
       border­color:      rgb(100%, 0, 0) // red
       border­color:      red 0000ff          // red verticais, 0000ff horizontais
       border­color:      red blue yellow cyan // 4