gerep/page.html

## page.html
<!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>
	<!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>