email: risiberg.teixeira@ifrj.edu.br Prof. Risiberg Teixeira

(1)

Prof. Risiberg Teixeira

email: risiberg.teixeira@ifrj.edu.br

(2)

Prof. Risiberg Teixeira 2

(3)

Color: define a cor para fonte.

Exemplo: color: #508C19;

Text-decoration: destaca a fonte.

Exemplo: text-decoration: underline;



Font-style: define estilo da fonte.



Exemplo: font-style: oblique;

3 Prof. Risiberg Teixeira

(4)

Font-family: tipo de fonte.

Exemplo: font-family: arial;

Font-size: tamanho dafonte Exemplo: font-size: small;

(5)

1) Crie uma página html(salve com o nome estilo_fontes.html).

2) O documento deverá conter 3 títulos definidos com a tag <h1>.

3) Para cada seção dos títulos coloque 2 parágrafos de três linhas cada.

4) Crie estilos para as fontes do texto apresentada em aula.

(6)



Text-align: posicionamento do texto.

Exemplo: text-align: center;



Text-indent: define início de parágrafo a esquerda.

Exemplo: text-indent: 2em;



Vertical-align: posição do texto vertical.

Exemplo vertical-align: sub;

(7)

1) Crie uma página html (salve com o nome alinha_texto.html).

2) Coloque um texto com 4 parágrafos no corpo da página.

3) Para cada parágrafo coloque a tag <p> para delimitar seu início e fim.

4) Coloque um título antes do primeiro parágrafo. Use a tag <h1>.

5) Defina estilo de alinhamento do texto para a tag

<p> justificado, e primeira linha do parágrafo com 2em de espaço.

6) Definir um estilo de cor de fundo verde claro para todo o texto.

7) Para o título coloque estilo cor azul marinho e borda.

(8)



Word-spacing: define espaço entre palavras.

Exemplo: word-spacing: 0.5em;



letter-spacing: define espaçamento entre letras;

Exemplo: letter-spacing: 0.2em;



Padding: define distância do texto em relação a área do bloco;

Exemplo: padding: 50px 0 0 10px;

(9)

1) Crie uma página html (salve com o nome espacamento_css.html).

2) Coloque um texto com 2 parágrafos.

3) Defina o estilo como descrito abaixo:

#espaco { background-color:#00CCFF; word-spacing:

0.5em; letter-spacing: 0.2em; padding: 50px 0 0 10px;

margin: 10em; }

4) Aplique o estilo no primeiro parágrafo da página

<p id=“espaco”>.

5) Defina o identificador de nome espaco1. Coloque cor de fundo amarelo, espaço entre palavras 0.3em, margin 50em. Aplique no segundo parágrafo.

(10)



Background-image: imagem de fundo;

Exemplo: background-image: url(logo.jpg);



Background-repeat: determina como a imagem aparecerá na página.

Exemplo: background-repeat: repeat;



Background-position: determina a posição onde a imagem vai aparecer.

Exemplo: background-position: left;

(11)

1) Crie uma página html (salve com o nome imagem_fundo.html).

2) Coloque 3 parágrafos de 5 linha no corpo da página. Defina as tag <p> para cada paragráfo.

3) Defina o identificador na área de estilo:

#figura{

background-color: #D4F8B9;

background-image: url(logo.jpg);

background-repeat: no-repeat;

background-position: left;

}