Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11

Disciplina:Análise Textual7.870 materiais279.829 seguidores
Pré-visualização17 páginas
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