CSSssn/2011/cdi/06-css.pdf · • Algumas propriedades CSS são propagadas para os elementos...
48
CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2011/12 1
Transcript of CSSssn/2011/cdi/06-css.pdf · • Algumas propriedades CSS são propagadas para os elementos...
CSS
Sérgio Nunes
Comunicações Digitais e InternetCiências da Comunicação, U.Porto 2011/12
1
Cascading Style Sheets
• CSS é o acrónimo de Cascading Style Sheets.
• CSS é uma linguagem que permite definir o estilo visual de documentos web.
• A linguagem CSS permite definir como deve ser apresentado o conteúdo e estrutura definidos em HTML.
• A primeira especificação foi publicada em 1994 mas só a partir de 2001 a linguagem CSS começou realmente a ser utilizada devido ao suporte introduzido nos principais navegadores web.
• As especificações da linguagem CSS são mantidas pelo consórcio W3C.A versão mais recente é a CSS 2.1.
2
Motivação
• Porquê separar estrutura e conteúdo (HTML) da apresentação (CSS)?
• A escrita e estruturação de conteúdos requer competências diferentes daquelas necessárias para desenhar a apresentação desses conteúdos. A separação ao nível das tecnologias facilita a separação e organização do trabalho nas equipas.
• A web é um meio de comunicação multi-plataforma. O conteúdo disponibilizado nos sítios web pode ser consultado usando diferentes dispositivos (ecrã, telemóvel, impresso, PDA, voz, etc). A separação entre HTML e CSS permite definir o conteúdo e estrutura apenas uma vez e ter diferentes folhas de estilos em função do dispositivo de destino.
• Com CSS é possível definir a apresentação em função do destino.
3
Visão Geral
+ css =
+ css =
+ css =www.csszengarden.com
4
Uso de CSS
• Como aplicar CSS a um documento HTML?
1. Criar um novo documento de texto do tipo CSS (extenção .css).
2. Indicar no documento HTML a associação ao documento CSS.
3. Vários documentos HTML podem ser associados ao mesmo documento CSS.
CSS HTMLHTML
HTML
5
Ligação ao Documento CSS
• O uso de regras CSS externas é feito incluindo no cabeçalho de um documento HTML uma ligação para o ficheiro com as regras CSS.
<!DOCTYPE html>
<html><head> <title>Aplicação de CSS</title> <link rel="stylesheet" type="text/css" href="style.css"></head>
<body>...</body>
</html>
Nome do ficheiro CSS.
6
Documento CSS
• Um documento CSS é composto por um conjunto de regras CSS.
h1 { background-color: red; color: black; font-family: Arial, sans-serif;}
p { margin-top: 10px; text-align: justify;}
strong { color: red;}
7
Regra CSS
h1 {
color: rgb(100,100,100);
margin-top: 10px;
font-family: Arial, sans-serif;
}
propriedades
valoresselector
8
Seletores
• Um seletor identifica elementos num documento HTML.
h1 { identifica os elementos H1}
p { identifica os elementos P}
strong { identifica os elementos STRONG}
9
Seletores de Ligações
• As ligações HTML têm um conjunto de seletores especiais que permitem controlar o aspeto em função do estado da ligação e da interação com o utilizador.
• a:link — seletor que se aplica às ligações que ainda não foram visitadas.
• a:visited — aplica-se às ligações que já foram visitadas.
• a:hover — aplica-se quando o rato está em cima da ligação.
• a:active — aplica-se quando a ligação é ativada ( clicada ).
10
Propriedades e Valores
• Cada elemento HTML tem um conjunto de propriedades.
• Cada propriedades aceita um conjunto de valores.
• As propriedades que não são alteradas, mantêm o valor original.
h1 { color: red; font-style: italic;}
p { letter-spacing: 5px; font-size: 18px;}
11
Propagação de Estilos
• Algumas propriedades CSS são propagadas para os elementos filhos de um elemento HTML.
• No exemplo seguinte, os elementos h1 e p vão herdar as alterações que foram definidas para o elemento body. Isto acontece porque todos os elementos que estão encaixados dentro do body — também designados como filhos — herdam as propriedades definidas.
body { font-family: Verdana, Arial; font-size: 14px;}
<body> <h1>Um título</h1> <p>Um parágrafo curto.</p></body>
HTML CSS
12
Propriedades Básicas
13
Formatação de Texto
• font-family: Lista ordenada dos tipos de letra a usar.
• font-size: Tamanho das letras. Unidades possíveis: px, % ou em.
• font-style: Estilo das letras. Opções: normal ou italic.
• font-weight: Grossura das letras. Opções: lighter, normal, bold ou bolder.
• text-decoration: Efeitos a aplicar ao texto. Opções: none, underline, overline, line-through.
14
Tipos de Letra
• Para usar um determinado tipo de letra num documento web, é necessário que esse tipo esteja instalado no computador do utilizador que acede ao documento.
• Os tipos de letra com maior penetração nos computadores são: Arial, Courier New, Georgia, Times New Roman, Trebuchet, e Verdana.
• A propriedade font-family permite indicar uma lista de tipos de letra a usar na formatação do elemento, ordenados por prioridades. O navegador web tenta usar o primeiro tipo de letra indicado. Se o tipo não estiver instalado no computador é tentado o tipo seguinte, e assim sucessivamente.
• No final da lista é importante indicar sempre um de dois tipos genéricos: serif ou sans-serif. Por exemplo: font-family: Verdana, Arial, sans-serif.
15
Exemplo de Formatação de Texto
p { font-family: Verdana; font-size: 18px; font-style: italic; font-weight: bold; text-decoration: underline;}
Um parágrafo com alterações na formatação.
16
Apresentação de Texto
• text-align: Alinhamento do texto. Opções: left, right, justify, center.
• text-indent: Alinhamento da primeira linha de um bloco de texto.
• line-height: Altura de cada linha num bloco de texto.
• letter-spacing: Espaçamento entre letras.
• word-spacing: Espaçamento entre palavras.
17
Exemplo de Apresentação de Texto
p { text-align: justify; text-indent: 3em; line-height: 2em; letter-spacing: -0.1em; word-spacing: 0.5em;}
Um parágrafo com
alterações ao nível da
apresentação.
18
Principais Unidades
• A definição dos valores associadas às propriedades dos elementos pode ser indicada em CSS usando diferentes unidades.
• As principais unidades são as duas seguintes.
• px ( píxel ) — Os píxeis representam unidades absolutas, um pixel corresponde a um pixel no ecrã do utilizador. Exemplos: 10px, 20px, 1px.
• % ( percentagem ) — As unidades percentuais representam unidades relativas, e são calculadas em relação ao contexto do elemento. O contexto varia em função do elemento e da propriedade. Exemplos: 1%, 100%, 5.5%.
19
Definição de Cores
• Existem várias alternativas para definir cores em CSS.
• Palavra-chave: black, yellow, red, blue, etc.
• Código RGB: rgb(vermelho, verde, azul)Exemplos: rgb(100%, 40%, 0%); rgb(255, 102, 0).
• Código Hexadecimal: #código hexadecimalExemplos: #326432, #000000, #0088ff.
20
Definição de Cores
• color: Cor do texto do elemento.
• background-color: Cor do fundo do elemento.
p { color: rgb(100%, 0%, 0%); background-color: yellow;}
Um texto colorido.
21
Margens e Espaçamentos
22
Margens e Espaçamentos
• Cada elemento HTML é representado visualmente como uma caixa retangular composta por três partes: a margem, o contorno e oespaçamento interno.
Ciências da Comunicação
Margem do elemento: espaço após o contorno.
Contorno do elemento.Espaçamento interno do elemento: espaço entre o conteúdo e o contorno.
23
Contorno
• É possível definir o contorno de todo o elemento ou apenas de parte.
• border: alteração de todo o contorno.
• border-top: alteração apenas do contorno de topo.
• border-bottom: contorno inferior.
• border-left: contorno esquerdo.
• border-right: contorno direito.
24
Contorno
• O contorno define-se especificando três valores: a grossura, o estilo e a cor.
• Grossura: definida em píxeis.
• Estilo: none, dotted, dashed, solid, double, groove, ridge.
• Cor: valor da cor.
h1 { border: 1px solid black;}
h2 { border-right: 2px dotted rgb(100%,0%,0%); border-left: 2px dotter red;}
25
Margem
• É possível definir a margem de todo o elemento ou apenas de parte. Na definição da margem indica-se a distância em píxels.
• margin: alteração da margem de todo o elemento.
• margin-top: alteração apenas da margem de topo.
• margin-bottom: margem inferior.
• margin-left: margem esquerda.
• margin-right: margem direita.
26
Espaçamento Interno
• É possível definir o espaçamento interno de todo o elemento ou apenas de parte. Na definição do espaçamento indica-se a distância em píxels.
• padding: alteração do espaçamento interno de todo o elemento.
• padding-top: alteração apenas do espaçamento interno de topo.
• padding-bottom: espaçamento interno inferior.
• padding-left: espaçamento interno esquerdo.
• padding-right: espaçamento interno direito.
27
Margem e Espaçamento Interno
img { margin: 15px;}
a { margin-left: 5px; margin-right: 5px;}
Modificações à margem.
h1 { padding: 10px;}
p { padding-top: 10px; padding-bottom: 15px;}
Modificações ao espaçamento interno.
28
Listas
• É possível definir a aparência do marcador de cada item com apropriedade list-style-type.
• Marcadores não numéricos: none, disc, circle, square.
• Marcadores numéricos: none, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin.
ul { list-style-type: square;}
ul { list-style-type: lower-roman;}
29
Seletores Avançados
30
Atributo class
• Os elementos de um mesmo tipo têm obrigatoriamente o mesmo aspeto? Por exemplo, todos os elementos P (parágrafos) de uma página têm de ser apresentados da mesma forma?
• Não. É possível distinguir os elementos usando classes. Todos os elementos HTML têm um atributo optativo class.
• Os nomes das classes podem ser compostos por letras (não acentuadas) ou algarismos, e devem começar com uma letra. Exemplos: principal, menu, submenu, rodape, cabecalho, publicidade.
• Cada elemento pode pertencer a várias classes. Para atribuir um elemento a várias classes, basta separar os nomes das diferentes classes com espaços.
31
Atributo class
• Para identificar uma determinada classe em CSS usa-se um ponto seguido do nome da classe. Exemplos: .menu, .rodape, .destaque.
<p class="primeiro">Parágrafo da classe primeiro.</p>
<p class="segundo">Parágrafo da classe segundo</p>
<p class="terceiro">Parágrafo da classe terceiro</p>
p { regra aplica-se a todos os parágrafos }
p.primeiro { regra aplica-se aos parágrafos da classe primeiro }
p.terceiro { regra aplica-se aos parágrafos da classe terceiro }
32
Seleção Conjunta de Elementos
• É possível aplicar a mesma regra CSS a elementos diferentes, para tal basta separar os vários elementos por vírgulas.
• A principal vantagem desta opção é evitar a duplicação de código idêntico.
h1, h2, h3 { regra comum aos elementos h1, h2 e h3 }
em, p { regra comum aos elementos em e p }
33
Seleção de Elementos Encaixados
• É possível selecionar elementos em CSS com base na estrutura do HTML. Por exemplo, selecionar os elementos do tipo A que estão dentro de elementos do tipo B.
• Para selecionar elementos encaixados noutro elemento, usa-se o espaço.
p em { seleção dos elementos em dentro de elementos p }
header h1 { elementos h1 dentro de elementos header }
footer h1 { elementos h1 dentro de elementos footer }
34
Sumário de Seletores
p { regra aplica-se a todos os elementos p }
p, strong { todos os elementos p ou strong }
h1 strong { elementos strong dentro de elementos h1 }
strong.destaque { elementos strong da classe destaque }
p strong.a { elementos strong da classe a dentro de elementos p }
p.a strong { elementos strong dentro de elementos p da classe a }
.destaque { todos os elementos da classe destaque }
35
Posicionamento
36
Posicionamento
• Com CSS é possível alterar o fluxo normal de uma página e definir a posição de cada elemento.
Fluxo Normal Fluxo Modificado com CSS
37
Propriedade position
• Todos os elementos têm a propriedade position que estabelece a forma de cálculo da posição de um elemento. Existem 4 alternativas para o posicionamento de um elemento:
• static — O elemento é posicionado segundo o fluxo normal.Este é o valor definido por omissão.
• relative — A posição do elemento é calculada em relação à posição original segundo o modelo estático.
• absolute — A posição do elemento é especificada com as propriedades top, right, bottom e left relativamente ao elemento que contém este.
• fixed — O cálculo da posição é igual ao método absoluto mas o elemento pai é a "janela de visualização" (o navegador).
38
Propriedades de Posicionamento
• A propriedade position é usada juntamente com as propriedades:
• top — afastamento do lado superior do elemento.
• left — afastamento do lado esquerdo do elemento.
• bottom — afastamento do lado inferior do elemento.
• right — afastamento do lado direito do elemento.
• e também:
• width — largura do elemento.
• height — altura do elemento.
39
Propriedades de Posicionamento
ELEMENTO
width
left right
bottom
top
height
40
Posicionamento Estático
• O posicionamento estático corresponde ao posicionamento normal, definido por omissão. Segue a sequência definida no documento HTML, de cima para baixo e da esquerda para a direita
• As propriedades top, left, bottom, right não se aplicam.
p { position: static; width: 200px; height: 5em;
border: 1px solid red;}
41
Posicionamento Relativo
• Com o posicionamento relativo, a posição é calculada em relação à localização natural do elemento. O elemento pode ser deslocado na vertical ou na horizontal face à posição original.
p { position: relative; top: 50px; left: 50px;}
42
Exemplos de Posicionamento Relativo
p { position: relative; top: 10px; right: 50px;}
p { position: relative; top: 10px; left: 50px;}
43
Posicionamento Absoluto
• Com o posicionamento absoluto, a posição do elemento é calculada em relação ao elemento 'pai' (o elemento que engloba este).
p { position: absolute; top: 50px; left: 50px;}
44
Posicionamento Fixo
• Esta forma de posicionamento é idêntica ao modelo absoluto mas a posição é calculada em relação à janela do navegador web. Permite, por exemplo, fixar um elemento independentemente do scroll vertical da janela.
45
Propriedade float
• A propriedade float permite desassociar o elemento do fluxo normal e deslocá-lo para a esquerda ou direita da linha, permitindo que o restante conteúdo circule paralelamente ao elemento.
• Valores possíveis:
• none — Valor por omissão.
• left — O elemento é deslocado para a esquerda com o conteúdo envolvente a flutuar à direita.
• right — O elemento é deslocado para a direita com o conteúdo envolvente a flutuar à esquerda.
46
Exemplo da Propriedade float
float: left float: right
47
Recursos
• W3C Cascading Style Sheetshttp://w3.org/Style/CSS
• CSS 2.1 Specification & Propertieshttp://w3.org/TR/CSS21http://w3.org/TR/CSS21/propidx.html
• CSS Beginner Tutorial — HTML Doghttp://htmldog.com/guides/cssbeginner
• The Web Standards Project — CSShttp://www.webstandards.org/learn/external/css/
48
