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 – Outlines

Os contornos são muito semelhantes às fronteiras, mas também existem algumas diferenças importantes –

Um esboço não ocupa espaço.
Os contornos não precisam ser retangulares.
O contorno é sempre o mesmo em todos os lados; você não pode especificar valores diferentes para lados diferentes de um elemento.

NOTA – As propriedades de contorno não são suportadas pelo IE 6 ou Netscape 7.

Você pode definir as seguintes propriedades de contorno usando CSS.

A propriedade outline-width é usada para definir a largura do contorno.
A propriedade outline-style é usada para definir o estilo da linha para o contorno.
A propriedade cor do contorno é usada para definir a cor do contorno.
A propriedade de contorno é usada para definir todas as três propriedades acima em uma única instrução.

A propriedade de largura do contorno

A propriedade outline-width especifica a largura do contorno a ser adicionado à caixa. Seu valor deve ser um comprimento ou um dos valores thin, medium ou thick, assim como o atributo border-width.

Uma largura de zero pixels significa nenhum contorno.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

A propriedade de estilo de contorno

A propriedade outline-style especifica o estilo da linha (sólida, pontilhada ou tracejada) que circunda um elemento. Pode assumir um dos seguintes valores –

none- sem fronteira. (Equivalente à largura do contorno: 0;)
solid – o contorno é uma única linha sólida.
dotted – o contorno é uma série de pontos.
dashed – o contorno é uma série de linhas curtas.
double – o contorno é composto por duas linhas sólidas.
groove – o contorno parece esculpido na página.
ridge – o contorno parece o oposto do sulco.
inset – o contorno faz com que a caixa pareça estar embutida na página.
outset – o contorno faz com que a caixa pareça que está saindo da tela.
hidden – igual a nenhum.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

A propriedade da cor do contorno

A propriedade cor do contorno permite que você especifique a cor do contorno. Seu valor deve ser um nome de cor, uma cor hexadecimal ou um valor RGB, como ocorre com as propriedades de cor e cor da borda.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

O esboço da propriedade

A propriedade de contorno é uma propriedade abreviada que permite especificar valores para qualquer uma das três propriedades discutidas anteriormente em qualquer ordem, mas em uma única instrução.

Aqui está um exemplo:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Anterior CSS – Dimensão

CSS - Fundamentos Básicos