CSS

Introducao Sintaxe CSS Tipos de CSS Propriedades CSS Casos de uso

Programacao WebCascading Style Sheets

Ivo Calado

Instituto Federal de Educacao, Ciencia e Tecnologia de Alagoas

7 de Maio de 2012

1 / 54 Ivo Calado IFAL

Programacao Web


Roteiro

1 Introducao

2 Sintaxe CSS

3 Tipos de CSS

4 Propriedades CSS

5 Casos de uso


Programacao Web

Qual o problema com o HTML?

Suponha que desejamos criar uma aplicacao Web, quais seriam ospassos?

Definimos o conteudo que vamos querer exibir

Definimos a estruturacao do conteudo na tela

Fazemos uso de tags para definirmos a hierarquia do conteudo(tags <h>, por exemplo)

Definimos a formatacao a ser adotada (cores, tamanhos defonte, espacamentos etc.)

Qual o problema com a abordagem anterior?

Estamos acomplando o conteudo a ser exibido de sua formatacao!... considere um site que todos os anos altera o seu layout!


Programacao Web









Estamos acomplando o conteudo a ser exibido de sua formatacao!

... considere um site que todos os anos altera o seu layout!


Programacao Web









Estamos acomplando o conteudo a ser exibido de sua formatacao!... considere um site que todos os anos altera o seu layout!


Programacao Web



CSS: a solucao!

Separa a marcacao do HTML da apresentacao do site

Agora a responsabilidade do HTML e apenas estruturar oconteudo enquanto que o visual e de responsabilidade do CSS

HTML marca e estrutura textos, cabecalhos, paragrafos, links,botoes, formularios, imagens e demais elementos da pagina

CSS define cores, posicionamento na tela, estilos de linhas,bordas e tudo o mais relacionado a apresentacao


Programacao Web


Definicao

O que e?

Acronimo de Cascading Style SheetsDefine como os elementos HTML serao exibidosFoi adicionado ao HTML 4.0Podem ser definidos tanto dentro do arquivo HTML quantoem um arquivo separado (*.css)

Quando utilizar dentro do proprio HTML e quando deve estar emum arquivo separado?

Se a formatacao representar poucos elementos, pode ser utilizadodentro do proprio arquivo. Porem, se a formatacao do CSSabranger todo o conteudo da pagina e/ou a aplicacao Web forcomposta de diversas paginas, deve ser utilizado em um arquivoseparado de modo a possibilitar reutilizacao!


Programacao Web


Regras

A regra CSS e sua sintaxe

Uma regra CSS e uma declaracao que segue uma sintaxepropria e que define como sera aplicado estilo a um ou maiselementos HTML

Um conjunto de regras CSS formam uma Folha de Estilos.

Uma regra CSS, na sua forma mais elementar, compoe-se de trespartes: um seletor, uma propriedade e um valor e tem a seguintesintaxe

s e l e t o r { p r o p r i e d a d e : v a l o r ; }


Programacao Web

Regras

Definindo os elementos

Seletores: e o elemento HTML para qual a regra seravalida. Pode ser uma tag, uma classe, ou por uma ID etc.(por exemplo: , <h1>, <form>, .minhaclasse, etc...)

Propriedade: e o atributo do elemento HTML ao qual seraaplicada a regra (por exemplo: font, color, background, etc...)

Valor: e a caracterıstica especıfica a ser assumida pelapropriedade

A atribuicao dos valores as propriedades e feito atraves dooperador ’:’ e nao do operador ’=’ !O operador ’;’ e opcional se houver apenas uma propriedade ou nocaso da ultima!


Programacao Web


Regras





A atribuicao dos valores as propriedades e feito atraves dooperador ’:’ e nao do operador ’=’ !

O operador ’;’ e opcional se houver apenas uma propriedade ou nocaso da ultima!


Programacao Web


Regras





A atribuicao dos valores as propriedades e feito atraves dooperador ’:’ e nao do operador ’=’ !O operador ’;’ e opcional se houver apenas uma propriedade ou nocaso da ultima!


Programacao Web


Regras

Exemplos

Listing 1: Elementos ’p’ e ’body’ customizados

p {f o nt−s i z e : 12 px ;}

body {c o l o r : #000000;background : #FFFFFF ;f o nt−w e i g h t : b o l d ;}

Listing 2: Alteracao da fonte para o conteudo do elemento ’h3’

h3 {f o nt−f a m i l y : "Comic Sans MS"

}8 / 54 Ivo Calado IFAL

Programacao Web


Regras

Comentarios

E possıvel introduzir comentarios ao longo das regras CSS. Paratal, colocase entre os elementos /* */

s e l e t o r{

p r o p r i e d a d e : v a l o r ; /∗O que e s t i v e r a q u i nao s e r ac o n s i d e r a d o !∗/

}


Programacao Web


Agrupamento de seletores

O que e e como fazer?

Muitas vezes precisamos definir a mesma regra para variosseletores

Deste modo, e necessario agrupar todos os elementos em umaunica regra

Listing 3: Exemplo de agrupamento de seletores

h1 , h2 , h3 , h4 , h5 , h6 {c o l o r : #00FF00 ;}


Programacao Web


Seletores class e id

O seletor class

Ate agora vimos a aplicacao de estilos as tags

Mas quais sao as limitacoes disso?

Nao e possıvel definir diferentes estilos ao mesmo tag aomesmo tempo!

Nestes casos fazem-se uso dos seletores class e id


Programacao Web



O seletor class

O seletor class permite que voce defina seus propriosidentificadores que sao utilizados nas regras de estilo.

e lemento . m i n h a c l a s s e {p r o p r i e d a d e : v a l o r ;}

p . cor−um {c o l o r :#000;}

p . cor−d o i s {c o l o r :#0 f f ;}


Programacao Web

Usando o seletor class

 e s t e p a r a g r a f o s e r a na c o r p r e t a .

e s t e p a r a g r a f o s e r a na c o r a z u l .


Programacao Web



Extendendo o seletor class para varias tags

Ao criar uma classe voce talvez queira que ela seja aplicavel aqualquer elemento HTML. Neste caso basta que se omita o nomedo elemento antes da classe.

. cor−t r e s {c o l o r : #00 f ;

}


Programacao Web


O seletor id

Usando o seletor id

O seletor ID difere do seletor classe, por ser UNICO

Um seletor ID de determinado nome so pode ser aplicado aUM e somente UM elemento HTML dentro do documento

#meuID {p r o p r i e d a d e : v a l o r ;}

p#c o r {c o l o r : #00 f ;

}


Programacao Web

O seletor id

Usando o seletor id

 e s t e p a r a g r a f o s e r a na c o r p r e t a .


Programacao Web


O seletor id

Quando utilizar o seletor id e quando utilizar class

O seletor id deve ser usado quando apenas 1 elemento devera seralterado. O elemento class sera utilizado quando muitos elementosserao customizados


Programacao Web


Insercao de folhas de estilo

Existem 3 formas de insercao de codigo CSS

Definicao em arquivo externo

Definicao no elemento header

Definicao inline


Programacao Web

Folhas de estilo externos

Folhas de estilo externos

Definido em um arquivo com extensao .cssApos isso, ele e referenciado de duas formas

<head>. . .< l i n k r e l="stylesheet" type="text/css" h r e f="estilo.css

">. . .</head>

<head>. . .<s t y l e type="text/css">@import u r l ("estilo.css" ) ;</ s t y l e>. . .</head>19 / 54 Ivo Calado IFAL

Programacao Web

Folha de estilo definido no header

Folha de estilo definido no header

As folhas de estilos sao definidos dentro da table style

<head> <s t y l e type="text/css"><!−−body {background : #000;u r l ( imagens /minhaimagem . g i f ) ;}h3 { c o l o r : #f00 ;}p {margin− l e f t : 15px ;padd ing : 1 . 5em ;}−−></ s t y l e></head>


Programacao Web

Folha de estilo inline

Folha de estilo inline

O estilo e definido dentro do parametro style

Aqui um p a r a g r a f o de c o r p r e t a e com 5 px nas 4 margens

.


Programacao Web


Conflito entre estilos e efeito cascata

Conflito entre estilos

O que acontece quando dois estilos sao aplicados ao mesmoelemento em escopos diferentes?

Ha uma situacao de conflito.Neste caso e utilizado o efeito Cascata (Cascade)

Entao o que acontece? E utilizado o valor mais interno!


Programacao Web





Ha uma situacao de conflito.

Neste caso e utilizado o efeito Cascata (Cascade)



Programacao Web






Entao o que acontece?

E utilizado o valor mais interno!


Programacao Web








Programacao Web


Font e text

Customizando a fonte

As propriedades para as fontes, definem as caracterısticas (osvalores na regra CSS) das letras que constituem os textos dentrodos elementos HTML

color: cor da fonte

font-family: tipo da fonte

font-size: tamanho da fonte

font-style: estilo da fonte

font-variant: fontes maiusculas de menor altura

font-weight: nıvel de negrigo


Programacao Web


Font e text

Color

Existem tres formas de representar cores:

codigo hexadecimal: #FFFFFF

codigo rgb: rgb(255,235,0)

nome da cor: red, blue, green...etc

Ver exemplo


Programacao Web

Font e text

Font-family

Define o nome das fontes a serem utilizadas

<s t y l e type="text/css"><!−−h2 { font−f am i l y : a r i a l , h e l v e t i c a , s e r i f ;}p { font−f am i l y : sans− s e r i f ;}−−></ s t y l e>


Programacao Web


Font e text

Font-size

Especifica o tamanho da fonte:

xx-small

x-small

small

medium

...

length: uma medida reconhecida pelas CSS (px, pt, em, cm,...)

%

Ver exemplo


Programacao Web

Font e text

Font-style

Define estilos de fontes como italico, oblicuo

<s t y l e type="text/css"><!−−h1 { font−s t y l e : i t a l i c ;}h2 { font−s t y l e : normal ;}p { font−s t y l e : o b l i q u e ;}−−></ s t y l e>


Programacao Web

Font e text

font-variant

Define variacoes para fontes. Existem duas variantes principais:

normal: fonte normal

small-caps: transforma em maiusculas de menor altura

<s t y l e type="text/css"><!−−h3 { font−v a r i a n t : normal ;}p{ font−v a r i a n t : smal l−caps ;}−−>p</ s t y l e>


Programacao Web


Font e text

font-weight

Define a intensidade da cor (nıvel de negrito)

normal

bold

bolder

lighter

100

200

...

Ver exemplo


Programacao Web


Font e text

Formatacao de texto

Alem das fontes, e possıvel realizar diversas customizacoes notexto propriamente dito

letter-spacing: espacamento entre letras

word-spacing: espacamento entre palavras

text-align: alinhamento

text-decoration: decoracao de texto (underline, overline,blink etc)

text-inden: identacao do texto

text-transform: transformacao de texto (maiusculo paraminusculo e vice-versa)

white-space: especifica como os espacos em branco seraotratados


Programacao Web

Font e text

letter-spacing

normal: e o espacamento default

lenght: uma medida reconhecida pelas CSS (px, pt, cm, ...)Sao validos valores negativos

<s t y l e type="text/css"><!−−h2 { l e t t e r −s p a c i n g : 1 . 2cm;}p { l e t t e r −s p a c i n g : 0 . 4cm;}−−></ s t y l e>


Programacao Web

Font e text

word-spacing

Segue a mesma estrutura de espacamento de palavras

<s t y l e type="text/css"><!−−h2 {word−s p a c i n g : 1 . 8em ;}p {word−s p a c i n g : 80px ;}−−>


Programacao Web


Font e text

text-align

Define o estilo de alinhamento

left

right

center

justify

Ver demais exemplos na pagina...


Programacao Web

Font e text

text-indent

Especifica o recuo de um texto em termo de graduacao

<s t y l e type="text/css"><!−−h3 { text−i n d en t : 80px ;}p { text−i n d en t : 3em ;}−−></ s t y l e>


Programacao Web

Margens, bordas e padding

Margens

A propriedade para margens, define um valor para espessura dasmargens dos elementos HTML

margin-top

margin-left

margin-right

margin-bottom

<s t y l e type="text/css"><!−−p {margin−top : 2cm;}−−></ s t y l e>


Programacao Web

Bordas

As propriedades para as bordas, definem as caracterısticas (osvalores na regra CSS) das quatro bordas de um elementoHTMLExistem em torno de 20 diferentes propriedades que podemser customizadas!!Todavia, todas as propriedades estao relacionadas a largura,estilo e cor das bordas

<s t y l e type="text/css"><!−−p {

border−width : t h i n ;border−top−s t y l e : h idden ;border−r i g h t−c o l o r : rgb (255 ,235 ,0 ) ;

}−−></ s t y l e>


Programacao Web

Padding

Uma outra propriedade que pode ser configurada e a distanciaentre a borda e o elemento HTMLSao definidas as propriedades: padding-top, padding-right,padding-bottom, padding-left

<s t y l e type="text/css"><!−−p {

padding−top : 2cm ;}

−−></ s t y l e>


Programacao Web



Outras propriedades CSS

Alem das propriedades ja apresentadas, diversas outras opcoes deconfiguracao sao possıveis, como:

Background

Listas

Entrelinhas

etc


Programacao Web


Visibilidade e Posicionamento

Visibilidade

E possıvel tornar um elemento “invisıvel” a partir do CSS

Existem duas opcoes com resultados levementes diferentes

h1 . h i d d e n { v i s i b i l i t y : h i d d e n ;}h1 . h i d d e n { d i s p l a y : none ;}


Programacao Web



Posicionamento

Css possibilita customizar a posicao do elemento pretendido

E possıvel posicionar um elemento a esquerda, direita, cima,embaixo e inclusive com sobreposicao entre elementos

O posicionamento de elementos podem ser fixos ou relativo


Programacao Web



Elementos Fixos

Elementos nao se movem com a barra de rolagem

p . p o s f i x e d{p o s i t i o n : f i x e d ;top : 3 0 px ;r i g h t : 5 px ;}


Programacao Web



Posicionamento relativo

Aqui o posicionamento e relativo ao que deveria ser suaposicao “original”

h2 . p o s l e f t{p o s i t i o n : r e l a t i v e ;l e f t :−20 px ;}h2 . p o s r i g h t{p o s i t i o n : r e l a t i v e ;l e f t : 2 0 px ;}


Programacao Web



Posicionamento absoluto

Com posicionamento absoluto e possıvel definir onde cadaelemento vai se encontrar exatamente

Neste tipo de posicao pode haver sobreposicao de elementos

h2{p o s i t i o n : a b s o l u t e ;l e f t : 1 0 0 px ;top : 1 5 0 px ;}


Programacao Web



Sobreposicao de elementos

Conforme apresentado com o posicionamento absoluto, epossıvel ocorrer sobreposicao de elementos

Para tal, pode-se definir a ordem de qual elemento seraexibido atraves do parametro z-index

img{p o s i t i o n : a b s o l u t e ;l e f t : 0 px ;top : 0 px ;z−i n d e x :−1}


Programacao Web


Pseudoclasses e Pseudoelemtos

Pseudoclasses

Em CSS pseudoclasses sao usada para adicionar efeitos especiais aalguns seletoresSintaxe:

s e l e c t o r : pseudo−c l a s s { p r o p e r t y : v a l u e ;}s e l e c t o r . c l a s s : pseudo−c l a s s { p r o p e r t y : v a l u e ;}

Diversos tipos de pseudoclasses podem ser utilizadas

Anchor (ancoras)

first-child

Outros: focus, first-line, before, after etc.


Programacao Web



Ancoras

Links podem ser exibidos de diferentes formas em navegadores quesuportam CSS

a : l i n k { c o l o r :#FF0000 ;} /∗ u n v i s i t e d l i n k ∗/a : v i s i t e d { c o l o r :#00FF00 ;} /∗ v i s i t e d l i n k ∗/a : h o v e r { c o l o r :#FF00FF ;} /∗ mouse o v e r l i n k ∗/a : a c t i v e { c o l o r :#0000FF ;} /∗ s e l e c t e d l i n k ∗/

Notas

a:hover DEVE ser apresentado apos a:link e a:visited nadefinicao de CSS para que haja efeito

a:active DEVE ser apresentado apos a:hover na definicaoCSS para que haja efeito


Programacao Web

A pseudoclasse :first-child

Objetivo: customizar o primeiro elemento dentro de um outroelemento

Listing 4: Encontra o primeiro elemento p

<s t y l e type="text/css">p : f i r s t −c h i l d{c o l o r : b l u e ;}</ s t y l e>


Programacao Web


Barras de navegacao

Barra de Navegacao Horizontal

A criacao de barras de navegacao e importante em qualquerWebsite

Com CSS e possıvel transformar menus HTML em barras denavegacao estilizadas

Barras de navegacao == Lista de links!!Uma barra de navegacao e basicamente uma lista de links


Programacao Web

Barras de navegacao

Passo 1: criacao da lista de links

< l i><a h r e f="home.html">Home</a></ l i>< l i><a h r e f="noticias.html">News</a></ l i>< l i><a h r e f="contatos.html">Contact</a></ l i>< l i><a h r e f="sobre.html">About</a></ l i>


Programacao Web


Barras de navegacao

Passo 2: remover marcadores da lista e espacos

u l{l i s t −s t y l e−t y p e : none ; /∗Remove os marcadores ∗/margin : 0 ; /∗Remove espa co e n t r e a margem∗/padd ing : 0 ; /∗Remove espa co i n t e r n o da c e l u l a ∗/}l i{f l o a t : l e f t ;}


Programacao Web


Barras de navegacao

Passou 3: definido comportamento dos links

a : l i n k , a : v i s i t e d{

d i s p l a y : b l o c k ;width : 1 2 0 px ;f o nt−w e i g h t : b o l d ;c o l o r :#FFFFFF ;background−c o l o r :#98 bf21 ;t e x t−a l i g n : c e n t e r ;padd ing : 4 px ;t e x t−d e c o r a t i o n : none ;t e x t−t r a n s f o r m : u p p e r c a s e ;

}a : hover , a : a c t i v e{

background−c o l o r :#7A991A ;}


Programacao Web


Barras de navegacao

Barra de navegacao vertical

Para transformar nosso exemplo em uma barra vertical temosapenas de retirar a flutuacao dos elementos

l i{

f l o a t : l e f t ;}


Programacao Web


Duvidas?


Programacao Web


Exercıcio I

Com base no HTML apresentado aquihttp://paste.pocoo.org/raw/382563/, crie uma pagina comoesta: http://tinyurl.com/5t8fg4d

Altere o codigo apresentado emhttp://paste.pocoo.org/raw/382566/ retirando todo oconteudo de formatacao e movendo-o para um conteudo CSS

Altere o html (http://maujor.com/temas/html-padrao zengarden-maujor.zip) adicionando as devidasformatacoes CSS. Usem insercao de imagens, posicionamento,transparencia, alteracao de fontes etc. Sejam criativos!! :)


Programacao Web

CSS

Documents

Transcript of CSS