chore(i18n,curriculum): update translations (#42659)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: Specify How Fonts Should Degrade
|
||||
title: O que fazer quando uma tipografia não estiver disponível
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
@ -9,11 +9,11 @@ dashedName: specify-how-fonts-should-degrade
|
||||
|
||||
# --description--
|
||||
|
||||
There are several default fonts that are available in all browsers. These generic font families include `monospace`, `serif` and `sans-serif`.
|
||||
Por padrão, existem várias tipografias disponíveis em todos os navegadores. As tipografias padrão são: `monospace`, `serif` e `sans-serif`.
|
||||
|
||||
When one font isn't available, you can tell the browser to "degrade" to another font.
|
||||
Quando uma tipografia não estiver disponível, você pode dizer ao navegador para usar outra tipografia.
|
||||
|
||||
For example, if you wanted an element to use the `Helvetica` font, but degrade to the `sans-serif` font when `Helvetica` isn't available, you will specify it as follows:
|
||||
Por exemplo, se um elemento usa a tipografia `Helvetica`, mas você quer que ele use `sans-serif` quando a `Helvetica` não estiver disponível, você pode fazer assim:
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -21,19 +21,19 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
|
||||
O nome dessas tipografias não diferenciam maiúsculas de minúsculas. Além disso, eles não precisam de aspas porque são palavras-chave do CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To begin, apply the `monospace` font to the `h2` element, so that it now has two fonts - `Lobster` and `monospace`.
|
||||
Para começar, aplique a tipografia `monospace` ao elemento `h2`, fazendo com que o elemento tenha duas tipografias - `Lobster` e `monospace`.
|
||||
|
||||
In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font.
|
||||
No desafio anterior, você importou a tipografia `Lobster` usando a tag `link`. Comente a importação da tipografia `Lobster` (usando os comentários HTML que você aprendeu antes) do Google Fonts para que ela não esteja mais disponível. Note como o elemento `h2` muda para a tipografia `monospace`.
|
||||
|
||||
**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font.
|
||||
**Observação:** se você tiver a tipografia `Lobster` instalada em seu computador, não verá a mudança porque seu navegador é capaz de encontrá-la.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your h2 element should use the font `Lobster`.
|
||||
O elemento h2 deve usar a tipografia `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your h2 element should degrade to the font `monospace` when `Lobster` is not available.
|
||||
O elemento h2 deve mudar para a tipografia `monospace` quando `Lobster` não estiver disponível.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,13 +53,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should comment out your call to Google for the `Lobster` font by putting `<!--` in front of it.
|
||||
Você deve comentar a importação da tipografia `Lobster` usando `<!--`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
You should close your comment by adding `-->`.
|
||||
Você deve fechar o comentário usando `-->`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
@ -141,9 +141,9 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -158,7 +158,7 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: Style Multiple Elements with a CSS Class
|
||||
title: Estilizar vários elementos com apenas uma classe CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
@ -9,29 +9,29 @@ dashedName: style-multiple-elements-with-a-css-class
|
||||
|
||||
# --description--
|
||||
|
||||
Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your `red-text` class to the first `p` element.
|
||||
As classes permitem que você use os mesmos estilos CSS em diferentes elementos HTML. Você pode ver isso aplicando a classe `red-text` ao primeiro elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should be red.
|
||||
O elemento `h2` deve ser vermelho.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `red-text`.
|
||||
O elemento `h2` deve ter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your first `p` element should be red.
|
||||
O primeiro elemento `p` deve ser vermelho.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your second and third `p` elements should not be red.
|
||||
O segundo e terceiro elementos `p` não devem ser vermelhos.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your first `p` element should have the class `red-text`.
|
||||
O primeiro elemento `p` deve ter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
@ -102,9 +102,9 @@ assert($('p:eq(0)').hasClass('red-text'));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -119,7 +119,7 @@ assert($('p:eq(0)').hasClass('red-text'));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: Style the HTML Body Element
|
||||
title: Estilizar o elemento HTML body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
@ -9,15 +9,15 @@ dashedName: style-the-html-body-element
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's start fresh and talk about CSS inheritance.
|
||||
Vamos começar do início e falar sobre o conceito de herança dentro do CSS.
|
||||
|
||||
Every HTML page has a `body` element.
|
||||
Toda página HTML possui um elemento `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
We can prove that the `body` element exists here by giving it a `background-color` of black.
|
||||
Podemos provar que o elemento `body` existe aqui definindo a propriedade `background-color` com o valor black (preto).
|
||||
|
||||
We can do this by adding the following to our `style` element:
|
||||
Para fazer isso, adicione ao elemento `style` o seguinte código:
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -27,13 +27,13 @@ body {
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` element should have the `background-color` of black.
|
||||
O elemento `body` deve ter a propriedade `background-color` com o valor de preto (black).
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your CSS rule should be properly formatted with both opening and closing curly brackets.
|
||||
O código CSS deve ser formatado corretamente, contendo chaves de abertura e fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -41,7 +41,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your CSS rule should end with a semi-colon.
|
||||
A declaração do estilo CSS deve terminar com um ponto e vírgula.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Understand Absolute versus Relative Units
|
||||
title: Diferenças entre unidades absolutas e relativas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
@ -9,21 +9,21 @@ dashedName: understand-absolute-versus-relative-units
|
||||
|
||||
# --description--
|
||||
|
||||
The last several challenges all set an element's margin or padding with pixels (`px`). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to `px`, CSS has a number of different length unit options that you can use.
|
||||
Todos os últimos desafios definiram a margem ou preenchimento de um elemento usando pixels (`px`). Pixels são um tipo de unidade de comprimento, que informa ao navegador como dimensionar ou espaçar um item. Além do `px`, o CSS possui outras opções de unidades de comprimento que você pode usar.
|
||||
|
||||
The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, `in` and `mm` refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
|
||||
Os dois principais tipos de unidades de comprimento são: absoluto e relativo. As unidades absolutas estão vinculadas às unidades físicas de comprimento. Por exemplo, `in` e `mm` referem-se a polegadas e milímetros, respectivamente. As unidades de comprimento absoluto aproximam-se da medida real em uma tela, mas existem algumas diferenças dependendo da resolução da tela.
|
||||
|
||||
Relative units, such as `em` or `rem`, are relative to another length value. For example, `em` is based on the size of an element's font. If you use it to set the `font-size` property itself, it's relative to the parent's `font-size`.
|
||||
Unidades relativas, como `em` ou `rem`, são relativas a outro valor de comprimento. Por exemplo, `em` é baseado no tamanho da tipografia de um elemento. Se você usá-la para definir o valor da propriedade `font-size`, esse valor será relativo a propriedade `font-size` do elemento pai.
|
||||
|
||||
**Note:** There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
|
||||
**Observação:** existem diversas unidades do tipo relativo que são vinculadas ao tamanho da janela do navegador (viewport). Elas serão abordadas na seção Princípios de Web Design Responsivo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `padding` property to the element with class `red-box` and set it to `1.5em`.
|
||||
No elemento que possui a classe `red-box`, adicione a propriedade `padding` com o valor `1.5em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `red-box` class should have a `padding` property.
|
||||
A classe `red-box` deve ter a propriedade `padding`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `red-box` class should give elements 1.5em of `padding`.
|
||||
A classe `red-box` deve dar aos elementos 1.5em de `padding`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: Use a CSS Class to Style an Element
|
||||
title: Usar uma classe para definir o estilo de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
@ -9,9 +9,9 @@ dashedName: use-a-css-class-to-style-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Classes are reusable styles that can be added to HTML elements.
|
||||
As classes são declarações de estilos que podem ser reutilizadas em elementos HTML.
|
||||
|
||||
Here's an example CSS class declaration:
|
||||
Aqui está um exemplo de como criar uma classe CSS:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -21,35 +21,35 @@ Here's an example CSS class declaration:
|
||||
</style>
|
||||
```
|
||||
|
||||
You can see that we've created a CSS class called `blue-text` within the `<style>` tag. You can apply a class to an HTML element like this: `<h2 class="blue-text">CatPhotoApp</h2>`. Note that in your CSS `style` element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.
|
||||
Você pode ver que criamos uma classe CSS chamada `blue-text` dentro da tag `<style>`. Você pode aplicar uma classe a um elemento HTML da seguinte forma: `<h2 class="blue-text">CatPhotoApp</h2>`. Observe que no elemento `style` o nome da classe começa com um ponto. Já no atributo de classe do elemento HTML, o nome da classe não inclui o ponto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Inside your `style` element, change the `h2` selector to `.red-text` and update the color's value from `blue` to `red`.
|
||||
Dentro do elemento `style`, altere o seletor `h2` para `.red-text` e atualize o valor da cor de `blue` para `red`.
|
||||
|
||||
Give your `h2` element the `class` attribute with a value of `red-text`.
|
||||
Dê ao elemento `h2` o atributo `class` com o valor de `red-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should be red.
|
||||
O elemento `h2` deve ser vermelho.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `red-text`.
|
||||
O elemento `h2` deve ter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your stylesheet should declare a `red-text` class and have its color set to `red`.
|
||||
No código CSS, declare uma classe `red-text` e defina a cor como `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
You should not use inline style declarations like `style="color: red"` in your `h2` element.
|
||||
Você não deve usar declarações de estilo inline como, por exemplo, `style="color: red"` no elemento `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
@ -111,9 +111,9 @@ assert($('h2').attr('style') === undefined);
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -128,7 +128,7 @@ assert($('h2').attr('style') === undefined);
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: Use a custom CSS Variable
|
||||
title: Usar variáveis CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
@ -9,21 +9,21 @@ dashedName: use-a-custom-css-variable
|
||||
|
||||
# --description--
|
||||
|
||||
After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
|
||||
Depois de criar a variável, você pode atribuir o valor dela a outras propriedades CSS, referenciando o nome que você deu a ela.
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
This will change the background of whatever element you are targeting to gray because that is the value of the `--penguin-skin` variable. Note that styles will not be applied unless the variable names are an exact match.
|
||||
O código acima mudará o fundo de qualquer elemento para cinza, porque esse é o valor da variável `--penguin-skin`. Tenha em mente que os estilos não serão aplicados a menos que o nome da variável que está sendo chamada seja igual ao nome da variável declarada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Apply the `--penguin-skin` variable to the `background` property of the `penguin-top`, `penguin-bottom`, `right-hand` and `left-hand` classes.
|
||||
Aplique a variável `--penguin-skin` à propriedade `background` das classes `penguin-top`, `penguin-bottom`, `right-hand` e `left-hand`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `right-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `left-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: Use a media query to change a variable
|
||||
title: Usar media queries para mudar o valor de uma variável
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
@ -9,17 +9,17 @@ dashedName: use-a-media-query-to-change-a-variable
|
||||
|
||||
# --description--
|
||||
|
||||
CSS Variables can simplify the way you use media queries.
|
||||
As variáveis CSS podem simplificar o modo como você usa media queries.
|
||||
|
||||
For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
|
||||
Por exemplo, quando sua tela for menor ou maior do que o media query definido, você pode alterar o valor de uma variável e ela aplicará o estilo atribuído a ela onde quer que ela seja usada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `:root` selector of the `media query`, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
|
||||
Dentro da `media query` existe um seletor `:root`. Mude-o de forma que a variável `--penguin-size` seja redefinida e receba o valor de `200px`. Além disso, redefina a variável `--penguin-skin` e atribua a ela o valor `black`. Em seguida, redimensione a tela de visualização para ver a mudança.
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root` should reassign the `--penguin-size` variable to `200px`.
|
||||
`:root` deve reatribuir o valor da variável `--penguin-size` para `200px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`:root` should reassign the `--penguin-skin` variable to `black`.
|
||||
`:root` deve reatribuir o valor da variável `--penguin-skin` para `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: Use Attribute Selectors to Style Elements
|
||||
title: Usar seletores de atributo para estilizar elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
@ -9,11 +9,11 @@ dashedName: use-attribute-selectors-to-style-elements
|
||||
|
||||
# --description--
|
||||
|
||||
You have been adding `id` or `class` attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.
|
||||
Você tem adicionado atributos de `id` ou `class` aos elementos que você deseja especificamente estilizar. Eles são conhecidos como ID e seletores de classe. Existem outros seletores CSS que você pode usar para selecionar grupos de elementos para estilizar.
|
||||
|
||||
Let's bring out CatPhotoApp again to practice using CSS Selectors.
|
||||
Vamos usar o CatPhotoApp novamente para praticar o uso de seletores CSS.
|
||||
|
||||
For this challenge, you will use the `[attr=value]` attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute `type` and a corresponding value of `radio`:
|
||||
Para este desafio, você usará o seletor de atributo `[attr=value]` para estilizar as caixas de seleção (checkboxes) no CatPhotoApp. Este seletor busca e estiliza elementos que possuam um atributo e valor específico. Por exemplo, o código abaixo altera as margens de todos os elementos com o atributo `type` que possua o valor `radio`:
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
@ -23,11 +23,11 @@ For this challenge, you will use the `[attr=value]` attribute selector to style
|
||||
|
||||
# --instructions--
|
||||
|
||||
Using the `type` attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px.
|
||||
Selecione todo elemento que possua o atributo `type` e tente dar às caixas de seleção no CatPhotoApp uma margem superior de 10px e uma margem inferior de 15px.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `type` attribute selector should be used to select the checkboxes.
|
||||
Você deve selecionar as caixas de seleção (checkboxes) usando o seletor de atributo do tipo `type`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The top margins of the checkboxes should be 10px.
|
||||
As margens superiores das caixas de seleção devem ter 10px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The bottom margins of the checkboxes should be 15px.
|
||||
As margens inferiores das caixas de seleção devem ter 15px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -179,9 +179,9 @@ assert(
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -196,7 +196,7 @@ assert(
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: Use Clockwise Notation to Specify the Margin of an Element
|
||||
title: Usar a notação no sentido horário para especificar a margem de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
@ -9,47 +9,47 @@ dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Let's try this again, but with `margin` this time.
|
||||
Vamos tentar de novo, mas com `margin` desta vez.
|
||||
|
||||
Instead of specifying an element's `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties individually, you can specify them all in one line, like this:
|
||||
Em vez de especificar as propriedades `margin-top`, `margin-right`, `margin-bottom`, e `margin-left` individualmente, você pode especificá-las todas em uma linha, como esta:
|
||||
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
|
||||
Esses quatro valores funcionam como em um relógio: acima, à direita, abaixo, à esquerda. Eles produzirão exatamente o mesmo resultado como quando usamos as propriedades específicas para cada margem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Clockwise Notation to give the element with the `blue-box` class a margin of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
Use a notação no sentido horário para dar ao elemento com a classe `blue-box` uma margem de `40px` nos lados superior e esquerdo, mas apenas `20px` nos lados inferior e direito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give the top of elements `40px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) superior de `40px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the right of elements `20px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) à direita de `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the bottom of elements `20px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) inferior de `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the left of elements `40px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) à esquerda de `40px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
You should use the clockwise notation to set the margin of `blue-box` class.
|
||||
Você deve usar a notação no sentido horário para definir a margem da classe `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: Use Clockwise Notation to Specify the Padding of an Element
|
||||
title: Usar a notação de sentido horário para especificar o preenchimento (padding) de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
@ -9,45 +9,45 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of specifying an element's `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties individually, you can specify them all in one line, like this:
|
||||
Em vez de especificar as propriedades `padding-top`, `padding-right`, `padding-bottom` e `padding-left` individualmente, você pode especificar todas elas em uma única linha, assim:
|
||||
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
|
||||
Esses quatro valores funcionam como em um relógio: acima, à direita, abaixo, à esquerda. Eles produzirão exatamente o mesmo resultado como quando usamos as propriedades específicas para cada preenchimento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
Use a notação no sentido horário para dar à classe `.blue-box` um preenchimento (`padding`) de `40px` nos lados superior e esquerdo, mas apenas `20px` nos lados inferior e direito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give the top of elements `40px` of `padding`.
|
||||
A classe `blue-box` deve dar `40px` de preenchimento (`padding`) no lado superior dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the right of elements `20px` of `padding`.
|
||||
A classe `blue-box` deve dar `20px` de preenchimento (`padding`) no lado direito dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the bottom of elements `20px` of `padding`.
|
||||
A classe `blue-box` deve dar `20px` de preenchimento (`padding`) no lado inferior dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the left of elements `40px` of `padding`.
|
||||
A classe `blue-box` deve dar `40px` de preenchimento (`padding`) no lado esquerdo dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
You should use the clockwise notation to set the padding of `blue-box` class.
|
||||
Você deve usar a notação no sentido horário para definir o padding dos elementos da classe `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: Use CSS Variables to change several elements at once
|
||||
title: Usar variáveis CSS para alterar vários elementos de uma só vez
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
@ -9,17 +9,17 @@ dashedName: use-css-variables-to-change-several-elements-at-once
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>CSS Variables</dfn> are a powerful way to change many CSS style properties at once by changing only one value.
|
||||
As <dfn>variáveis CSS</dfn> são uma maneira poderosa de alterar várias propriedades no CSS ao mesmo tempo alterando apenas um valor.
|
||||
|
||||
Follow the instructions below to see how changing just three values can change the styling of many elements.
|
||||
Siga as instruções abaixo para ver como a alteração de apenas três valores podem alterar o estilo de muitos elementos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `penguin` class, change the `black` value to `gray`, the `gray` value to `white`, and the `yellow` value to `orange`.
|
||||
Na classe `penguin`, altere o valor `black` para `gray`, o valor `gray` para `white` e o valor `yellow` para `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
|
||||
A classe `penguin` deve declarar a variável `--penguin-skin` e atribuí-la ao valor `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class should declare the `--penguin-belly` variable and assign it to `white`.
|
||||
A classe `penguin` deve declarar a variável `--penguin-belly` e atribuí-la ao valor `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class should declare the `--penguin-beak` variable and assign it to `orange`.
|
||||
A classe `penguin` deve declarar a variável `--penguin-beak` e atribuí-la ao valor `orange`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: Use Hex Code to Mix Colors
|
||||
title: Usar código hexadecimal para misturar cores
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
@ -9,67 +9,67 @@ dashedName: use-hex-code-to-mix-colors
|
||||
|
||||
# --description--
|
||||
|
||||
To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.
|
||||
Para revisar, os códigos hexadecimais usam 6 dígitos hexadecimais para representar as cores, dois para cada componente vermelho (R), verde (G) e azul (B).
|
||||
|
||||
From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!
|
||||
A partir dessas três cores puras (vermelho, verde e azul), podemos variar as quantidades de cada uma para criar mais de 16 milhões de outras cores!
|
||||
|
||||
For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being `#FFA500`.
|
||||
Por exemplo, laranja é vermelho puro, misturado com um pouco de verde e sem azul. Em código hexadecimal, essa cor se traduz em `#FFA500`.
|
||||
|
||||
The digit `0` is the lowest number in hex code, and represents a complete absence of color.
|
||||
O dígito `0` é o número mais baixo em código hexadecimal e representa uma ausência completa de cor.
|
||||
|
||||
The digit `F` is the highest number in hex code, and represents the maximum possible brightness.
|
||||
O dígito `F` é o número mais alto em código hexadecimal e representa o brilho máximo possível.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Replace the color words in our `style` element with their correct hex codes.
|
||||
Substitua as palavras que representam cores no elemento `style` por seus códigos hexadecimais corretos.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
<table class='table table-striped'><tbody><tr><th>Cor</th><th>Código hexadecimal</th></tr><tr><td>Azul dodger</td><td><code>#1E90FF</code></td></tr><tr><td>Verde</td><td><code>#00FF00</code></td></tr><tr><td>Laranja</td><td><code>#FFA500</code></td></tr><tr><td>Vermelho</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element with the text `I am red!` should be given the `color` red.
|
||||
O elemento `h1` com o texto `I am red!` deve receber a propriedade `color` com um valor de vermelho.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color red should be used instead of the word `red`.
|
||||
O código hexadecimal (`hex code`) para a cor vermelha deve ser usado em vez da palavra `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am green!` should be given the `color` green.
|
||||
O elemento `h1` com o texto `I am green!` deve receber a propriedade `color` com um valor de verde.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color green should be used instead of the word `green`.
|
||||
O código hexadecimal (`hex code`) para a cor verde deve ser usado em vez da palavra `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
|
||||
O elemento `h1` com o texto `I am dodger blue!` deve receber a propriedade `color` com um valor de azul dodger.
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
|
||||
O código hexadecimal (`hex code`) para a cor azul dodger deve ser usado em vez da palavra `dodgerblue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am orange!` should be given the `color` orange.
|
||||
O elemento `h1` com o texto `I am orange!` deve receber a propriedade `color` com um valor de laranja.
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color orange should be used instead of the word `orange`.
|
||||
O código hexadecimal (`hex code`) para a cor laranja deve ser usado em vez da palavra `orange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: Use RGB values to Color Elements
|
||||
title: Usar valores RGB para colorir elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
@ -9,25 +9,25 @@ dashedName: use-rgb-values-to-color-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Another way you can represent colors in CSS is by using `RGB` values.
|
||||
Outra maneira de representar cores em CSS é usando valores `RGB`.
|
||||
|
||||
The `RGB` value for black looks like this:
|
||||
O valor `RGB` para cor preta é assim:
|
||||
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
The `RGB` value for white looks like this:
|
||||
O valor `RGB` para cor branca é assim:
|
||||
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
Instead of using six hexadecimal digits like you do with hex code, with `RGB` you specify the brightness of each color with a number between 0 and 255.
|
||||
Em vez de usar seis dígitos hexadecimais como você usa com código hexadecimal com `RGB`, você especifica o brilho de cada cor com um número entre 0 e 255.
|
||||
|
||||
If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So `RGB`, which starts counting from zero, has the exact same number of possible values as hex code.
|
||||
Se fizer as contas, os dois dígitos para uma cor são iguais a 16 vezes 16, o que nos dá um total de 256 valores. Então, `RGB`, que começa a contar de zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.
|
||||
|
||||
Here's an example of how you'd change the `body` background to orange using its RGB code.
|
||||
Aqui está um exemplo de como você alteraria o fundo da `body` para laranja usando código RGB.
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -37,17 +37,17 @@ body {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Let's replace the hex code in our `body` element's background color with the RGB value for black: `rgb(0, 0, 0)`
|
||||
Vamos substituir o código hexadecimal na cor de fundo do elemento `body` pelo valor RGB de preto: `rgb(0, 0, 0)`
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` element should have a black background.
|
||||
O elemento `body` deve ter um fundo preto.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
You should use `rgb` to give your `body` element a background of black.
|
||||
Você deve usar `rgb` para dar ao elemento `body` um fundo preto.
|
||||
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
|
||||
Reference in New Issue
Block a user