Atributos

·  ·  ·  ·  ·  ·  ·  ·

Código Rápido

Copiar para a área de transferências <div style="\*nome do atributo\*:\*especificação\*;\*repita\*">Conteúdo</div>

Os **Atributos** constituem a base da maioria dos WikiTextos, tabelas, div e tags de estilo span. Eles definem coisas sobre elementos codificados como border (bordas), backgrounds (planos de fundo) e color (cores). É essencial aprendê-los. Os atributos também podem ser usados em CSS (Cascading Style Sheets) e HTML (HyperText Markup Language). Este guia ensinará como formatar atributos e o que eles são.

## Formato do atributo

O formato do atributo é muito importante, caso contrário seu código pode não funcionar corretamente.

### <div> formato

Atributos podem ser adicionados em tags de estilo (style) div como este:

```
<div style="*nome do atributo*:*especificação*;*repita*">Conteúdo</div>
```

Em tags div, aspas (") devem ser colocadas ao redor dos atributos, ponto e vírgula (;) devem separar os atributos e uma tag de fechamento (</div>) deve ser colocada após sua string de código. exemplo seria este:

```
<div style="background: green; color: white">CONTEÚDO</div>
```

Este código cria o seguinte:

CONTEÚDO
Observe como a palavra 'Green' (verde) é usada como especificação para a cor de fundo.

**Nota: Embora o estilo div seja MUITO semelhante ao estilo span, alguns atributos não são suportados no estilo div que são suportados no estilo span e vice-versa.**

### <span> formato

Atributos podem ser adicionados em tags de estilo span da seguinte forma:

```
<span style="*nome do atributo*:*especificação*;*repita*">Conteúdo</div>
```

Semelhante às tags de estilo div, nas tags de estilo span, aspas (") devem ser colocadas ao redor dos atributos, ponto e vírgula (;) devem separar cada atributo e uma tag de fechamento (</span>) deve ser colocado depois. Um exemplo seria:

```
<span style="background:green; color: white">CONTEÚDO</span>
```

Este código cria o seguinte:

CONTEÚDO

As tags de estilo span são **extremamente** semelhantes às tags de estilo div, conforme mostrado no exemplo. A única diferença é que o estilo span se baseia mais no texto, portanto, o plano de fundo não continua por toda a página.

Observe como a palavra 'Verde' é usada como especificação para o plano de fundo e "Branco" para a cor do texto.

**Nota: Embora o estilo span seja MUITO semelhante ao estilo div, alguns atributos não são suportados no estilo span que são suportados no estilo div e vice-versa.**

### Formato da tabela

A formatação das tabelas é um pouco diferente e compõe apenas uma parte das tabelas. Para o restante do código para tabelas, visite nossa página Tabelas. Os atributos podem ser adicionados em tabelas da seguinte forma:

```
{|style="*atributo*: *especificação*; *repita*"
```

Ou um certo quadrado na tabela, assim (se quiser adicionar os dois, basta copiar e colar o formato abaixo logo abaixo do formato acima e repetir):

```
```

Continue a tabela após esse código conforme visto na página de tabelas.

Um exemplo seria este:

```
{|style="background: green"

```

O que resulta:

Embora semelhantes aos métodos de estilo div e span, as tabelas são diferentes porque seu código base é diferente e a codificação é mais limitada.

Observe como usei a palavra 'Verde' como especificação para o plano de fundo e '1px solid white' como especificação para a borda.

**Observação: Uma borda foi adicionada a este exemplo apenas para mostrar que se trata de uma tabela, não de texto simples.**

## Links

Abaixo você encontrará uma lista de links para páginas de atributos que falam sobre um determinado atributo e geralmente possuem exemplos. Algumas dessas páginas terão nomes semelhantes ao nome do atributo, como Border Radius, que está no atributo border-radius. Outros podem ser intitulados apenas como o que o atributo cria, como Scrolling Boxes (as caixas de rolagem são criadas usando o atributo 'overflow'). **Editores, sintam-se à vontade para adicionar à lista como acharem melhor, em *ordem alfabética* para facilitar o uso.**

* Backgrounds
* Guia de Iniciante (não é um atributo, mas útil para aprender mais sobre formatação e estilo)
* Borders
* Border Radius
* Box Shadow
* Columns
* Imagemaps
* Letter Spacing
* Line Height
* Float
* Floating Boxes
* Fonts
* Opacity
* Overflow
* Padding
* Background Size
* Scrolling Boxes
* Text Align
* Text Color
* Text Decoration
* Text Shadow
* Text Size
* Text Modification
* Tooltips (semelhante a um atributo, formatado da mesma forma)
* Transform

## Notas/Revisão

* Certifique-se de adicionar uma tag final à sua codificação (essa seria uma tag </span> ou </div>).

* Em wikis atualizadas pela UCP, você pode saber se tem tags finais suficientes quando a última tag digitada fica vermelha. Mas seja cauteloso; isso também pode acontecer se você não tiver tags de fechamento na ordem em que suas tags apareceram! Por exemplo, em **<1><2>CONTEÚDO</1>**, a tag </2> ficará vermelha. Mas isso é porque você tem que colocar a tag </2> primeiro! Você ainda fechou parte de sua codificação, mas <2> deve ser fechado.

* O estilo Span é melhor para **realçar** palavras, enquanto o estilo div é melhor para **backgrounds** reais. Há muito mais tags de estilo, como **<p style="CONTEÚDO">**, que modifica apenas atributos de texto.

* Os atributos compõem a maior parte das tags de estilo div e span, juntamente com classes, IDs e títulos.

* Os atributos **devem** ser formatados corretamente para funcionarem.