gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

translations and css code examples fixed (#23553)

Browse Source
This commit is contained in:
Paulo Kinopk
2019-08-14 08:18:57 -07:00
committed by Randell Dawson
parent 5d5f016963
commit 0f0ce47056
1 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
guide/portuguese/css/css-custom-properties/index.md
View File

@ -19,23 +19,39 @@ Dentro de um seletor, as propriedades personalizadas são declaradas usando dois
Declarar propriedades personalizadas no seletor `:root` torna essas propriedades disponíveis globalmente. O seletor `:root` pode ser considerado o mesmo que o seletor `html` .
### Usando propriedades personalizadas
### Usando Propriedades Personalizadas
Para usar uma propriedade customizada, é utilizada a função `var()` , que usa um único argumento do nome da propriedade customizada. \`\` \`css h1 { font-size: var (- headerSize); }
Para usar uma propriedade customizada, é utilizada a função `var()`, que usa um único argumento do nome da propriedade customizada.
```css
h1 {
font-size: var(--headerSize);
}
.card { box-shadow: var (- dropShadow); }
```
### Cascading Custom Properties
When custom properties are declared in the `:root` selector, those properties are globally available; any style rules can use the properties. If a custom property needs to be different for specific element, class, or id, a property of the same can be declared in that selector. The compiler will first look for a property name within the immediate enclosing selector, then move to the `:root`.
.card {
box-shadow: var(--dropShadow);
}
```
css : root { - sem cor: vermelho; }
### Propriedades Personalizadas Cascateadas
Quando propriedades personalizadas são declaradas no seletor `:root`, essas propriedades são disponíveis globalmente; todos os estilos podem usar a propriedade. Se uma propriedade personalizada precisa diferente para um elemento específico, classe ou id, a propriedade do mesmo poder ser declarada naquele seletor. O compilador irá primeiramente olhar para o nome da propriedade dentro do seletor imediatamente encapsulando, e depois mover para o `:root`
h1 { - sem cor: azul; }
```css
:root {
--font-color: red;
}
h1 { font-color: var (- fonte-cor); / \* azul \* / }
h1 {
--font-color: blue;
}
h2 { font-color: var (- fonte-cor); / \* vermelho \* / } \`\` \`
h1 {
font-color: var(--font-color); /* blue */
}
h2 {
font-color: var(--font-color); /* red */
}
```
#### Mais Informações: