DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico

E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus? Romanos 12:2

DWEB

Design para Web

CSS3 - Fundamentos

5

CSS3 - Fundamentos

5

Carlos José

Contatos

5

CSS3 - Fundamentos

Apresentar a linguagem de

formatação CSS3 com seus

conceitos básicos, bem

como regras e

propriedades.

5

O que é CSS?

Sintaxe CSS.

Como inserir CSS em

documentos HTML.

Agenda

5

CSS3 - Fundamentos

5

CSS3 - Fundamentos

As tags apresentadas aqui formam uma

compilação das definições oficiais da

linguagem disponível em:

§

http://www.w3schools.com/cssref/

default.asp

§

http://www.w3.org/Style/CSS/current-work

Introdução

Fonte: Silva, Maurício Samy., CSS3: Desenvolva Aplicações Web Profissionais com o uso dos

poderosos recursos de estilização das CSS3, São Paulo, Novatec Brasil, 2012; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;

5

CSS3 - Fundamentos

O primeiro conceito que você deve ter em

mente ao projetar uma página Web é que o CSS foi criado para controlar a aparência dos

elementos HTML alterando cor, tamanho, tipo da fonte, posicionamento e etc.

CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para Folhas de Estilo em Cascata.

5

CSS3 - Fundamentos

Entender a tecnologia em suas camadas:

§  Camada de Informação

O conteúdo textual do documento web com as marcações HTML. O HTML é a base sobre a qual as outras camadas serão assentadas.

§  Camada de Apresentação

Controlar a aparência visual, formatando com CSS todo o conteúdo textual que contém as marcações HTML que deverá aparecer no navegador.

§  Camada de Comportamento

Inclui os scripts jQuery de programação que tornam a experiência do usuário interativa.

5

Finalidade

HTML

marcação / informação

CSS

formatação / apresentação

5

CSS3 - Fundamentos

§

Separando a apresentação do conteúdo,

torna mais fácil a manutenção do

website.

§

Alterações no layout podem ser feitas

sem a necessidade de se alterar o

documento HTML, e o contrário também

é verdadeiro!

§

Separar a apresentação do conteúdo

torna o website mais acessível!

5

CSS3 - Fundamentos

§

Você já aprendeu que a web foi criada

por Tim Berners-Lee no início dos anos

1990.

§

O pensamento inicial dele era que o

navegador web controlasse a

apresentação dos documentos HTML.

5

CSS3 - Fundamentos

O navegador que popularizou a web foi o

Mosaic, lançado em 1993, que vinha com

algumas funcionalidades para controlar a

apresentação com base no modelo

desenvolvido por Tim Berners-Lee.

Histórico

Todos os navegadores modernos que existem, possuem uma folha de estilo em sua essência chamado de estilo padrão do navegador.

5

CSS3 - Fundamentos

5

CSS3 - Fundamentos

Apenas em setembro de 1994 foi feita a

primeira proposta oficial de

implementação CSS e em dezembro de

1996 foi lançada a primeira versão CSS1

como uma recomendação oficial da W3C.

Histórico

5

CSS3 - Fundamentos

Regra

5

CSS3 - Fundamentos

Prefixo proprietário

É a forma da propriedade ser renderizada

pelo motor de renderização do navegador

web.

Os prefixos proprietários são:

-webkit- (Safari e Chrome) -o- (Opera)

-ms- (Microsoft Internet Explorer versão 9).

5

CSS3 - Fundamentos

Comentário

Regra

/*linha única de comentário*/

/*Bloco de comentário com Duas linhas*/

Importante recurso para realizar uma documentação das regras CSS.

5

CSS3 - Fundamentos

Todas as propriedades seguem duas regras:

§  Primeira: Os valores devem ser

imediatamente seguidos da unidade de medida, por exemplo, 12px, 0.5em e 50%.

§  Segunda: Quando um valor for zero (0), não

existe a necessidade de se colocar a unidade de medida.

5

CSS3 - Fundamentos

Relativa

Dependem de outro valor anteriormente

declarado no documento.

Caso não exista um valor declarado

previamente, ela assume o valor padrão

do CSS do navegador como referência.

5

CSS3 - Fundamentos

Relativa

px

:

A unidade de medida mais utilizada.

Ela é calculada com base na resolução do dispositivo onde o documento HTML é

visualizado, por exemplo, celulares, monitores, notebook, tablets etc.

Medida

O uso dessa unidade de medida proporciona ao desenvolvedor um maior controle sobre um layout, onde a precisão absoluta é necessária.

5

CSS3 - Fundamentos

Relativa

em

:

É relativo ao valor anterior declarado no elemento pai.

Se não for definido um tamanho de fonte para um elemento HTML, o tamanho que será

tomado como base para o cálculo em será o do elemento HTML ancestral mais próximo.

Medida

Se não tiver sido definido um tamanho de fonte para o elemento ancestral, o tamanho que será tomado como base será 16px, que é o padrão.

5

CSS3 - Fundamentos

Relativa

%

:

É relativa a um valor anteriormente declarado pelo elemento pai semelhante ao em.

O valor de referência é determinado pelo valor de uma das propriedades do elemento em

questão ou até mesmo do valor de um elemento ancestral ou ainda de um valor de contexto geral de formatação.

5

CSS3 - Fundamentos

Absoluta

São valores fixos.

Devem-se usar quando souber as

dimensões físicas dos dispositivos onde as

regras serão apresentadas.

in: polegada – 1 polegada é igual a 2,54cm; cm: centímetro; mm: milímetro;

pt: ponto – 1 ponto é igual a 1/72 polegadas

5

CSS3 - Fundamentos

5

CSS3 - Fundamentos

Existem três formas para vincular as folhas

de estilo:

§

Estilos inline

§

Estilos incorporados

§

Estilos externos

5

CSS3 - Fundamentos

5

CSS3 - Fundamentos

5

CSS3 - Fundamentos

Esta é a melhor forma de se inserir regras

CSS para projetos de website.

Um único arquivo contendo todas as

regras css, por exemplo, style.css.

Este arquivo é vinculado a todos os

documentos HTML através da marcação

<link>.

5

CSS3 - Fundamentos

Os atributos tag <link >:

rel: especifica o tipo de relação existente entre o documento HTML com documento CSS. O

valor declarado para este atributo é: stylesheet type: especifica o tipo de conteúdo dentro do arquivo. O valor para CSS é: text/css

href: deve indicar o local em que o arquivo CSS está armazenado. O valor deve ser uma URL.

5

CSS3 - Fundamentos

5

É um conceito onde o

sistema ou software é

divido em partes

distintas.

modular

5

CSS3 - Fundamentos

5

CSS3 - Fundamentos