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ção
seletor {
text-decoration: none;
}
seletor {
text-decoration: overline;
}
seletor {
text-decoration: line-through;
}
seletor {
text-decoration: underline;
}

Recuo de texto
p {
text-indent: 50px;
}

Css3 - Aula 2

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Css3 - Aula 2

Semelhante a Css3 - Aula 2 (20)

Mais de Dorival Silva

Mais de Dorival Silva (8)

Último

Último (20)

Css3 - Aula 2