Tarlis Portela Web Design CSS

(1)

Tarlis Portela

Web Design

(2)

01

Web Design

(3)

Histórico

• Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; • A medida que o HTML foi se popularizando

e evoluindo, alguns controles de

aparências foram incluídos. Isso fez com

que a linguagem ficasse muito complexa; • Outro problema era que os browsers

tinham diferenças de implementações.

(4)

Histórico

• Håkon Wium Lie, vendo toda essa

dificuldade, resolveu criar um jeito mais

fácil para formatar a informação. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets, em 1994;

• Em 1996, lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1);

• Atualmente encontra-se na versão CSS 3.

(5)

Folhas de Estilo (Style Sheets)

• CSS, ou Cascading Style Sheets é uma recomendação do W3C, assim como o

XML e o HTML;

• Permite a separação do conteúdo dos documentos de sua apresentação.

(6)

Importância do estilo

• Existência de um padrão de cores e navegação para todo o site;

• Reutilização de código;

• Velocidade no carregamento das páginas; • Administração centralizada;

• Personalização de sites.

(7)

02

Web Design

(8)

Anexando Style Sheets em documentos (X)HTML

• A linguagem HTML permite que qualquer trecho de código seja adicionado à página; • Entretanto, você deve especificar a

linguagem a ser utilizada, como no exemplo abaixo:

(9)

Através de links

• Você pode criar uma Style Sheet em

um arquivo separado para

posteriormente aplicar tal estilo em

todas as páginas do site.

<link rel="stylesheet"

href="http://server.com/mysheet.css"

type="text/css">

(10)

CSS no documento

• Os códigos de estilo podem ser

colocados dentro de cada documento

HTML.

<html><head>

<style type="text/css">

definições de estilo

</style>

</head><body> </body> </html>

02

(11)

Definindo estilos junto com o

elemento

• São definidos estilos como atributo

de um elemento.

<p style=”color: blue”>

Este é o parágrafo destacado

</p>

(12)

Importando Style Sheets

• Estilos também podem ser

importados de outros arquivos.

<style type="text/css">

@import

url(http://server.com/style.css);

</style>

(13)

Entendendo a ordem

• O navegador estabelece uma

prioridade para cada estilo a ser

aplicado como na lista a seguir:

–

Estilos definidos junto com o

elemento;

–

Estilos definidos no documento;

–

Estilos anexados.

(14)

Entendendo a ordem

• Embora não seja aconselhável,

você pode usar a palavra

“important” para alterar esta

precedência.

H1 {color: red ! important;

font-weight: bold;

font-family: sans-serif ! important}

(15)

Style Sheets para cada tipo de Mídia

• CSS permite também estilos diferentes

para cada tipo de mídia utilizada;

– _{Permitindo a utilização de um}

documento por portadores de deficiência visual ou auditiva;

– _{Aplicação de estilos especificamente}

para impressão de documentos.

(16)

Style Sheets para cada tipo de Mídia

@media print

{ BODY { font-size: 10pt } }

@media screen

{ BODY { font-size: 12pt } }

@media screen, print

{ BODY { line-height: 1.2 } }

(17)

Style Sheets para cada tipo de Mídia

02

Tipo Descrição

Screen Telas de computadores

Print Impressoras

Projection Projeções

Braile Dispositivos Braile

Speech Sintetizadores de voz

(18)

Definições

• Cada definição de estilo é chamada de

regra;

• Uma regra contém um seletor (que é o próprio elemento);

• Seguido da declaração (a definição do estilo). H1 {color: blue}

02

regra seletor declaração

(19)

Definições

• A declaração é colocada entre chaves ({}); • Cada item na declaração possui duas partes:

– O nome da propriedade; e,

– O valor atribuído a esta;

* Separado por dois pontos (:).

H1 {color: blue}

02

(20)

Definições

• Múltiplas propriedades podem ser

atribuídas em uma única declaração;

• Separando cada atribuição com o sinal

de ponto e vírgula (;).

02

(21)

Definições

• Os elementos (ou seletores) podem ser

agrupados de modo a definir uma regra

única para todo o grupo.

02

(22)

Herança

• Seletores contextuais definem a sequência exata de elementos para o qual um estilo

será aplicado.

• Para definir dois estilos para o <LI>:

– _{Quando for filho do elemento <UL>:} – _{Quando for filho do elemento <OL>:}

02

UL LI {list-style-type: square} OL LI {list-style-type: decimal}

(23)

Herança

• Os elementos (ou seletores) podem ser

agrupados de modo a definir uma regra

única para todo o grupo.

02

(24)

Herança

• Os elementos herdam certas

propriedades de seus pais;

• Por exemplo, todas os elementos dentro

do elemento <P> (<EM>).

02

(25)

Classes

• Uma classe define a variação de um

estilo, o qual é referenciado através de

uma ocorrência específica de um elemento utilizando o atributo CLASS.

02

h1.blue {color: blue} h1.red {color: red}

h1.black {color: black}

(26)

Classes

• Uma classe não precisa de estar ligada à um elemento.

02

<h1 class=”red”>red heading</h1> <p class=”red”>red paragraph</p>

(27)

IDs

• Para declarar o estilo para um ID é usado o símbolo (#);

• Somente aos atributos com aquele ID são aplicados os estilos.

02

<p id=”test”> parágrafo teste <p> # test {color: red}

(28)

Pseudo-classes e Pseudo-elementos

• Pseudo-classes e pseudo-elementos

podem ser usados como seletores na CSS, mas eles não existem dentro da HTML;

• Eles são 'inseridos' pelo browser, sob

certas condições, para serem usados como elos de ligação com as folhas de estilo.

02

a:link {color: blue} a:active {color: red}

(29)

Comentários

• Assim como em qualquer linguagem de

programação, em CSS é possível adicionar comentários para melhor documentar o

código.

02

/*---Este é um bloco de comentario

(30)

Ocultando Style Sheets

• Para manter a compatibilidade com

navegadores antigos CSS implementa a funcionalidade de ocultar o código CSS destes navegadores;

• Faz o CSS não funcionar no firefox;

02

(31)

Unidades de Medida

02 Unidade

Descrição

px

Tamanho em pixels

(relativo só dispositivo)

em

Tamanho relativo à fonte

utilizada

ex

Altura da fonte 'x'

(32)

Unidades de Medida

02

Unidade Descrição cm Centímetros mm Milímetros pt Pontos (1/72 polegadas) pc Picas (12 pontos) % Porcentagem

(33)

03

Web Design

(34)

Seletor Universal

• Significado:

– _{Aplicável a todos os elementos.}

• Padrão * • Ex: * { color: #000000; }

03

(35)

Seletor de Tipo de Elemento

• Significado:

– _{Seleciona qualquer elemento “<e>”;}

• Padrão e • Ex: h1 { font-family: sans-serif; }

03

(36)

Seletor Contextual

• Significado:

– _{Seleciona qualquer elemento <f> que}

estiver contido num elemento <e>.

• Padrão e f • Ex: h1 em { color: blue; }

03

(37)

Seletor de Adjacente

Significado:

– _{Seleciona o elemento <f> que estiver}

imediatamente após um elemento <e>.

• Padrão e + f • Ex: h1 + h2 { margin-top: -5mm;

03

(38)

Seletor de Classe

• Significado:

– _{Seleciona o(s) elemento(s) que se aplicou}

a “classe”. • Padrão e.classe • Ex: h1.pastoral { color: green; }

03

(39)

Seletor de ID

• Significado:

– _{Seleciona o elemento <e> identificado}

com ID. • Padrão e#Id • Ex: h1#chapter1 { text-align: center;

03

(40)

Agrupamento de Seletores

Significado:

– _{Seleciona os elementos <e> e <f> do}

agrupamento. • Padrão e , f • Ex: h1 , h2 { font-family: sans-serif; }

03

(41)

Seletor de Atributo

• Significado:

– _{Seleciona o elemento <e> que contenha o}

atributo indicado. • Padrão e[atrib] • Ex: h1[title] { color: blue;

03

(42)

• Significado:

– _{Seleciona o elemento <e> com o mesmo}

atributo e valor. • Padrão e[atrib=”valor”] • Ex: spam[class=exemplo] { color: blue; }

03

(43)

• Significado:

– Seleciona o elemento <e> em que o valor

esteja em uma lista de valores separados por espaços. • Padrão e[atrib~=”valor”] • Ex: a[rel~=”copyright”] { color: red;

03

(44)

• Significado:

– _{Seleciona o elemento <e> em que o valor}

seja idêntico a “val” ou inicia-se com “val”.

• Padrão e[atrib|=”val”] • Ex: *[lang|=”pt”] { color: red; }

03

(45)

Pseudo-classe Primeiro Filho

• Significado:

– _{Seleciona o primeiro elemento <e>}

descendente do elemento-pai. • Padrão e:first-child • Ex: div > p:first-child { text-indent: 0;

03

(46)

Pseudo-classe Link

• Significado:

– _{Aplica-se ao elemento <a> com hiperlinks}

ou âncoras não visitados.

• Padrão a:link • Ex: a:link { color: red; }

03

(47)

Pseudo-classe Visited

• Significado:

– _{Aplica-se ao elemento <a> com hiperlinks}

ou âncoras já visitados. • Padrão a:visited • Ex: a:link { color: blue;

03

(48)

Pseudo-classe Active

• Significado:

– _{Aplica-se ao elemento <e> quando este}

for ativado pelo usuário.

• Padrão e:active Ex: a:active { color: lime; }

03

(49)

Pseudo-classe Hover

• Significado:

– _{Aplica-se ao elemento <e> quando o}

cursor estiver sobre ele, mas sem ativá-lo.

• Padrão e:hover Ex: a:hover { color: yellow;

03

(50)

Pseudo-classe Focus

• Significado:

– _{Aplica-se ao elemento <e> quando o foco}

estiver posicionado nele.

• Padrão e:focus Ex: a:focus { background: yellow; }

03

(51)

Pseudo-classe Lang

• Significado:

– _{Aplica-se ao elemento <e> se este estiver}

marcado com o idioma “val”.

• Padrão e:lang(val) Ex: html:lang(pt) { quotes: '<< ' ' >>';

03

(52)

Pseudo-elemento First-line

• Significado:

– _{Aplica-se a primeira linha do elemento}

<e>. • Padrão e:first-line Ex: p:first-line { text-transform: uppercase; }

03

(53)

Pseudo-elemento First-letter

• Significado:

– _{Aplica-se a primeira letra do elemento}

<e>.

• Padrão

e:first-letter

Ex:

p:first-letter {

font-size: 3em; font-weight: normal;

(54)

Pseudo-elemento Before

• Significado:

– _{Aplica conteúdo especificado em posição}

anterior ao elemento <e>.

• Padrão e:before Ex: p:before { content: open-quote; }

03

(55)

Pseudo-elemento After

• Significado:

– _{Aplica conteúdo especificado em posição}

posterior ao elemento <e>.

• Padrão e:after Ex: p:after { content: close-quote;

03

(56)

04

Web Design

(57)

Unidades de Tamanho Relativas

04 Unidade

Descrição

px

Tamanho em pixels

(relativo só dispositivo)

em

Tamanho relativo à fonte

utilizada

(58)

Unidades de Tamanho Absolutas

04 Unidade

Descrição

cm

Centímetros

mm

Milímetros

pt

Pontos (1/72 polegadas)

pc

Picas (12 pontos)

(59)

Porcentagem

04 Unidade

Descrição

%

Porcentagem

(60)

Representação de Cores

04

Unidade Descrição

red Valor pré-definido

#RRGGBB Cor RGB hexadecinal #RGB Cor RGB hexadecimal simplificada rgb(R,G,B) Cor RGB (3 valores 0 a 255) rgb(R%,G%,B%) Cor RGB (3 valores percentuais)

(61)

Modelo de Caixa

(62)

05

Web Design

(63)

Guia de Referência • Bordas; • Margens; • Espaçamento; • Formatação visual; • Efeitos visuais; • Agregador de conteúdo, numeração e listas;

05

• Cores e fundo; • Paginação; • Fontes; • Texto; • Tabelas; • Interface com o usuário.

(64)

Tarlis Portela

Web Design