chore(i18n,curriculum): update translations (#42649)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Add a Negative Margin to an Element
|
||||
title: Adicionar margem negativa a um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
@ -9,19 +9,19 @@ dashedName: add-a-negative-margin-to-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
An element's `margin` controls the amount of space between an element's `border` and surrounding elements.
|
||||
A propriedade `margin` de um elemento controla a quantidade de espaço entre a borda (`border`) de um elemento e os elementos ao redor.
|
||||
|
||||
If you set an element's `margin` to a negative value, the element will grow larger.
|
||||
Se você definir a propriedade `margin` de um elemento com um valor negativo, o elemento ficará maior.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Try to set the `margin` to a negative value like the one for the red box.
|
||||
Tente definir a propriedade `margin` com um valor negativo como o da caixa vermelha.
|
||||
|
||||
Change the `margin` of the blue box to `-15px`, so it fills the entire horizontal width of the yellow box around it.
|
||||
Altere a propriedade `margin` da caixa azul para `-15px`, de modo a preencher toda a largura horizontal da caixa amarela ao redor.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give elements `-15px` of `margin`.
|
||||
O elemento de classe `blue-box` deve possuir a propriedade `margin` com o valor de `-15px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Add Borders Around Your Elements
|
||||
title: Adicionar bordas ao redor dos elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
@ -9,9 +9,9 @@ dashedName: add-borders-around-your-elements
|
||||
|
||||
# --description--
|
||||
|
||||
CSS borders have properties like `style`, `color` and `width`.
|
||||
Bordas CSS têm propriedades como `style`, `color` e `width`.
|
||||
|
||||
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
|
||||
Por exemplo, se quiséssemos criar uma borda vermelha de 5 pixels ao redor de um elemento HTML, poderíamos usar esta classe:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -25,9 +25,9 @@ For example, if we wanted to create a red, 5 pixel border around an HTML element
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a class called `thick-green-border`. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.
|
||||
Crie uma classe chamada `thick-green-border`. Esta classe deve adicionar uma borda sólida e verde de 10px ao redor de um elemento HTML. Por fim, aplique a classe na foto do gato.
|
||||
|
||||
Remember that you can apply multiple classes to an element using its `class` attribute, by separating each class name with a space. For example:
|
||||
Lembre-se de que você pode aplicar várias classes a um mesmo elemento usando o atributo `class`. Basta separar o nome de cada classe com um espaço em branco. Por exemplo:
|
||||
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
@ -35,19 +35,19 @@ Remember that you can apply multiple classes to an element using its `class` att
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `img` element should have the class `smaller-image`.
|
||||
O elemento `img` deve possuir a classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Your `img` element should have the class `thick-green-border`.
|
||||
O elemento `img` deve possuir a classe `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
Your image should have a border width of `10px`.
|
||||
A imagem deve possuir uma borda com a largura de `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,13 +57,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your image should have a border style of `solid`.
|
||||
A imagem deve possuir uma borda com o estilo `solid`.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
The border around your `img` element should be green.
|
||||
A borda ao redor do elemento `img` deve ser verde.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Add Different Margins to Each Side of an Element
|
||||
title: Adicionar diferentes margens a cada lado de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
@ -9,35 +9,35 @@ dashedName: add-different-margins-to-each-side-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you will want to customize an element so that it has a different `margin` on each of its sides.
|
||||
Às vezes, você pode querer personalizar um elemento para que ele tenha a propriedade `margin` diferente em cada um de seus lados.
|
||||
|
||||
CSS allows you to control the `margin` of all four individual sides of an element with the `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties.
|
||||
O CSS permite que você controle a propriedade `margin` de todos os quatro lados de um elemento com as seguintes propriedades: `margin-top`, `margin-right`, `margin-left` e `margin-bottom`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give the blue box a `margin` of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
No elemento de classe "blue-box", adicione a propriedade `margin` com um valor de `40px` em cima e no lado esquerdo. E apenas `20px` em baixo e no lado direito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give the top of elements `40px` of `margin`.
|
||||
A classe `blue-box` deve criar uma margem (`margin`) de `40px` acima do elemento.
|
||||
|
||||
```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 criar uma margem (`margin`) de `20px` à direita do elemento.
|
||||
|
||||
```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 criar uma margem (`margin`) de `20px` abaixo do elemento.
|
||||
|
||||
```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 criar uma margem (`margin` de `40px` à esquerda do elemento.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Add Different Padding to Each Side of an Element
|
||||
title: Adicionar diferentes preenchimentos a cada lado de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
@ -9,35 +9,35 @@ dashedName: add-different-padding-to-each-side-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you will want to customize an element so that it has different amounts of `padding` on each of its sides.
|
||||
Às vezes, você pode querer personalizar um elemento para que ele tenha a propriedade `padding` diferente em cada um de seus lados.
|
||||
|
||||
CSS allows you to control the `padding` of all four individual sides of an element with the `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties.
|
||||
O CSS permite que você controle a propriedade `padding` nos quatro lados de um elemento com as seguintes propriedades: `padding-top`, `padding-right`, `padding-left` e `padding-bottom`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give the blue box a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
Dê à caixa azul um preenchimento (`padding`) de `40px` em seus lados superior e esquerdo, mas apenas `20px` em seus lados inferior e direito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give the top of the elements `40px` of `padding`.
|
||||
A classe `blue-box` deve criar um preenchimento (`padding`) de `40px` acima do elemento.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the right of the elements `20px` of `padding`.
|
||||
A classe `blue-box` deve criar um preenchimento (`padding`) de `20px` à direita do elemento.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the bottom of the elements `20px` of `padding`.
|
||||
A classe `blue-box` deve criar um preenchimento (`padding`) de `20px` abaixo do elemento.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the left of the elements `40px` of `padding`.
|
||||
A classe `blue-box` deve criar um preenchimento (`padding`) de `40px` à esquerda do elemento.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Add Rounded Corners with border-radius
|
||||
title: Criar cantos arredondados em um elemento com border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
@ -9,23 +9,23 @@ dashedName: add-rounded-corners-with-border-radius
|
||||
|
||||
# --description--
|
||||
|
||||
Your cat photo currently has sharp corners. We can round out those corners with a CSS property called `border-radius`.
|
||||
Atualmente, a foto do gato possui bordas pontiagudas. Podemos arredondar essas bordas com uma propriedade do CSS chamada `border-radius`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
You can specify a `border-radius` with pixels. Give your cat photo a `border-radius` of `10px`.
|
||||
Você pode definir o valor da propriedade `border-radius` em pixels. Faça com com que a foto do gato tenha uma borda. Defina a propriedade `border-radius` com o valor de `10px`.
|
||||
|
||||
**Note:** This challenge allows for multiple possible solutions. For example, you may add `border-radius` to either the `.thick-green-border` class or the `.smaller-image` class.
|
||||
**Observação:** este desafio aceita mais de uma solução. Por exemplo, você pode adicionar `border-radius` tanto à classe `.thick-green-border` quanto à classe `.smaller-image`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your image element should have the class `thick-green-border`.
|
||||
A imagem deve ter a classe `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
Your image should have a border radius of `10px`.
|
||||
A imagem deve ter a propriedade border-radius com o valor de `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Adjust the Margin of an Element
|
||||
title: Ajustar a margem de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
@ -9,19 +9,19 @@ dashedName: adjust-the-margin-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
An element's `margin` controls the amount of space between an element's `border` and surrounding elements.
|
||||
A propriedade `margin` controla a quantidade de espaço entre a borda (`border`) de um elemento e os elementos ao redor.
|
||||
|
||||
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger `margin` than the blue box, making it appear smaller.
|
||||
Aqui, podemos ver que a caixa azul e a caixa vermelha estão aninhadas dentro da caixa amarela. Observe que a caixa vermelha tem uma `margin` maior do que a caixa azul, fazendo com que ela pareça menor.
|
||||
|
||||
When you increase the blue box's `margin`, it will increase the distance between its border and surrounding elements.
|
||||
Se você aumentar o valor da propriedade `margin` da caixa azul, a distância entre a borda e os elementos ao redor será maior.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `margin` of the blue box to match that of the red box.
|
||||
Altere a `margin` da caixa azul para que combine com a da caixa vermelha.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give elements `20px` of `margin`.
|
||||
A classe `blue-box` deve dar `20px` de `margin` aos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Adjust the Padding of an Element
|
||||
title: Ajustar o espaçamento de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
@ -9,25 +9,25 @@ dashedName: adjust-the-padding-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's put our Cat Photo App away for a little while and learn more about styling HTML.
|
||||
Agora vamos deixar nosso aplicativo Cat Photo de lado um pouco e aprender mais sobre como estilizar o HTML.
|
||||
|
||||
You may have already noticed this, but all HTML elements are essentially little rectangles.
|
||||
Talvez você já tenha percebido, mas todos os elementos HTML são, essencialmente, pequenos retângulos.
|
||||
|
||||
Three important properties control the space that surrounds each HTML element: `padding`, `border`, and `margin`.
|
||||
Existem três propriedades importantes que controlam o espaço ao redor de um elemento HTML: `padding`, `border` e `margin`.
|
||||
|
||||
An element's `padding` controls the amount of space between the element's content and its `border`.
|
||||
O preenchimento (`padding`) de um elemento controla a quantidade de espaço entre o conteúdo e a borda (`border`).
|
||||
|
||||
Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more `padding` than the blue box.
|
||||
Aqui, podemos ver que a caixa azul e a caixa vermelha estão aninhadas dentro da caixa amarela. Observe que a caixa vermelha possui mais preenchimento (`padding`) do que a caixa azul.
|
||||
|
||||
When you increase the blue box's `padding`, it will increase the distance (`padding`) between the text and the border around it.
|
||||
Quando você aumenta o `padding` da caixa azul, a distância/preenchimento (`padding`) entre o texto e a borda também aumenta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `padding` of your blue box to match that of your red box.
|
||||
Altere o `padding` da caixa azul para combinar com o da caixa vermelha.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give elements `20px` of `padding`.
|
||||
A classe `blue-box` deve criar no elemento um preenchimento (`padding`) de `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Attach a Fallback value to a CSS Variable
|
||||
title: Definir um valor reserva para uma variável CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
@ -9,25 +9,25 @@ dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
|
||||
# --description--
|
||||
|
||||
When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
|
||||
Ao usar uma variável como o valor de uma propriedade no CSS, você pode definir um valor reserva (fallback) que seu navegador usará se a variável for inválida.
|
||||
|
||||
**Note:** This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
|
||||
**Observação:** esse valor reserva não é utilizado para aumentar a compatibilidade do seu código entre navegadores e não funcionará no Internet Explorer. Em vez disso, ele é usado quando o navegador não encontra a variável.
|
||||
|
||||
Here's how you do it:
|
||||
Veja como você pode fazer isso:
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging.
|
||||
O exemplo acima fará com que a propriedade background (plano de fundo) tenha o valor `black` caso a variável não tenha sido definida. Perceba que isso pode ser útil para debugging (depuração).
|
||||
|
||||
# --instructions--
|
||||
|
||||
It looks like there is a problem with the variables supplied to the `.penguin-top` and `.penguin-bottom` classes. Rather than fix the typo, add a fallback value of `black` to the `background` property of the `.penguin-top` and `.penguin-bottom` classes.
|
||||
Parece que há um problema com as variáveis fornecidas para as classes `.penguin-top` e `.penguin-bottom`. Ao invés de corrigir o erro de digitação, defina um valor reserva na propriedade `background` das classes `.penguin-top` e `.penguin-bottom`. O valor reserva deve ser `black`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
|
||||
O valor reserva `black` deve ser utilizado na propriedade `background` da classe `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
|
||||
O valor reserva `black` deve ser utilizado na propriedade `background` da classe `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Change a variable for a specific area
|
||||
title: Alterar uma variável em uma área específica
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
@ -9,17 +9,17 @@ dashedName: change-a-variable-for-a-specific-area
|
||||
|
||||
# --description--
|
||||
|
||||
When you create your variables in `:root` they will set the value of that variable for the whole page.
|
||||
Quando você cria suas variáveis em `:root`, elas ficam disponíveis para uso em toda a página.
|
||||
|
||||
You can then over-write these variables by setting them again within a specific element.
|
||||
Mas nada impede que você redefina os valores dessas variáveis dentro de qualquer outro seletor CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the value of `--penguin-belly` to `white` in the `penguin` class.
|
||||
Na classe `penguin`, altere o valor da variável `--penguin-belly` para `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `penguin` class should reassign the `--penguin-belly` variable to `white`.
|
||||
A classe `penguin` deve redefinir o valor da variável `--penguin-belly` para `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -27,13 +27,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `penguin` class should not contain the `background-color` property
|
||||
A classe `penguin` não deve conter a propriedade `background-color`
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||
);
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Change the Color of Text
|
||||
title: Alterar a cor do texto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
forumTopicId: 16775
|
||||
@ -9,39 +9,39 @@ dashedName: change-the-color-of-text
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's change the color of some of our text.
|
||||
Agora vamos mudar a cor de uma parte do nosso texto.
|
||||
|
||||
We can do this by changing the `style` of your `h2` element.
|
||||
Podemos fazer isso alterando o `style` do seu elemento `h2`.
|
||||
|
||||
The property that is responsible for the color of an element's text is the `color` style property.
|
||||
A propriedade responsável pela cor do texto de um elemento é a propriedade de estilo `color`.
|
||||
|
||||
Here's how you would set your `h2` element's text color to blue:
|
||||
Você pode definir a cor do texto do elemento `h2` para azul assim:
|
||||
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
Note that it is a good practice to end inline `style` declarations with a `;` .
|
||||
Observe que é uma boa prática terminar as propriedades declaradas no atributo `style` com um `;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change your `h2` element's style so that its text color is red.
|
||||
Altere o estilo do elemento `h2` para que a cor do texto seja vermelha.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should have a `style` declaration.
|
||||
O elemento `h2` deve possuir o atributo `style`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
Your `h2` element should have color set to `red`.
|
||||
O texto do elemento `h2` deve possuir a cor `red` (vermelho).
|
||||
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
Your `style` declaration should end with a `;` .
|
||||
O valor da propriedade declarada em `style` deve terminar com um `;` .
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Change the Font Size of an Element
|
||||
title: Altere o Tamanho da Fonte de um Elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
forumTopicId: 16777
|
||||
@ -9,7 +9,7 @@ dashedName: change-the-font-size-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Font size is controlled by the `font-size` CSS property, like this:
|
||||
O tamanho da fonte é controlado pela propriedade CSS `font-size`, assim:
|
||||
|
||||
```css
|
||||
h1 {
|
||||
@ -19,11 +19,11 @@ h1 {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Inside the same `<style>` tag that contains your `red-text` class, create an entry for `p` elements and set the `font-size` to 16 pixels (`16px`).
|
||||
Dentro da tag `<style>` que contém a classe `red-text`, crie um seletor de elementos `p` e defina a propriedade `font-size` com o valor de `16px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Between the `style` tags, give the `p` elements `font-size` of `16px`. Browser and Text zoom should be at 100%.
|
||||
Entre as tags `style`, defina a propriedade `font-size` com o valor de `16px` no seletor CSS `p` que você criou. O zoom do navegador e do texto devem estar em 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Create a custom CSS Variable
|
||||
title: Criar variáveis no CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
@ -9,21 +9,21 @@ dashedName: create-a-custom-css-variable
|
||||
|
||||
# --description--
|
||||
|
||||
To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this:
|
||||
Para criar uma variável no CSS, você precisa dar um nome, prefixar este nome com dois hífens e atribuir um valor a ela, assim:
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
|
||||
Isso vai criar uma variável chamada `--penguin-skin` e atribuir a ela o valor de `gray`. Agora você pode usar essa variável em outro lugar do seu CSS para alterar o valor de outros elementos para cinza (gray).
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `penguin` class, create a variable name `--penguin-skin` and give it a value of `gray`.
|
||||
Na classe `penguin`, crie uma variável chamada `--penguin-skin` e atribua a ela o valor `gray`.
|
||||
|
||||
# --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 o valor de `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Give a Background Color to a div Element
|
||||
title: Criar uma cor de fundo em um elemento div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
@ -9,9 +9,9 @@ dashedName: give-a-background-color-to-a-div-element
|
||||
|
||||
# --description--
|
||||
|
||||
You can set an element's background color with the `background-color` property.
|
||||
Você pode definir a cor de fundo de um elemento com a propriedade `background-color`.
|
||||
|
||||
For example, if you wanted an element's background color to be `green`, you'd put this within your `style` element:
|
||||
Por exemplo, se você quiser que a cor de fundo de um elemento seja `green` (verde), você deve colocar o seguinte código dentro do elemento `style`:
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
@ -21,23 +21,23 @@ For example, if you wanted an element's background color to be `green`, you'd pu
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a class called `silver-background` with the `background-color` of `silver`. Assign this class to your `div` element.
|
||||
Crie uma classe chamada `silver-background` com a `background-color` de `silver`. Atribua esta classe ao elemento `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your`div` element should have the class `silver-background`.
|
||||
O elemento `div` deve ter a classe `silver-background`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
Your `div` element should have a silver background.
|
||||
O elemento `div` deve ter um fundo de cor prata (silver).
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
|
||||
Uma classe chamada `silver-background` deve ser definida dentro do elemento `style` e o valor `silver` deve ser atribuído à propriedade `background-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Import a Google Font
|
||||
title: Importar uma tipografia do Google
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
@ -9,41 +9,41 @@ dashedName: import-a-google-font
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library.
|
||||
Além de definir tipografias comuns que são encontradas na maioria dos sistemas operacionais, podemos também definir tipografias não padronizadas e customizadas para serem usadas em nosso site. Na Internet, existem muitos lugares onde podemos encontrar tipografias. Neste desafio, vamos usar a biblioteca do Google Fonts.
|
||||
|
||||
[Google Fonts](https://fonts.google.com/) is a free library of web fonts that you can use in your CSS by referencing the font's URL.
|
||||
[Google Fonts](https://fonts.google.com/) é uma biblioteca gratuita de tipografias que você pode usar em seu CSS ao referenciar a URL da tipografia.
|
||||
|
||||
So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).
|
||||
Então, vamos importar e aplicar uma tipografia a partir do Google.
|
||||
|
||||
To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element):
|
||||
Para importar uma tipografia, você pode copiar a URL da tipografia a partir da biblioteca do Google Fonts e colá-la em seu HTML. Para esse desafio, vamos importar a tipografia `Lobster`. Para fazer isso, copie o seguinte fragmento de código e cole-o no começo de seu editor de código-fonte (antes da tag de abertura do elemento `style`):
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
|
||||
Agora você pode usar a fonte `Lobster` em seu CSS ao substituir FAMILY_NAME no código abaixo por `Lobster`:
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.
|
||||
O GENERIC_NAME é opcional e é uma tipografia alternativa caso a tipografia anterior não esteja disponível. Essa questão será abordada no próximo desafio.
|
||||
|
||||
Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the `"Open Sans"` font, but not to use the `Lobster` font.
|
||||
O nome da família de uma tipografia diferencia maiúsculas de minúsculas e deve estar entre aspas caso possua mais de uma palavra. Por exemplo, você precisa de aspas para usar a fonte `"Open Sans"`, mas não para usar a fonte `Lobster`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element.
|
||||
Importe a tipografia `Lobster` na sua página web. Então, crie um seletor para o elemento `h2` e defina a propriedade `font-family` com o valor de `Lobster`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should import the `Lobster` font.
|
||||
Você deve importar a tipografia `Lobster`.
|
||||
|
||||
```js
|
||||
assert($('link[href*="googleapis" i]').length);
|
||||
```
|
||||
|
||||
Your `h2` element should use the font `Lobster`.
|
||||
O elemento `h2` deve usar a tipografia `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should only use an `h2` element selector to change the font.
|
||||
Você deve usar apenas um seletor para referenciar o elemento `h2` para alterar a tipografia.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -63,7 +63,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `p` element should still use the font `monospace`.
|
||||
O elemento `p` ainda deve usar a tipografia `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Improve Compatibility with Browser Fallbacks
|
||||
title: Melhorar a compatibilidade do CSS com navegadores antigos
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
@ -9,19 +9,19 @@ dashedName: improve-compatibility-with-browser-fallbacks
|
||||
|
||||
# --description--
|
||||
|
||||
When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems.
|
||||
Ao trabalhar com CSS, você provavelmente terá problemas de compatibilidade entre navegadores em algum momento. É por isso que é importante pensar em um plano B para evitar possíveis problemas.
|
||||
|
||||
When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can't find any other value set for that property, it will revert to the default value, which is typically not ideal.
|
||||
Quando o navegador analisa o CSS de uma página web, ele ignora todas as propriedades que não reconhece ou suporta. Por exemplo, se você usar uma variável CSS para atribuir uma cor de fundo em um site, o Internet Explorer irá ignorar a cor de fundo porque não oferece suporte a variáveis CSS. Nesse caso, o navegador usará qualquer outro valor que ele encontrar para essa propriedade. Se ele não conseguir encontrar nenhum outro valor definido para essa propriedade, ele reverterá para o valor padrão, que normalmente não é o ideal.
|
||||
|
||||
This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.
|
||||
Para evitar esse comportamento, você pode criar um plano B. E isso é tão fácil quanto fornecer outro valor que possua um suporte mais amplo. Dessa forma, um navegador mais antigo terá algo em que se apoiar, enquanto que um navegador mais recente interpretará qualquer estilo declarado posteriormente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to `red`.
|
||||
Parece que uma variável está sendo usada para definir a cor de fundo da classe `.red-box`. Vamos melhorar a compatibilidade do nosso código com os navegadores mais antigos adicionando outra propriedade, `background`, logo antes da propriedade que já existe e definir seu valor para `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
|
||||
O seletor `.red-box` deve possuir uma propriedade reserva para a propriedade `background` existente. Crie outra propriedade `background` com o valor `red` imediatamente antes da propriedade de "background" existente.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Inherit CSS Variables
|
||||
title: Herdar variáveis no CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
@ -9,19 +9,19 @@ dashedName: inherit-css-variables
|
||||
|
||||
# --description--
|
||||
|
||||
When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties.
|
||||
Quando você cria uma variável, ela fica disponível para uso dentro do seletor em que ela foi criada. Ela também fica disponível para uso em qualquer um dos elementos descendentes desse seletor. Isso acontece porque as variáveis no CSS são herdadas, assim como as propriedades comuns.
|
||||
|
||||
To make use of inheritance, CSS variables are often defined in the <dfn>:root</dfn> element.
|
||||
Para fazer uso da herança, as variáveis CSS são frequentemente definidas no elemento <dfn>:root</dfn>.
|
||||
|
||||
`:root` is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the `html` element. By creating your variables in `:root`, they will be available globally and can be accessed from any other selector in the style sheet.
|
||||
`:root` é um seletor do tipo <dfn>pseudo-class</dfn> que corresponde ao elemento raiz do documento, geralmente o elemento `html`. Ao criar variáveis usando a pseudo-classe `:root`, elas estarão disponíveis globalmente e podem ser acessadas a partir de qualquer outro seletor no CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a variable named `--penguin-belly` in the `:root` selector and give it the value of `pink`. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds.
|
||||
Crie uma variável chamada `--penguin-belly` no pseudo-classe `:root` e dê a ela o valor `pink`. Após criá-la, note que a variável é herdada e que todos os elementos filhos que a usam têm fundo rosa.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`.
|
||||
A variável `--penguin-belly` deve ser declarada no `:root` com o valor `pink`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Inherit Styles from the Body Element
|
||||
title: Herdar estilos do elemento body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
@ -9,27 +9,27 @@ dashedName: inherit-styles-from-the-body-element
|
||||
|
||||
# --description--
|
||||
|
||||
Now we've proven that every HTML page has a `body` element, and that its `body` element can also be styled with CSS.
|
||||
No desafio anterior, provamos que cada página HTML tem um elemento `body`, e que o elemento `body` também pode ser estilizado com CSS.
|
||||
|
||||
Remember, you can style your `body` element just like any other HTML element, and all your other elements will inherit your `body` element's styles.
|
||||
Lembre-se de que você pode definir o estilo do elemento `body` como qualquer outro elemento HTML, e todos os outros elementos herdarão os estilos do elemento `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
First, create a `h1` element with the text `Hello World`
|
||||
Primeiro, crie um elemento `h1` com o texto `Hello World`
|
||||
|
||||
Then, let's give all elements on your page the color of `green` by adding `color: green;` to your `body` element's style declaration.
|
||||
Então, vamos dar a todos os elementos da página a cor `green` adicionando `color: green;` à declaração de estilo do elemento `body`.
|
||||
|
||||
Finally, give your `body` element the font-family of `monospace` by adding `font-family: monospace;` to your `body` element's style declaration.
|
||||
Por fim, dê ao elemento `body` a tipografia `monospace` adicionando `font-family: monospace;` à declaração de estilo do elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create an `h1` element.
|
||||
Você deve criar um elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
Your `h1` element should have the text `Hello World`.
|
||||
O elemento `h1` deve conter o texto `Hello World`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element should have a closing tag.
|
||||
O elemento `h1` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,13 +50,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `body` element should have the `color` property of `green`.
|
||||
O elemento `body` deve ter a propriedade `color` com o valor `green`.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Your `body` element should have the `font-family` property of `monospace`.
|
||||
O elemento `body` deve ter a propriedade `font-family` com o valor `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element should inherit the font `monospace` from your `body` element.
|
||||
O elemento `h1` deve herdar a fonte `monospace` do elemento `body`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element should inherit the color green from your `body` element.
|
||||
O elemento `h1` deve herdar a cor verde do elemento `body`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Make Circular Images with a border-radius
|
||||
title: Criar imagens redondas com border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
@ -9,21 +9,21 @@ dashedName: make-circular-images-with-a-border-radius
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to pixels, you can also specify the `border-radius` using a percentage.
|
||||
Além dos pixels, você também pode definir o valor da propriedade `border-radius` usando porcentagem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give your cat photo a `border-radius` of `50%`.
|
||||
Dê à foto do gato a propriedade `border-radius` com valor de `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your image should have a border radius of `50%`, making it perfectly circular.
|
||||
A imagem deve ter a propriedade border-radius com valor de `50%`, tornando-a perfeitamente redonda.
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
The `border-radius` value should use a percentage value of `50%`.
|
||||
O valor da propriedade `border-radius` deve ser `50%`.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Override All Other Styles by using Important
|
||||
title: Sobrescrever todos os outros estilos usando a palavra important
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
@ -9,19 +9,19 @@ dashedName: override-all-other-styles-by-using-important
|
||||
|
||||
# --description--
|
||||
|
||||
Yay! We just proved that inline styles will override all the CSS declarations in your `style` element.
|
||||
Uhuu! Acabamos de provar que os estilos inline sobrescrevem todas as declarações CSS feitas no elemento `style`.
|
||||
|
||||
But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
|
||||
Mas veja bem. Existe mais uma forma de sobrescrever o CSS que declaramos anteriormente. Este é o método mais poderoso de todos. Mas antes de continuarmos, vamos falar sobre o motivo de você querer substituir o CSS.
|
||||
|
||||
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`.
|
||||
Em muitas situações, você usará bibliotecas CSS. E elas podem, acidentalmente, substituir o CSS. Portanto, quando você precisar ter certeza absoluta de que um elemento deve possuir um CSS específico, poderá usar `!important`.
|
||||
|
||||
Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles.
|
||||
Vamos voltar à nossa classe `pink-text`. Lembre-se de que a classe `pink-text` foi sobrescrita por declarações de classe posteriores, declarações de id e estilos inline.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Let's add the keyword `!important` to your pink-text element's color declaration to make 100% sure that your `h1` element will be pink.
|
||||
Vamos adicionar a palavra-chave `!important` à declaração de estilo do elemento `h1` para ter 100% de certeza de que ele terá a cor de texto rosa.
|
||||
|
||||
An example of how to do this is:
|
||||
Um exemplo de como fazer isso:
|
||||
|
||||
```css
|
||||
color: red !important;
|
||||
@ -29,31 +29,31 @@ color: red !important;
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `pink-text`.
|
||||
O elemento `h1` deve ter a classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `blue-text`.
|
||||
O elemento `h1` deve ter a classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the `id` of `orange-text`.
|
||||
O elemento `h1` deve ter o atributo `id` de valor `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Your `h1` element should have the inline style of `color: white`.
|
||||
O elemento `h1` deve ter o estilo inline `color: white`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
Your `pink-text` class declaration should have the `!important` keyword to override all other declarations.
|
||||
A classe `pink-text` deve ter a palavra-chave `!important` para sobrescrever todas as outras declarações.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -61,7 +61,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element should be pink.
|
||||
O elemento `h1` deve ser rosa.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Override Class Declarations by Styling ID Attributes
|
||||
title: Sobrescrever estilos de classes por estilos de ID
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
@ -9,23 +9,23 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
|
||||
# --description--
|
||||
|
||||
We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put `blue-text` before `pink-text` in our `h1` element's classes, it would still look at the declaration order and not the order of their use!
|
||||
No desafio anterior vimos que os navegadores leem o CSS de cima para baixo, seguindo a ordem de aparição das declarações de estilos. Isso significa que, em caso de conflito, o navegador utilizará a última declaração CSS escrita. No elemento `h1`, observe que se tivéssemos declarado a classe `blue-text` antes de classe `pink-text`, o h1 continuaria a aplicar os estilos baseado em quem foi declarado por último!
|
||||
|
||||
But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
|
||||
Mas isso não é tudo. Existem outras maneiras de sobrescrever o CSS. Você se lembra dos atributos de id?
|
||||
|
||||
Let's override your `pink-text` and `blue-text` classes, and make your `h1` element orange, by giving the `h1` element an id and then styling that id.
|
||||
Vamos sobrescrever as classes `pink-text` e `blue-text` dando ao elemento `h1` um id e então estilizar este id de forma a tornar o elemento `h1` laranja.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give your `h1` element the `id` attribute of `orange-text`. Remember, id styles look like this:
|
||||
Dê ao elemento `h1` o atributo `id` com o valor `orange-text`. Lembre-se de que é assim que se aplica um id:
|
||||
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
Leave the `blue-text` and `pink-text` classes on your `h1` element.
|
||||
Não apague as classes `blue-text` e `pink-text` do elemento `h1`.
|
||||
|
||||
Create a CSS declaration for your `orange-text` id in your `style` element. Here's an example of what this looks like:
|
||||
Crie uma declaração CSS para o id `orange-text` no elemento `style`. Um exemplo de como fazer isso:
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
@ -33,47 +33,47 @@ Create a CSS declaration for your `orange-text` id in your `style` element. Here
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** It doesn't matter whether you declare this CSS above or below `pink-text` class, since the `id` attribute will always take precedence.
|
||||
**Observação:** não importa se você declara esse CSS acima ou abaixo da classe `pink-text`, já que o atributo `id` sempre terá prioridade.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `pink-text`.
|
||||
O elemento `h1` deve ter a classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `blue-text`.
|
||||
O elemento `h1` deve ter a classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the id of `orange-text`.
|
||||
O elemento `h1` deve ter o id `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
There should be only one `h1` element.
|
||||
Deve haver apenas 1 elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
Your `orange-text` id should have a CSS declaration.
|
||||
O id `orange-text` deve ser referenciado no CSS.
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
Your `h1` should not have any `style` attributes.
|
||||
O `h1` não deve ter nenhum atributo `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
Your `h1` element should be orange.
|
||||
O elemento `h1` deve ser laranja.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Override Class Declarations with Inline Styles
|
||||
title: Sobrescrever estilos de classe com estilos inline
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
@ -9,47 +9,47 @@ dashedName: override-class-declarations-with-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
So we've proven that id declarations override class declarations, regardless of where they are declared in your `style` element CSS.
|
||||
No desafio anterior, vimos que os estilos declarados com id sobrescrevem as declarações feitas com classes, independente de onde as classes foram declaradas no elemento `style`.
|
||||
|
||||
There are other ways that you can override CSS. Do you remember inline styles?
|
||||
Mas existem outras maneiras de sobrescrever o CSS. Você se lembra dos estilos inline?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use an inline style to try to make our `h1` element white. Remember, inline styles look like this:
|
||||
Use um estilo inline para tentar tornar o elemento `h1` branco. Lembre-se, estilos inline são declarados dessa forma:
|
||||
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
Leave the `blue-text` and `pink-text` classes on your `h1` element.
|
||||
Não apague as classes `blue-text` e `pink-text` do elemento `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `pink-text`.
|
||||
O elemento `h1` deve ter a classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `blue-text`.
|
||||
O elemento `h1` deve ter a classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the id of `orange-text`.
|
||||
O elemento `h1` deve ter o id `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Your `h1` element should have an inline style.
|
||||
O elemento `h1` deve ter um estilo inline.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
Your `h1` element should be white.
|
||||
O elemento `h1` deve ser branco.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Override Styles in Subsequent CSS
|
||||
title: Substituir estilos no CSS baseado na ordem de aparição
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
@ -9,47 +9,47 @@ dashedName: override-styles-in-subsequent-css
|
||||
|
||||
# --description--
|
||||
|
||||
Our `pink-text` class overrode our `body` element's CSS declaration!
|
||||
A classe `pink-text` sobrescreveu a declaração de estilo do elemento `body`!
|
||||
|
||||
We just proved that our classes will override the `body` element's CSS. So the next logical question is, what can we do to override our `pink-text` class?
|
||||
Com isso, podemos perceber que classes sobrescrevem os estilos declarados no elemento `body`. Isso nos leva à pergunta: o que podemos fazer para substituir a classe `pink-text`?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create an additional CSS class called `blue-text` that gives an element the color blue. Make sure it's below your `pink-text` class declaration.
|
||||
Crie uma classe CSS adicional chamada `blue-text` que dá a um elemento a cor azul. Certifique-se de que esta nova classe esteja abaixo da classe `pink-text`.
|
||||
|
||||
Apply the `blue-text` class to your `h1` element in addition to your `pink-text` class, and let's see which one wins.
|
||||
Além de classe `pink-text`, aplique a classe `blue-text` ao elemento `h1`, e vamos ver qual tem maior prioridade.
|
||||
|
||||
Applying multiple class attributes to a HTML element is done with a space between them like this:
|
||||
A aplicação de várias classes a um mesmo elemento HTML é feita com um espaço entre cada uma, assim:
|
||||
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**Note:** It doesn't matter which order the classes are listed in the HTML element.
|
||||
**Observação:** a ordem das classes dentro do atributo "class" não é importante.
|
||||
|
||||
However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`
|
||||
O importante é a ordem em que as classes (`class`) são declaradas dentro da tag `<style>`. A última declaração sempre terá prioridade sobre a anterior. Como a classe `.blue-text` é declarada por último, ela sobrescreve os estilos que foram declarados na classe `.pink-text`
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `pink-text`.
|
||||
O elemento `h1` deve ter a classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should have the class `blue-text`.
|
||||
O elemento `h1` deve ter a classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Both `blue-text` and `pink-text` should belong to the same `h1` element.
|
||||
Tanto a classe `blue-text` quanto a classe `pink-text` devem pertencer ao mesmo elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Your `h1` element should be blue.
|
||||
O texto do elemento `h1` deve ser azul.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Prioritize One Style Over Another
|
||||
title: Priorize um estilo em detrimento de outro
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
@ -9,33 +9,33 @@ dashedName: prioritize-one-style-over-another
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes your HTML elements will receive multiple styles that conflict with one another.
|
||||
Às vezes, seus elementos HTML receberão vários estilos que conflitam entre si.
|
||||
|
||||
For example, your `h1` element can't be both green and pink at the same time.
|
||||
Por exemplo, o elemento `h1` não pode ser verde e rosa ao mesmo tempo.
|
||||
|
||||
Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class *override* the `body` element's `color: green;` CSS property?
|
||||
Vamos ver o que acontece quando criamos uma classe que torna o texto rosa e, em seguida, aplicamos ela a um elemento. Nossa classe *substituirá* a propriedade CSS `color: green;` do elemento `body`?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a CSS class called `pink-text` that gives an element the color pink.
|
||||
Crie uma classe CSS chamada `pink-text` que fornece a cor rosa a um elemento.
|
||||
|
||||
Give your `h1` element the class of `pink-text`.
|
||||
Dê ao elemento `h1` a classe `pink-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the class `pink-text`.
|
||||
O elemento `h1` deve ter a classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Your `<style>` should have a `pink-text` CSS class that changes the `color`.
|
||||
A tag `<style>` deve ter uma classe CSS de nome `pink-text` que altera a propriedade `color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
Your `h1` element should be pink.
|
||||
O elemento `h1` deve ser rosa.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Set the Font Family of an Element
|
||||
title: Definir a família tipográfica de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
@ -9,9 +9,9 @@ dashedName: set-the-font-family-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
You can set which font an element should use, by using the `font-family` property.
|
||||
Você pode definir qual tipografia um elemento deve usar utilizando a propriedade `font-family`.
|
||||
|
||||
For example, if you wanted to set your `h2` element's font to `sans-serif`, you would use the following CSS:
|
||||
Por exemplo, se você quiser definir a tipografia do elemento `h2` como `sans-serif`, deverá usar o seguinte CSS:
|
||||
|
||||
```css
|
||||
h2 {
|
||||
@ -21,11 +21,11 @@ h2 {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make all of your `p` elements use the `monospace` font.
|
||||
Faça com que todos os elementos `p` usem a fonte `monospace`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `p` elements should use the font `monospace`.
|
||||
Os elementos `p` devem usar a tipografia `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -101,9 +101,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 src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -118,7 +118,7 @@ assert(
|
||||
<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: bad87eee1348bd9aede07836
|
||||
title: Set the id of an Element
|
||||
title: Definir o id de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
@ -9,13 +9,13 @@ dashedName: set-the-id-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
In addition to classes, each HTML element can also have an `id` attribute.
|
||||
Além das classes, cada elemento HTML também pode ter um atributo `id`.
|
||||
|
||||
There are several benefits to using `id` attributes: You can use an `id` to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.
|
||||
Existem vários benefícios em usar atributos `id`: você pode usar um `id` para estilizar um único elemento como também pode selecionar e modificar elementos específicos com JavaScript (você aprenderá mais sobre isso depois).
|
||||
|
||||
`id` attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same `id` attribute.
|
||||
Os atributos `id` devem possuir valores únicos. Os navegadores não exigem que você faça isso, mas é uma prática recomendada e amplamente aceita. Portanto, não dê a mais de um elemento o mesmo atributo `id`.
|
||||
|
||||
Here's an example of how you give your `h2` element the id of `cat-photo-app`:
|
||||
Aqui está um exemplo de como você dá a um elemento `h2` o id de `cat-photo-app`:
|
||||
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
@ -23,11 +23,11 @@ Here's an example of how you give your `h2` element the id of `cat-photo-app`:
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give your `form` element the id `cat-photo-form`.
|
||||
Dê ao elemento `form` o id `cat-photo-form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `form` element should have the id of `cat-photo-form`.
|
||||
O elemento `form` deve ter o atributo id com o valor `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
@ -139,9 +139,9 @@ assert($('form').attr('id') === 'cat-photo-form');
|
||||
<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>
|
||||
@ -156,7 +156,7 @@ assert($('form').attr('id') === 'cat-photo-form');
|
||||
<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: bad87fee1348bd9acdf08812
|
||||
title: Size Your Images
|
||||
title: Alterar o tamanho de imagens
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
@ -9,9 +9,9 @@ dashedName: size-your-images
|
||||
|
||||
# --description--
|
||||
|
||||
CSS has a property called `width` that controls an element's width. Just like with fonts, we'll use `px` (pixels) to specify the image's width.
|
||||
O CSS tem uma propriedade chamada `width` que controla a largura de um elemento. Assim como com as fontes, usaremos `px` (pixels) para especificar a largura da imagem.
|
||||
|
||||
For example, if we wanted to create a CSS class called `larger-image` that gave HTML elements a width of 500 pixels, we'd use:
|
||||
Por exemplo, se quiséssemos criar uma classe CSS chamada `larger-image` que desse aos elementos HTML uma largura de 500 pixels, escreveríamos:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -23,11 +23,11 @@ For example, if we wanted to create a CSS class called `larger-image` that gave
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a class called `smaller-image` and use it to resize the image so that it's only 100 pixels wide.
|
||||
Crie uma classe chamada `smaller-image` e use-a para redimensionar a imagem para que tenha apenas 100 pixels de largura.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `img` element should have the class `smaller-image`.
|
||||
O elemento `img` deve ter a classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your image should be 100 pixels wide.
|
||||
A imagem deve ter 100 pixels de largura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -125,9 +125,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" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@ -142,7 +142,7 @@ assert(
|
||||
<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: bad87fee1348bd9aedf08719
|
||||
title: Use Abbreviated Hex Code
|
||||
title: Usar códigos hexadecimais de modo abreviado
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
@ -9,63 +9,63 @@ dashedName: use-abbreviated-hex-code
|
||||
|
||||
# --description--
|
||||
|
||||
Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.
|
||||
Muitas pessoas ficam confusas ao ter de escolher entre mais de 16 milhões de cores. É difícil lembrar de códigos hexadecimais. Felizmente, você pode "encurtar" alguns desses códigos.
|
||||
|
||||
For example, red's hex code `#FF0000` can be shortened to `#F00`. This shortened form gives one digit for red, one digit for green, and one digit for blue.
|
||||
Por exemplo, o código hexadecimal para vermelho `#FF0000` pode ser reduzido para `#F00`. Esta forma abreviada fornece um dígito para vermelho, um dígito para verde e um dígito para azul.
|
||||
|
||||
This reduces the total number of possible colors to around 4,000. But browsers will interpret `#FF0000` and `#F00` as exactly the same color.
|
||||
Isso reduz o número total de cores possíveis para cerca de 4.000. Mas os navegadores interpretarão tanto `#FF0000` quanto `#F00` como sendo exatamente a mesma cor.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Go ahead, try using the abbreviated hex codes to color the correct elements.
|
||||
Tente usar os códigos hexadecimais abreviados para colorir os elementos corretos.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
<table class='table table-striped'><tbody><tr><th>Cor</th><th>Código hexadecimal abreviado</th></tr><tr><td>Ciano</td><td><code>#0FF</code></td></tr><tr><td>Verde</td><td><code>#0F0</code></td></tr><tr><td>Vermelho</td><td><code>#F00</code></td></tr><tr><td>Fúcsia</td><td><code>#F0F</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 o valor hexadecimal que representa a cor vermelha.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`.
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor vermelha deve ser usado em vez do código hexadecimal `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#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 o valor hexadecimal que representa a cor verde.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`.
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor verde deve ser usado em vez do código hexadecimal `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
|
||||
O elemento `h1` com o texto `I am cyan!` deve receber a propriedade `color` com o valor hexadecimal que representa a cor ciano.
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`.
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor ciano deve ser usado em vez do código hexadecimal `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
|
||||
O elemento `h1` com o texto `I am fuchsia!` deve receber a propriedade `color` com o valor hexadecimal que representa a cor fúcsia.
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`.
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor fúcsia deve ser usado em vez do código hexadecimal `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: Use an id Attribute to Style an Element
|
||||
title: Usar um atributo id para definir o estilo de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
@ -9,11 +9,11 @@ dashedName: use-an-id-attribute-to-style-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
One cool thing about `id` attributes is that, like classes, you can style them using CSS.
|
||||
Uma coisa interessante sobre os atributos `id` é que, assim como as classes, você pode estilizá-los usando CSS.
|
||||
|
||||
However, an `id` is not reusable and should only be applied to one element. An `id` also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the `id` will be applied.
|
||||
No entanto, um `id` não é reutilizável e deve ser aplicado apenas a um elemento. Um `id` também tem uma especificidade (importância) mais alta do que uma classe, portanto, se ambos forem aplicados ao mesmo elemento e tiverem estilos conflitantes, os estilos do `id` serão aplicados.
|
||||
|
||||
Here's an example of how you can take your element with the `id` attribute of `cat-photo-element` and give it the background color of green. In your `style` element:
|
||||
Aqui está um exemplo de como você pode pegar seu elemento com o atributo `id` de `cat-photo-element` e dar a ele a cor de fundo verde. No elemento `style`:
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
@ -21,27 +21,27 @@ Here's an example of how you can take your element with the `id` attribute of `c
|
||||
}
|
||||
```
|
||||
|
||||
Note that inside your `style` element, you always reference classes by putting a `.` in front of their names. You always reference ids by putting a `#` in front of their names.
|
||||
Observe que, dentro do elemento `style`, você sempre faz referência às classes colocando um `.` na frente de seus nomes. Você sempre faz referência aos ids colocando um `#` na frente de seus nomes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Try giving your form, which now has the `id` attribute of `cat-photo-form`, a green background.
|
||||
Tente dar ao seu formulário, que agora tem o atributo `id` de `cat-photo-form`, um fundo verde.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `form` element should have the id of `cat-photo-form`.
|
||||
O elemento `form` deve ter o id de `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
Your `form` element should have the `background-color` of green.
|
||||
O elemento `form` deve ter a propriedade `background-color` com o valor green (verde).
|
||||
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Your `form` element should have an `id` attribute.
|
||||
O elemento `form` deve ter um atributo `id`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should not give your `form` any `class` or `style` attributes.
|
||||
Você não deve fornecer ao `form` os atributos `class` ou `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
@ -166,9 +166,9 @@ assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
<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>
|
||||
@ -183,7 +183,7 @@ assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
<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: bad87fee1348bd9aedf08805
|
||||
title: Use CSS Selectors to Style Elements
|
||||
title: Usar seletores CSS para definir o estilo de elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
@ -9,20 +9,20 @@ dashedName: use-css-selectors-to-style-elements
|
||||
|
||||
# --description--
|
||||
|
||||
With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
|
||||
Com CSS, existem centenas de propriedades que você pode usar para alterar a aparência de um elemento na página.
|
||||
|
||||
When you entered `<h2 style="color: red;">CatPhotoApp</h2>`, you were styling that individual `h2` element with inline CSS, which stands for Cascading Style Sheets.
|
||||
Quando você digitou `<h2 style="color: red;">CatPhotoApp</h2>`, você estava estilizando individualmente esse elemento `h2` de forma inline.
|
||||
|
||||
That's one way to specify the style of an element, but there's a better way to apply CSS.
|
||||
Essa é uma maneira de especificar o estilo de um elemento, mas há uma maneira melhor de aplicar o CSS.
|
||||
|
||||
At the top of your code, create a `style` block like this:
|
||||
Na parte superior do seu código, crie uma tag `style`:
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
Inside that style block, you can create a <dfn>CSS selector</dfn> for all `h2` elements. For example, if you wanted all `h2` elements to be red, you would add a style rule that looks like this:
|
||||
Dentro desse bloco de estilo, você pode criar um <dfn>seletor CSS</dfn> para todos os elementos de `h2`. Por exemplo, se quisesse que todos os elementos `h2` fossem vermelhos, você adicionaria uma regra de estilo semelhante a esta:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -32,39 +32,39 @@ Inside that style block, you can create a <dfn>CSS selector</dfn> for all `h2` e
|
||||
</style>
|
||||
```
|
||||
|
||||
Note that it's important to have both opening and closing curly braces (`{` and `}`) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.
|
||||
Observe que é importante ter abertura e fechamento de chaves (`{` e `}`) em torno das regras de estilo de cada elemento. Você também precisa se certificar de que a definição de estilo do seu elemento está entre a abertura e o fechamento das tags. Finalmente, certifique-se de adicionar um ponto e vírgula ao final das regras de estilo de cada um dos seus elementos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Delete your `h2` element's style attribute, and instead create a CSS `style` block. Add the necessary CSS to turn all `h2` elements blue.
|
||||
Exclua o atributo de estilo `h2` e, em vez disso, crie uma tag `style`. Adicione o CSS necessário para transformar a cor de todos os elementos `h2` em azul.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `style` attribute should be removed from your `h2` element.
|
||||
O atributo `style` deve ser removido do elemento `h2`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
```
|
||||
|
||||
You should create a `style` element.
|
||||
Você deve criar um elemento `style`.
|
||||
|
||||
```js
|
||||
assert($('style') && $('style').length >= 1);
|
||||
```
|
||||
|
||||
Your `h2` element should be blue.
|
||||
O elemento `h2` deve ser azul.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Your stylesheet `h2` declaration should be valid with a semicolon and closing brace.
|
||||
O código referente ao `h2` deve ter abertura e fechamento com chaves e cada propriedade deve terminar com ponto e vírgula.
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
```
|
||||
|
||||
All your `style` elements should be valid and have closing tags.
|
||||
Os elementos `style` devem ser válidos e ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: Use Hex Code for Specific Colors
|
||||
title: Usar códigos hexadecimais para selecionar cores específicas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
@ -9,11 +9,11 @@ dashedName: use-hex-code-for-specific-colors
|
||||
|
||||
# --description--
|
||||
|
||||
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
|
||||
Você sabia que existem outras maneiras de representar cores no CSS? Uma dessas formas é chamada de código hexadecimal ou, abreviadamente, hex code (em inglês).
|
||||
|
||||
We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about [hexadecimal numbers here](https://en.wikipedia.org/wiki/Hexadecimal).
|
||||
Normalmente, usamos <dfn>decimais</dfn>, ou números de base 10, que usam os símbolos de 0 a 9 para cada dígito. <dfn>Hexadecimais</dfn> (ou <dfn>hex</dfn>) são números de base 16. Isso significa que eles usam dezesseis símbolos diferentes. Como os decimais, os símbolos de 0 a 9 representam os valores de zero a nove. Além deles, temos A, B, C, D, E e F, que representam os valores de dez a quinze. Ao todo, números de 0 a F podem representar um dígito em hexadecimal, com 16 valores possíveis. Você pode encontrar mais informações sobre [números hexadecimais aqui](https://pt.wikipedia.org/wiki/Sistema_de_numera%C3%A7%C3%A3o_hexadecimal).
|
||||
|
||||
In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, `#000000` is black and is also the lowest possible value. You can find more information about the [RGB color system here](https://en.wikipedia.org/wiki/RGB_color_model).
|
||||
No CSS, podemos usar 6 dígitos hexadecimais para representar as cores, dois de cada para os componentes vermelho (R), verde (G) e azul (B). Por exemplo, `#000000` é preto e também é o valor mais baixo possível. Você pode encontrar mais informações sobre o [sistema de cores RGB aqui](https://pt.wikipedia.org/wiki/RGB).
|
||||
|
||||
```css
|
||||
body {
|
||||
@ -23,17 +23,17 @@ body {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Replace the word `black` in our `body` element's background-color with its hex code representation, `#000000`.
|
||||
Substitua a palavra `black` na cor de fundo do elemento `body` por sua representação em código hexadecimal, `#000000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` element should have the background-color of black.
|
||||
O elemento `body` deve ter a cor de fundo preta.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color black should be used instead of the word `black`.
|
||||
O código hexadecimal (`hex code`) para a cor preta deve ser usado no lugar da palavra `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: Use RGB to Mix Colors
|
||||
title: Usar RGB para Misturar Cores
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
@ -9,23 +9,23 @@ dashedName: use-rgb-to-mix-colors
|
||||
|
||||
# --description--
|
||||
|
||||
Just like with hex code, you can mix colors in RGB by using combinations of different values.
|
||||
Assim como com o código hexadecimal, você pode misturar cores em RGB usando combinações de valores diferentes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Replace the hex codes in our `style` element with their correct RGB values.
|
||||
Substitua os códigos hexadecimais em nosso elemento `style` por seus valores RGB corretos.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
<table class='table table-striped'><tbody><tr><th>Cor</th><th>RGB</th></tr><tr><td>Azul</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Vermelho</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orquídea</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Siena</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element with the text `I am red!` should have the `color` red.
|
||||
O elemento `h1` com o texto `I am red!` deve ter a propriedade `color` com um valor red (vermelho).
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
You should use `rgb` for the color red.
|
||||
Você deve usar `rgb` para inserir a cor vermelha.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am orchid!` should have the `color` orchid.
|
||||
O elemento `h1` com o texto `I am orchid!` deve ter a propriedade `color` com um valor orchid (orquídea).
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
You should use `rgb` for the color orchid.
|
||||
Você deve usar `rgb` para inserir a cor orquídea.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,13 +51,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am blue!` should have the `color` blue.
|
||||
O elemento `h1` com o texto `I am blue!` deve ter a propriedade `color` com um valor blue (azul).
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
You should use `rgb` for the color blue.
|
||||
Você deve usar `rgb` para inserir a cor azul.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -67,13 +67,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am sienna!` should have the `color` sienna.
|
||||
O elemento `h1` com o texto `I am sienna!` deve ter a propriedade `color` com um valor sienna (siena).
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
You should use `rgb` for the color sienna.
|
||||
Você deve usar `rgb` para inserir a cor siena.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user