A aula de hoje é sobre CSS e HTML.
Vamos começar com o html básico para nossa aula.
Abra o link a seguir e salve como cadastro_basico01.html
Aperte ctrl + S que abrirá tela para salvar.
Para cada mudança salve um novo arquivo.
A ideia que coloquei é para manter o histórico, começa com cadastro_basico01.html, depois salva como cadastro_basico02.html, e assim por diante.
Hoje vamos trabalhar com CSS, para facilitar vamos fazer alterações no arquivo e salvar com outro nome.
Ao final vamos separar o CSS em um arquivo único chamado estilo.css.
Vou colocar em negrito a parte adicionada para facilitar.
Perceba que nosso arquivo tem uma tabela com atributo de borda.
Apague o border=”1″ ficará
<table>
Vamos adicionar uma borda pelo CSS agora, substitua o HEAD para ficar como o abaixo:
<head>
<meta charset=”UTF-8″>
<title>Cadastro</title>
<link rel=”stylesheet” href=”site.css”>
<style>
table, th, td{
border: 1px solid;
}
</style>
</head>
border: 1px solid;
O comando acima cria uma borda sólida (contínua, sem tracejado) com 1 pixel de espessura. Como não foi definida cor, deixa a cor padrão que é preto.
Eu deixei cada exemplo com o código completo, a ideia é substituir para ficar igual ao enviado, não é para somar.
Peço desculpas por não ter deixado instruções simples.
Ao final de cada trecho, deixo um HTML correto, o link abaixo, Cadastro03 está como exemplo do funcionamento esperado da atividade.
Perceba que existem duas bordas, uma por volta de toda tabela e outra em cada coluna. Vamos corrigir isso com colapse, forçando as bordas serem uma só.
<style>
table, th, td{
border: 1px solid;
border-collapse: collapse;
}
</style>
As colunas estão muito juntas, vamos trabalhar com o distanciamento dos elementos.
<style>
table, th, td{
border: 1px solid;
border-collapse: collapse;
padding: 10px;
}
</style>
a propriedade padding faz exatamente isso
Vamos mudar agora o padding para 15px para dar mais espaço.
<style>
table, th, td{
border: 1px solid;
border-collapse: collapse;
padding: 15px;
}
</style>
Vamos mudar a cor da borda para azul
<style>
table, th, td{
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}
</style>
A nossa tabela está ficando cada vez mais diferente e estilzada. Vamos deixar o cabeçalho em destaque, mudando fundo e cor da letra:
<style>
table, th, td{
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
}</style>
Perceba que adicionamos um novo marcador th.
Cadastro08
Agora vamos alinhar o texto
<style>
table, th, td{
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}td, th {
text-align: center;
}th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
}</style>
Foi adicionado um novo marcador com text-align: center, existem outros, left, right, center, justify.
Da forma como estamos fazendo, pode dar problema em um site, pois mudará todas tabelas.
O ideal é dar uma classe para a tabela, assim o nosso CSS mudará apenas essa tabela do cadastro.
Para mudar a classe fazemos como no código abaixo
<table class=”tabela”>
É necessário mexer no css também, ao invés de table utilizamos a classe .tabela e para td e th também é necessário indicar que estamos na classe .tabela anteriormente.
<style>
.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
}
</style>
</head>
<body>
<table class=”tabela”>
Agora vamos colocar uma cor alternada entre cada linha, para isso utilizaremos colunas pares (odd) ímpares (even)
<style>
.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}</style>
Vamos agora colocar um destaque cada vez que mexemos o cursos pelas linhas, utilizando hover.
<style>
.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}</style>
Vamos alterar o tamanho da tabela
<style>
.tabela {
width: 80%;
}.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}</style>
E vamos centralizar utilizando margin: auto
<style>
.tabela {
width: 80%;
margin: auto;
}
.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}
.tabela td, .tabela th {
text-align: center;
}
.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
height: 30px;
}
.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}
.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}
.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}
</style>
O cabeçalho da tabela pode ter mais destaque se deixarmos todas as letras em maíusculas, utilizando um transformador de texto:
<style>
.tabela {
width: 80%;
margin: auto;
}.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
text-transform: uppercase;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}</style>
Podemos também alterar as fontes (mapa de caracteres) do texto:
<style>
.tabela {
width: 80%;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
}.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
text-transform: uppercase;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}</style>
Além da fonte podemos alterar o tamanho do texto também:
<style>
.tabela {
width: 80%;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
text-transform: uppercase;
font-size: 16px;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}</style>
Agora que conseguem fazer algumas modificações, vamos separar o arquivo css do html.
Copie todo o texto dentro de style e salve como novo aquivo estilo.css
.tabela {
width: 80%;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}.tabela, .tabela th, .tabela td {
border: 1px solid blue;
border-collapse: collapse;
padding: 15px;
}.tabela td, .tabela th {
text-align: center;
}.tabela th {
font-weight: bold;
background: #000000;
color: #FFFFFF;
text-transform: uppercase;
font-size: 16px;
}.tabela tr:nth-child(odd) { /* Mudará atributos das linhas pares */
background: #F0F9FF;
}.tabela tr:nth-child(even) { /* Mudará atributos das linhas ímpares */
background: #DCEBE6;
}.tabela tr:hover {
background-color: #000F63;
color: #FFFFFF;
}
E no html modifique
<head>
<meta charset=”UTF-8″>
<title>cadastro_basico19</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
Peço desculpas pela forma que deixei a atividade, pareceu ambigua.
A ideia é seguir todos os passos para construir um HTML.
Depois de fazer tudo que foi feito, deve ficar parecido com o cadastro19 do link acima e com o estilo.css.
A ideia não é copiar o último e não entender, é ir passo a passo, vendo as mudanças, adicionando trechos.
E depois de tudo pronto, modificar cores, tamanho de espaçamento, talvez fontes, configurar a tabela de forma diferente, conseguindo entender onde alterar os dados. Essa última parte nenhum grupo realizou.
Deixei comentários no Moodle, mas podem me perguntar.
Agora que fez um CSS com vários atributos, faça uma tabela bonita, modificando cores, linhas zebradas (intercaladas), hover, fonte, etc. e suba o HTML e CSS para o Moodle na disciplina de HTML.
É possível ver todos os arquivos no endereço abaixo.
https://cursos.alessander.com/thomaz/html/
Fonte:
HTML tabelas: criando tabela html e estilizando com CSS
