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

Tamanho: px

Começar a partir da página:

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

Lucca das Neves Castelo
8 Há anos
Visualizações:

1 DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos 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

2 Contatos CSS3 - Fundamentos Carlos José carlosjose.unibratec@gmail.com

3 Objetivo Apresentar a linguagem de formatação CSS3 com seus conceitos básicos, bem como regras e propriedades.

4 Agenda O que é CSS? Sintaxe CSS. Como inserir CSS em documentos HTML.

5 Introdução

6 Introdução As tags apresentadas aqui formam uma compilação das definições oficiais da linguagem disponível em: default.asp 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;

7 Definição 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.

8 Finalidade 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.

9 Finalidade HTML marcação / informação CSS formatação / apresentação

10 Finalidade 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!

11 Histórico Você já aprendeu que a web foi criada por Tim Berners-Lee no início dos anos O pensamento inicial dele era que o navegador web controlasse a apresentação dos documentos HTML.

12 Histórico 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. Todos os navegadores modernos que existem, possuem uma folha de estilo em sua essência chamado de estilo padrão do navegador.

13 Histórico

14 Histórico 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. Atualmente estamos na terceira versão CSS3.

15 Regra!

16 Regra Prefixo proprietário É a forma da propriedade ser renderizada pelo motor de renderização do navegador web. Os prefixos proprietários são: -moz- (Mozilla Firefox) -webkit- (Safari e Chrome) -o- (Opera) -ms- (Microsoft Internet Explorer versão 9).

17 Regra Comentário /*linha única de comentário*/ /*Bloco de comentário com Duas linhas*/ Importante recurso para realizar uma documentação das regras CSS.

18 Medida Todas as propriedades seguem duas regras: Primeira: Os valores devem ser imediatamente seguidos da unidade de medida, por exemplo, 12px, 0.em e 0%. Segunda: Quando um valor for zero (0), não existe a necessidade de se colocar a unidade de medida.

19 Medida 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.

20 Medida 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. O uso dessa unidade de medida proporciona ao desenvolvedor um maior controle sobre um layout, onde a precisão absoluta é necessária.

21 Medida 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. 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.

22 Medida 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.

23 Medida 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,4cm; cm: centímetro; mm: milímetro; pt: ponto 1 ponto é igual a 1/72 polegadas

24 Medida

25 Vinculando css Existem três formas para vincular as folhas de estilo: Estilos inline Estilos incorporados Estilos externos

26 inline

27 CSS3 - Fundamentos incorporado

28 externo 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>.

29 externo 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.

30 externo

31 modular É um conceito onde o sistema ou software é divido em partes distintas.

32 modular

33 Dúvidas?

Documentos relacionados

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico HTML5 - Marcação de formulário E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis