No post de hoje abordamos as Propriedades CSS - bordas, margens,background,fontes, texto, modelos de formatação visual e listas. O material desse post pode ser encontrado com maiores detalhes no link : http://www.clem.ufba.br/tuts/css/default.htm.
Bordas em CSS
As propriedades de borda permitem-lhe especificar o estilo, a cor, e a largura de um elemento border. Em HTML usamos tabelas para criar bordas em torno de um texto, mas com as propriedades de borda na CSS podemos criar bordas com belos efeitos, e elas podem ser aplicadas a qualquer elemento.
Propriedades de Borda:
|
Propriedade
|
Descrição
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
border |
Uma
propriedade estenográfica para especificar todas as propriedades
para as quatro bordas em uma declaração |
border-width border-style border-color |
4.0 |
4.0 |
CSS1 |
|
border-bottom |
Uma
propriedade estenográfica para especificar todas as propriedades
para a borda inferior em uma declaração |
border-bottom-width border-style border-color |
6.0 |
4.0 |
CSS1 |
|
border-bottom-color |
Especifica
a cor da borda inferior |
border-color |
6.0 |
4.0 |
CSS2 |
|
border-bottom-style |
Especifica
o estilo da borda inferior |
border-style |
6.0 |
4.0 |
CSS2 |
|
border-bottom-width |
Especifica
a largura da borda inferior |
thin medium thick length |
4.0 |
4.0 |
CSS1 |
|
border-color |
Especifica
a cor das quatro bordas, pode ter de uma até quatro cores |
color |
6.0 |
4.0 |
CSS1 |
|
border-left |
Uma
propriedade estenográfica para especificar todas as propriedades
para a borda esquerda em uma declaração |
border-left-width border-style border-color |
6.0 |
4.0 |
CSS1 |
|
border-left-color |
Especifica
a cor da borda esquerda |
border-color |
6.0 |
4.0 |
CSS2 |
|
border-left-style |
Especifica
o estilo da borda esquerda |
border-style |
6.0 |
4.0 |
CSS2 |
|
border-left-width |
Especifica
a largura da borda esquerda |
thin medium thick length |
4.0 |
4.0 |
CSS1 |
|
border-right |
Uma
propriedade estenográfica para especificar todas as propriedades
para a borda direita em uma declaração |
border-right-width border-style border-color |
6.0 |
4.0 |
CSS1 |
|
border-right-color |
Especifica
a cor da borda direita |
border-color |
6.0 |
4.0 |
CSS2 |
|
border-right-style |
Especifica
o estilo da borda direita |
border-style |
6.0 |
4.0 |
CSS2 |
|
border-right-width |
Especifica
a largura da borda direita |
thin medium thick length |
4.0 |
4.0 |
CSS1 |
|
border-style |
Especifica
o estilo das quatro bordas, pode ter de um até quatro estilos |
none hidden dotted dashed solid double groove ridge inset outset |
6.0 |
4.0 |
CSS1 |
|
border-top |
Uma
propriedade estenográfica para especificar todas as propriedades
da borda superior em uma declaração |
border-top-width border-style border-color |
6.0 |
4.0 |
CSS1 |
|
border-top-color |
Especifica
a cor da borda superior |
border-color |
6.0 |
4.0 |
CSS2 |
|
border-top-style |
Especifica
o estilo da borda superior |
border-style |
6.0 |
4.0 |
CSS2 |
|
border-top-width |
Especifica
a largura da borda superior |
thin medium thick length |
4.0 |
4.0 |
CSS1 |
|
border-width |
Uma
propriedade estenográfica para especificar a largura de todas as
bordas em uma declaração, pode ter de um até quatro valores |
thin medium thick length |
4.0 |
4.0 |
CSS1 |
Margens em CSS
As propriedades de margem definem o espaço em volta dos elementos. É possível usar valores negativos para sobrepor o conteúdo. As margens superior, direita, inferior, e esquerda podem ser mudadas independentemente usando propriedades separadas. Uma propriedade de margem estenográfica pode também ser usada para mudar todas as margens de uma só vez.Propriedades de Margem:
|
Propriedade
|
Descrição
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
margin |
Uma
propriedade estenográfica para especificar as propriedades das
margens em uma declaração |
margin-top margin-right margin-bottom margin-left |
4.0 |
4.0 |
CSS1 |
|
margin-bottom |
Especifica
a margem inferior de um elemento |
auto length % |
4.0 |
4.0 |
CSS1 |
|
margin-left |
Especifica
a margem esquerda de um elemento |
auto length % |
4.0 |
3.0 |
CSS1 |
|
margin-right |
Especifica
a margem direita de um elemento |
auto length % |
4.0 |
3.0 |
CSS1 |
|
margin-top |
Especifica
a margem superior de um elemento |
auto length % |
4.0 |
3.0 |
CSS1 |
Enchimento (Padding) em CSS
As propriedades de enchimento definem o espaço enter a borda do elemento e o conteúdo do elemento. Valores negativos não são permitidos. O enchimento superior, direito, inferior, e esquerdo podem ser mudados independentemente usando propriedades separadas. Uma propriedade de enchimento estenográfica é também criada para controlar múltiplos lados de uma só vez.Propriedades de Enchimento:
|
Propriedade
|
Descrição
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
padding |
Uma
propriedade estenográfica para especificar todas as propriedades
de enchimento em uma declaração |
padding-top padding-right padding-bottom padding-left |
4.0 |
4.0 |
CSS1 |
|
padding-bottom |
Especifica
o enchimento inferior de um elemento |
length % |
4.0 |
4.0 |
CSS1 |
|
padding-left |
Especifica
o enchimento esquerdo de um elemento |
length % |
4.0 |
4.0 |
CSS1 |
|
padding-right |
Especifica
o enchimento direito de um elemento |
length % |
4.0 |
4.0 |
CSS1 |
|
padding-top |
Especifica
o enchimento superior de um elemento |
length % |
4.0 |
4.0 |
CSS1 |
Background: o Plano de Fundo em CSS
A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.Propriedades de Planos de Fundo:
|
Propriedade
|
Descrição
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
background |
Uma
propriedade estenográfica para configurar todas as propriedades
do plano de fundo em uma declaração |
background-color background-image background-repeat background-attachment background-position |
6.0 |
4.0 |
CSS1 |
|
background-attachment |
Especifica
se uma imagem de plano de fundo é fixa ou rola com o resto da
página |
scroll fixed |
6.0 |
4.0 |
CSS1 |
|
background-color |
Configura
a cor do plano de fundo de um elemento |
color-rgb color-hex color-nametransparent |
4.0 |
4.0 |
CSS1 |
|
background-image |
Configura
uma imagem como plano de fundo |
url none |
4.0 |
4.0 |
CSS1 |
|
background-position |
Configura
a posição inicial de uma imagem de plano de fundo |
top
left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos |
6.0 |
4.0 |
CSS1 |
|
background-repeat |
Estabelece
se/como uma imagem de plano de fundo será repetida |
repeat repeat-x repeat-y no-repeat |
4.0 |
4.0 |
CSS1 |
Fontes em CSS
As propriedades de fonte permitem-lhe mudar a família da fonte, a espessura, o tamanho, e o estilo de um texto.Observação -Dicas úteis:
As fontes são identificadas pelos seus nomes na CSS1. Observe que se um anavegador não suporta a fonte que está especificada, ele irá usar uma fonte padrão (default).
Propriedades de Fonte:
|
Propriedade
|
Descrição
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
font |
Uma
propriedade estenográfica para especificar todas as propriedades
de uma fonte em uma declaração |
font-style font-variant font-weight font-size/line-height font-familycaption icon menu message-box small-caption status-bar |
4.0 |
4.0 |
CSS1 |
|
font-family |
Uma
lista priorizada de nomes de famílias de fontes e/ou nomes de
famílias genéricos para um elemento |
family-name generic-family |
4.0 |
3.0 |
CSS1 |
|
font-size |
Especifica
o tamanho de uma fonte |
xx-small x-small small medium large x-large xx-large smaller larger length % |
4.0 |
3.0 |
CSS1 |
|
font-size-adjust |
Especifica
um valor de aspecto para um elemento que preservará a altura-x
(x-height) da fonte da primeira escolha |
none number |
|
|
CSS2 |
|
font-stretch |
Condensa
ou expande a família de fontes atual |
normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
|
|
CSS2 |
|
font-style |
Especifica
o estilo da fonte |
normal italic oblique |
4.0 |
4.0 |
CSS1 |
|
font-variant |
Exibe
o texto numa fonte caixa-baixa (small-caps) ou fonte normal |
normal small-caps |
6.0 |
4.0 |
CSS1 |
|
font-weight |
Especifica
o peso de uma fonte |
normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
4.0 |
4.0 |
CSS1 |
Texto em CSS
As propriedades de texto permitem-lhe controlar a aparência do texto. É possível mudar a cor de um texto, aumentar ou diminuir o espaço entre os caracteres num texto, alinhar um texto, decorar um texto, recuar a primeira linha num texto, e mais.Propriedades de Texto:
|
Propriedade
|
Descrição
|
Valores
Possíveis
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
color |
Configura
a cor de um texto |
color |
4.0 |
3.0 |
CSS1 |
|
direction |
Configura
a direção do texto |
ltr rtl |
|
|
CSS2 |
|
letter-spacing |
Aumenta
ou diminui o espaço entre os caracteres |
normal length |
6.0 |
4.0 |
CSS1 |
|
text-align |
Alinha
o texto num elemento |
left right center justify |
4.0 |
4.0 |
CSS1 |
|
text-decoration |
Adiciona
decoração ao texto |
none underline overline line-through blink |
4.0 |
4.0 |
CSS1 |
|
text-indent |
Recua
a primeira linha de um texto num elemento |
length % |
4.0 |
4.0 |
CSS1 |
|
text-shadow |
|
none color length |
|
|
|
|
text-transform |
Controla
as letras em um elemento |
none capitalize uppercase lowercase |
4.0 |
4.0 |
CSS1 |
|
unicode-bidi |
|
normal embed bidi-override |
|
5.0 |
CSS2 |
|
white-space |
Especifica
como a escrita de espaços dentro de um elemento é manejada |
normal pre nowrap |
4.0 |
5.5 |
CSS1 |
|
word-spacing |
Aumenta
ou diminui o espaço entre as palavras |
normal length |
6.0 |
6.0 |
CSS1 |
Modelos de Formatação Visual:
Propriedades de Classificação, Dimensão e Posicionamento em Css
As propriedades de Classificação permitem-lhe controlar como exibir um elemento,especificar onde uma imagem aparecerá em outro elemento, posicionar um elemento em relação à sua posição normal,posicionar um elemento usando um valor absoluto, e como controlar a visibilidade de um elemento.As propriedades de Dimensão permite-lhe controlar a altura e a largura de um elemento.Também permitem-lhe aumentar o espaço entre duas linhas.
As propriedades de Posicionamento permitem-lhe especificar a posição esquerda, direita, superior e inferior de um elemento. Também permitem-lhe especificar a forma de um elemento, posicionar um elemento atrás de outro, e especificar o que deve acontecer quando o conteúdo de um elemento é muito grande para caber numa área específica.
Propriedades de Classificação, Dimensão e Posicionamento:
|
Propriedade
|
Descrição
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
clear |
Especifica
os lados de um elemento onde outroas elementos flutuantes não são
permitidos |
left right both none |
4.0 |
4.0 |
CSS1 |
|
float |
Especifica
onde uma imagem ou um texto irão aparecer em outro elemento |
left right none |
4.0 |
4.0 |
CSS1 |
|
width |
Especifica
a largura de um elemento |
auto % length |
4.0 |
4.0 |
CSS1 |
|
height |
Especifica
a altura de um elemento |
auto length % |
6.0 |
4.0 |
CSS1 |
|
vertical-align |
Especifica
o alinhamento vertical de um elemento |
baseline sub super top text-top middle bottom text-bottom length % |
4.0 |
4.0 |
CSS1 |
Propriedades
de Listas em CSS
As
propriedades de Lista permitem-lhe trocar diferentes marcadores de
item de lista,especificar uma imagem como marcador de item da lista,
e especificar onde colocar um marcador de item de lista.Propriedades de Lista:
|
Propriedade
|
Descrilção
|
Valores
|
NN
|
IE
|
W3C
|
|---|---|---|---|---|---|
|
list-style |
Uma
propriedade estenográfica para especificar todas as propriedades
para uma lista em uma declaração |
list-style-type list-style-position list-style-image |
6.0 |
4.0 |
CSS1 |
|
list-style-image |
Especifica
um aimagem como marcador de item de lista |
none url |
6.0 |
4.0 |
CSS1 |
|
list-style-position |
Posiciona
o marcador de item de lista na lista |
inside outside |
6.0 |
4.0 |
CSS1 |
|
list-style-type |
Sets
the type of the list-item marker |
none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
4.0 |
4.0 |
CSS1 |
Espero que tenham gostado do material postado até aqui e que esse conteúdo contribua de forma positiva no nosso aprendizado!
