aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/web/css
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/pt-pt/web/css
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/pt-pt/web/css')
-rw-r--r--files/pt-pt/web/css/azimuth/index.html72
-rw-r--r--files/pt-pt/web/css/como_começar/dados_xml/index.html239
-rw-r--r--files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html336
3 files changed, 0 insertions, 647 deletions
diff --git a/files/pt-pt/web/css/azimuth/index.html b/files/pt-pt/web/css/azimuth/index.html
deleted file mode 100644
index 24e469dc63..0000000000
--- a/files/pt-pt/web/css/azimuth/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: azimuth
-slug: Web/CSS/azimuth
-tags:
- - Referencia_CSS
-translation_of: Archive/Web/CSS/azimuth
----
-<p>{{ CSSRef() }}</p>
-<h3 id="Resumo" name="Resumo">Resumo</h3>
-<p>Em combinação com <code><a href="/pt/CSS/elevation" title="pt/CSS/elevation">elevation</a></code>, <code>azimuth</code> habilita diferentes fontes de áudio para serem posicionadas espacialmente para apresentações aurais. Isto é importante porque proporciona uma maneira natural de contar várias vozes a parte, como cada uma pode ser posicionada para originar em uma localização diferente no estágio de som. Saída estéreo produz um estágio de som lateral, enquanto instalações de fones de ouvido e microfones permitem um estágio tridimencional completo.</p>
-<ul>
- <li>Valor inicial: center</li>
- <li>Aplica-se a: todos os elementos</li>
- <li>Herdado: sim</li>
- <li>Porcentagens: N/A</li>
- <li>Mídia: <a href="/pt/CSS/Media/Aural" title="pt/CSS/Media/Aural">aural</a></li>
- <li>Valor computado: ângulo normalizado</li>
-</ul>
-<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>
-<pre class="eval">azimuth: <em>angle</em> | [[ left-side | far-left | left |
- center-left | center | center-right | right |
- far-right | right-side ] || behind ] | leftwards |
- rightwards | inherit
-</pre>
-<h3 id="Valores" name="Valores">Valores</h3>
-<dl>
- <dt>
- angle </dt>
- <dd>
- Posição de fonte audível é descrita como um ângulo dentro da faixa de <code>-360deg</code> até <code>360deg</code>. O valor <code>0deg</code> significa diretamente adiante do centro do estágio de som (este é o valor padrão). <code>90deg</code> é para a direita, <code>180deg</code> é atrás e <code>270deg</code> ou <code>-90deg</code> é para a esquerda.</dd>
-</dl>
-<p><img alt="Image:Azimuth.png"></p>
-<h4 id="Palavras-chave_relativas_a_posi.C3.A7.C3.A3o" name="Palavras-chave_relativas_a_posi.C3.A7.C3.A3o">Palavras-chave relativas a posição</h4>
-<ul>
- <li><strong>left-side</strong>: O mesmo que <code>270deg</code>.</li>
- <li><strong>left-side behind</strong>: O mesmo que <code>270deg</code>.</li>
- <li><strong>far-left</strong>: O mesmo que <code>300deg</code>.</li>
- <li><strong>far-left behind</strong>: O mesmo que <code>240deg</code>.</li>
- <li><strong>left</strong>: O mesmo que <code>320deg</code>.</li>
- <li><strong>left behind</strong>: O mesmo que <code>220deg</code>.</li>
- <li><strong>center-left</strong>: O mesmo que <code>340deg</code>.</li>
- <li><strong>center-left behind</strong>: O mesmo que <code>200deg</code>.</li>
- <li><strong>center</strong>: O mesmo que <code>0deg</code>.</li>
- <li><strong>center behind</strong>: O mesmo que <code>180deg</code>.</li>
- <li><strong>center-right</strong>: O mesmo que <code>20deg</code>.</li>
- <li><strong>center-right behind</strong>: O mesmo que <code>160deg</code>.</li>
- <li><strong>right</strong>: O mesmo que <code>40deg</code>.</li>
- <li><strong>right behind</strong>: O mesmo que <code>140deg</code>.</li>
- <li><strong>far-right</strong>: O mesmo que <code>60deg</code>.</li>
- <li><strong>far-right behind</strong>: O mesmo que <code>120deg</code>.</li>
- <li><strong>right-side</strong>: O mesmo que <code>90deg</code>.</li>
- <li><strong>right-side behind</strong>: O mesmo que <code>90deg</code>.</li>
- <li><strong>behind</strong>: O mesmo que <code>180deg</code>. Também é usado como um modificador para outros valores de palavras-chave posicionais, como acima.</li>
- <li><strong>leftwards</strong>: Move o som no sentido anti-horário em 20 graus, relativo ao ângulo corrente.</li>
- <li><strong>rightwards</strong>: Move o som no sentido horário em 20 graus, relatico ao ângulo corrente.</li>
-</ul>
-<h3 id="Exemplos" name="Exemplos">Exemplos</h3>
-<pre>h1 { azimuth: 30deg }
-td.a { azimuth: far-right } /* 60deg */
-#12 { azimuth: behind far-right } /* 120deg */
-p.comment { azimuth: behind } /* 180deg */
-</pre>
-<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3>
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/CSS21/aural.html#spatial-props">CSS 2.1</a></li>
-</ul>
-<p><span class="comment">== Compatibilidade com navegadores == TBD (this might be abandoned in favour of a centralized compatibility chart)</span></p>
-<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Veja também</h3>
-<p>{{ Cssxref("elevation") }}</p>
-<p><span class="comment">Categorias</span></p>
-<p><span class="comment">Interwiki Language Links</span></p>
-<p>{{ languages( { "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth" } ) }}</p>
diff --git a/files/pt-pt/web/css/como_começar/dados_xml/index.html b/files/pt-pt/web/css/como_começar/dados_xml/index.html
deleted file mode 100644
index d0245353fa..0000000000
--- a/files/pt-pt/web/css/como_começar/dados_xml/index.html
+++ /dev/null
@@ -1,239 +0,0 @@
----
-title: Dados XML
-slug: Web/CSS/Como_começar/Dados_XML
-tags:
- - 'CSS:Como_começar'
-translation_of: Archive/Beginner_tutorials/XML_data
----
-<p>{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}</p>
-
-<p> </p>
-
-<p>Esta página contém um exemplo de como você pode usar o CSS com dados XML.</p>
-
-<p>Você cria um documento XML de amostra e uma folha de estilo que você pode usar para exibí-lo em seu navegador.</p>
-
-<h3 id="Informa.C3.A7.C3.A3o:_Dados_XML" name="Informa.C3.A7.C3.A3o:_Dados_XML">Informação: Dados XML</h3>
-
-<p><em><a href="/pt/XML" title="pt/XML">XML</a></em> (eXtensible Markup Language) é uma linguagem de propósito geral para qualquer tipo de dados estruturados.</p>
-
-<p>Por padrão, seu navegador Mozilla mostra o XML em um formato muito similar aos dados originais no arquivo XML. Você vê as tags reais que definem a estrutura dos dados.</p>
-
-<p>Ligando a folha de estilo CSS com o documento XML, você pode definir outras maneiras para mostrá-lo. Para fazer isto, sua folha de estilo usa regras que mapeiam os tags no documento XML para mostrar tipos usados pelo HTML.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
- <tr>
- <td>Dados em um documento XML usando tags <code>&lt;INFO&gt;</code>. Você quer que os elementos <small>INFO</small> do documento sejam mostrados como parágrafos no HTML.
- <p>Na folha de estilo do documento, você especifica como os elementos <small>INFO</small> serão exibidos:</p>
-
- <div style="width: 30em;">
- <pre class="eval">
-INFO {
- display: block;
- margin: 1em 0;
- }
-</pre>
- </div>
- </td>
- </tr>
- </tbody>
-</table>
-
-<p>Os valores mais comuns para a propriedade <code>display</code> são:</p>
-
-<table style="margin-left: 2em;">
- <tbody>
- <tr>
- <td style="padding-right: 2em;"><code>block</code></td>
- <td>Monstrado como <small>DIV</small> do HTML (para cabeçalhos, parágrafos)</td>
- </tr>
- <tr>
- <td><code>inline</code></td>
- <td>Mostrado como <small>SPAN</small> do HTML (para ênfases no texto)</td>
- </tr>
- </tbody>
-</table>
-
-<p>Adicione seu próprio estilo de regras para especificar a fonte, espaçamento e outros detalhes da mesma maneira que no HTML.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
- <caption>Mais detalhes</caption>
- <tbody>
- <tr>
- <td>Outros valores de <code>display</code> mostram o elemento como o item de uma lista, ou como o componente de uma tabela.
- <p>Para a lista completa de tipos de exibição, veja <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> em CSS Specification.</p>
-
- <p>Usando CSS sozinho, a estrutura de exibição precisa ser a mesma da estrutura do documento. Outras tecnologias pode modificar a estrutura da exibição — por exemplo, o XBL pode adicionar conteúdo, e o JavaScript pode modificar o DOM.</p>
-
- <p>Para mais informações sobre o XML no Mozilla, veja a página <a href="/pt/XML" title="pt/XML">XML</a> neste wiki.</p>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XML" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XML">Ação: Uma demonstração XML</h3>
-
-<p>Crie um novo arquivo XML, <code>doc9.xml</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>&lt;?xml version="1.0"?&gt;
-&lt;!-- XML demonstration --&gt;
-
-&lt;?xml-stylesheet type="text/css" href="style9.css"?&gt;
-
-&lt;!DOCTYPE planet&gt;
-&lt;planet&gt;
-
-&lt;ocean&gt;
-&lt;name&gt;Arctic&lt;/name&gt;
-&lt;area&gt;13,000&lt;/area&gt;
-&lt;depth&gt;1,200&lt;/depth&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;name&gt;Atlantic&lt;/name&gt;
-&lt;area&gt;87,000&lt;/area&gt;
-&lt;depth&gt;3,900&lt;/depth&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;name&gt;Pacific&lt;/name&gt;
-&lt;area&gt;180,000&lt;/area&gt;
-&lt;depth&gt;4,000&lt;/depth&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;name&gt;Indian&lt;/name&gt;
-&lt;area&gt;75,000&lt;/area&gt;
-&lt;depth&gt;3,900&lt;/depth&gt;
-&lt;/ocean&gt;
-
-&lt;ocean&gt;
-&lt;name&gt;Southern&lt;/name&gt;
-&lt;area&gt;20,000&lt;/area&gt;
-&lt;depth&gt;4,500&lt;/depth&gt;
-&lt;/ocean&gt;
-
-&lt;/planet&gt;
-</pre>
-</div>
-
-<p>Crie um novo arquivo CSS, <code>style9.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>/*** XML demonstration ***/
-
-planet:before {
- display: block;
- width: 8em;
- font-weight: bold;
- font-size: 200%;
- content: "Oceans";
- margin: -.75em 0px .25em -.25em;
- padding: .1em .25em;
- background-color: #cdf;
- }
-
-planet {
- display: block;
- margin: 2em 1em;
- border: 4px solid #cdf;
- padding: 0px 1em;
- background-color: white;
- }
-
-ocean {
- display: block;
- margin-bottom: 1em;
- }
-
-name {
- display: block;
- font-weight: bold;
- font-size: 150%;
- }
-
-area {
- display: block;
- }
-
-area:before {
- content: "Area: ";
- }
-
-area:after {
- content: " million km\B2";
- }
-
-depth {
- display: block;
- }
-
-depth:before {
- content: "Mean depth: ";
- }
-
-depth:after {
- content: " m";
- }
-</pre>
-</div>
-
-<p>Abra o documento em seu navegador:</p>
-
-<table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
- <tr>
- <td>
- <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;">
- <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p>
-
- <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br>
- Area: 13,000 million km²<br>
- Mean depth: 1,200 m</p>
-
- <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br>
- Area: 87,000 million km²<br>
- Mean depth: 3,900 m</p>
-
- <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p>
- </div>
- </td>
- </tr>
- </tbody>
-</table>
-
-<p><br>
- Notas sobre esta demonstração:</p>
-
-<ul>
- <li>O 2 sobre-escrito (em "million km²") um caractér Unicode, é codificado com <code>\B2</code> no arquivo CSS.</li>
- <li>O cabeçalho, "Oceans", tem uma margem negativa no topo, movendo-o para cima quando exibido no topo da borda.</li>
-</ul>
-
-<p> </p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Desafio</caption>
- <tbody>
- <tr>
- <td>Mude a folha de estilo de modo que ela mostre o documento como uma tabela.
- <p>(Veja o capítulo <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> em CSS Specification para exemplos que você pode adaptar.)</p>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h4 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h4>
-
-<p>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 <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Dados_XML" title="Talk:pt/CSS/Como_começar/Dados_XML">Discussão</a>.</p>
-
-<p>Esta é a última página do tutorial. Para mais informações sobre CSS no Mozilla, veja a página principal <a href="/pt/CSS" title="pt/CSS">CSS</a> neste wiki.</p>
-
-<p>{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}</p>
-
-<p><span class="comment">Categorias</span></p>
-
-<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html b/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html
deleted file mode 100644
index 46408abaa8..0000000000
--- a/files/pt-pt/web/css/como_começar/interfaces_de_usuário_xul/index.html
+++ /dev/null
@@ -1,336 +0,0 @@
----
-title: Interfaces de usuário XUL
-slug: Web/CSS/Como_começar/Interfaces_de_usuário_XUL
-tags:
- - 'CSS:Como_começar'
-translation_of: Archive/Beginner_tutorials/XUL_user_interfaces
----
-<p>{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}</p>
-
-<p>Esta página ilustra a linguagem especializada do Mozilla para criação de interfaces de usuário.</p>
-
-<p>Você cria uma simples demonstração que roda no seu navegador Mozilla.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o_Intefaces_de_usu.C3.A1rio" name="Informa.C3.A7.C3.A3o:_Intefaces_de_usu.C3.A1rio">Informação: Interfaces de usuário</h2>
-
-<p>Embora o HTML tenha algum suporte à interfaces de usuário, ele não suporta todas as características que você precisa para fazer uma aplicação autônoma.</p>
-
-<p>O Mozilla supera esta limitação providenciando uma linguagem especializada para criar interfaces de usuário: <em>XUL</em> (XML User-interface Language, usualmente pronunciada como "<em>zool</em>").</p>
-
-<p>Em XUL, muitas características comuns de interfaces de usuário podem ser construídas. Por exemplo, XUL proporciona janelas especializadas como diálogos, assim como barras de estado, menus, barras de ferramenta, e mesmo navegadores.</p>
-
-<p>Mais características especializadas podem ser construídas em partes usando XUL juntamente com outras tecnologias que você viu neste tutorial: estilo CSS, código JavaScript e XBL bindings.</p>
-
-<p>Como outras linguagens baseadas em XML, XUL usa folhas de estilo CSS.</p>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
- <caption>Mais detalhes</caption>
- <tbody>
- <tr>
- <td>Para maiores informações sobre interfaces de usuário XUL, veja a página <a href="/pt/XUL" title="pt/XUL">XUL</a> neste wiki.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o_Uma_demonstra.C3.A7.C3.A3o_XUL" name="A.C3.A7.C3.A3o:_Uma_demonstra.C3.A7.C3.A3o_XUL">Ação: Uma demonstração XUL</h2>
-
-<p>Crie um novo documento XUL de um simples arquivo de texto, <code>doc7.xul</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>&lt;?xml version="1.0"?&gt;
-&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
-&lt;?xml-stylesheet type="text/css" href="style7.css"?&gt;
-
-&lt;window
- xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
- title="CSS Getting Started - XUL demonstration"
- onload="init();"&gt;
-
-&lt;script type="application/x-javascript" src="script7.js"/&gt;
-
-&lt;label class="head-1" value="XUL demonstration"/&gt;
-
-&lt;vbox&gt;
-
- &lt;groupbox class="demo-group"&gt;
- &lt;caption label="Day of week calculator"/&gt;
- &lt;grid&gt;
- &lt;columns&gt;
- &lt;column/&gt;
- &lt;column/&gt;
- &lt;/columns&gt;
- &lt;rows&gt;
- &lt;row&gt;
- &lt;label class="text-prompt" value="Date:"
- accesskey="D" control="date-text"/&gt;
- &lt;textbox id="date-text" type="timed"
- timeout="750" oncommand="refresh();"/&gt;
- &lt;/row&gt;
- &lt;row&gt;
- &lt;label value="Day:"/&gt;
- &lt;hbox id="day-box"&gt;
- &lt;label class="day" value="Sunday" disabled="true"/&gt;
- &lt;label class="day" value="Monday" disabled="true"/&gt;
- &lt;label class="day" value="Tuesday" disabled="true"/&gt;
- &lt;label class="day" value="Wednesday" disabled="true"/&gt;
- &lt;label class="day" value="Thursday" disabled="true"/&gt;
- &lt;label class="day" value="Friday" disabled="true"/&gt;
- &lt;label class="day" value="Saturday" disabled="true"/&gt;
- &lt;/hbox&gt;
- &lt;/row&gt;
- &lt;/rows&gt;
- &lt;/grid&gt;
- &lt;hbox class="buttons"&gt;
- &lt;button id="clear" label="Clear" accesskey="C"
- oncommand="clearDate();"/&gt;
- &lt;button id="today" label="Today" accesskey="T"
- oncommand="setToday();"/&gt;
- &lt;/hbox&gt;
- &lt;/groupbox&gt;
-
- &lt;statusbar&gt;
- &lt;statusbarpanel id="status"/&gt;
- &lt;/statusbar&gt;
-
-&lt;/vbox&gt;
-
-&lt;/window&gt;
-</pre>
-</div>
-
-<p>Crie um novo arquivo CSS, <code>style7.css</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela para pegar tudo isto:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>/*** XUL demonstration ***/
-window {
- -moz-box-align: start;
- background-color: -moz-dialog;
- font: -moz-dialog;
- padding: 2em;
- }
-
-.head-1 {
- font-weight: bold;
- font-size: 200%;
- padding-left: 5px;
- }
-
-
-/* the group box */
-.demo-group {
- padding: 1em;
- }
-
-.demo-group grid {
- margin-bottom: 1em;
- }
-
-.demo-group column {
- margin-right: .5em;
- }
-
-.demo-group row {
- margin-bottom: .5em;
- }
-
-.demo-group .buttons {
- -moz-box-pack: end;
- }
-
-
-/* the day-of-week labels */
-.day {
- margin-left: 1em;
- }
-
-.day[disabled] {
- color: #777;
- }
-
-.day:first-child {
- margin-left: 4px;
- }
-
-
-/* the left column labels */
-.text-prompt {
- padding-top: .25em;
- }
-
-
-/* the date input box */
-#date-text {
- max-width: 8em;
- }
-
-
-/* the status bar */
-statusbar {
- width: 100%;
- border: 1px inset -moz-dialog;
- margin: 4px;
- padding: 0px 4px;
- }
-
-#status {
- padding: 4px;
- }
-
-#status[warning] {
- color: red;
- }
-</pre>
-</div>
-
-<p>Crie um novo arquivo de texto, <code>script7.js</code>. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego todo o conteúdo daqui:</p>
-
-<div style="width: 48em; height: 12em; overflow: auto;">
-<pre>// XUL demonstration
-
-var dateBox, dayBox, currentDay, status; // elements
-
-// called by window onLoad
-function init() {
- dateBox = document.getElementById("date-text")
- dayBox = document.getElementById("day-box")
- status = document.getElementById("status")
- setToday();
- }
-
-// called by Clear button
-function clearDate() {
- dateBox.value = ""
- refresh()
- }
-
-// called by Today button
-function setToday() {
- var d = new Date()
- dateBox.value = (d.getMonth() + 1)
- + "/" + d.getDate()
- + "/" + d.getFullYear()
- refresh()
- }
-
-// called by Date textbox
-function refresh() {
- var d = dateBox.value
- var theDate = null
-
- showStatus(null)
- if (d != "") {
- try {
- var a = d.split("/")
- var theDate = new Date(a[2], a[0] - 1, a[1])
- showStatus(theDate)
- }
- catch (ex) {}
- }
- setDay(theDate)
- }
-
-// internal
-function setDay(aDate) {
- if (currentDay) currentDay.setAttribute("disabled", "true")
- if (aDate == null) currentDay = null
- else {
- var d = aDate.getDay()
- currentDay = dayBox.firstChild
- while (d-- &gt; 0) currentDay = currentDay.nextSibling
- currentDay.removeAttribute("disabled")
- }
- dateBox.focus();
- }
-
-function showStatus(aDate) {
- if (aDate == null) {
- status.removeAttribute("warning")
- status.setAttribute("label", "")
- }
- else if (aDate === false || isNaN(aDate.getTime())) {
- status.setAttribute("warning", "true")
- status.setAttribute("label", "Date is not valid")
- }
- else {
- status.removeAttribute("warning")
- status.setAttribute("label", aDate.toLocaleDateString())
- }
- }
-</pre>
-</div>
-
-<p>Para ver o resultado exatamente como pretendido use o tema padrão do seu navegador. Se você usa um tema diferente, isto mode mudar alguns estilos da interface do usuário e a demonstração pode parecer estranha.</p>
-
-<p>Abra o documento no seu navegador Mozilla e use a interface.</p>
-
-<p>Este wiki não suporta XUL e JavaScript nas páginas, então não é possível fazer a demonstração aqui. Deve se parecer com isto:</p>
-
-<table style="background-color: threedface; border: 2px outset #3366bb; cursor: default; margin: .5em 0; padding: 1em; white-space: nowrap;">
- <tbody>
- <tr>
- <td>
- <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p>
-
- <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;">
- <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Day of week calculator</p>
-
- <table style="background-color: threedface; margin: .5em; padding-right: .5em;">
- <tbody>
- <tr>
- <td style="padding-right: .5em;"><u>D</u>ate:</td>
- <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005</td>
- </tr>
- <tr>
- <td>Day:</td>
- <td style="color: graytext;">Sunday <span style="color: #000000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td>
- </tr>
- <tr>
- <td></td>
- <td>
- <div style="float: right; margin-top: .5em;">
- <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span></p>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
-
- <div style="border: 1px inset threedface; margin-top: 1em;">
- <p style="margin: 0; padding: .25em .5em;">June 27, 2005</p>
- </div>
- </td>
- </tr>
- </tbody>
-</table>
-
-<p>Notas sobre esta demonstração:</p>
-
-<ul>
- <li>O documento XUL é ligado à folha de estilo normalmente, e também ligado ao script.</li>
- <li>O script não é importante nesta demonstração.</li>
- <li>Muito do estilo que você vê é determinado pelo tema do seu navegador.</li>
-</ul>
-
-<p>Examine a folha de estilo do documento para ver se você entende todas as regras dele. Se houver alguma regra que você não entende, comente-a e atualize o seu navegador para ver o efeito no documento.</p>
-
-<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
- <caption>Desafio</caption>
- <tbody>
- <tr>
- <td>Use a ferramenta DOM Inspector para examinar a caixa de texto Date. Ela é feita de outros elementos que são gerados por seu XBL binding.
- <p>Descubra a <em>classe</em> do elemento <code>html:input</code>. Este é o elemento que atualmente recebe a entrada do usuário.</p>
-
- <p>Usando este conhecimento, adicione uma regra à sua folha de estilo que faça o fundo da caixa Date de um azul pálido quando ele tiver o foco do teclado (mas branco quando o foco do teclado estiver em outro lugar).</p>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
-
-<p>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 <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Intefaces_de_usu%C3%A1rio" title="Talk:pt/CSS/Como_começar/Intefaces_de_usuário">Discussão</a>.</p>
-
-<p>Nesta demonstração, você viu que as formas retangulares padrão são comuns na maioria das interfaces de usuário. Mozilla também suporta uma linguagem especializada de gráficos para criar padrões, usando folhas de estilo CSS para especificar o estilo. A próxima página demonstra isto: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Gr%C3%A1ficos_SVG" title="pt/CSS/Como_começar/Gráficos_SVG">Gráficos SVG</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:XBL bindings", "CSS:Como começar:Gráficos SVG") }}</p>