CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Bordas

As propriedades da borda permitem que você especifique como deve ser a aparência da borda da caixa que representa um elemento. Existem três propriedades de uma borda que você pode alterar :

A cor da borda especifica a cor de uma borda.
O estilo da borda especifica se a borda deve ser sólida, linha tracejada, linha dupla ou um dos outros valores possíveis.
A largura da borda especifica a largura de uma borda.

Agora, veremos como usar essas propriedades com exemplos.

A propriedade border-color

A propriedade border-color permite que você altere a cor da borda ao redor de um elemento. Você pode alterar individualmente a cor dos lados inferior, esquerdo, superior e direito da borda de um elemento usando as propriedades:

border-bottom-color altera a cor da borda inferior.
border-top-color altera a cor da borda superior.
border-left-color altera a cor da borda esquerda.
border-right-color altera a cor da borda direita.

O exemplo a seguir mostra o efeito de todas essas propriedades

<html>
   <head>
      <style type = "text/css">
         p.example1 {
            border:1px solid;
            border-bottom-color:#009900; /* Green */
            border-top-color:#FF0000;    /* Red */
            border-left-color:#330000;   /* Black */
            border-right-color:#0000CC;  /* Blue */
         }
         p.example2 {
            border:1px solid;
            border-color:#009900;        /* Green */
         }
      </style>
   </head>

   <body>
      <p class = "example1">
         This example is showing all borders in different colors.
      </p>
      
      <p class = "example2">
         This example is showing all borders in green color only.
      </p>
   </body>
</html>

A propriedade border-style

A propriedade border-style permite que você selecione um dos seguintes estilos de borda –

none – sem fronteira. (Equivalente à largura da borda: 0;)
solid – Borda é uma única linha sólida.
dotted – a borda é uma série de pontos.
dashed – a borda é uma série de linhas curtas.
double – a borda é composta por duas linhas sólidas.
groove- a borda parece estar entalhada na página.
ridge – a borda parece o oposto do sulco.
inset – a borda faz com que a caixa pareça que está embutida na página.
outset – a borda faz com que a caixa pareça que está saindo da tela.
hidden- O mesmo que nenhum, exceto em termos de resolução de conflito de fronteira para elementos de tabela.

Você pode alterar individualmente o estilo das bordas inferior, esquerda, superior e direita de um elemento usando as seguintes propriedades –

border-bottom-style altera o estilo da borda inferior.
border-top-style altera o estilo da borda superior.
border-left-style altera o estilo da borda esquerda.
border-right-style altera o estilo da borda direita.

O exemplo a seguir mostra todos esses estilos de borda:

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:none;">
         This is a border with none width.
      </p>
      
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border.
      </p>
      
      <p style = "border-width:4px; border-style:dashed;">
         This is a dashed border.
      </p>
      
      <p style = "border-width:4px; border-style:double;">
         This is a double border.
      </p>
      
      <p style = "border-width:4px; border-style:groove;">
         This is a groove border.
      </p>
      
      <p style = "border-width:4px; border-style:ridge">
         This is a ridge  border.
      </p>
      
      <p style = "border-width:4px; border-style:inset;">
         This is a inset border.
      </p>
      
      <p style = "border-width:4px; border-style:outset;">
         This is a outset border.
      </p>
      
      <p style = "border-width:4px; border-style:hidden;">
         This is a hidden border.
      </p>
      
      <p style = "border-width:4px; 
         border-top-style:solid;
         border-bottom-style:dashed;
         border-left-style:groove;
         border-right-style:double;">
         This is a a border with four different styles.
      </p>
   </body>
</html>

A propriedade border-width

A propriedade border-width permite que você defina a largura das bordas de um elemento. O valor desta propriedade pode ser um comprimento em px, pt ou cm ou deve ser definido como fino, médio ou grosso.

Você pode alterar individualmente a largura das bordas inferior, superior, esquerda e direita de um elemento usando as seguintes propriedades:

border-bottom-width altera a largura da borda inferior.
border-top-width altera a largura da borda superior.
border-left-width altera a largura da borda esquerda.
border-right-width altera a largura da borda direita.

O exemplo a seguir mostra todas essas larguras de borda

<html>
   <head>
   </head>
   
   <body>
      <p style = "border-width:4px; border-style:solid;">
         This is a solid border whose width is 4px.
      </p>
      
      <p style = "border-width:4pt; border-style:solid;">
         This is a solid border whose width is 4pt.
      </p>
      
      <p style = "border-width:thin; border-style:solid;">
         This is a solid border whose width is thin.
      </p>
      
      <p style = "border-width:medium; border-style:solid;">
         This is a solid border whose width is medium;
      </p>
      
      <p style = "border-width:thick; border-style:solid;">
         This is a solid border whose width is thick.
      </p>
      
      <p style = "border-bottom-width:4px;border-top-width:10px;
         border-left-width: 2px;border-right-width:15px;border-style:solid;">
         This is a a border with four different width.
      </p>
   </body>
</html>

Propriedades da borda usando taquigrafia

A propriedade border permite que você especifique a cor, o estilo e a largura das linhas em uma propriedade:

O exemplo a seguir mostra como usar todas as três propriedades em uma única propriedade. Esta é a propriedade usada com mais frequência para definir a borda em torno de qualquer elemento.

<html>
   <head>
   </head>

   <body>
      <p style = "border:4px solid red;">
         This example is showing shorthand property for border.
      </p>
   </body>
</html>

Anterior CSS – Tabelas

Próximo CSS – Listas

CSS - Fundamentos Básicos