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

Este capítulo ensina como definir planos de fundo de vários elementos HTML. Você pode definir as seguintes propriedades de fundo de um elemento:

A propriedade background-color é usada para definir a cor de fundo de um elemento.
A propriedade background-image é usada para definir a imagem de fundo de um elemento.
A propriedade background-repeat é usada para controlar a repetição de uma imagem em segundo plano.
A propriedade background-position é usada para controlar a posição de uma imagem no fundo.
A propriedade background-attachment é usada para controlar a rolagem de uma imagem em segundo plano.
A propriedade background é usada como uma abreviação para especificar várias outras propriedades do background.

Defina Background

A seguir está o exemplo que demonstra como definir a Background de um elemento.

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

Repita a imagem de fundo

O exemplo a seguir demonstra como repetir a imagem de fundo se uma imagem for pequena. Você pode usar o valor no-repeat para a propriedade background-repeat se não quiser repetir uma imagem; neste caso, a imagem será exibida apenas uma vez.

Por padrão, a propriedade de repetição de plano de fundo terá um valor de repetição.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

O exemplo a seguir demonstra como repetir a imagem de fundo verticalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

O exemplo a seguir demonstra como repetir a imagem de fundo horizontalmente.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Definir a posição da imagem de fundo

O exemplo a seguir demonstra como definir a posição da imagem de plano de fundo 100 pixels longe do lado esquerdo.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

O exemplo a seguir demonstra como definir a posição da imagem de plano de fundo 100 pixels longe do lado esquerdo e 200 pixels abaixo da parte superior.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Definir o anexo de fundo

O anexo de plano de fundo determina se uma imagem de plano de fundo é fixa ou rola com o resto da página.

O exemplo a seguir demonstra como definir a imagem de plano de fundo fixa.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

O exemplo a seguir demonstra como definir a imagem de fundo de rolagem.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Propriedade abreviada

Você pode usar a propriedade background para definir todas as propriedades do background de uma vez. Por exemplo:

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>

Anterior CSS – Cores

Próximo CSS – Fonts

CSS - Fundamentos Básicos