Agrupamento de Escolas de Mirandela
CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS
DISCIPLINA: COMUNICAÇÃO DE DADOS
Cascading Style Sheets (CSS)
As folhas de estilos em cascata definem:
a aparência e
a formatação do conteúdo;
Estas surgiram com a evolução da web;
À medida que as funcionalidades dos browsers
foram aumentando também aumentou o
potencial e complexidade do HTML;
Cascading Style Sheets
O objetivo é o de separar o conteúdo em HTML dos
estilos em CSS.
Vantagens e desvantagens na utilização de CSS:
Com a separação do conteúdo e da forma foi possível melhorar
substancialmente o desenvolvimento de páginas Web;
O mesmo estilo pode ser usado em qualquer documento (ou em
vários);
Permite uma liberdade de desenvolvimento muito grande;
Não compromete a organização dos conteúdos;
Apesar de tudo nem todos os browsers suportam os mesmos estilos
e alguns dos estilos suportados são exibidos de forma diferente.
3
Cascading Style Sheets
Então,
O HTML contém o conteúdo;
A CSS define a forma.
Para ilustrar como funciona este sistema
vamos analisar um exemplo:
Cada uma das seguintes páginas
([Link]) tem exatamente o
mesmo conteúdo mudando, apenas, a respetiva
CSS.
Links úteis:
[Link] (vídeos)
[Link]
5
CSS: Tipos
Definição de estilos das CSS podem ser de 3 formas:
Externamente (numa folha de estilos externa)
Internamente (numa folha de estilos interna)
Localmente (inline)
Das 3 formas apresentadas apenas se recomendam as
duas primeiras;
A 3.ª arrasta-nos para o mesmo erro que levou ao
surgimento das CSS – grande confusão entre conteúdos e
estilos.
CSS: Externamente
Externamente: numa folha de estilos externa.
Esta é a melhor forma de definir CSS;
Consiste na criação de um ficheiro com
extensão .css que contém os estilos;
Este ficheiro depois é integrado nos vários
documentos HTML através da tag <link> que
deverá ser colocada dentro das tags
<head></head>.
7
Exemplo: [Link] e [Link] Externamente
[Link]
2
Notas: [Link]
CSS: Internamente
Internamente: numa folha de estilos interna;
Se recorrermos a uma folha de estilos interna só a
podemos aplicar a um único documento HTML;
Para aplicar este método dentro do HTML é
necessário:
definir os estilos nas tags <style></style>.
Porsua vez, estas devem ser definidas dentro das tags
<head></head>.
Exemplo: [Link] Internamente
[Link]
10
CSS: Localmente
Localmente, ou seja, inline:
Usando este método cada elemento da
página tem o seu estilo definido;
Este é definido usando o atributo style;
Esta forma de usar as CSS deve ser evitada
porque o código fica:
muito confuso,
difícil de ler e modificar.
Exemplo: [Link] Localmente
CSS: Prioridades
O que acontece se para um documento HTML
estiverem definidos estilos:
complementares
Neste caso é criado um estilo novo resultado da
combinação das diversas instâncias;
ou concorrentes
No 2.º caso será dada prioridade à propriedade que
estiver mais próxima do conteúdo, ou seja, pela
ordem seguinte:
1. Local;
2. Interna;
3. Externa.
13
CSS: Sintaxe
Sintaxe usada nas folhas de estilo
Para a criação de folhas de estilo é necessário
seguir um conjunto de regras.
Um estilo CSS é composto por 3 partes:
Seletor – elemento (que pode ser uma tag,
classe ou identificador) ao qual se vai aplicar
o estilo;
Propriedade – atributo do elemento;
Valor – valor que o atributo vai ter.
A sintaxe é a seguinte:
O seletor é seguido de um par de chavetas dentro das quais são
definidas as várias propriedades e seus valores:
selector {propriedade: valor;}
Para facilitar a legibilidade as várias propriedades devem ser
escritas em linhas diferentes como mostra o exemplo:
selector {
propriedade: valor;
propriedade: valor;
}
Os seletores podem ser agrupados permitindo definir
propriedades que serão aplicadas ao grupo:
selector 1, selector2, selector3 {
propriedade: valor;
propriedade: valor;
15
}
Exemplo: [Link]
16
CSS: Comentários
Os comentários podem ser inseridos nas
folhas de estilo dentro dos símbolos /* e
*/.
Estes são ignorados pelo browser.
17
Exemplo: [Link]
18
CSS: Identificadores e classes
Os identificadores e classes permitem associar estilos a
tags em particular:
Por exemplo: se pretendermos 2 parágrafos com estilos
diferentes é necessário recorrer a um identificador ou uma
classe diferente em cada um deles.
Um selector identificador (id) permite definir um estilo
que pode ser directamente associado a um elemento;
Os nomes dos identificadores são precedidos pelo
carácter #.
Identificadores (continuação)
Sintaxe básica na folha de estilos:
identificador_do_elemento#selector_identificador{
propriedade: valor;
}
Sintaxe no documento HTML:
<identificador_do_elemento id=“selector_identificador”>
20
Publicação de sites e gestão de conteúdos
Para publicar online um Website é necessário ter onde o
alojar.
Depois para aceder ao Website, geralmente, é necessário
um domínio, alguns fornecedores disponibilizam um
subdomínio gratuitamente. No entanto, na maioria das
vezes o cenário ideal é o de registar um domínio. Alguns
fornecedores oferecem também o serviço de registo de
domínios. Nos dias de hoje, existe um vasto mercado
nesta área.
A partir do momento em que definimos o tipo de serviço
do qual precisamos só temos de mater o nosso site
actualizado.
21