From c32682b053bad2602a8c910cc7e4106acaefade1 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 18 Mar 2022 00:13:02 +0000 Subject: [CRON] sync translated content --- files/pt-br/_redirects.txt | 1 + files/pt-br/_wikihistory.json | 2 +- .../styling_a_biography_page/index.html | 97 ++++++++++++++++++++++ .../using_your_new_knowledge/index.html | 96 --------------------- 4 files changed, 99 insertions(+), 97 deletions(-) create mode 100644 files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html delete mode 100644 files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html (limited to 'files/pt-br') diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index e5c5f6508b..19211a793a 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -381,6 +381,7 @@ /pt-BR/docs/Learn/CSS/First_steps/Como_CSS_e_estruturado /pt-BR/docs/Learn/CSS/First_steps/How_CSS_is_structured /pt-BR/docs/Learn/CSS/First_steps/Iniciando /pt-BR/docs/Learn/CSS/First_steps/Getting_started /pt-BR/docs/Learn/CSS/First_steps/O_que_e_CSS /pt-BR/docs/Learn/CSS/First_steps/What_is_CSS +/pt-BR/docs/Learn/CSS/First_steps/Using_your_new_knowledge /pt-BR/docs/Learn/CSS/First_steps/Styling_a_biography_page /pt-BR/docs/Learn/CSS/Howto/CSS_Perguntas_Frequentes /pt-BR/docs/Learn/CSS/Howto/CSS_FAQ /pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona /pt-BR/docs/Learn/Common_questions/How_does_the_Internet_work /pt-BR/docs/Learn/Common_questions/Como_configurar_um_servidor_de_testes_local /pt-BR/docs/Learn/Common_questions/set_up_a_local_testing_server diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index a16a54abbc..034ab18fb7 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -1372,7 +1372,7 @@ "cirogomes58" ] }, - "Learn/CSS/First_steps/Using_your_new_knowledge": { + "Learn/CSS/First_steps/Styling_a_biography_page": { "modified": "2020-07-16T22:28:04.939Z", "contributors": [ "LuisFreitas1" diff --git a/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html b/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html new file mode 100644 index 0000000000..ece978c757 --- /dev/null +++ b/files/pt-br/learn/css/first_steps/styling_a_biography_page/index.html @@ -0,0 +1,97 @@ +--- +title: Using your new knowledge +slug: Learn/CSS/First_steps/Styling_a_biography_page +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Com o que você aprendeu nas últimas lições, você deve perceber que pode formatar simples documentos de texto utilizando CSS, implementado seu próprio estilo neles. Esta avaliação lhe dá a oportunidade de fazer exatamente isto.

+ + + + + + + + + + + + +
Pré-requisitos:Antes de tentar esta avaliação você deve ter passado pelo resto do módulo básico de CSS, além de também possuir uma compreensão básica de HTML (estude Introdução ao HTML).
Objetivo:Trabalhar um pouco de CSS e testar seus novos conhecimentos.
+ +

Ponto de partida

+ +

Você pode trabalhar com editor ao vivo abaixo, ou pode fazer o download do ponto de partida para trabalhar em seu próprio editor de texto. Esta é uma única página de HTML, além do ponto de partida no head do documento. Se preferir, você pode transferir este CSS para um arquivo separado quando criar o exemplo no seu computador. Ou ainda, você pode utilizar uma ferramenta online como por exemplo, o CodePen, jsFiddle, ou Glitch para realizar estas tarefas..

+ +
+

Nota: Se ficar emperrado,  nos procure por ajuda — veja a seção Assessment or further help no final da página.

+
+ +

Trabalhando com CSS

+ +

O seguite exemplo mostra uma biografia, o qual foi estilizado com CSS. As propriedades CSS que eu usei foram as mencionadas abaixo — cada uma está lincada a sua página de propriedades em MDN, a qual dará mais exemplos do uso dela.

+ + + +

Eu usei uma mistura de seletores, estilizando elementos como h1 e h2, mas também criando uma classe para o título da profissão e estilizando ela.

+ +

Use CSS para mudar como esta biografia aparece, alterando valores das propriedades que eu utilizei.

+ +
    +
  1. Faça o cabeçalho rosa, usando a chave de cor CSS hotpink.
    2. +
  2. Dê ao cabeçalho um pontilhado de tamanho 10px {{cssxref("border-bottom")}} e que utiliza a chave de cor CSS  purple.
    3. +
  3. Faça o cabeçalho nível 2 em itálico.
    4. +
  4. Dê ao ul usado para informações de contato uma {{cssxref("background-color")}} #eeeeee, e uma {{cssxref("border")}}  roxa sólida com de tamanho 5px. Implemente um {{cssxref("padding")}} para empurrar o conteúdo para longe da borda.
    5. +
  5. Torne os links verdes ao passar o mouse por cima deles.
    6. +
+ +

Você deve acabar com algo parecido com esta imagem.

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Após isto, tente pesquisar algumas propriedades não mencionadas nesta página em MDN CSS referências e se aventure!

+ +

Lembre-se de que não há resosta errada aqui — neste momento de seu aprendizado, você pode se dar ao luxo de de se divertir um pouco.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Assessment or further help

+ +

Se gostaria de ter seu trabalho avaliado, ou se ficou emperrado e gostaria de ajuda:

+ +
    +
  1. Coloque seu trabalho num editor de texto compartilhado online tal como o CodePen, jsFiddle, ou Glitch.
    2. +
  2. Escreva um post perguntando por avaliação e/ou ajuda em MDN Discourse forum Learning category. Seu post deve incluir: +
      +
    • Um título descritivo, tal como "Avaliação desejada para primeiros passos em CSS".
      • +
    • Detalhes do que você já tentou, e o que gostaria que  ós fizéssemos, p.e. se você está emperrado e precisa de ajuda, ou se deseja uma avalição.
      • +
    • Um link para o exemplo que você deseja ser avaliadao ou precisa de ajuda, em um editor online compartilhado (como mencionado no passo 1 acima). Esta é uma boa prática a se desenvolver — é muito difícil ajudar alguém com um problema de computação se não é possível ver o código dessa pessoa.
      • +
    • Um link para a atual págia de tarefa ou avaliaçãopara que possamos ver a questão que você está com dúvida.
      • +
    +
    3. +
+ +

O que vem a seguir?

+ +

Parabéns por terminar seu primeiro módulo. Agora você deve ter uma boa compreensão geral de CSS, e ser capaz de entender boa parte do que acontece numa folha de estilos. No próximo módulo, CSS building blocks, iremos dar uma olhada com mais profundidade em várias áreas chave.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Neste módulo

+ +
    +
  1. O que é CSS?
    2. +
  2. Começando com CSS
    3. +
  3. Como o CSS é estruturado
    4. +
  4. Como o CSS funciona
    5. +
  5. Utilizando seu novo conhecimento
    6. +
diff --git a/files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html b/files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 848524cba3..0000000000 --- a/files/pt-br/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Using your new knowledge -slug: Learn/CSS/First_steps/Using_your_new_knowledge -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Com o que você aprendeu nas últimas lições, você deve perceber que pode formatar simples documentos de texto utilizando CSS, implementado seu próprio estilo neles. Esta avaliação lhe dá a oportunidade de fazer exatamente isto.

- - - - - - - - - - - - -
Pré-requisitos:Antes de tentar esta avaliação você deve ter passado pelo resto do módulo básico de CSS, além de também possuir uma compreensão básica de HTML (estude Introdução ao HTML).
Objetivo:Trabalhar um pouco de CSS e testar seus novos conhecimentos.
- -

Ponto de partida

- -

Você pode trabalhar com editor ao vivo abaixo, ou pode fazer o download do ponto de partida para trabalhar em seu próprio editor de texto. Esta é uma única página de HTML, além do ponto de partida no head do documento. Se preferir, você pode transferir este CSS para um arquivo separado quando criar o exemplo no seu computador. Ou ainda, você pode utilizar uma ferramenta online como por exemplo, o CodePen, jsFiddle, ou Glitch para realizar estas tarefas..

- -
-

Nota: Se ficar emperrado,  nos procure por ajuda — veja a seção Assessment or further help no final da página.

-
- -

Trabalhando com CSS

- -

O seguite exemplo mostra uma biografia, o qual foi estilizado com CSS. As propriedades CSS que eu usei foram as mencionadas abaixo — cada uma está lincada a sua página de propriedades em MDN, a qual dará mais exemplos do uso dela.

- - - -

Eu usei uma mistura de seletores, estilizando elementos como h1 e h2, mas também criando uma classe para o título da profissão e estilizando ela.

- -

Use CSS para mudar como esta biografia aparece, alterando valores das propriedades que eu utilizei.

- -
    -
  1. Faça o cabeçalho rosa, usando a chave de cor CSS hotpink.
    2. -
  2. Dê ao cabeçalho um pontilhado de tamanho 10px {{cssxref("border-bottom")}} e que utiliza a chave de cor CSS  purple.
    3. -
  3. Faça o cabeçalho nível 2 em itálico.
    4. -
  4. Dê ao ul usado para informações de contato uma {{cssxref("background-color")}} #eeeeee, e uma {{cssxref("border")}}  roxa sólida com de tamanho 5px. Implemente um {{cssxref("padding")}} para empurrar o conteúdo para longe da borda.
    5. -
  5. Torne os links verdes ao passar o mouse por cima deles.
    6. -
- -

Você deve acabar com algo parecido com esta imagem.

- -

Screenshot of how the example should look after completing the assessment.

- -

Após isto, tente pesquisar algumas propriedades não mencionadas nesta página em MDN CSS referências e se aventure!

- -

Lembre-se de que não há resosta errada aqui — neste momento de seu aprendizado, você pode se dar ao luxo de de se divertir um pouco.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Assessment or further help

- -

Se gostaria de ter seu trabalho avaliado, ou se ficou emperrado e gostaria de ajuda:

- -
    -
  1. Coloque seu trabalho num editor de texto compartilhado online tal como o CodePen, jsFiddle, ou Glitch.
    2. -
  2. Escreva um post perguntando por avaliação e/ou ajuda em MDN Discourse forum Learning category. Seu post deve incluir: -
      -
    • Um título descritivo, tal como "Avaliação desejada para primeiros passos em CSS".
      • -
    • Detalhes do que você já tentou, e o que gostaria que  ós fizéssemos, p.e. se você está emperrado e precisa de ajuda, ou se deseja uma avalição.
      • -
    • Um link para o exemplo que você deseja ser avaliadao ou precisa de ajuda, em um editor online compartilhado (como mencionado no passo 1 acima). Esta é uma boa prática a se desenvolver — é muito difícil ajudar alguém com um problema de computação se não é possível ver o código dessa pessoa.
      • -
    • Um link para a atual págia de tarefa ou avaliaçãopara que possamos ver a questão que você está com dúvida.
      • -
    -
    3. -
- -

O que vem a seguir?

- -

Parabéns por terminar seu primeiro módulo. Agora você deve ter uma boa compreensão geral de CSS, e ser capaz de entender boa parte do que acontece numa folha de estilos. No próximo módulo, CSS building blocks, iremos dar uma olhada com mais profundidade em várias áreas chave.

- -

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Neste módulo

- -
    -
  1. O que é CSS?
    2. -
  2. Começando com CSS
    3. -
  3. Como o CSS é estruturado
    4. -
  4. Como o CSS funciona
    5. -
  5. Utilizando seu novo conhecimento
    6. -
-- cgit v1.2.3-54-g00ecf