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 – Dimensão

Você viu a borda que cerca cada caixa, ou seja. elemento, o preenchimento que pode aparecer dentro de cada caixa e a margem que pode contorná-los. Neste tutorial, aprenderemos como podemos alterar as dimensões das caixas.

Temos as seguintes propriedades que permitem controlar as dimensões de uma caixa.

A propriedade height é usada para definir a altura de uma caixa.
A propriedade width é usada para definir a largura de uma caixa.
A propriedade line-height é usada para definir a altura de uma linha de texto.
A propriedade max-height é usada para definir a altura máxima que uma caixa pode ter.
A propriedade min-height é usada para definir a altura mínima que uma caixa pode ter.
A propriedade max-width é usada para definir a largura máxima que uma caixa pode ter.
A propriedade min-width é usada para definir a largura mínima que uma caixa pode ter.

As propriedades de altura e largura

As propriedades de altura e largura permitem definir a altura e a largura das caixas. Eles podem assumir valores de comprimento, porcentagem ou a palavra-chave auto.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

A propriedade line-height

A propriedade line-height permite aumentar o espaço entre as linhas de texto. O valor da propriedade line-height pode ser um número, um comprimento ou uma porcentagem.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

A propriedade max-height

A propriedade max-height permite que você especifique a altura máxima de uma caixa. O valor da propriedade max-height pode ser um número, um comprimento ou uma porcentagem.

NOTA – Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo:

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

A propriedade min-height

A propriedade min-height permite que você especifique a altura mínima de uma caixa. O valor da propriedade min-height pode ser um número, um comprimento ou uma porcentagem.

NOTA – Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

A propriedade max-width

A propriedade max-width permite que você especifique a largura máxima de uma caixa. O valor da propriedade max-width pode ser um número, um comprimento ou uma porcentagem.

NOTA – Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

A propriedade de largura mínima

A propriedade min-width permite que você especifique a largura mínima de uma caixa. O valor da propriedade min-width pode ser um número, um comprimento ou uma porcentagem.

NOTA – Esta propriedade não funciona no Netscape 7 ou no IE 6.

Aqui está um exemplo:

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Anterior CSS – barras de rolagem

Próximo CSS – Outlines

CSS - Fundamentos Básicos