Cascading Style Sheets (CSS)

Professor: Pablo Fortes

CSS

Style Sheets

Descrição de regras de estilo que indicam ao browser como apresentar os diversos elementos de um documento HTML (idêntico aos tipos de parágrafos do MSWORD).
Vêm substituir os atributos de formatação dos elementos HTML.
Ex:

CSS

Formatação sem CSS Example

Heading1

Heading2

Documento HTML sem regras de estilo

CSS

Documento HTML com regras de estilo

Formatacao com CSS

h1 {
color: red; margin-left: 10%
}
h2 {
color: orange; margin-left: 5%
}

Heading1

Heading2

CSS

CSS – Noções fundamentais

Todo o mecanismo de CSS – Cascading Style Sheets é baseado em regras e Style Sheets.
Regra – Definição dos aspectos de estilo de um ou mais elementos.
Style Sheet - Conjunto de uma ou mais regras a aplicar a um documento HTML.

Exº: Style Sheet com uma única regra
h1 { color: red }

CSS

Definição de Regras de estilo

Cada regra de estilo é constituída por duas partes:
Selector – É a ligação entre o documento HTML e o estilo a ser definido. Identifica o(s) elemento(s) a que a regra se aplica (normalmente o nome de um elemento HTML, ex: body, p, h1, etc.).
Bloco de Declarações
Um bloco de declarações é delimitado por ‘{ }’ e é constituído por declarações, separadas por ‘;’.
Declaração – Define a propriedade de estilo a aplicar aos elementos identificados pelo selector. Uma declaração é constituída por duas partes, separadas por ‘:’ :
Propriedade – nome do efeito/característica a aplicar.
Valor – Valor a aplicar à propriedade.

CSS

Agrupar regras selectores

É possível agrupar regras com declarações iguais, para diferentes selectores numa única regra:

h1 { font-weight: bold }
h2 { font-weight: bold }
h3 { font-weight: bold }

Equivalente a

h1,h2,h3 { font-weight: bold }

Um selector pode ter mais que uma declaração:

h1 { color: red }
h1 { text-align: center }

Escrevendo várias regras para o mesmo selector

h1 { color: red;
text-align: center;
}

Agrupando várias declarações para o mesmo selector, separadas por ‘;’

CSS

Associar Style Sheets a documentos HTML

Uma Style Sheet afecta as características do documento HTML a que está associada. Esta associação pode ser efectuada de 4 formas:
Associar a style sheet externa ao documento - através do elemento dentro do elemento .
Associar a style sheet local ao documento - através do elemento dentro do elemento .
Associar uma regra da style sheet a um elemento em particular (regras inline) - através do atributo style.
Importação de uma Style Sheet – através da clausula @import das CSS (não utilizada na disciplina).

CSS

Associação de uma Style Sheet externa (1)

Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento .
A utilização de Style Sheets externas é recomendada quando o mesmo estilo é aplicado a uma grande quantidade de páginas (ex: um site).
Utilizando esta técnica, a alteração do aspecto de um site inteiro, consegue-se modificando apenas um único ficheiro.

body { margin: 0px } td.leftborder { background-color: lightgrey; width: 15% } td.topborder { background-color: red; height: 15% } td.qqm { } a { color: black } .modeltitle { font-family: arial, " times new roman mt extra bold " } table.maintable { height: 100%; width: 100% }

style.css

CSS

Associação e uma Style Sheet externa (2)

No elemento pode ser definido o parâmetro “media” que define o(s) meio(s) de vizualização ao qual a style sheet deve ser aplicada.
Possibilita, por exemplo, a existência de regras de estilo diferentes para apresentação em ecrã e impressão.

Valores possíveis para media:
all, aural, braille, embossed, handheld, print, projection, screen, tty, tv

CSS

Bach's home page

body { background-color: silver }
h1 { color: red }

Bach's home page

Johann Sebastian Bach was a prolific composer. Among his works are:

• the Goldberg Variations


• the Brandenburg Concertos


• the Christmas Oratorio

Historical perspective

Bach composed in what has been referred to as the Baroque period.

Definição local – Elemento

Estes estilos apenas podem ser aplicados a elementos da página onde foram definidos.