|
<< Click to Display Table of Contents >> Lembretes CSS |
  
|
|
<< Click to Display Table of Contents >> Lembretes CSS |
|
Como usar
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="pasta/arquivo.css" />
</head>
<body>
...
arquivo.css
body {
background-color: #FF0000;
}
Cores
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Imagem de fundo
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
background-repeat: repeat-x |
A imagem se repete na horizontal |
background-repeat: repeat-y |
A imagem se repete na vertical |
background-repeat: repeat |
A imagem se repete na tanto na horizontal como na vertical |
background-repeat: no-repeat |
A imagem não se repete |
background-attachment: scroll |
A imagem rola com a página |
background-attachment: fixed |
A imagem é fixa |
background-position: 2cm 2cm |
A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página |
background-position: 50% 25% |
A imagem é centrada na horizontal e a um quarto (25%) para baixo na página |
background-position: top right |
A imagem é posicionada no canto superior direito da página |
Fonte
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Especializar tag
CSS
h2.azul { color: blue; }
h2.vermelho { color: red; }
h2.amarelo { color: green; }
h2 { color: purple; }
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<h2 class="azul">Azul</h2>
<p> texto </p>
<hr>
<h2 class="vermelho">Segundo</h2>
<p> texto </p>
<h2 class="amarelo">Terceiro</h2>
<p> texto </p>
<h2>Generico</h2>
<p> texto </p>
</body>
</html>
Como fica:
Azultexto Segundotexto Terceirotexto Genericotexto |