CSS- font, border, color
Autor: Joanio Trade | Publicado: 2011-09-12T15:43:00-07:00

Border


A propriedade border define a espessura, o estilo e a cor das bordas do elemento. Cada uma dessas três características da borda pode ser declarada separadamente para cada lado, como veremos em seguida.
A espessura da borda é definida com o uso de uma unidade CSS medida ou das palavras-chave thin, medium e thick, obtendo as espessuras de bordas fina, média e grossa. 


border-width


&nbsp;Define a espessura da borda. 

border-top-width: 4px; /* Borda superior com 4px de espessura */ 

border-left-width: thin; /* Borda esquerda com espessura fina /* 

border-color

&nbsp;Define a cor da borda. 

border-bottom-color: red; /* Borda inferior na cor vermelha */ 

border-left-color: transparent; /* Borda esquerda transparente*/


border-style


&nbsp;Define o estilo, da borda. 

Há 9 estilos: 

none: Define a espessura 0 para a borda. 
hidden: O mesmo efeito de none, mas com precedência na resolução de bordas conflitantes. 
dotted: Borda pontilhada. 
dashed: Borda tracejada. 
solid: Borda contínua ou sólida. 
double: Borda constituída de duas linhas contínuas. A soma das espessuras das linhas com a do espaço que as separa é igual ao valor de border¬width.
groove: Borda com aparência entalhada. 
ridge: Borda com aparência de ressalto. 
inset: Borda em baixo-relevo. 
outset: Borda em alto-relevo. 

border-right-style: solid; /* Borda direita sólida */ ¨


border(propriedade generica)

Define abreviadamente a borda 

Border-(posição): width, style, color 

border-top: lpx solid red; 
border-right: 2px ridge yellow; 
border-bottom: 4px double black; ¨border-left: 6px inset cyan;


color

A propriedade color define uma cor para a fonte. 

h1 {color: red;} 
h2 {color: #CC9900;} 
h3 {color: #ff9966;} 

h4 {color: rgb(75, 43, 120);}

font 

A propriedade font define as características gerais das fontes usadas nos textos do documento. Com essa propriedade, definimos o tamanho, a família e demais aspectos tipográficos de nosso site. Veremos a seguir cada uma das propriedades de fontes e seus efeitos.


font-family


&nbsp;Define uma família de fontes para os textos do documento. 

p {font-family: Arial, “Luci da Sans”, Verdana, Sans-Serif;} 
p {font-family: arial, “lucida sans,” verdana, sans-serif;}


font-style 

Definir fontes em estilos normal, itálico ou oblíquo. Os valores possíveis são: normal, italic, oblique. 

p {font-style: italic;}


font-variant 



Transforma as letras minúsculas de um texto em maiúsculas, com altura um pouco menor que a das maiúsculas normais do texto. Os valores possíveis são: normal, small-caps inherit (valor herdado).. 

p.small-caps {font-variant: small-caps;}

font-weight

Os valores possíveis para esta propriedade são: normal, bold, bolder, lighter, 100, 200,300,400,500,600,700,800,900. 

p {font-weight: bold;} /* ou um valor entre 600 e 900 */ 
p {font-weight: normal;} /* ou um valor entre 100 e 500 */


font-size 


Permite definir o tamanho das fontes. Os valores possíveis são: um valor absoluto, um valor relativo, uma medida CSS de comprimento, um valor em porcentagem. 

Valor absoluto: Os valores possíveis para declarar o tamanho de fonte com um valor absoluto são: xx-sma11, x-sma11, sma11, medium, 1arge, x-large e xx-large.

Valor relativo: Os valores possíveis para declarar o tamanho de fonte com um valor relativo são: smaller (menor) e larger (maior). 

div span {font-size: smaller;} /* O texto contido em span que for filho de hl será em fonte menor */

Porcentagem e valor relativo: Porcentagem e medidas CSS são as outras maneiras de definir o tamanho de fontes. 

p {font-size: 80%;} 
&nbsp;e 
p {font-size: 20px;}


font(generico) 


selector {font: font-style font-variant font-weight font-size/line-height font-family;} 

div.um {font: italic small-caps bold 12px/120% verdana, sans-serif;} 

Não é obrigatorio utilizar todos, apenas: font-size e font-family.

A forma abreviada para fontes admite ainda o uso de seis palavras-chave para definir fontes. São elas: caption, icon, menu, message-box, small-caption e status-bar. Esses valores formatam as fontes com base no sistema operacional do usuário. Por exemplo: 

p {font: menu;}