UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLGIO AGRCOLA DE FREDERICO WESTPHALEN WEBDESIGN II

WEBDESIGN II AULA 2 CSS

Folhas de Estilo em Cascata

DISCIPLINA: WEBDESIGN II PROF.: ROMULO VANZIN

Data: 27/03/2012

OBJETIVOS

O objetivo desta aula da disciplina de Webdesign II, apresentar os conceitos iniciais sobre CSS (Cascade Style Sheet). Ser demonstrada uma viso geral sobre os conceitos envolvendo a Linguagem CSS (Cascade Style Sheet). Ao final da aula, espera-se que os alunos tenham compreendido a teoria sobre CSS (Cascade Style Sheet).

TPICOS A SEREM ABORDADOS

Retomando Compartilhar Declaraes Mltiplas formataes Imagem de Fundo(Fixa, Posio) Fontes Texto Links

RETOMANDO

Regra CSS

RETOMANDO

Seletor: o alvo da CSS, define onde ser aplicada a regra CSS; Declarao: determina os parmetros da estilizao; Propriedade: define qual propriedade do elemento ser estilizado; Valor: a quantificao ou qualificao da propriedade;

COMPARTILHAR DECLARAES

A tag <h1> e a tag <h2> compartilham a mesma formatao, nesse caso, ambas tero fonte do tipo sans-serif; cor cinza; borda inferior com 2px e de cor cinza, e margem externa com 5 pixels. h1, h2 {
color: gray; font-family: sans-serif; Border-bottom: 2px solid gray; Margin: 5px; }

MLTIPLAS FORMATAES

Como podemos fazer para especificar que apenas a tag <h1> deve ser sublinhada, de acordo com o exemplo abaixo? h1, h2 {
color: gray; font-family: sans-serif; Border-bottom: 2px solid gray; Margin: 5px; }

MULTIPLAS FORMATAES

Um elemento pode ter vrias regras no CSS. As novas regras de formatao de um elemento sero acumulativas.

h1, h2 {
color: gray; font-family: sans-serif; margin: 5px;

} h1{ border-bottom: 2px solid gray; }

IMAGEM DE FUNDO

Imagem de fundo [background-image]

A propriedade CSS background-image usada para definir uma imagem de fundo. Usaremos a imagem do logo do CAFW para exemplificar a aplicao de imagens de fundo. Voc pode fazer o download da imagem qualquer ao seu gosto.

IMAGEM DE FUNDO
body { background-color: #FFCC66; background-image: url("cafw.jpg"); } h1 { color: #990000; background-color: #FC9804; }

IMAGEM DE FUNDO REPETIDA

Imagem de fundo repetida [background-repeat] No exemplo anterior voc observou que a imagem do logo do CAFW repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetio da imagem de fundo. A tabela a seguir mostra os quatro diferentes valores para background-repeat.

IMAGEM DE FUNDO REPETIDA

VALOR DESCRIO

Background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat background-repeat: no-repeat

A imagem se repete na horizontal A imagem se repete na vertical A imagem se repete tanto na horizontal como na vertical A imagem no se repete

IMAGEM DE FUNDO REPETIDA

Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita na tela:

body { background-color: #FFCC66; background-image: url("cafw.jpg");

background-repeat: no-repeat;
} h1 { color: #990000; background-color: #FC9804; }

IMAGEM DE FUNDO FIXA

A propriedade background-attachment define se a imagem ser fixa ou se ir rolar juntamente com o elemento que a contm. Uma imagem de fundo fixa permanece no mesmo lugar e no rola com a tela ao contrrio da imagem que no fixa e rola acompanhando o contedo da tela. A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os exemplos para constatar a diferena entre imagem fixa e imegem que rola.

IMAGEM DE FUNDO FIXA

VALOR DESCRIO

Backgroundattachment: scroll Backgroundattachment: fixed

A imagem rola com a pgina A imagem fixa

IMAGEM DE FUNDO FIXA

Por exemplo, o cdigo mostrado a seguir para que a imagem no se repita na tela e tambm fique fixa na pgina:

body { background-color: #FFCC66; background-image: url("cafw.jpg"); background-repeat: no-repeat;

background-attachment: fixed;
} h1 { color: #990000; background-color: #FC9804; }

IMAGEM DE FUNDO POSIO

Por padro uma imagem de fundo posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padro e colocar a imagem em qualquer lugar na tela. Existem vrias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centmetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:

IMAGEM DE FUNDO POSIO

IMAGEM DE FUNDO POSIO

Na tabela a seguir so mostrados alguns exemplos:

VALOR DESCRIO

backgroundposition: 2cm 2cm backgroundposition: 50% 25% backgroundposition: top right

A imagem posicionada a 2 cm da esquerda e 2 cm para baixo na pgina A imagem centrada na horizontal e a um quarto (25%) para baixo na pgina A imagem posicionada no canto superior direito da pgina

IMAGEM DE FUNDO POSIO

No exemplo de cdigo a seguir a imagem posicionada no canto inferior direito da pgina:

body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }

IMAGEM DE FUNDO POSIO

A propriedade background uma abreviao para todas as propriedades listadas anteriormente. Com background voc declara vrias propriedades de modo abreviado, economizando digitao e alguns bites, alm de tornar a folha de estilo mais fcil de se ler e entender. background: #FFCC66 url("cafw.jpg") no-repeat fixed right bottom;

IMAGEM DE FUNDO POSIO

A declarao abreviada deve seguir a seguinte ordem: [background-color] | [background-image] | [backgroundrepeat] | [background-attachment] | [backgroundposition] Se uma das propriedades no for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment ebackgroundposition no foram declaradas no cdigo mostrado a seguir: background: #FFCC66 url(cafw.jpg") no-repeat;

IMAGEM DE FUNDO POSIO

As duas propriedades no declaradas assumiro o valor default: a imagem rola na tela e ser posicionada no canto superior esquerdo (que so os valores default para as propriedades no declaradas).

FONTES

Agora estudaremos as fontes e como aplic-las usando CSS. Veremos como criar situaes para que determinada fonte seja visualizada pelo usurio mesmo no estando instalada em seu sistema operacional. Descreveremos as seguintes propriedades CSS:

FONTES
font-family font-style font-variant font-weight font-size font

FONTES

Famlia de fontes [font-family] A propriedade font-family usada para definir uma lista de fontes e sua prioridade para apresentao de um elemento em uma pgina. Se a primeira fonte da lista no estiver instalada na mquina do usurio, dever ser usada a segunda e assim por diante at ser encontrada uma fonte instalada.

FONTES

Existem dois tipos de nomes para definir fontes: nomes para famlias de fontes e nomes para famlias genricas. Os dois so explicados a seguir: nome para famlias de fontes Exemplos para este tipo (normalmente conhecidas como "font") so "Arial", "Times New Roman" ou "Tahoma". nome para famlias genricas Famlias genricas so fontes que pertencem a um grupo com aparncia uniforme. Um exemplo so as fontes sans-serif que englobam a coleo de fontes que "no tm p".

FONTES

FONTES

A seguir mostramos um exemplo de listagem de fontes:

h1{ font-family: arial, verdana, sans-serif; } h2{ font-family: "Times New Roman", serif; }

FONTES

Estilo da fonte [font-style] A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabealhos <h2> sero em itlico.

h2{ font-style: italic; }

FONTES

Peso da fonte [font-weight] A propriedade font-weight define quo negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam nmeros de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.

p { font-family: arial, verdana, sans-serif } td{ font-family: arial, verdana, sans-serif; fontweight: bold; }

FONTES

Tamanho da fonte [font-size] O tamanho da fonte definido pela propriedade fontsize. Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte. Usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir: h1 { font-size: 30px; }

TEXTO

Formatar e estilizar textos um item chave para qualquer web designer. Apresentaremos s interessantes formas de que as CSS proporcionam para adicionar layout aos textos. Sero discutidas as propriedades listadas abaixo:

TEXTO
text-indent text-align text-decoration letter-spacing text-transform

TEXTO

Indentao de texto [text-indent] A propriedade text-indent permite que voc aplique um recuo primeira linha de um pargrafo. No exemplo a seguir um recuo de 30px aplicado todos os textos marcados com <p>: p { text-indent: 30px; }

TEXTO

Alinhamento de textos [text-align] A propriedade text-align corresponde ao atributo align das antigas verses do HTML. Textos podem ser alinhados esquerda (left), direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento usado em jornais e revistas. No exemplo a seguir o texto contido na clula de cabealho <th> alinhado direita e os contidos nas clulas de dados <td> so centrados. E, os textos normais em pargrafos so justificados:

TEXTO
th { text-align: right; } td { text-align: center; } p{ text-align: justify; }

TEXTO

Espao entre letras [letter-spacing] O espaamento entre os caracteres de um texto controlado pela propriedade letter-spacing. O valor desta propriedade define o espao entre os caracteres. Por exemplo, se voc deseja um espao de 3px entre as letras do texto de um pargrafo <p> e de 6px entre as letras do texto de um cabealho <h1> o cdigo a seguir dever ser usado. h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

TEXTO

Transformao de textos [text-transform] A propriedade text-transform controla a capitalizao (tornar maiscula) do texto. Voc pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no cdigo HTML. Como exemplo tomamos a palavra "cabealho" que pode ser apresentada ao usurio como "CABEALHO" ou "Cabealho". So quatro os valores possveis para text-transform:

TEXTO

capitalize Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe". uppercase Converte todas as letras para maiscula. Por exemplo: "john doe" transforma-se para"JOHN DOE". lowercase Converte todas as letras para minscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".

TEXTO

none Sem trasformaes - o texto apresentado como foi escrito no cdigo HTML. Para exemplificar vamos usar uma lista de nomes. Os nomes esto marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabealhos em letras maisculas. Ao consultar o exemplo sugerido para este cdigo d uma olhada no HTML da pgina e observe que os textos no cdigo foram escritos com todas as letras em minsculas. h1 { text-transform: uppercase; } li { text-transform: capitalize; }

LINKS

Voc pode aplicar aos links tudo que aprendeu anteriormente (mudar cores, fontes, sublinhados, etc). A novidade aqui que voc pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, no visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos voc usar as chamadas pseudo-classes.

LINKS

O que pseudo-classe? Uma pseudo-classe permite estilizar levando em conta condies diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML. Vamos ver um exemplo. Como voc j sabe, links so marcados no HTML com tags <a>. Podemos ento usar a como um seletor CSS:

LINKS

a { color: blue; } Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou no visitado. Usaremos pseudo-classes para estilizar links visitados e no visitados.

LINKS

a:link { color: blue; } a:visited { color: red; }

LINKS

Pseudo-classe: link A pseudo-classe :link usada para links no visitados. No exemplo a seguir links no visitados sero na cor verde. a:link { color: green; }

LINKS

Pseudo-classe: visited A pseudo-clases :visited usada para links visitados. No exemplo a seguir links visitados sero na cor amarela: a:visited { color: yellow; }

LINKS

Pseudo-classe: active A pseudo-classe :active usada para links ativos. No exemplo a seguir links ativos tero seu fundo na cor vermelha: a:active { background-color: red; }

LINKS

Pseudo-classe: hover A pseudo-classe :hover usada para quando o ponteiro do mouse est sobre o link. Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itlico quando o ponteiro do mouse passa sobre ele, o cdigo CSS para estes efeitos o mostrado a seguir: a:hover { color: orange; font-style: italic; }

LINKS

Uma pergunta comum: Como remover o sublinhado dos links? Voc deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poder reduzir significativamente a usabilidade do website. As pessoas esto acostumadas com links na cor azul e sublinhados e sabem que ali h um texto a ser clicado. At minha me sabe disto! Se voc muda a cor e retira o sublinhado dos links, poder confundir seus visitantes e em conseqncia no retirar o mximo dos contedos do seu website.

LINKS

Feita esta ressalva, muito fcil retirar o sublinhado dos links. A propriedade text-decoration pode ser usada para definir se o texto ou no sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration. a { text-decoration: none; }

EXERCCIO

http://www.cafw.ufsm.br/~romulo

DVIDAS

http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br