Esta é a Parte II do tutorial. A Parte II contém alguns exemplos que mostram o escopo do CSS no Mozilla.
Cada página na Parte II ilustra como o CSS interage com algumas outras tecnologias. Estas páginas não são desenhadas para ensinar como usar estas outras tecnologias. Vá para outros tutorias para aprender isto em detalhes.
Em vez disso, estas páginas são desenhadas para ilustrar os muitos usos do CSS. Para usar estas páginas, você deve ter um conhecimento em CSS, mas você não precisa qualquer conhecimento em outras tecnologias.
Informação: JavaScript
JavaScript é uma linguagem de programação. Quando você usa alguma aplicação Mozilla (por exemplo, seu naverador Mozilla) muito do código que o seu computador roda é escrito em JavaScript.
JavaScript pode interagir com folhas de estilo, permitindo a você escrever programas que mudem o estilo do documento dinamicamente.
Existem três maneiras para fazer isto:
- Trabalhando com uma lista de folhas de estilo no documento — por exemplo: adicionando, removendo ou modificando uma folha de estilo.
- Trabalhando com as regras de uma folha de estilo — por exemplo: adicionando, removendo ou modificando uma regra.
- Trabalhando com um elemento individual no DOM — modificando seu estilo independentemente da folha de estilo do seu documento.
| Para mais informações sobre JavaScript no Mozilla, veja a página JavaScript neste wiki. |
Ação: Uma demonstração de JavaScript
Criei um novo documento HTML, doc5.html. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Como Começar Mozilla CSS - Demonstração JavaScript</TITLE> <LINK rel="stylesheet" type="text/css" href="style5.css"> <SCRIPT type="text/javascript" src="script5.js"></SCRIPT> </HEAD> <BODY> <H1>JavaScript de amostra</H1> <DIV id="square"></DIV> <BUTTON type="button" onclick="doDemo(this);">Clique Aqui</BUTTON> </BODY> </HTML>
Crie um novo arquivo CSS, style5.css. Copie e cole o conteúdo daqui:
/*** Demonstração JavaScript ***/
#square {
width: 20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
Crie um novo arquivo de texo, script5.js. Copie e cole o conteúdo daqui:
// Demonstração JavaScript
function doDemo (button) {
var square = document.getElementById("square")
square.style.backgroundColor = "#fa4"
button.setAttribute("disabled", "true")
setTimeout(clearDemo, 2000, button)
}
function clearDemo (button) {
var square = document.getElementById("square")
square.style.backgroundColor = "transparent"
button.removeAttribute("disabled")
}
Abra o documento no seu navegador e pressione o botão.
Este wiki não suporta o JavaScript nas páginas, então não é possível mostrar a demonstração aqui. Deve se parecer como isto, antes e depois de você pressionar o botão:
|
|
Notas sobre esta demonstração:
- O documento HTML é ligado à folha de estilo normalmente, e também é ligado ao script.
- O script trabalha com elementos individuais no DOM. Isto modifica o estilo dos quadrados diretamente, porém, modifica o estilo do botão indiretamente mudando um atributo.
- Em JavaScript,
document.getElementById("square")é similar em função ao seletor CSS#square. - Em JavaScript,
backgroundColorcorresponde à propriedadebackground-colordo CSS. - Seu navegador tem uma regra construída das CSS para
button[disabled="true"]que muda a aparência do botão quando ele está desabilitado.
| Mude o script de modo que o quadrado salte para a direita em 20 em quando sua cor mudar, e salte para trás mais tarde. |
O que vem depois?
Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.
Nesta demonstração, o documento HTML linka o script mesmo que somente o elemento button use o script. Mozilla extende o CSS para que possa ser ligado ao código JavaScript (e também conteúdo e outras folhas de estilo) para elementos selecionados. A próxima página demonstra isto: XBL bindings