0

PROPRIEDADES CSS – BORDER

cssPropriedades Border

A propriedade Border define os tipos de bordas que podem ser associados a uma página, bloco de texto ou a um elemento.

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

Propriedade Efeito
border-width: espessura da borda.
border-style: 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 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:
    • código hexadecimal: #FFFFFF
    • código rgb: rgb(255,235,0)
    • nome da cor: red, blue, green…etc
  • style:
    • none: nenhuma borda
    • hidden: equivalente a none
    • dotted: borda pontilhada
    • dashed: borda tracejada
    • solid: borda contínua
    • double: borda dupla
    • groove: borda entalhada
    • ridge: borda em ressalto
    • inset: borda em baixo relevo
    • outset: borda em alto relevo
  • width:
    • thin: borda fina
    • medium: borda média
    • thick: borda grossa
    • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)

Existem vários estilos de bordas, definidos pela marcação border-style. Visualize no exemplo abaixo:

 Resultado:

bordascss

 

0

PROPRIEDADES CSS – MARGIN

cssPropriedades Margin

As margens nos elementos HTML

A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As propriedades para margens são as listadas abaixo:

Propriedade Efeito
margin-top: Define a margem superior.
margin-right: define a margem direita;
margin-bottom: define a margem inferior;
margin-left: define a margem esquerda;
margin: maneira abreviada para todas as margens; 

Valores válidos para a propriedade Margin

  • auto: valor default da margem
  • length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
  • %: porcentagem da largura do elemento pai

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

  • Margem Superior – margin-top

  • Margem Direita – margin-right

  •  Margem Inferior – margin-bottom

  • Margem Esquerda – margin-left

  •  Todas as quatro margens em uma declaração única

A propriedade da margin permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o objetivo de sobrepor elementos.

 

0

Propriedades CSS – TEXT

cssPropriedades Text

As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.

As propriedades para textos são as listadas abaixo:

Propriedade
Efeito
color:
Cor da fonte;
letter-spacing:
Espaçamento entre letras;
word-spacing:
Espaçamento entre palavras;
text-align:
Alinhamento do texto;
text-decoration:
Decoração do texto;
text-indent:
Recuo do texto;
text-transform:
Forma das letras;
direction:
Direção do texto;
white-space:
Como o browser trata os espaços em branco;

Valores válidos para as propriedades de Text.

  • color:
    • código hexadecimal: #FFFFFF
    •  código rgb: rgb(255,235,0) 
    •  nome da cor: red, blue, green…etc
  • letter-spacing: 
    •  normal: é o espaçamento default 
    • lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
  • word-spacing: 
    •  normal: é o espaçamento default 
    •  lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos
  • text-align: 
    •  left: alinha o texto a esquerda 
    •  right: alinha o texto a direita 
    •  center: alinha o texto no centro 
    •  justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
  • text-decoration: 
    •  none: nenhuma decoração 
    •  underline: coloca sublinhado no texto 
    •  overline: coloca um sobrelinhado no texto 
    •  line-through: coloca uma linha em cima do texto 
    •  blink: faz o texto piscar
  • text-indent: 
    •  lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) 
    •  % : porcentagem da largura do elemento pai
  • text-transform: 
    •  none: texto normal 
    • capitalize: todas as primeiras letras do texto em maiúsculas 
    • uppercase: todas as letras do texto em maiúsculas 
    • lowercase: todas as letras do texto em minúsculas
  • direction: 
    •  ltr: texto escrito da esquerda para a direita 
    •  rtl: texto escrito da direita para a esquerda
  • white-space: 
    •  normal: os espaços em branco serão ignorados pelo browser 
    •  pre: os espaços em branco serão preservados pelo browser 
    •  nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag 

Exemplos:

1- Espaçamento nas Letras letter-spacing

 
2- Espaçamento nas Palavras word-spacing
3- Alinhamento do Texto text-align
4- Decoração do Texto text-decoration
5- Recuo do Texto text-indent
6- Forma das Letras text-transform