Skip to content

Instantly share code, notes, and snippets.

@gerep
Last active Dec 21, 2015
Embed
What would you like to do?
[Pronatec]
<!DOCTYPE html>
<html>
<head>
<title>Indentificadores, classes, css inline</title>
</head>
<body>
<style type="text/css">
/* GENERICAS */
.fundo-vermelho {
background-color: red;
}
.fundo-verde {
background-color: green;
}
/* IDENTIFICADOR */
#fundo_vermelho {
/* PROPRIEDADE : VALOR */;
background-color: red;
color: black;
}
/* CLASSE */
.letra_branca {
/* PROPRIEDADE : VALOR */;
color: white;
background-color: black;
}
/* PROFESSOR INCOMPETENTE NÃO CONSEGUIU FAZER A MARGEM FUNCIONAR NA TABELA */
/* POR FAVOR ESTUDE */
table {
border: 2px red dashed;
width: 100%;
}
table tr td {
padding: 10px;
border: 1px red solid;
}
table thead {
font-weight: bold;
}
table tfoot {
color: blue;
}
table tbody tr td {
font-style: italic;
padding: 20px;
}
/* TABLELESS */
.meia-tela {
width: 20%;
float: left;
border: 2px red solid;
padding: 10px;
font-weight: bold;
margin: 5px;
}
</style>
<!-- IDENTIFICADOR VENCE CLASSE -->
<!-- INLINE VENCE IDENTIFICADOR -->
<div id="fundo_vermelho" class="letra_branca" style="color: yellow;">
DIV
</div>
<hr />
<!-- SPAN ou DIV -->
<span style="background: red;">ESTE EH UM SPAN</span>
<span style="background: yellow;">ESTE EH OUTRO SPAN</span>
<div style="background: red;">ESTE EH UM DIV</div>
<div style="background: yellow;">ESTE EH OUTRO DIV</div>
<hr />
<!-- TABLE -->
<table>
<!-- CABECALHO -->
<thead>
<tr>
<td>Nome</td>
<td>Idade</td>
<td>Cidade de Nascimento</td>
</tr>
</thead>
<!-- CORPO -->
<tbody>
<tr>
<td>Daniel Gerep</td>
<td>28</td>
<td>Estrela D'Oeste</td>
</tr>
<!-- NOVA LINHA -->
<tr>
<td>Aretha</td>
<td>16</td>
<td>Passos</td>
</tr>
</tbody>
<!-- RODAPE -->
<tfoot>
<tr>
<td>Nome</td>
<td>Idade</td>
<td>Cidade de Nascimento</td>
</tr>
</tfoot>
</table>
<hr />
<!-- TABLELESS -->
<div class="meia-tela">Nome</div>
<div class="meia-tela">Idade</div>
<div class="meia-tela">Cidade de Nascimento</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment