CSS/DHTML

Conteúdo abordado nesta página


Home

CSS - (Cascading Style Sheets)

Também conhecido como folhas de Estilo em Cascata são regras de formatação ou de estilos, a serem aplicadas aos elementos da marcação de um documento HTML ou XHTML.



Vantagens

Com CSS você poderá fazer toda a formatação do documento usando apenas um arquivo, e a partir deste todas as páginas do site estará referenciada a esta única folha de estilo.

Assim as vantagens são inúmeras, como a agilidade de atualização das páginas, controle geral sobre o layout do site, entre outras.

Com CSS você poderá fazer toda a formatação do documento usando apenas um arquivo, e a partir deste todas as páginas do site estará referenciada a esta única folha de estilo

Img_css

Para programar CSS é tão simples e parecido como no HTML, usando apenas um editor simples de texto é o suficiente para criar um arquivo de estilo. Neste caso devemos apenas salvar o arquivo junto com sua extensão (.css).

Exemplo: meus_estilos.css

As tags do CSS são bem parecidas com o HTML:

Img_estrutura_css

Aplicação do CSS

In-line: é aplicado na mesma tag referida do código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS In-line</title>
</head>
<body style="background-color: #FF0000;">
Método de CSS aplicado In-line (dentro de body)
</body>
</html>

Interno: este método é inserido dentro da tag head e toda vez
que for utilizada é só fazer uma referência a ela

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
      body {background-color: #FF0000;}
    </style>
<title>CSS Interno com uso de Tag</title>
</head>
<body>
CSS interno com o uso da tag entre head.
</body>
</html>

Externo: este método é o mais recomendado, pois você deve fazer um link para uma folha de estilos externa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Externo</title>
<link href="meus_estilos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
O método mais recomendado é usar o CSS externo.<br />
Exemplo de link aplicado dentro de head.
</body>
</html>

Modelo no html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Externo</title>
<link href="meus_estilos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>O método mais recomendado é usar o CSS externo.</h1>
<br />
Exemplo de link aplicado dentro de head.
><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href=”http://www.portaldasmidias.com.br" target="_blank">Portal das Midias</a>
</body>
</html>


Home

DHTML

O DHTML (Dynamic HTML) é uma junção das linguagens HTML, JavaScript e CSS, tornando possível à criação de páginas com mais recursos e interativas. Vejamos agora alguns exemplos de scripts prontos de DHTML.

O tamanho da fonte não é limitado como no HTML

<html>
<<head>
<title>Exerc_dhtml</title>
</head>
<body>

<font style="color:#ff0000; font-family:arial; font-size:215px; text-decoration:underline;  font-weight:bold”>DHTML</font>

</body>
</html>



Camadas:

Usando
DIV

<HTML>
<HEAD>
<TITLE> ..::Camadas::..</TITLE>
</HEAD>
<BODY>

<DIV STYLE="position:absolute; LEFT:50px;  TOP:50px">
<IMG SRC="imagens\portal2.jpg" WIDTH=200>  </DIV>
<DIV STYLE="position:absolute; LEFT:150px;  TOP:100px">
<IMG SRC="imagens\portal.jpg" WIDTH=200>  </DIV>
<DIV STYLE="position:absolute;  LEFT:250px;TOP:200px; WIDTH:200px; 
COLOR:#CC33CC; FONT-WEIGHT:bold; TEXT- ALIGN:center; FONT-SIZE:20px">

Texto posicionado a 250 pixels da margem  esquerda, a 200 pixels do topo e ocupando uma  largura de 200 pixels. </DIV>


</BODY>
</HTML>

Link sem o sublinhado

Outra função muito utilizada do DHTML é o comando text-decoration que utilizando o atributo none podemos eliminar o sublinha de um link.

<a href="http://www.portaldasmidias.com.br" style="text-decoration:none">
<b><font face="verdana">Ir para o site Portal das Midias</font></b></a>