Você está na página 1de 33

PROGRAMAO W EB I CSS

Professor: Luiz Carlos Ribeiro Jr. e-mail: luiz.ribeiro@esade.edu.br Curso de Anlise e Desenvolvimento de Sistemas

OBJETIVOS
Entender os conceitos relacionados ao CSS Entender a sintaxe do CSS Aprender a aplic-la em um documento HTML Aprender a construir layouts bsicos com CSS Entender as possibilidades de CSS

INTRODUO

O que CSS?

Cascading Style Sheet (Folha de Estilo em Cascata) Padro de formatao para documentos HTML/XHTML Fontes de letras Textos Listas Cores e Fundos Espaamento Tipos de Bordas Margens Dimenses Posicionamento

O que possvel ser formatado?


INTRODUO

Por que utilizar o CSS?

Tentativa de padronizao entre navegadores Aceito pelo W3C como o padro de formatao de documentos Agilidade para construir e manutencionar layouts

PRINCPIOS BSICOS

Como aplicar CSS a um documento HTML?


Local (inline):

O cdigo CSS definido diretamente na tag HTML O cdigo CSS especificado no cabealho HTML O cdigo definido em um arquivo separado

Incorporar:

Externo:

PRINCPIOS BSICOS

CSS Local:

Utiliza o ATRIBUTO style do HTML:

Por exemplo: <p style=color: #222;font-family:Verdana, Arial, sans-serif> Texto formatado pelo CSS. </p>

Todo elemento visvel no browser possui esse atributo

PRINCPIOS BSICOS

CSS Incorporada:

Utiliza o ELEMENTO <style></style> do HTML

Por exemplo: <html> <head> <style type="text/css"> <!-body{ background: #ee0000; } --> </style> </head>... </html>

PRINCPIOS BSICOS

CSS Externo:

As regras CSS so definidas em um arquivo separado Esse arquivo possui a extenso . css Permite aplicar um modelo nico a diversos documentos

Padronizar o site

Esse arquivo est sempre disponvel na pgina

PRINCPIOS BSICOS

CSS Externo:

O arquivo CSS deve ser definido no cabealho HTML

Por exemplo: <head> <link rel="stylesheet" type="text/css" href="./css/css.css/> </head>

Atributos da tag <link/>:


Rel: define qual a relao entre o documento e o arquivo importado Type: define o tipo de arquivo Href: caminho para o arquivo importado

PRINCPIOS BSICOS

Exemplo de Regra CSS:


body{ background-color: #ccc; margin: 0px; font-family: Arial, Verdana, sans-serif; font-size: 12px; }

PRINCPIOS BSICOS

Seletor

Define onde ser aplicado o estilo

Tipos de Seletores:

Simples Mltiplos Contextual Atributo Class Atributo Id

PRINCPIOS BSICOS

Seletor Simples:

aplicado diretamente a tag HTML


body{....} p{...}

Seletor Mltiplo:

Especfica uma lista de tags HTML


h1, h2, h3{...}

Seletor Contextual:

Aplica o estilo apenas quando encontrada a hierarquia de elementos expressa no seletor


div p{...}

PRINCPIOS BSICOS

Seletor Atributo Class:

Atribudo aos elementos que o atributo class for de mesmo valor do seletor CSS
.conteudo{....} <p class=conteudo>

possvel restringir o tipo de elemento HTML que aceita a regra


p.conteudo{...} <div class=conteudo> ERRADO

PRINCPIOS BSICOS

Seletor Atributo Id:

Semelhante ao class, mas aplicado apenas ao elemento que possuir o id indicado no seletor
#conteudo{....} <p id=conteudo>

possvel restringir o tipo de elemento HTML que aceita a regra


p#conteudo{...} <div id=conteudo> ERRADO

PRINCPIOS BSICOS

Componentes de uma Regra CSS

Propriedade: especifica o estilo individual a ser aplicado

Exemplo: Font-family Color Background-color

Valor: a caracterstica a ser assumida pela propriedade

Exemplo: Font-family:verdana

PRINCPIOS BSICOS

Valores com mais de uma palavra devem ser declarados entre aspas duplas ou simples

Exemplo:

font-family: Comic Sans MS;

Propriedades e valores sempre so separadas por : e finalizadas por ; Diferena entre uma classe e um id?

Classe: quando iremos re-utilizar a regra CSS Id: quando for aplicada apenas uma vez

PRINCPIOS BSICOS

Comentrios CSS:

So abertos por: /* So finalizados por: */ Exemplo:


/* Esse um comentrio CSS */

PRINCPIOS BSICOS

Por que Cascata?


O efeito cascata ocorre quando temos mais de uma regra para um mesmo elemento HTML Existem prioridades que definem a regra a ser aplicada
A regra foi includa inline (prioridade mxima) A regra foi incorporada (prioridade mdia) A regra foi importada (prioridade baixa)

PSEUDO-CLASSES

Permite diferenciar os estados de um elemento


:link

Define o estado inicial do link Define o link aps visitado Define o link quando for passado o mouse por cima dele Define o link ativo, sendo clicado

:visited

:hover

:active

PSEUDO-ELEMENTOS

Permite estilizar partes lgicas que no esto presentes na hierarquia de elementos

first-letter

Permite estilizar o primeiro caractere de um texto Permite estilizar a primeira linha do texto

first-line

PRINCPIOS BSICOS

Modelos de Formatao:
Borda (border) Espaamento (padding) contedo

Margem (margin)

PRINCPIOS BSICOS

Modelos de Formatao

Elemento de Bloco
Assumem a largura mxima do elemento Assumem a altura do contedo que esto armazenando Adicionam uma quebra de linha Somente esse tipo de elemento pode ser posicionado quando construmos layouts

Elemento Interno

Aparecem dentro do prprio contedo do elemento-pai

PRINCPIOS BSICOS

Modelos de Formatao

possvel modificar o modelo de formatao dos blocos atravs da propriedade display Valores Possveis
None Block Inline

PRINCPIOS BSICOS

Posicionamento

possvel definir o posicionamento de um elemento via CSS Propriedade position Valores possveis:
Absolute: considera os valores definidos pelas propriedades top e left Fixed: semelhante a absolute, mas o elemento se mantm fixo Static: o elemento obedece a ordem de ocorrncia no documento (valor padro)

PRINCPIOS BSICOS

Posicionamento

possvel alterar o fluxo de apresentao do elemento Propriedade float Valores possveis:


None: no flutua Left: flutua a esquerda Right: flutua a direita

Propriedade Clear Valores possveis:


None: no existe restrio ao posicionamento do elemento Both: apresentado abaixo dos elementos que estiverem flutuando em sua rea de apresentao Left: apresentado abaixo do elemento a esquerda Right: apresentado abaixo do elemento a direita

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando a fonte:

color: #ff0000; font-family: Arial; font-size: 12px; font-style: italic, bold; font-weight: bold, bolder, lighter, 100, 200, 300, 400...900;

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando textos:

color: #ff0000; letter-spacing: normal, 3px; (espaamento entre letras) word-spacing: normal, 3px; (espaamento entre palavras) text-align: left, right, center, justify; text-decoration: none, underline, overline, line-through, blink; text-indent: 12px, 50%; (recuo do texto) text-transform: none (letras normais), capitalize (todas as letras iniciais em maisculas), uppercase (todas letras em maisculas) lowercase (todas as letras em minsculas); direction: ltr (left-to-right), rtl (right-to-left);

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando margem:

Margin-top: 20cm, 20%; Margin-right: 20cm, 20%; Margin-bottom:...; Margin-left:...; Margin:...;

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando bordas:

border-color: #ff0000; border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset; border-width: thin, medium, thick, 12px; (define a largura da borda) Obs.: caso queira alterar apenas o valor de um lado da borda, basta utilizar a referncia:

Exemplo: border-left-width: thin; border-top-width: thin;

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando espaamentos:

padding-top: 2cm, px; padding-right: ...; padding-left: ...; padding-bottom: ...;

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando Background:

background-color: #ff0000; background-image: url(caminho); background-repeat: no-repeat, repeat, repeat-y (repete vertical), repeat-x (repete horizontal); background-attachment: fixed, scroll; (torna a imagem fixa ou no) background-position: x, y (coordenadas) ou x%, y%, bottom left, top right...todas as combinaes possveis;

LISTA DAS PRINCIPAIS PROPRIEDADES

Alterando listas:

List-style-image: none, caminho da imagem; List-style-position: outside (no alinhado com o texto), inside (marcador alinhado com o texto); List-style-type: none, disc, circle, square, decimal, decimal-leading-zero (iniciar em zero);

SITES INTERESSANTES

http://www.maujor.com/

http://www.csszengarden. com/