A Propriedade Background.

O fundo dos elementos HTML

A propriedade background define as características (os valores na regra CSS) do fundo dos elementos HTML.

As propriedades background são as listadas abaixo:

• background-color............... cor do fundo;


• background-image............. imagem de fundo;


• background-repeat............. maneira como a imagem de fundo é posicionada;


• background-attachment.......se a imagem de fundo "rola" ou não com a tela;


• background-position............como e onde a imagem de fundo é posicionada;


• background........................maneira abreviada para todas as propriedades;

Valores válidos para as propriedades do fundo

• background-color:
  
  
  
  1. código hexadecimal: #FFFFFF
  
  
  2. código rgb: rgb(255,235,0)
  
  
  3. nome da cor: red, blue, green...etc
  
  
  4. transparente: transparent
  
  
  
  


• background-image:
  
  
  
  1. URL: url(caminho/imagem.gif)
  
  
  
  


• background-repeat:
  
  
  
  1. não repete: no-repeat
  
  
  2. repete vertical e horizontal: repeat
  
  
  3. repete vertical: repeat-y
  
  
  4. repete horizontal: repeat-x
  
  
  
  


• background-attachment:
  
  
  
  1. imagem fixa na tela: fixed
  
  
  2. imagem "rola" com a tela: scroll
  
  
  
  


• background-position:
  
  
  
  1. x-pos y-pos
  
  
  2. x-% y-%
  
  
  3. top left
  
  
  4. top center
  
  
  5. top right
  
  
  6. center left
  
  
  7. center center
  
  
  8. center right
  
  
  9. bottom left
  
  
  10. bottom center
  
  
  11. bottom right
  
  
  
  

A Propriedade Border.

As bordas nos elementos HTML

As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML.

As propriedades para as bordas são as listadas abaixo:

• border-width:................espessura da borda


• border-style:................estilo da borda


• border-color:................cor da borda


• -----------------------------------------


• border-top-width:............espessura da borda superior


• border-top-style:............estilo da borda superior


• border-top-color:............cor da borda superior


• -----------------------------------------


• border-right-width:.........espessura da borda direita


• border-right-style:..........estilo da borda direita


• border-right-color:..........cor da borda direita


• -----------------------------------------


• border-bottom-width:.........espessura da borda inferior


• border-bottom-style:.........estilo da borda inferior


• border-bottom-color:.........cor da borda inferior


• -----------------------------------------


• border-left-width:...........espessura da borda esquerda


• border-left-style:...........estilo da borda esquerda


• border-left-color:...........cor da borda esquerda


• -----------------------------------------


• border-top:...maneira abreviada para todas as propriedades da borda superior


• border-right:..maneira abreviada para todas as propriedades da borda direita


• border-bottom:..maneira abreviada para todas as propriedades da borda inferior


• border-left:..maneira abreviada para todas as propriedades da borda esquerda


• border:.........maneira abreviada para todas as quatro bordas

Valores válidos para as propriedades das bordas

• color:
  
  
  
  1. código hexadecimal: #FFFFFF
  
  
  2. código rgb: rgb(255,235,0)
  
  
  3. nome da cor: red, blue, green...etc
  
  
  
  


• style:
  
  
  
  1. none: nenhuma borda
  
  
  2. hidden: equivalente a none
  
  
  3. dotted: borda pontilhada
  
  
  4. dashed: borda tracejada
  
  
  5. solid: borda contínua
  
  
  6. double: borda dupla
  
  
  7. groove: borda entalhada
  
  
  8. ridge: borda em ressalto
  
  
  9. inset: borda em baixo relevo
  
  
  10. outset: borda em alto relevo
  
  
  
  


• width:
  
  
  
  1. thin: borda fina
  
  
  2. medium: borda média
  
  
  3. thick: borda grossa
  
  
  4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  
  

Fonte:Maujor

Sitaxe do CSS

A regra CSS e sua sintaxe

Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

seletor { propriedade: valor; }

Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);

Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.

Ver os exemplos abaixo:

p {  font-size: 12px; /* ponto-e-vírgula é facultativo */  }    body {  color: #000000;  background: #FFFFFF;  font-weight: bold; /*ponto-e-vírgula é facultativo */  }

No exemplo abaixo, o seletor é o "documento todo" (body - a página web), a propriedade é o fundo do documento e o valor é a cor branca.

body {  background: #FFFFFF;  }

Fone:Maujor