Victor Adriel de J. Oliveira
Ciência da Computação – UESC
Associação Empresa Júnior de Computação
Programação Web:
[HTML/CSS (tableless), jQuery, PHP, Smarty]
Contato: [email protected]
A função da linguagem de marcação, nesse caso o (X)HTML, é definir a estrutura e a semântica. O CSS foi criado com o objetivo de se separar o conteúdo das informações de estilo.
Nesse curso estudaremos a utilização do HTML e do CSS além das novidades decorrentes do surgimento do HTML 5 e do CSS 3.
O Consórcio World Wide Web (W3C) é uma comunidade internacional que desenvolve padrões com o objetivo de garantir o crescimento da web e é responsável pela definição das especificações do CSS.
Motor de renderização é um software que transforma conteúdo em linguagem de marcação e informações de formatação (como CSS) em um conteúdo formatado para ser exibido na tela.
Gecko – Firefox
WebKit – Chrome e Safari
Trident – Internet Explorer
Presto - Opera
A HTML - HyperText Markup Language(Linguagem de Marcação de Hipertexto) é uma linguagem de marcação usada para a construção de páginas na web.
O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc.
Todo documento HTML apresenta etiquetas, elementos entre os sinais ‘<‘ e ‘>’.
Esses elementos são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
<etiqueta>...</etiqueta>
As etiquetas servem para definir a formatação de uma porção do documento, e assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem algum elemento no documento:
<etiqueta>
Uma etiqueta é formada por comandos, atributos e valores:
<img src=“../imgs/imagem.png” />
atributocomando valor
Estrutura básica:
<!DOCTYPE HTML>
<html>
<head>
<title>Título do Documento</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
Copie a estrutura básica do HTML em um arquivo de texto e salve com o nome index e a extensão .html
Essa página será utilizada posteriormente.
…
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
<b> - Define o texto como negrito
<big> - Define o texto como “grande”
<em> - Define o texto como “ênfase”
<i> - Define o texto como itálico
<small> - Define o texto como “pequeno”
<strong>- Define o texto como “forte”
<sub> - Define o texto como subscrito
<sup> - Define o texto como sobrescrito
…
<body>
<p><b>Texto - bold</b></p>
<p><strong>Texto - strong</strong></p>
<p><big>Texto - big</big></p>
<p><i>Texto - italic</i></p>
<p><em>Texto - emphasized</em></p>
<p><code>Texto - code</code></p>
<p>Texto <sub> subscrito</sub>
e texto<sup> sobrescrito</sup></p>
</body>
<a href="url">texto link</a>
Especificando URLs◦ URL relativa
background-image: URL(img1.png);
background-image: URL(../arquivo.jpg);
◦ URL absoluta
background-image: URL(http://www.site.com/nw.jpg);
Link para seções
Uma âncora dentro de um documento HTML:◦ <a name=“topo">Topo da página</a>
Crie um link para o “Topo da página" dentro do mesmo documento:◦ <a href="#topo">Ir para o topo</a>
<tr> - Linha
<td> - Coluna
<th> - Coluna/Linha Título
<caption> - Título da tabela
<thead> - Cabeçalho da tabela
<tbody> - Corpo da tabela
<tfoot> - Rodapé da tabela
<table border="1">
<tfoot>
<tr><td>Soma</td><td>R$160</td></tr>
</tfoot>
<thead>
<tr><th>Mês</th><th>Quantia</th></tr>
</thead>
<tbody><tr><td>Janeiro</td><td>R$150</td></tr><tr><td>Fevereiro</td><td>R$10</td></tr>
</tbody>
</table>
<ol> - Define uma lista ordenada
<ul> - Define uma lista não ordenada
<li> - Define um item de uma tabela
<dl> - Define uma lista de definição
<dt> - Define um item da lista de definição
<dd> - Define a descrição de um item da lista de descrição
Faça a seguinte lista ordenada:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Depois converta para uma lista não ordenada.
Agora transforme-a em uma lista de descrição:
HTML
- Linguagem de Marcação
CSS
- Folhas de Estilo em Cascata
JavaScript
- Linguagem de script
Não estudaremos o uso de formulários, isso deverá ser estudado em PHP ou Ruby.
Veremos a construção de um formulário simples em HTML e o uso de alguns campos.
<form>
<label>Nome:</label><br />
<input type="text" name="firstname"/><br />
<label>Password:</label> <br />
<input type="password" name="pwd" /><br />
<label>Sexo:</label> <br />
<input type="radio" name="sex" value="male" /> Masculino<br />
<input type="radio" name="sex" value="female" /> Feminino<br /><br />
<label>Gostaria de aprender:</label><br />
<input type="checkbox" name="learn " value="html" /> HTML
<br />
<input type="checkbox" name=“learn" value="css" /> CSS
<br /><br />
<input type=“reset" value=“Limpar" />
<input type="submit" value=“Enviar" />
</form>
Note que por default é utilizado o método GET para o envio dos dados.
O fluxo de dados é separado do endereço URL através de um ponto de interrogação (?). Esta forma de endereçamento e separação pode ser observada no campo de endereços do navegador após o formulário ter sido enviado. Você verá algo como:
(...)index.html?firstname=Furiqueiro&pwd=031286
&sex=male&veiculo=html&veiculo+=css
<frameset rows="25%,75%"><frame src="frame_a.htm" /><frame src="frame_b.htm" />
<noframe>
<body>
...
</body>
</noframe>
</frameset>
framespacing◦ espaçamento entre frames (em pixel)
frameborder◦ existência de bordas entre frames (boolean)
src◦ caminho da página HTML a ser exibida no frame
noresize◦ impede redimensionamento do frame
scrolling◦ habilita barra de rolagem (yes ou no)
É uma versão mais rigorosa e limpa do HTML. Praticamente idêntica ao HTML 4.01
O XHTML 1.0 tornou-se uma recomendação da W3C desde 26 de janeiro de 2000.
HTML: Exibir elementos
XHTML: Descrever elementos
Elementos XHTML devem estar aninhados;
Todos os elementos devem ser fechados;
Devem ser escritos em minúsculo;
E devem conter o elemento raíz.
Os nomes dos atributos devem estar em letras minúsculas
Errado:◦ <table WIDTH="100%">
Certo:◦ <table width="100%">
Os valores dos atributos devem estar entre aspas
Errado:◦ <table WIDTH=100%>
Certo:◦ <table width="100%">
Abreviação de atributo é proibido
Errado:◦ <input readonly>
◦ <input disabled>
Certo:◦ <input readonly="readonly" />
◦ <input disabled="disabled" />
O DOCTYPE correto para páginas XHTML:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group (WHATWG) trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.
O WHATWG inclue a AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>
<center>, <font>, <big>, <u> e <s>
por que seus efeitos são apenas visuais
<frameset>, <frame> e <noframe>
por que ferem os princípios de acessibilidade e usabilidade:
Até agora nunca houve um padrão para reprodução de áudio em uma página web. O HTML5 especifica o elemento <audio>
<audio src="mus.oga" controls="true" autoplay="true" />
Atualmente, existem três formatos suportados para o elemento de áudio:
Ogg Vorbis, MP3 e WAV.
Compatibilidade com os navegadores:
Origens alternativas de áudio:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
</audio>
Ofereça um conteúdo alternativo:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
<p>Faça o <a href="mus.mp3">download da música</a>.</p>
</audio>
O uso de vídeo é semelhante ao de áudio. O HTML5 especifica o elemento <video>
<video src="u.ogv" width="400" height="300" />
Atualmente, existem três formatos suportados para o elemento de vídeo:
Ogg e o MPEG 4.
Compatibilidade com os navegadores:
Origens alternativas de vídeo:
<video controls="true" autoplay="true" width="400" height="300">
<source src="u.ogv" />
<source src="u.mp4" />
<source src="u.wmv" />
<p>Faça o <a href="u.mp4">download do vídeo</a>.</p>
</video>
Exemplos:
<input name="val" type="number" value="12.4" step="0.2" min="0" max="20" />
<input name="val" type="range" value="12.4" step="0.2" min="0" max="20" />
Exemplos
E-mail: <br />
<input type="email“ name="user_email" />
<br />
Homepage: <br />
<input type="url" name="user_url" />
<br />
Date:
<input type="date" name="user_date" />
<br />
Month:
<input type="month" name="user_date" />
<br />
Week:
<input type="week" name="user_date" />
<br />
Time:
<input type="time" name="user_date" />
<br />
Date and time:
<input type="datetime" name="user_date" />
<br />
<input type="submit" value="Enviar" />
Placeholder antes:
<input name=“srch" value="Search here" onfocus=“if(this.value=='Search here') this.value=‘’”>
Placeholder com HTML5:
<input name="srch" placeholder="Search here">
Autofocus:◦ <input name="login" autofocus >
Required◦ <input name="login" required>
Pattern◦ nos permite definir expressões regulares de
validação, sem Javascript
Pattern
<form>
<label for="CEP">CEP:
<input name="CEP" id="CEP" requiredpattern="\d{5}-?\d{3}" />
</label>
<input type="submit" value="Enviar" />
</form>
subject
itemprop
item
hidden
draggable
Contenteditable
◦ Exemplo:
<p>Texto não editável</p>
<p contenteditable="true"> Edite-me... </p>
CSS é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em uma linguagem de marcação.
A função da linguagem de marcação é definir a estrutura e a semântica. O CSS foi criado com o objetivo de se separar o conteúdo das informações de estilo.
Cascading Style Sheets (Folhas de estilo em cascata)
Existem três métodos para utilização do CSS:
Inline◦ Quando as regras CSS estão declaradas dentro da
tag do elemento XHTML.
<p style=“color:black; margin: 5px;”>
Aqui um parágrafo de cor preta com 5px nas 4 margens.
</p>
Incorporada ou interna◦ Quando as regras CSS estão declaradas no próprio
documento XHTML, na seção <head> do documento com a tag de estilo <style>.
<head>
<style type=“text/css”>
body {
background: black;
}
</style>
</head>
ExternaQuando as regras CSS estão declaradas em um documento a parte do documento XHTML em um arquivo separado do arquivo html e que tem a extensão .css
<head>...<link rel=“stylesheet” type=“text/css” href=“estilo.css”/>...</head>
Vantagens da sua utilização:◦ Facilidade de manutenção;
◦ Novas possibilidades de apresentação visual;
◦ Criação de sites “tableless”;
◦ Diminuição do tempo de download;
◦ Permite o controle em sistemas que não exibem informações em tela;
Usaremos a folha de estilos externa. Crie um arquivo com extensão .CSS e o nome estilo.
A seguir importe a folha de estilos no head da página HTML:
<head>...<link rel=“stylesheet” type=“text/css” href=“estilo.css”/>...
</head>
Herança<html>
<head></head><body>
<!– Todo o parágrafo será sublinhado --><p style=“font-style:italic;”>
Inicio do paragrafo.<br /><a href=“outrapagina.html”> Link </a><br /> Fim do paragrafo.
</body></html>
Esse link também ficará sublinhado
Rule-Set◦ É composta por um seletor e um bloco de
declaração
ELEMENTO {[bloco de declarações]
}
Ex:p {
font-family: Arial;}
Seletores◦ De tipos de elementos:
A { font-weight: bold; }
◦ De elementos múltiplos:
H1, H2, H3 { font-weight: bold; }
◦ Universal:
* { font-weight: bold; }
◦ De elementos adjacentes:
H1 + p { font-weight: bold; }
◦ De elementos descendentes:
TABLE p { font-weight: bold; }
◦ CLASS
.nomeclass { ... }
◦ ID
#nomeid { ... }
◦ Atributo
A[target] { color: blue; }
img[width=“100”] { color: blue; }
A[title~=“abc”] { color: blue; }
A[title|=“sinf”] { color: blue; }
Crie os seguintes elementos no body da página HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par <span>Span do paragraf</span></p>
<p>outro paragrafo</p>
<p class="green">outro paragrafo</p>
<p id="blue">outro paragrafo</p>
<a>Link inativo</a>
<a title="teste abc">Link inativo</a>
<a title="sinform">Link inativo</a>
Agora teste os seletores:
a{color:red;}
H2,H3{margin-left:50px;}
*{font-style:italic;}
H3 + p { font-weight: bold; }
p span { font-size:25px; }
.green{color:green;}
#blue{color:blue;}
A[title~="abc"] { text-decoration:underline; }
A[title|="sinform"] { text-decoration:blink;}
Pseudoclasses◦ :link
A:link { color: black; }
◦ :visited A:visited { color: blue; }
◦ :active A:active { color: yellow; }
◦ :hover A:hover { color: red; }
Vamos testar o uso das pseudoclasses
Primeiro crie um elemento link em body:
<a href="#">Teste Pseudoclasses</a>
Agora crie o CSS em head:
<style type="text/css">
a { font-weight:bold; }
a:link { color: black; }
a:visited { color: blue; }
a:active { background:green ;}
a:hover { color: red; }
</style>
Unidades de Medida◦ Unidades de tamanho relativo:
% - relativa ao tamanho-padrão ou ao tamanho herdado de uma medida;
em – relativo ao tamanho da propriedade font-size de um elemento;
px – define o tamanho de um pixel do monitor.
Ex: p { font-size: 13px; }
◦ Unidades de tamanho absoluto:
cm – define medidas em centímetros;
in – define medidas em polegadas (2,54 cm);
pt – define medidas em pontos (1/72 polegadas).
Ex: table { margin-left: 2cm; }
HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par</p>
<span>Span do paragraf</span>
<br/>
<a>Link</a>
CSS
h1 { margin-left:10%; }
h2 { margin-left:10em; }
h3 { margin-left:10px; }
p { margin-left:5cm; }
span { margin-left:5in; }
a { margin-left:5pt; }
Especificando URLs◦ URL relativa
background-image: URL(img1.png);
background-image: URL(../arquivo.jpg);
◦ URL absoluta
background-image: URL(http://www.site.com/nw.jpg);
Especificando cores◦ #RRGGBB – Cada par possui até 256 combinações
(entre 00 e FF)
Ex: p { color: #FF0000; }
◦ #RGB – Abreviação da notação #RRGGBB
Ex: p { color: #F00; }
◦ rgb(R, G, B) – Cada cor varia entre 0 e 255
Ex: p { color: rgb(255, 0, 0); }
Font◦ Seletor { font: [estilo] [variação] [peso]
[tamanho]/[altura] [família] }
Ex: body { font: bold small-caps 12pt/14pt Arial }
Font◦ font-family
serif
sans-serif
cursive
fantasy
monospace
Ex: body { font-family: “Verdana”, Arial, sans-serif; }
◦ font-size
p { font-size: 12px; }
◦ font-style
p { font-style : italic; }
◦ font-variant
p { font-variant : small-caps; }
◦ font-weight
p { font-weight : bold; }
Text◦ letter-spacing
p { letter-spacing: 0.4em; }
◦ text-align (left, center, right, justify)
p { text-align : center; }
◦ text-decoration (none, underline, overline, blink)
p { text-decoration : blink; }
◦ word-spacing
p { word-spacing : 0.4em; }
◦ text-transform (capitalize, uppercase, lowercase)
p { text-transform : uppercase; }
Background◦ Seletor { background: [cor-de-fundo] [imagem-de-
fundo] [repetição] [anexo] [posição] }
Ex: body { background: #fff url(img.png) repeat-x fixed top right}
Background◦ background-color
body { background-color: #000; }
◦ background-image
body { background-image : url(figura.jpg); }
◦ background-repeat
body { background-repeat : repeat-x; }
◦ background-attachment
body { background-attachment : fixed; }
◦ background-position
body { background-position : 20% 20%; }
Utilizando múltiplas imagens em uma
<html>
<head>
<style type="text/css">
div {
height:48px;
width:48px;
background:url(twitter.png);
}
div:hover {
background-position:100%;
}
</style>
</head> ...
Margin◦ Seletor { margin: [ valor1[ valor2 [ valor3 [ valor4 ]]]] }
Ex: div { margin: 5px 2px 0px 25px; }
◦ margin-top
p { margin-top: 2px; }
◦ margin-right
p { margin-right : 25px; }
◦ margin-bottom
p { margin-bottom : 3cm; }
◦ margin-left
p { margin-left : 1em; }
Padding◦ Seletor { padding: [ valor1[ valor2 [ valor3 [ valor4 ]]]] }
Ex: div { padding : 5px 2px 0px 25px; }
◦ padding-top
p { padding-top: 2px; }
◦ padding-right
p { padding-right : 25px; }
◦ padding-bottom
p { padding-bottom : 3cm; }
◦ padding-left
p { padding-left : 1em; }
Geradores de Conteúdo◦ Content
A:before { content: “Teste ”;}
◦ Counter-increment
H2:before { counter-increment: cont 5;}
◦ Counter-reset
Body { counter-reset: cont}
HTML<h1>Introdução</h1>
<h2>Programação Web com CSS</h2>
<h1>HTML</h1>
<h2>O que é</h2>
<h2>Sintaxe</h2>
<h1>W3C</h1>
<h2>Qual sua utilidade</h2>
<h1>CSS</h1>
<h2>Utilidade</h2>
<h2>Sintaxe</h2>
<h2>Propriedades</h2>
CSSbody {counter-reset:secao;}
h1 {counter-reset:subsecao;}
h1:before {
counter-increment:secao;
content:"Seção " counter(secao) ". ";
}
h2:before {
counter-increment:subsecao;
content:counter(secao) "." counter(subsecao) " ";
}
1º Passo◦ Escolha os containers do layout, ou seja, as divs
principais que serão criadas;
◦ Não se esqueça que as margens entre um container e outro contam na soma da largura do seu layout.
2º Passo◦ Nomeie os containers de acordo com suas
finalidades. No nosso exemplo adotaremos os seguintes nomes para as DIVs principais do layout:
geral
topo
nav
menu
conteudo
rodape
3º Passo◦ Crie as DIVs vazias para representar os containers
<div id=“geral">
<div id=“topo"></div>
<div id=“nav"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id=“rodape"></div>
</div>
Para facilitar a visualização de como os containers interagem entre si a cada um deles será definida uma largura e uma altura e também uma cor de fundo;
Lembre-se que é importante que você teste em diversos navegadores cada vez que termine uma etapa;
Vamos definir a altura de todas as DIVs apenas para efeito de visualização.
A primeira regra CSS a criar é referente ao body, pois ele é o pai de todas as DIVs:◦ Primeiro precisamos zerar as propriedades margin
e padding, pois cada navegador tem uma forma de renderização;
◦ Definimos a propriedade text-aling para centralizar nosso layout. A propriedade não irá centralizar o texto, mas sim a DIV geral;
◦ Definimos font e cor padrão;
◦ E neste exemplo definimos uma cor de fundo para visualizar melhor.
Nossa regra CSS para o body:
body{
margin: 0;
padding: 0;
font: 12px arial, helvetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
A próxima DIV a ser posicionada é a DIV geral, pois ela contém as demais DIVs:◦ Deve-se estabelecer a largura máxima do seu
layout;
◦ Se seu site dor dinâmica defina a altura como automática, assim evitando que o conteúdo ultrapasse os limites do layout.
Nossa regra CSS para geral:
#geral{
margin: 10px auto;
width: 650px;
height: auto;
text-align: left;
background-color: red;
border: 1px solid black;
}
6º Passo◦ Para posicionar o topo, definimos apenas a altura e
a largura:
#topo{
height: 45px;
background-color: fuchsia;
}
7º Passo◦ Posicionando o menu de navegação horizontal,
definimos uma altura máxima para tal:
#nav{
height: 25px;
background-color: green;
}
8º Passo◦ O alinhamento do menu vertical será feito pela
direita e não inline como as outras divs. Além de definir altura e largura da mesma:
#menu{
float: right;
width: 180px;
height: 100px;
background-color: yellow;
}
9º Passo◦ Para posicionar o conteúdo é preciso definir as
margens direita e esquerda. A margem direita deve ser maior do que o menu da direita, pois a DIVconteudo não poderá ultrapassá-lo:
#conteudo{
margin-right: 200px;
margin-left: 20px;
height: 200px;
background-color: aqua;
}
10º Passo◦ Para o rodapé utilizaremos a propriedade clear:both
para equalizar qualquer elemento anteriomente flutuado. Ou seja, ele limpa a flutuação das divs anteriores para não interferir no posicionamento do rodapé:
#rodape{
clear: both;
height: 20px;
background-color: lime;
}
Terminada a etapa de posicionamento, removeremos a altura definida para as DIVs e deixaremos como auto (height:auto;).
A seguir vamos inserir algum texto dentro dos containers.
Inserindo conteúdo no topo:
<div id=“topo“>
<h1>Nome do site</h1>
</div>
Inserindo conteúdo em nav:<div id=“nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
Inserindo conteúdo em menu:<div id="menu">
<h3>Serviços</h3>
<ul>
<li><a href="#">Websites</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Intranet</a></li>
<li><a href="#">Extranet</a></li>
</ul>
</div>
Inserindo conteúdo na DIV conteudo:<div id=“conteudo”>
<h2>Cabeçalho</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis mod tincidunt ut laoreet dolore magna al. </p>
<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. </p>
</div>
Estilizando body e elementos em geral:h2 {
color: #B52C07;
font: 120% georgia, times, "times new roman", serif;
font-weight: bold;
}
p {
color: #5B5E0E;
font: 106% georgia, times, "times new roman", serif;
}
Estilizando o topo:#topo{
height: 45px;
margin-top:-15px;
background-image: url(topo.jpg);
background-repeat: no-repeat;
border-bottom: 1px solid #fff;
position: relative;
color:#fff;
}
Estilizando o nav (menu horizontal):#nav{
background-color: #9FA41D;
color: #272900;
padding: 2px 0;
margin-bottom: 22px;
}
#nav li{
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
}
#nav li a{
text-decoration: none;
color: #272900;
}
#nav li a:hover{
text-decoration: none;
color: #fff;
}
Estilizando o menu (direita):#menu{
float: right;
width: 165px;
border-left: 1px solid #C5C877;
padding-left: 15px;
}
#menu ul{
margin-right: 10px;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}
Estilizando o rodape:#rodape{
clear: both;
color: #272900;
border-top: 1px dashed #9FA41D;
text-align: center;
font-size: 10px;
}
O efeito de botão é dado ao menu usando as bordas outset e inset:
#menu li {
border:3px outset #060;
margin-bottom:2px;
}
#menu li:active {
border:3px inset #060;
}
Ao passar o cursor sobre o menu o background é alterado.
#menu a{
display:block;
}
#menu li a:hover {
background-color:#006600;
color:#fff;
}
Criaremos a estrutura do menu através de uma lista não ordenada, com cada um dos sub-menus constituídos por outra lista não ordenada dentro da primeira
<div id="menu">
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a>
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
</ul>
</li>
<li><a href="#">Section 4</a></li>
</ul>
</div>
Estilo:#nav li ul {
position: absolute;
left: 0px;
top: 15px;
background-color: #9FA41D;
display: none;
}
#nav li ul li a {
margin-left:-40px;
display:block;
}
#nav ul li {
position: relative;
display: inline;
margin:5px;
padding: 0px 2px 0px 2px;
border-right:none;
}
#nav li:hover ul {
display:block;
}
Mas, porque usaremos duas imagens para cada estado da aba?
O fato é que se aba expandir as imagens deslizam para os lados preenchendo o novo vão maior com mais trecho da imagem direita:
Vamos chamar nossa div de “header”:
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Estilo:#header {
float:left;
width:100%;
font-size:93%;
background:url(Nova%20pasta/bg.gif)
repeat-x bottom;
}
#header ul {
margin:0;
padding:0;
list-style:none;
padding:10px 10px 0;
}
#header li {
float:left;
background:url(Nova%20pasta/norm_left.png)
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url(Nova%20pasta/norm_right.png)
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:
url(Nova%20pasta/norm_left_on.png);
}
Também conhecido como comentário condicional, a estrutura básica é a mesma dos comentários HTML:
<!-- -->
Assim, todos os demais navegadores interpretarão como um comentário normal e serão ignorados.
O Internet Explorer, foi projetado para reconhecer a sintaxe especial
<!--[if IE]>
Ele processa o if e interpreta o conteúdo do comentário condicional como se fosse um conteúdo normal da página.
<!--[if IE]> De acordo com o comentário condicional este
é o Internet Explorer<br> <![endif]-->
<!--[if IE 5]> De acordo com o comentário condicional
este é o Explorer 5<br> <![endif]-->
<!--[if IE 5.0]> De acordo com o comentário condicional este é o Internet Explorer 5.0<br> <![endif]-->
<!--[if IE 5.5]> De acordo com o comentário condicional este é o Internet Explorer 5.5<br> <![endif]-->
<!--[if gte IE 5]> De acordo com o comentário condicional este é o Internet Explorer 5 ou maior<br> <![endif]-->
<!--[if lt IE 6]> De acordo com o comentário condicional este é o Internet Explorer versão menor que 6<br> <![endif]-->
Especificado pela W3C (CSS3)◦ box-shadow:1px 1px 5px #000;
Implementado pelo Webkit◦ -webkit-box-shadow:1px 1px 5px #000;
Implementado pelo Mozilla◦ -moz-box-shadow:1px 1px 5px #000;
Especificado pela W3C (CSS3)◦ border-top-right-radius: 8px;
◦ border-top-left-radius: 8px;
◦ border-bottom-right-radius: 8px;
◦ border-bottom-left-radius: 8px;
Implementado pelo Webkit◦ -webkit-border-top-right-radius: 8px;
◦ -webkit-border-top-left-radius: 8px;
◦ -webkit-border-bottom-left-radius: 8px;
◦ -webkit-border-bottom-right-radius: 8px;
Implementado pelo Mozilla◦ -moz-border-radius: 8px 8px 8px 8px;
PRONTO,
PODE CONTINUAR SOZINHO...
http://www.maujor.com
Fique atento às novidades, testem os exemplos dados nos sites que falam sobre o tema, leiam sobre o assunto e pratiquem, testem combinações de cores... O que faz a diferença no final é a criatividade somada ao conhecimento técnico.
Victor Adriel de J. Oliveira
http://blogvictoradriel.blogspot.com.br/
apresentação feita em 2010