DICA 12: FORMATAÇÃO DE TEXTO PARTE 1

DICA 12: FORMATAÇÃO DE TEXTO PARTE 1

1.    FONT-SIZE: 14PX;

Código de Exemplo:

<div style="font-size: 14px;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

2.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC;

Código de Exemplo:

<div style="font-size: 14px; Font-style: italic;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

3.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF;

Código de Exemplo:

<div style=" font-size: 14px; Font-style: italic; color: #0000FF; "> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

4.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF; + WIDTH: 300PX;

Código de Exemplo:

<div style="font-size: 14px; Font-style: italic; color: #0000FF; width: 300px;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

5.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF; + WIDTH: 300PX; + PADDING: 3PX;

Código de Exemplo:

<div style="font-size: 14px; Font-style: italic; color: #0000FF; width: 300px;padding: 3px;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

6.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF; + WIDTH: 300PX; + PADDING: 3PX; + TEXT-ALIGN: CENTER;

Código de Exemplo:

<div style=" text-align: center; font-size: 14px; Font-style: italic; color: #0000FF; width: 300px;padding: 3px;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

7.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF; + WIDTH: 300PX; + PADDING: 3PX; + TEXT-ALIGN: CENTER; + TEXT-DECORATION: UNDERLINE;

Código de Exemplo:

<div style=" text-align: center;font-size: 14px; Text-decoration: underline; Font-style: italic; color: #0000FF; width: 300px;padding: 3px; ;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

8.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF; + WIDTH: 300PX; + PADDING: 3PX; + TEXT-ALIGN: CENTER; + TEXT-DECORATION: UNDERLINE; + BORDER: 1PX SOLID #000000;

Código de Exemplo:

<div style=" text-align: center;font-size: 14px; Text-decoration: underline; Font-style: italic; color: #0000FF; width: 300px;padding: 3px;border: 1px solid #000000;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

9.    FONT-SIZE: 14PX; + FONT-STYLE: ITALIC; + COLOR: #0000FF; + WIDTH: 300PX; + PADDING: 3PX; + TEXT-ALIGN: CENTER; + TEXT-DECORATION: UNDERLINE; + BORDER: 1PX SOLID #000000; + BACKGROUND-COLOR: # FFFF00;

Código de Exemplo:

<div style=" text-align: center;font-size: 14px; Text-decoration: underline; Font-style: italic; color: #0000FF; width: 300px;padding: 3px; border: 1px solid #000000;background-color: #FFFF00 ;"> TEXTO DE EXEMPLO </div>

Resultado:

TEXTO DE EXEMPLO

LEGENDA

1.   Font-size: 14px; – tamanho do texto

2.   Font-style: italic; – estilo do texto em itálico para modificar basta trocar italic por: bold (negrito)

3.   Color: #0000FF; – cor do texto

4.   Width: 300px – largura da caixa se quiser pode apagar essa linha e a caixa ficará com a maior largura possível.

5.   Padding: 3px – margem entre o texto e as bordas

6.   Text-align: center; – ajuste do texto ao centro, para modificar basta trocar center por: left (esquerda), right (direita), justify (justificado)

7.   Text-decoration: – decoração do texto underline (sublinhado), overline (sobrelinha), line-through (risco no meio das letras), underline overline (sublinhado e sobrelinha), none (sem decoração).

8.   Border: 1px solid #000000 – espessura, estilo e cor das bordas.

9.   Background-color: #cccccc; – cor de fundo.

10. TEXTO DE EXEMPLO – texto a ser editado.