Você está na página 1de 19

CSS Folha de Estilo em Cascata

Unidade 5 Tabelas e Formulrios


Curso: Auxiliar de Web Design
Carga horria: 30h/a
Professor Regis Pires Magalhes
regis@ifpi.edu.br
http://sites.google.com/site/ifpiregis
A disciplina
Unidades
1. Fundamentos de CSS
2. Textos, Fontes e Espaamentos
3. Cores e background
4. Listas, Menus e Links
5. Tabelas e Formulrios
6. Posicionamento e Layout
Estilos em Tabelas
Usar tabelas unicamente para apresentao de
dados tabulares;
Constru-las acessveis aos leitores de tela e
demais agentes de usurio em geral.
Cdigo da tabela
<table border="1px" cellpadding="5px" cellspacing="0">
<tr><td>Clula 1-1 </td><td>Clula 1-2</td><td>Clula 1-3</td></tr>
<tr><td>Clula 2-1 </td><td>Clula 2-2</td><td>Clula 2-3</td></tr>
<tr><td>Clula 3-1 </td><td>Clula 3-2</td><td>Clula 3-3</td></tr>
<tr><td>Clula 4-1 </td><td>Clula 4-2</td><td>Clula 4-3</td></tr>
<tr><td>Clula 5-1 </td><td>Clula 5-2</td><td>Clula 5-3</td></tr>
</table>
Aplicando id e classe ao cdigo
<table id="alter" border="1px" cellpadding="5px" cellspacing="0">
<tr>
<td>Clula 1-1</td><td>Clula 1-2</td><td>Clula 1-3</td>
</tr>
<tr class="dif">
<td>Clula 2-1 </td><td>Clula 2-2</td><td>Clula 2-3</td>
</tr>
<tr>
<td>Clula 3-1 </td><td>Clula 3-2</td><td>Clula 3-3</td>
</tr>
<tr class="dif">
<td>Clula 4-1 </td><td>Clula 4-2</td><td>Clula 4-3</td>
</tr>
<tr>
<td>Clula 5-1 </td><td>Clula 5-2</td><td>Clula 5-3</td>
</tr>
</table>
Estilizando a tabela
table {
border-spacing:0;
border-collapse:collapse;
}
td {
border: 1px solid;
padding: 5px;
}
Elementos HTML relacionados a tabelas:
<tr> - table row (linha da tabela)
<th> - table header (cabealho da tabela)
<td> - table data (dado da tabela)
table
border-collapse Especifica se as bordas da tabela devemou
no devemser exibidas.
Valores possveis: collapse, separate, inherit
border-spacing Especifica a distncia entre as bordas de clulas
vizinhas.
Valores possveis: length length, inhrerit
caption-side Especifica a localizao de uma legenda.
Valores possveis: top, bottom, inherit
empty-cells Especifica de vai ou no mostrar bordas e fundo
emclulas vazias de uma tabela.
Valores possveis: hide, show, inherit
table-layout Define o algoritmo de layout para ser usado
emuma tabela.
Valores possveis: auto, fixed, inherit
Estilos
table#alter tr { /* Toda a tabela com fundo creme */
background: #ffc;
}
table#alter tr.dif {
background: #eee; /* Linhas com fundo cinza */
}
Estilos em formulrios
<html>
<head>
<style type="text/css">
input {
background-color: #B0E0E6;
font: 12px verdana, arial, helvetica, sans-serif;
color:#003399;
border:2px solid #000099;
}
</style>
</head>
<body>
<form name="form1" method="post" action="acao1">
<input type="radio" name="radiobutton" value="radiobutton">
</form>
<form name="form2" method="post" action="acao2">
<input type="checkbox" name="checkbox" value="checkbox">
</form>
<form name="form3" method="post" action="acao3">
<input type="text" name="textfield">
</form>
<form name="form4" method="post" action="acao4">
<input type="submit" name="Submit" value="Enviar">
</form>
</body>
</html>
Estilo CSS na tag <select>
<html>
<head>
<style type="text/css">
select {
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
</head>
<body>
<form name="form5" method="post" action=minha-acao">
<select name="select">
<option value="item_1">item_1 da lista</option>
<option value="item_2">item_2 da lista</option>
<option value="item_3">item_3 da lista</option>
<option value="item_4">item_4 da lista</option>
</select>
</form>
</body>
</html>
Estilo CSS na tag <textarea>
<html>
<head>
<style type="text/css">
textarea {
background-color: #B0E0E6;
font:12px verdana, arial, helvetica, sans-serif;
color:#003399;
}
</style>
</head>
<body>
<form name="form6" method="post" action="">
<textarea name="textarea" rows="9"></textarea>
</form>
</body>
</html>
Estilo CSS em formulrio para LOGIN
...
<form name="login"method="post" action="#">
<label>Usurio:
<input name="user" type="text" tabindex="1" size="15">
</label>
<label>Senha:
<input name="password" type="password" tabindex="2" size="15"/>
<input type="submit" name="Submit" value="OK" tabindex="3">
</label>
</form>
...
Estilizando o formulrio
form.login {
background-color: #FFFFCC;
width:380px;
font: 11px Verdana, sans-serif;
color: #003399;
border: 2px solid #0000FF;
padding-left:10px;
}
.campos {
background-color:#B0E0E6;
font: 11px georgia, sans-serif;
color:#0033CC;margin-right: 20px;
}
.botao {
background-color: #CC3300;
font: 10px Arial, sans-serif;
color: #CCFFFF;
}
Adicionando classes ao HTML
<form class="login" name="login" method="post" action="#" />
<label>Usurio:
<input class="campos" name="user" type="text"
tabindex="1" size="15" />
</label>
<label>Senha:
<input class="campos" name="password" type="password"
tabindex="2" size="15 />
<input class="botao" type="submit" name="Submit" value="OK"
tabindex="3"/>
</label>
</form>
Formulrio de contato padro
<form name="nomedoform" action="acao1" method="POST" >
<table>
<tr><th colspan="2">Formulrio de contato</th></tr>
<tr>
<td><label>Nome</label></td>
<td><input name="nome" type="text" size="33" maxlength="1000"></td>
</tr>
<tr>
<td><label>*e-mail</label></td>
<td><input name="email" type="text" size="33" maxlength="1000"></td>
</tr>
<tr>
<td><label>Assunto</label></td>
<td><input name="subject" type="text" size="33" maxlength="1000"></td>
</tr>
<tr>
<td><label>*Comentrios</label></td>
<td><textarea name="comentario" cols="25" rows="7" >
</textarea>
</td>
</tr>
<tr>
<td><input name="submit" type="submit" value="Enviar" class="botao">
</td>
<td>*Campos de preenchimento obrigatrio</td>
</tr>
</table>
</form>
Formulrio de contato padro
Estilo do formulrio
#todoform {
background:#4f4f4f;
font:12px arial, verdana, helvetica, sans-serif;
border-top:8px solid #cfcfcf;
border-left:8px solid #cfcfcf;
border-right:8px solid #696969;
border-bottom:8px solid #696969;
border-collapse:collapse;
color:#ff9900;
}
Estilo do formulrio
#todoform th {
background:#000000;
padding:3px;
font: bold 15px arial, verdana, helvetica, sans-serif;
border-bottom:1px solid #ff9900;
}
#todoform input {
/* a cor do fundo dos trs campos */
background:#b5b5b5;
/* uma borda de 1px tracejada e na cor laranja para o campo */
border:1px dashed #ff9900;
}
Estilo do formulrio
#todoform textarea {
background:#b5b5b5;
border:1px dashed #ff9900;
}
#todoform input.botao {
background:#000000;
color:#ffffff;
border:2px solid #ffffff;
}
#todoform td {
padding:3px;
}