tuto_css.PDF

(3672 KB) Pobierz

Css

Página 1

CSS

Sumário

Introdução ao CSS

......................................................................................................................... 4

O que mais posso fazer com CSS?

................................................................................................ 6

Como funciona as CSS

.................................................................................................................. 7

Método 1: In-line (o atributo style)

........................................................................................... 8

Método 2: Interno (a tag style)

.................................................................................................. 8

Método 3: Externo (link para uma folha de estilos)

.................................................................. 8

Prática:.......................................................................................................................................

Cores e fundos

........................................................................................................................... 9

Cor do primeiro plano: a propriedade 'color'

............................................................................. 9

A propriedade 'background-color'

........................................................................................... 10

Image de fundo fixa [background-attachment]

....................................................................... 11

Posição da imagem de fundo [background-position]

.............................................................. 12

Compilando [background].......................................................................................................

Fontes

.......................................................................................................................................... 13

Família de fontes [font-family]

............................................................................................... 14

nome para famílias de fontes

................................................................................................... 14

nome para famílias genéricas

.................................................................................................. 14

Estilo da fonte [font-style].......................................................................................................

Fonte variante [font-variant]

................................................................................................... 15

Peso da fonte [font-weight]

..................................................................................................... 15

Tamanho da fonte [font-size]

.................................................................................................. 15

Compilando [font]

................................................................................................................... 16

Textos

...................................................................................................................................... 16

Indentação de texto [text-indent]

............................................................................................. 16

Alinhamento de textos [text-align]

.......................................................................................... 16

Decoração de textos [text-decoration]

..................................................................................... 17

Espaço entre letras [letter-spacing]

......................................................................................... 17

Transformação de textos [text-transform]

............................................................................... 17

Links

........................................................................................................................................ 18

O que é pseudo-classe?

........................................................................................................... 18

Pseudo-classe: link

.............................................................................................................. 19

Css

Página 2

Pseudo-classe: visited

.......................................................................................................... 19

Pseudo-classe: active

........................................................................................................... 19

Pseudo-classe: hover

........................................................................................................... 19

Exemplo 1: Efeito quando o ponteiro está sobre o link.......................................................

Exemplo 1a: Espaçamento entre as letras

........................................................................... 19

Exemplo 1b: UPPERCASE e lowercase

............................................................................. 20

Exemplo 2: Removendo sublinhado dos links

.................................................................... 20

Identificando e agrupando elementos (classes e id)

.................................................................... 21

Agrupando elementos com uso de classe

................................................................................ 21

Identificando um elemento com uso de id

.............................................................................. 22

Agrupando elementos (span e div)

.......................................................................................... 23

Agrupando com <span>

...................................................................................................... 23

Agrupando com <div>

........................................................................................................ 23

Box Model

................................................................................................................................... 24

O box model em CSS

.............................................................................................................. 25

Margin e padding

.................................................................................................................... 26

Definindo margin de um elemento

.......................................................................................... 26

Definindo padding de um elemento

........................................................................................ 27

Bordas

......................................................................................................................................... 27

A espessura das bordas [border-width]

................................................................................... 28

As cores das bordas [border-color]

......................................................................................... 28

Tipos de bordas[border-style]

................................................................................................. 28

Exemplos de definição de bordas

............................................................................................ 28

Compilando [border]

............................................................................................................... 30

Altura e largura

........................................................................................................................... 30

Atribuindo largura [width]

...................................................................................................... 30

Atribuindo altura [height]........................................................................................................

Flutuando elementos (floats)

................................................................................................... 31

Outro exemplo : colunas

......................................................................................................... 32

A propriedade clear

..................................................................................................................... 32

Posicionando elementos

.......................................................................................................... 33

O princípio de posicionamento CSS

........................................................................................... 33

Posicionamento absoluto

......................................................................................................... 34

Posicionamento relativo

.......................................................................................................... 35

Css

Página 3

Usando z-index (Layers)

............................................................................................................. 35

BIBLIOGRAFIA: ............................................................................................................................. 36

Introdução ao CSS

CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria

ótimo fazer layouts na sua página sem ter que alterar o HTML toda vez que quisesse

mudar?

Nesta introdução vamos ter uma breve introdução ao CSS para ter uma idéia de

como o CSS é prático. Podemos dizer que o CSS é a melhor metade do HTML.

Codificando, não há melhor parceria:

HTML é responsável pelo trabalho pesado (a

estrutura), enquanto CSS dá o toque de elegância (layout).

CSS pode ser adicionado com uso do atributo style.

Por exemplo, você pode

definir o tipo e o tamanho da fonte em um parágrafo:

style="font-size:20px;">Este

parágrafo em tamanho de fonte igual a

20px</p>

style="font-family:courier;">Este

parágrafo em fonte Courier</p>

style="font-size:16px; font-family:cambria">Este

parágrafo em fonte

Cambria e tamanho 20px</p>

Será renderizado no navegador assim:

Este parágrafo em tamanho de fonte igual a 20px

Este parágrafo em fonte Courier

Este parágrafo em fonte Cambria e tamanho 16px

Css

Página 4

No exemplo acima usamos o atributo style para definir o tipo de fonte usado

(com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size).

Notar que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da

fonte separado por um ponto e vírgula.

Uma das funcionalidades mais inteligentes das CSS é a possibilidade de

controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada

tag, você pode dizer ao navegador como deve ser o layout de todos os textos em uma

página:

<html>

<head>

<title>Minha primeira página CSS</title>

h1 {font-size: 30px; font-family: arial}

h2 {font-size: 15px; font-family: courier}

p {font-size: 8px; font-family: times new roman}

</style>

</head>

<body>

<h1>Minha primeira página CSS</h1>

<h2>Bem vindo à minha primeira página CSS</h2>

<p>Aqui você verá como funciona CSS</p>

</body>

</html>

No exemplo acima inserimos as CSS na seção head do documento, assim ela

se aplica à página inteira. Para fazer isto use a tag <style type="text/css"> que informa

ao navegador que você está digitando CSS.

No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho

30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos

parágrafos serão em fonte Times New Roman tamanho 8. Uma outra opção é a de

digitar as CSS em um documento separado. Com as CSS em um documento separado

você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito inteligente,

pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer

ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora,

mas você pode aprender tudo, no futuro, em nosso tutorial CSS.