Apostila_HTML_CSS_E-Jovem 11

abaixo,  encontramse 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) 
{ backgroundcolor: Red } 
{ backgroundcolor: 
#CCCCCC } 
background
image 
Ajusta a imagem 
de background 
URL  { backgroundimage: 
url(image1.gif) } 
background
repeat 
Ajusta a repetição 
do entelhamento 
das imagens de 
background 
repeat (horizontalmente 
e verticalmente); repeat
x (horizontal); repeaty 
(vertical); norepeat 
{ backgroundrepeat: repeaty 
} 
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 
{ backgroundposition: 2cm 
1cm } { backgroundposition: 
50% 20% } { background
position: top center } 
{ backgroundposition: top } 
Projeto eJovem  Módulo II: CSS 56
posição default, 
0,0 ou 0%,0%, é o 
canto superior 
esquerdo do 
elemento) 
{ backgroundposition: 
bottom right } 
pt = pontos; in = polegadas; cm = centímetros; px = pixels; 
2.8.  Controle de blocos
Uma \u201ccaixa\u201d é 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:
\u2022 O elemento em si (texto, imagem)
\u2022 As margens internas do elemento (padding)
\u2022 A borda em torno das margens internas (border)
\u2022 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 margintop, marginbottom, marginright e 
marginleft que permitem alterar as margens individualmente. Sintaxe:
\u2022 margintop: comprimento | porcentagem % | auto
\u2022 marginbottom: comprimento | porcentagem % | auto
\u2022 marginright: comprimento | porcentagem % | auto
\u2022 marginleft: comprimento | porcentagem % | auto
      Exemplo:
      margintop: 1cm; marginleft: 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:
\u2022 margin:   margintop       marginright        marginbottom      marginleft
\u2022 margin:   margintop% marginright% marginbottom% marginleft%
Projeto eJovem  Módulo II: CSS 57
\u2022 margin:   espaço_vertical         espaço_horizontal
\u2022 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 paddingtop, padding
bottom, paddingright e paddingleft. Sintaxe:
\u2022 paddingtop: comprimento | porcentagem %
\u2022 paddingbottom: comprimento | porcentagem %
\u2022 paddingright: comprimento | porcentagem %
\u2022 paddingleft: 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:
\u2022 padding: paddingtop paddingright paddingbottom paddingleft
\u2022 padding: paddingtop% paddingright% paddingbottom% paddingleft%
\u2022 padding: espaço_vertical espaço_horizontal
\u2022 padding: margem_de_todos_os_lados
2.8.2.  borderwidth
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:
       borderstyle: solid
A espessura das bordas pode ser controlada através da propriedade borderwidth, afetando 
as espessuras de todos os lados da borda, ou individualmente através de bordertopwidth, 
borderbottomwidth, borderrightwidth e borderleftwidth. Sintaxe:
\u2022 bordertopwidth: comprimento | thin | medium | thick
\u2022 borderbottomwidth: comprimento | thin | medium | thick
\u2022 borderrightwidth: comprimento | thin | medium | thick
\u2022 borderleftwidth: comprimento | thin | medium | thick
       Exemplos:
       borderbottomwidth: thick; borderrightwidth: 5.5px;
       borderleftwidth: 0.2cm
Projeto eJovem  Módulo II: CSS 58
As propriedades das bordas podem ser tratadas em grupo, com borderwidth. A ordem dos 
fatores é   importante. Podem ser  incluídos todos os quatro valores,  dois (referindose às 
bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
\u2022 borderwidth: bordertopwidth I borderrightwidth 
\u2022 borderwidth: borderbottomwidth I borderleftwidth
       Exemplos:
       borderwidth: 5cm                // vale para as quatro bordas
       borderwidth: 5cm 2cm            // 5cm verticais, 2cm horizontais
       borderwidth: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left
2.8.3.  bordercolor
A propriedade bordercolor é 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   bordertopcolor,   borderbottomcolor,   borderrightcolor   e 
borderleftcolor. Sintaxe: 
\u2022 bordertopcolor: cor (nome ou código)
\u2022 borderbottomcolor: cor (nome ou código)
\u2022 borderrightcolor: cor (nome ou código)
\u2022 borderleftcolor: cor (nome ou código)
       Exemplos:
       borderbottomcolor: rgb(231,45,112); borderrightcolor: 0fa97b;
       borderleftcolor: navy
As propriedades das bordas podem ser tratadas em grupo, com bordercolor. A ordem dos 
fatores é   importante. Podem ser  incluídos todos os quatro valores,  dois (referindose às 
bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
\u2022 bordercolor: bordertopcolor I  borderrightcolor I borderbottomcolor | border
leftcolor
Cada um dos borderxxxcolor acima é  uma cor (RGB, hexadecimal ou nome). Podese 
alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro 
individualmente.
       Exemplos:
       bordercolor:      red                 // red para as quatro bordas
       bordercolor:      rgb(255, 0, 0)      // red
       bordercolor:      rgb(100%, 0, 0) // red
       bordercolor:      red 0000ff          // red verticais, 0000ff horizontais
       bordercolor:      red blue yellow cyan // 4
Apostila_HTML_CSS_E-Jovem 11

leonardo oliveira moreira
