PROGRAMAÇÃO WEB - CLIENTE
CSS
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Origem
CSS – Cascading Style Sheet
• Propriedades que podem ser atribuídas aos elementos HTML para definir aspeto,
estilo e até comportamento
• Proposto originalmente por Håkon Wium Lie (colega do Tim Berners-Lee no CERN)
em 1994
• Primeira versão (CSS1) ratificada pela W3C em 1996
• Atualmente na versão CSS3
• Introduziu as Media Queries que permitem a aplicação de uma série de regras
baseada nas definições do dispositivo em que a página está a ser renderizada
• Mantida pelo W3C
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
CSS Vantagens
• Separa o conteúdo da aparência
• Código compacto
• Permite definir layouts diferentes para dispositivos igualmente diferentes
• Permite atualizar a aparência visual de vários documentos simultaneamente,
poupando muito trabalho ao programador
• Resolveu os seguintes problemas do HTML:
• O intuito do HTML nunca foi conter tags para formatar uma webpage
• O HTML foi criado para descrever o conteúdo de uma webpage
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
CSS Syntax
• Uma folha de estilos é um conjunto de regras que indica como exibir o conteúdo
HTML
• O CSS utiliza seletores para atribuir properties;
• O seletor seleciona quais elementos em html. ex: <p> ou o <body>.
• A propriedade é o atributo do elemento html. Pode ser font, color, background…
• E por último o valor, que é a característica a ser assumida pela propriedade: letra
arial, cor azul, fundo verde…
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Comentários
• Os comentários em CSS começam por /* e acabam com */
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
• Como o nome indica (Cascading) a linguagem CSS é hierárquica, isto significa que:
• 3 formas de definir propriedades CSS:
• CSS externo (prioridade baixa) – em ficheiros externos
• CSS interno (prioridade média) – dentro do cabeçalho <head></head> de um
documento HTML
• CSS inline (prioridade alta) – dentro do atributo style diretamente num
elemento HTML
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
CSS externo
• Tag <link> colocada dentro da tag <head> do documento
• Alterações à formatação propagam-se a vários documentos HTML. Por exemplo,
podemos alterar a imagem de fundo de várias páginas mudando apenas uma
regra CSS num ficheiro CSS.
• Favorece o desempenho das páginas. O ficheiro CSS pode ser colocado em
cache no cliente (browser). Desta forma, só é enviado pela rede o conteúdo
(HTML).
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
CSS interno
• Tag <style> colocada dentro da tag
<head> do documento
• Permite definir um conjunto de regras
CSS aplicadas a um documento HTML
(só 1 documento HTML é afetado)
• Uso da tag <style> do HTML. Mas o
conteúdo da tag style é CSS e não
HTML. Obedece às regras de sintaxe do
CSS.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
CSS inline
• Atributo <style> dentro do elemento/tag
• Não necessita de seletor nem de chavetas.
• Fica misturado no código html
• Uso do atributo style do HTML
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Selectores
• Os selectores são usados para procurar (ou selecionar)
os elementos HTML que queremos modificar
• Cada conjunto de regras, além do seletor, tem que
estar entre chavetas { }
• Dentro de cada declaração, utilize dois pontos : para
separar a propriedade dos valores.
• Dentro do conjunto de regras, utilize ponto e vírgula ;
para separar cada declaração da próxima e sempre em
linhas distintas.
• Para aplicar uma regra CSS em vários seletores: separe
cada seletor com uma vírgula.
• Os elementos também podem ser diferentes
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Selectores
• Selectores simples – seleciona os elementos baseado em nome, id, classe
• Selectores de combinação – seleciona os elementos baseado em relações específicas entre eles.
Ex: div p { ... } – seleciona todos os p dentro de div
• Selectores pseudo-classe – seleciona os elementos baseado em determinado estado.
Ex: a:hover { ... } – link onMouseHover()
• Selectores pseudo-elementos – seleciona os elementos baseado em parte do elemento.
Ex: p::first-letter { ... } - seleciona apenas a 1ª letra do parágrafo
• Selectores atributo – seleciona os elementos baseado no atributo ou valor do atributo.
Ex: a[target="_blank"] { ... } – seleciona os elementos <a> cujo target é _blank
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Selectores simples
• Selector elemento/tag – seleciona
todos os elementos com essa tag
• Selector id – seleciona o elemento
com esse id. Usa o caracter #
• Selector class – seleciona todos os
elementos com essa classe. Usa o
caracter .
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Selectores simples
• Elementos HTML específicos é que são
afectador por uma classe (ex: center)
• Ou por mais do que uma classe
• Selector universal * (asterisco) - afecta
todos os elementos HTML da página
• Selector de grupo , (vírgula) – agrupar
selectores para minimizar o código
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Selectores pseudo-classes
• As pseudo-classes são utilizadas para definir um estilo/estado especial de um
determinado elemento.
• Exemplos:
• Quando se passa com o rato por cima de um elemento
• Para diferenciar links visitados e não visitados
• Para diferenciar um elemento quando tem focus
Selector:pseudo-class {
property: value;
property: value;
}
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Selectores pseudo-classe
Em links por exemplo temos:
• :hover - representa o estado do cursor do rato estar a passar sobre o elemento
• :active – representa o estado de o elemento estar a ser ”clicado”
• :visited - representa um link que já foi visitado previamente
E existem muitas outras pseudo classes:
• first-child, last-child
• focus
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
CSS Box Model
• Todos os elementos HTML podem ser considerados “caixas”
• O CSS Box Model é uma caixa que envolve cada elemento HTML
• Content – conteúdo da caixa,
onde o texto e imagens
aparecem
• Padding – cria uma área à volta
do content (é transparente)
• Border – borda que está à volta
do padding e do content
• Margin – cria uma área fora do
border (é transparente)
VER EXEMPLO
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Colors
• As propriedades CSS são características que permitem modificar o estilo de um elemento
• As cores podem ser definidas:
• Nomes Ex: Orange
• RGB (red, green, blue) Ex: rgb(255, 99, 71)
• HEX (valor hexadecimal) Ex: #ff6347
• HSL (hue, saturation, and lightness) Ex: hsl (9, 100%, 64%)
• RGBA (red, green, blue, alpha) Ex: rgb(255, 99, 71, 0.5)
• HSLA (hue, saturation, and lightness, alpha) Ex: hsl (9, 100%, 64%, 0.5)
• color: muda a cor do texto;
• background-color: muda a cor do fundo;
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
• Background – propriedades para definir efeitos de fundo para os elementos
• Borders – propriedades para especificar o estilo, width, e a cor de um border
• Margins – usadas para criar espaço à volta dos elementos, fora de borders definidos
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
• Padding – propriedades usadas para gerar espaço à volta do conteúdo de um elemento,
dentro de borders definidos
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
• Width – define a largura de um elemento
• Height – define a altura de um elemento
• Podem ter, entre outros, os seguintes valores:
• auto – o browser calcula a height e width
• length – define a height/width em px, cm, em, etc...
• % - define a height/width em percentagem do bloco contentor
• Text/Fonts: propriedades que modificam a forma como o texto e fonte são
apresentados
VER EXEMPLO
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
• As propriedades CSS display, position, float e visibility são as que permitem
construir o posicionamento base dos elementos HTML
Display define o modo de visualização:
• block: o elemento comporta-se como um retângulo que ocupa a width disponível e obriga a
uma quebra de linha
• inline-block: o elemento comporta-se como um retângulo mas não obriga a uma quebra de
linha
• inline: o elemento comporta-se como se de texto se tratasse, ficando em linha com os
restantes elementos nessa linha
• flex: novo modelo de display que permite uma disposição mais flexível dos elementos. Esta
propriedade é suposto ser dada ao elemento pai daqueles que pretendemos gerir.
• none: o elemento não é renderizado pelo browser. Usado em Javascript
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
Exemplos de elementos de bloco:
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
Exemplos de elementos de inline:
• <span>
• <a>
• <img>
VER EXEMPLO
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
• Position permite definir como o elemento se relaciona com os demais (filhos,
irmãos ou pais):
• absolute – é posicionado relativamente ao seu antecessor mais próximo
• relative – modifica o posicionamento absoluto de elementos filhos. Tem uma
posição relativa à sua posição normal
• fixed – é posicionado relativamente ao viewport, ou seja, fica sempre no
mesmo sítio mesmo que a se faça scroll numa página
• static – é posicionado de acordo com o fluxo normal da página
• sticky – é posicionado baseado na posição de scroll do utilizador
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Propriedades CSS: Exemplos
• Float – permite colocar elementos com display:block a flutuarem por forma a
termos elementos lado a lado.
• Visibility – permite mostrar ou esconder um elemento. Ao contrário da opção
display:none se colocarmos a visibility a invisible o espaço ocupado pelo elemento
ainda é tido em conta apesar do elemento não ser visível.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Especificidade hierárquica
• Se houver duas ou mais regras CSS em conflito que apontam para o mesmo
elemento, o browser segue algumas regras para determinar qual é a mais específica,
ou seja, a que vence
• A especificidade é um sistema de pontos/ranking que determina qual a declaração de
estilo que é aplicada por último
• Selector universal (*) < ID
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
Especificidade hierárquica
SELETOR PONTOS • Especificidade de A é 1 (um
elemento)
Atributo Style 1000
• Especificidade de B é 101 (um ID e
ID 100
um elemento)
Atributo/Classe/Pseudo-classe 10
• Especificidade de C é 1000 (inline
Elemento/Pseudo-elemento 1 styling)
A regra C é aplicada!!!
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
Cascading Style Sheet - CSS
W3Schools: CSS
[Link]
POLITÉCNICO DE LEIRIA . TeSP PSI