Css3 - Aula 2

CSS 3

Por: Dorival Silva

Aula 02

Inserindo CSS

Existem três maneiras diferentes de inserir uma folha de estilos:

• Folha de estilos externa

• Folha de estilos interna

• Estilo inline

Folha de estilos externa

Quando um estilo deve ser aplicado em muitas páginas o ideal é que seja uma folha de estilos externas. Alterando apenas um arquivo, você pode alterar a aparência de um site inteiro.

Para tal, basta que cada página possua um link para folha de estilos.

A tag <link> deve ser adicionada dentro da seção <head> </head>.

Exemplo

<head><link

rel="stylesheet"

type="text/css"

href=“nomedoestilo.css">

</head>

Obs.:<link rel="stylesheet“ type="text/css“ href=“nomedoestilo.css">

Arquivo.css

Qualquer editor de texto pode ser utilizado para criar folha de estilos. O documento deve ser salvo com a extensão “.css”. O arquivo não deve conter tags HTML.

Exemplo:

body {

background-color: silver;

}

h1 {

font-size: 45px;

}

Folha de estilos externa

Uma folha de estilo interna deve ser usada quando um único documento tem um estilo único. Você define estilos internos na seção <head> de uma página HTML, dentro da tag <style>:

<head><style>body {

background-color: olive;}h1 {

color: navy;margin-left: 45px;

}</style></head>

Estilo inline

Para aplicação de estilo em uma tag HTML adicione o atributo que pode conter qualquer propriedade CSS.

<p style=“margin-left: 45px; color: purple;”>

Propriedades de fundo

São utilizadas para definir os efeitos de um elemento de fundo.

• background-color – (Definir cor)

• background-image – (Imagem de fundo)

• background-repeat – (repetir imagem em X ou Y)

• background-attachment – (taquigrafia)

• background-position – (posição)

Exemplo de taquigrafia

body {background: #ffffff url("img_tree.png") no-repeat

right top;}

Obs.:

Na mesma ordem

Propriedades de texto

São utilizadas para definir os efeitos de texto:

• color – (Definir cor)

• text-align – (alinhamento)

• text-decoration – (decoração)

• text-transform – (transformação)

• text-indent – (recuo)

Alinhamento

seletor {

text-align: right;

}

seletor {

text-align: justify;

}

seletor {

text-align: center;

}

Decoraçãoseletor {

text-decoration: none;

}

seletor {text-decoration: overline;

}

seletor {text-decoration: line-through;

}

seletor {text-decoration: underline;

}

Recuo de texto

p {text-indent: 50px;

}

Education

Css3 - Aula 2