Visão Geral CSS

O que é CSS - benefícios de utilização CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. O css é uma linguagem que define um estilo para um documento em html, como por exemple cor, fonte, altura, largura, margens e muto mais!

O css é uma revolução no design e só trouxe benefícios entre eles temos controle do layout de vários documentos a partir de uma simples folha de estilos, aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.), emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento entre outras.

Formas de utilização (externo, embutido, inline) O css tem três formas de utilização no documento html externo, embuto e inline.

O externo é um arquivo com a extensão .css que é "chamado" no documento html através da tag <link> é o mais recomendado para utilização, exemplo:

<!DOCTYPE>
<html lang="pt-br">
   <head>
       <title>Folha de estilo em cascata</title>
    <link rel="stylesheet" type="text/css" href="arquivo.css" /> 
   </head>

   <body>
      <p>Exemplo 1 css - folha de estilo em cascata</p>
   </body>
</html>

O embutido fica dentro da tag <head> do html, exemplo:

<!DOCTYPE>
<html lang="pt-br">
 <head>
   <title>Folha de estilo em cascata</title>
   <style type="text/css">
    body {
      background:#f1f1f1;
    }
   </style> 
 </head>

 <body>
 <p>Exemplo 1 css - folha de estilo em cascata</p>
 </body>
</html>

O inline fica dentro do codigo html e é pouco usado, exemplo:

<!DOCTYPE>
<html lang="pt-br">
   <head>
       <title>Folha de estilo em cascata</title>
   </head>

   <body style="background: #f1f1f1;"> 
      <p>Exemplo 1 css - folha de estilo em cascata</p>
   </body>
</html>

Tipos de Seletores (elemento HTML, Id, ou Classe) Temos três tipos de seletores para usar no css, o elemento html, id e calss.

O elemento html é aquele no css sem "nada", exemplo:

p {
font-size: 12px;
}

O objeto id é aquele que tem # no css, exemplo:

#geral {
width: 940px;
height: auto;
}

O class é aquela que começa com .algumacoisa no css, exemplo:

.icone {
width: 250px;
height: 250px;
}

Sintaxe Para colocar um comentário na folha de estilo é só usar o código /* escreva aqui o seu comentário*/
A regra css básica é
seletor {
propriedade: valor;
}

Unidades

Relativas:
px: Tamanho em pixels
em: Tamanho relativo à fonte utilizada no elemento ao qual está inserido
ex: Correspondente à altura da fonte 'x’
Absolutas:
in: Polegadas (1polegada = 2.54 cm)
cm: Centímetros
mm: Milímetros
pt: Pontos (1pt = 1/72 polegadas)
pc: Picas (1pica = 12 pontos)
Porcentagem:
%: Porcentagem
0: Valor '0' não requer atribuição de unidade

Fonte x x

Visão Geral CSS

04 maio 2013

Nenhum comentário:

Postar um comentário