CSS

A propriedade font

As propriedades básicas para fontes que serão abordadas são as listadas abaixo:

• color:................cor da fonte
• font-family:..........tipo de fonte
• font-size:............tamanho de fonte
• font-style:...........estilo de fonte
• font-variant:.........fontes maiúsculas de menor altura
• font-weight:..........quanto mais escura a fonte é (negrito)
• font:.................maneira abreviada para todas as propriedades

Valores válidos para as propriedades

• color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• font-family:
  1. nome da família de fontes : define-se pelo nome,
     p. ex: "verdana", "helvetica", "arial", etc.
  2. nome da família genérica: define-se pelo nome genérico,
     p. ex: "serif", "sans-serif", "cursive", etc.

Valores válidos para as propriedades

• font-size:
  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large
  8. smaller
  9. larger
  10. uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  11. %

Valores válidos para as propriedades

• font-style:
  1. normal: fonte normal na vertical
  2. italic: fonte inclinada
  3. oblique:fonte obliqua
• font-variant:
  1. normal: fonte normal
  2. small-caps: transforma em maiúsculas de menor altura

Valores válidos para as propriedades

• font-weight:
  1. normal
  2. bold
  3. bolder
  4. lighter
  1. 100
  2. 200
  3. 300
  4. 400
  5. 500
  6. 600
  7. 700
  8. 800
  9. 900

A propriedade text

As propriedades para textos, definem as características para os textos inseridos dentro dos elementos HTML.

• color.....................cor do texto;
• 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

• color:
  1. código hexadecimal: #FFFFFF
  2. código rgb: rgb(255,235,0)
  3. nome da cor: red, blue, green...etc
• letter-spacing:
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
• word-spacing:
  1. normal: é o espaçamento default
  2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos

Valores válidos para as propriedades

• text-align:
  1. left: alinha o texto a esquerda
  2. right: alinha o texto a direita
  3. center: alinha o texto no centro
  4. justify: força o texto a ocupar toda a extensão da linha da esquerda a direita
• text-decoration:
  1. none: nenhuma decoração
  2. underline: coloca sublinhado no texto
  3. overline: coloca um sobrelinhado no texto
  4. line-through: coloca uma linha em cima do texto

Valores válidos para as propriedades

• text-indent:
  1. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
  2. % : porcentagem da largura do elemento pai
• text-transform:
  1. none: texto normal
  2. capitalize: todas as primeiras letras do texto em maiúsculas
  3. uppercase: todas as letras do texto em maiúsculas
  4. lowercase: todas as letras do texto em minúsculas

Valores válidos para as propriedades

• direction:
  1. ltr: texto escrito da esquerda para a direita
  2. rtl: texto escrito da direita para a esquerda
• white-space:
  1. normal: os espaços em branco serão ignorados pelo browser
  2. pre: os espaços em branco serão preservados pelo browser
  3. nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br>

Propriedade margin

A propriedade para margens, define um valor para espessura das margens dos elementos HTML.

• 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 para a propriedade margin

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

Exemplos e códigos - margin-top

<html>
    <head>
        <style type="text/css">
            p {margin-top: 2cm;}
        </style>
    </head>
    <body>
        <p>Uma margem superior de 2cm</p>
    </body>
</html>
            

Exemplos e códigos - margin-right

<html>
    <head>
        <style type="text/css">
            p {margin-right: 300px;}
        </style>
    </head>
    <body>
        <p>Uma margem direita de 300px nesta
        frase mais longa dentro do parágrafo</p>
    </body>
</html>
            

Exemplos e códigos - margin-bottom

<html>
    <head>
        <style type="text/css">
            p {margin-bottom: 2em;}
        </style>
    </head>
    <body>
        <p>Uma margem inferior de 2.0em</p>
    </body>
</html>
            

Exemplos e códigos - margin-left

<html>
    <head>
        <style type="text/css">
            p {margin-left: 10%;}
        </style>
    </head>
    <body>
        <p>Uma margem esquerda de 10%</p>
    </body>
</html>
            

margin

1. margin: valor1......as 4 margens terão valor1;
2. margin: valor1 valor2......margem superior e inferior terão valor1 - margem direita e esquerda terão valor2
3. margin: valor1 valor2 valor3......margem superior terá valor1 - margem direita e esquerda terão valor2 - margem inferior terá valor3
4. margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior e esquerda nesta ordem.

Propriedade padding

A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.

• padding-top..........define a espaçamento superior;
• padding-right........define a espaçamento direita;
• padding-bottom.......define a espaçamento inferior;
• padding-left.........define a espaçamento esquerda;
• padding..............maneira abreviada para todas os espaçamentos

Valores para a propriedade padding

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

Exemplos e códigos - padding-top

<html>
  <head>
    <style type="text/css">
      p {padding-top: 2cm;}
    </style>
  </head>
  <body>
    <p>Um espaçamento superior de 2cm</p>
  </body>
</html>
            

Exemplos e códigos - padding-right

<html>
  <head>
    <style type="text/css">
      p {padding-right: 300px;}
    </style>
  </head>
  <body>
    <p>Um espaçamento direito de 300px nesta
    frase mais longa dentro do parágrafo</p>
  </body>
</html>
            

Exemplos e códigos - padding-bottom

<html>
  <head>
    <style type="text/css">
      p {padding-bottom: 2em;}
    </style>
  </head>
  <body>
    <p>Um espaçamento inferior de 2.0em</p>
  </body>
</html>
            

Exemplos e códigos - padding-left

<html>
  <head>
    <style type="text/css">
      p {padding-left: 10%;}
    </style>
  </head>
  <body>
    <p>Um espaçamento esquerdo de 10%</p>
  </body>
</html>
            

padding

1. padding: valor1......os 4 espaçamentos terão valor1;
2. padding: valor1 valor2......espaçamento superior e inferior terão valor1 - espaçamento direito e esquerdo terão valor2
3. padding: valor1 valor2 valor3......espaçamento superior terá valor1 - espaçamento direito e esquerdo terão valor2 - espaçamento inferior terá valor3
4. padding: valor1 valor2 valor3 valor4....os espaçamentos superior, direito, inferior e esquerdo nesta ordem.