From 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:50:24 +0100 Subject: unslug pt-pt: move --- .../learn/css/first_steps/how_css_works/index.html | 135 +++++++++++++++++++++ .../index.html | 111 +++++++++++++++++ 2 files changed, 246 insertions(+) create mode 100644 files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html (limited to 'files/pt-pt/conflicting/learn/css') diff --git a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..2ee2937e47 --- /dev/null +++ b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,135 @@ +--- +title: O que é CSS +slug: Web/CSS/Como_começar/O_que_é_CSS +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

{{Next("CSS:Como começar:Porque usar CSS")}}

+ +

Esta página explica o que é CSS. Você cria um documento de amostra para que possa trabalhar com as páginas seguintes.

+ +

Informações: O que é CSS?

+ +

CSS é uma linguagem que especifica como os documentos são apresentados aos usuários.

+ +

Um documento é uma coleção de informações estruturadas utilizando uma linguagem de marcação.

+ + + + + + + + +
Exemplos
+
    +
  • Uma página da Web como esta é um documento.
    + As informações que você vê em uma página da Web, geralmente, é estruturada utilizando a linguagem de marcação HTML (HyperText Markup Language - Linguagem de Marcação de Hiper Texto).
    • +
+ +
    +
  • Uma caixa de diálogo em um aplicativo Mozilla é um documento.
    + A interface com o usuário controla o que aparece em uma caixa de diálogo Mozilla, que é estruturada utilizando a linguagem de marcação XUL (XML User-interface Language - Linguagem de Interface do Usuário XML).
    • +
+
+ +

Neste tutorial, os quadros entitulados Mais detalhes como este logo abaixo, contêm informações opcionais. Se você está com pressa para progredir no tutorial, você pode ignorar esses quadros, retornando para lê-los posteriormente. Caso contrário, leia-os ao encontrá-los, e talvez siga os links para aprender mais.

+ + + + + + + + +
Mais detalhes
+

Um documento não é igual a um arquivo. Ele pode ou não ser armazenado em um arquivo.

+ +

Por exemplo, o documento que você está lendo agora não está armazendo em um arquivo. Quando seu navegador da Web solicita esta página, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. Entretanto, neste tutorial você vai trabalhar com documentos que estão armazenados em arquivos.

+ +

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste Web site — por exemplo:

+ + + + + + + + + + + + + + + + + + + + +
HTMLpara páginas da Web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces com o usuário no Mozilla
+ +

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

+
+ +

Apresentar um documento a um usuário significa convertê-lo para uma forma que humanos possam usá-lo. O Mozilla é projetado para apresentar documentos visualmente — por exemplo, em uma tela de computador, projetor ou impressora.

+ + + + + + + + +
Mais detalhes
CSS não serve apenas para navegadores e apresentação visual. Em uma terminologia formal de CSS, o programa que apresenta um documento ao usuário é chamado de agente usuário (UA - User Agent). Um navegador é apenas um tipo de UA. Entretanto, na Parte I deste tutorial você irá trabalhar apenas com CSS em um navegador. +

Para mais definições formais de terminologia sobre CSS, consulte Definitions na CSS Specification.

+
+ +

Ação: Criando um documento

+ +

Utilize seu computador para criar um novo diretório e um novo arquivo de texto dentro dele. O arquivo irá conter seu documento.

+ +

Copie e cole o código HTML mostrado abaixo. Salve o arquivo utilizando o nome doc1.html

+ +
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<html>
+  <head>
+  <title>Documento de amostra</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
+
+ +

Em seu navegador, abra uma aba ou uma nova janela, e abra o arquivo do diretório.

+ +

Você deve ver o texto com as iniciais em negrito, conforme abaixo:

+ + + + + + + +
Cascading Style Sheets
+ +

O que você vê em seu navegador pode não ser exatamente como o exibido aqui, por causa das configurações de seu navegador e deste wiki. Se houver diferenças na fonte, espaçamento ou cor, não há importância.

+ +

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.

+ +

Seu documento ainda não utiliza CSS. Na página a seguir você utilizará CSS para especificar o estilo: Porque usar CSS

+ +

{{Next("CSS:Como começar:Porque usar CSS")}}

diff --git a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html new file mode 100644 index 0000000000..2adc531924 --- /dev/null +++ b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html @@ -0,0 +1,111 @@ +--- +title: Porque usar CSS +slug: Web/CSS/Como_começar/Porque_usar_CSS +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}

+ +

Esta página explica porque os documentos usam CSS. Você usa CSS para adicionar uma folha de estilo ao seu documento de amostra.

+ +

Informações: Por que usar CSS?

+ +

CSS ajuda a manter o conteúdo das informações de um documento separado dos detalhes de como exibí-lo. Os detalhes de como exibir o documento são conhecidos como estilo. Você mantém o estilo separado do conteúdo, de modo que você pode:

+ + + + + + + + + + +
Exemplo
Seu Web site pode ter milhares de páginas similares. Utilizando CSS, você armazena as informações em arquivos comuns que todas as páginas compartilham. +

Quando um usuário exibe uma página da Web, o navegador do usuário carrega as informações de estilo junto com o conteúdo da página.

+ +

Quando um usuário imprime uma página da Web, você fornece informações de estilo diferentes que tornam a página impressa mais fácil de ler.

+
+ +

Geralmente, com CSS, você utiliza a linguagem de marcação para descrever o conteúdo das informações do documento, não seu estilo. Você utiliza CSS para especificar o estilo, não o conteúdo. (Posteriormente neste tutorial, você verá algumas exceções deste método.)

+ + + + + + + + +
Mais detalhes
Uma linguagem de marcação, como o HTML, também fornece alguns modos de especificar o estilo. +

Por exemplo, em HTML, você pode usar uma tag <b> para tornar o texto negrito, e você pode especificar a cor do segundo plano de uma página na tag <body>.

+ +

Ao utilizar CSS, você normalmente evita utilizar esses recursos da linguagem de marcação para que todas as informações de estilo de seu documento estejam em um só lugar.

+
+ +

Ação: Criando uma folha de estilo

+ +

Crie outro arquivo de texto no mesmo diretório do anterior. Este arquivo será sua folha de estilo. Nomeie-o como: style1.css

+ +

Em seu arquivo CSS, copie e cole esta única linha, então salve o arquivo:

+ +
+
strong {color: red;}
+
+
+ +

Ligando seu documento à sua folha de estilo

+ +

Para ligar seu documento com sua folha de estilo, edite seu aquivo HTML. Adicione a linha mostrada aqui em negrito:

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Documento de amostra</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P>
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+ +

Salve o arquivo e atualize a tela do seu navegador. A folha de estilo fez as letras iniciais aparecerem em vermelha, como isto:

+ + + + + + + +
Cascading Style Sheets
+ + + + + + + + +
Desafio
Além do vermelho, CSS permite algumas outras cores com nomes. +

Sem olhar um referência, ache mais cinco nomes de cores que trabalham em sua folha de estilo.

+
+ +

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.

+ +

Agora você tem um documento de amostra ligado a uma folha de estilo separada, você está pronto para ler mais sobre como seu navegador combina-os quando exibe o documento na tela: Como o CSS trabalha.

+ +

{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}

-- cgit v1.2.3-54-g00ecf