Prof. Risiberg Teixeira email: risiberg.teixeira@ifrj.edu.br
Definindo classes
Definindo IDS
Definindo TAGS dentro do contexto
Definindo a CSS para impressão
3 Prof. Risiberg Teixeira
<style type="text/css">
.minhaclasse {font: "Arial Black";
font-size: medium;
color: blue;}
</style>
<body>
<h1 class="minhaclasse"> usando classe...</h1>
<p class="minhaclasse">A classe em outra tag</p>
</body>
<style type="text/css">
h1 { font-family: "arial black";
font-size: 20pt;}
h1.verde{ color: green;}
h1.vermelho {color: red;}
</style>
<body>
<h1> primeiro efeito </h1>
<h1 class="verde"> segundo efeito
</h1>
<h1 class="vermelho"> terceiro efeito
</h1>
</body>
5 Prof. Risiberg Teixeira
<style type="text/css">
#area{color:#008000;
background : #67FFA6;
margin-left: 9em;
margin-right: 9em;
position: relative;}
#a1 {}
#a2 {}
</style>
<body>
<p id="area">
As regras de ID sempre começam com (#) e o
nome do ID. Ele pode ser uma palavra ou
qualquer conjunto de letras ou números que
você quiser.
</p>
</body>
Os identificadores tem precedência sobre as classes.
Exemplo:
<style type="text/css">
h1.grande {color: green;
font-size: 15px;}
#amarelo {color: #E8CB0C;}
#vermelho{color: #FF0000;}
</style>
<body>
<h1 class="grande"> classe
</h1>
<h1 class="grande"
id="amarelo"> amarelo</h1>
<h1 class="grande" id=
"vermelho"> vermelho</h1>
</body>
É usado quando uma TAG é cercada por outra TAG, uma dentro da outra, são chamadas de tags aninhadas.
Exemplo:
<html >
<head> <title>Tags dentro do contexto</title>
<style type="text/css">
<!--
p, a{color: red; text-decoration: underline;}
div.menu{color:#900; font-weight: bold;
text-decoration: none; font-size: 20;}
p{font: 12px;}
-->
</style>
</head>
Prof. Risiberg Teixeira 7
Continuação...
<body>
<div class="menu">
<h1>Clique no capítulo </h1>
<a href="anterior.htmlCapítulo Anterior</a> - <a href="proximo.html">Próximo Capítulo </a>
</div> <hr>
<h3>Novo Capítulo</h3>
<p>Teste de parágrafo
<a href="curioso.html">Efeito curiosos</a></p>
</body>
</html>
