Tarlis Portela Web Design CSS

Transcrição

1 Tarlis Portela Web Design CSS

2 Web Design CONCEITOS 01

3 01 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 01 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 01 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 01 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 Web Design ESTRUTURA 02

8 02 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: <META http-equiv="content-style-type" content="text/css">

9 02 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=" type="text/css">

10 02 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>

11 02 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 02 Importando Style Sheets Estilos também podem ser importados de outros arquivos. <style url( </style>

13 02 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 02 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 02 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 02 Style Sheets para cada tipo de print { BODY { font-size: 10pt } screen { BODY { font-size: 12pt } screen, print { BODY { line-height: 1.2 } }

17 02 Style Sheets para cada tipo de Mídia Tipo Screen Print Projection Braile Speech All Descrição Telas de computadores Impressoras Projeções Dispositivos Braile Sintetizadores de voz Todos os dispositivos

18 02 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). regra seletor H1 {color: blue} declaração

19 02 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 (:). propriedade valor H1 {color: blue}

20 02 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 (;). H1 {color: blue; font-size: 12pt; text-line: center}

21 02 Definições Os elementos (ou seletores) podem ser agrupados de modo a definir uma regra única para todo o grupo. P, UL, LI {font-size: 12pt}

22 02 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>: UL LI {list-style-type: square} Quando for filho do elemento <OL>: OL LI {list-style-type: decimal}

23 02 Herança Os elementos (ou seletores) podem ser agrupados de modo a definir uma regra única para todo o grupo. P, UL, LI {font-size: 12pt}

24 02 Herança Os elementos herdam certas propriedades de seus pais; Por exemplo, todas os elementos dentro do elemento <P> (<EM>). <style type="text/css"> p {color: blue} </style> <body><p>parágrafo de texto <em>texto emphasized</em></p> </body>

25 02 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. h1.blue {color: blue} h1.red {color: red} h1.black {color: black} <h1 class= red >red heading</h1>

26 02 Classes Uma classe não precisa de estar ligada à um elemento..red {color: red} <h1 class= red >red heading</h1> <p class= red >red paragraph</p>

27 02 IDs Para declarar o estilo para um ID é usado o símbolo (#); Somente aos atributos com aquele ID são aplicados os estilos. # test {color: red} <p id= test > parágrafo teste <p>

28 02 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. a:link {color: blue} a:active {color: red} a:visited {color: yellow}

29 02 Comentários Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código. /* Este é um bloco de comentario */

30 02 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; <style type="text/css">  </style>

31 02 Unidades de Medida Unidade px em ex in Descrição Tamanho em pixels (relativo só dispositivo) Tamanho relativo à fonte utilizada Altura da fonte 'x' Polegadas (= 2.54 cm)

32 02 Unidades de Medida Unidade cm mm pt pc Descrição Centímetros Milímetros Pontos (1/72 polegadas) Picas (12 pontos) % Porcentagem 0 Valor '0' não requer unid.

33 Web Design SELETORES 03

34 03 Seletor Universal Significado: Aplicável a todos os elementos. Padrão Ex: * * { } color: #000000;

35 03 Seletor de Tipo de Elemento Significado: Padrão Ex: Seleciona qualquer elemento <e> ; e h1 { } font-family: sans-serif;

36 03 Seletor Contextual Significado: Seleciona qualquer elemento <f> que estiver contido num elemento <e>. Padrão Ex: e f h1 em { } color: blue;

37 03 Seletor de Adjacente Significado: Seleciona o elemento <f> que estiver imediatamente após um elemento <e>. Padrão Ex: e + f h1 + h2 { } margin-top: -5mm;

38 03 Seletor de Classe Significado: Seleciona o(s) elemento(s) que se aplicou a classe. Padrão Ex: e.classe h1.pastoral { } color: green;

39 03 Seletor de ID Significado: Seleciona o elemento <e> identificado com ID. Padrão Ex: e#id h1#chapter1 { } text-align: center;

40 03 Agrupamento de Seletores Significado: Seleciona os elementos <e> e <f> do agrupamento. Padrão Ex: e, f h1, h2 { } font-family: sans-serif;

41 03 Seletor de Atributo Significado: Seleciona o elemento <e> que contenha o atributo indicado. Padrão Ex: e[atrib] h1[title] { } color: blue;

42 03 Seletor de Atributo Significado: Seleciona o elemento <e> com o mesmo atributo e valor. Padrão Ex: e[atrib= valor ] spam[class=exemplo] { } color: blue;

43 03 Seletor de Atributo Significado: Seleciona o elemento <e> em que o valor esteja em uma lista de valores separados por espaços. Padrão Ex: e[atrib~= valor ] a[rel~= copyright ] { } color: red; <a rel= copyright copyleft copyeditor...> </a>

44 03 Seletor de Atributo Significado: Seleciona o elemento <e> em que o valor seja idêntico a val ou inicia-se com val. Padrão Ex: e[atrib = val ] *[lang = pt ] { } color: red;

45 03 Pseudo-classe Primeiro Filho Significado: Padrão Ex: Seleciona o primeiro elemento <e> descendente do elemento-pai. e:first-child div > p:first-child { } text-indent: 0;

46 03 Pseudo-classe Link Significado: Aplica-se ao elemento <a> com hiperlinks ou âncoras não visitados. Padrão Ex: a:link a:link { } color: red;

47 03 Pseudo-classe Visited Significado: Aplica-se ao elemento <a> com hiperlinks ou âncoras já visitados. Padrão Ex: a:visited a:link { } color: blue;

48 03 Pseudo-classe Active Significado: Aplica-se ao elemento <e> quando este for ativado pelo usuário. Padrão Ex: e:active a:active { } color: lime;

49 03 Pseudo-classe Hover Significado: Aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo. Padrão Ex: e:hover a:hover { } color: yellow;

50 03 Pseudo-classe Focus Significado: Aplica-se ao elemento <e> quando o foco estiver posicionado nele. Padrão Ex: e:focus a:focus { } background: yellow;

51 03 Pseudo-classe Lang Significado: Aplica-se ao elemento <e> se este estiver marcado com o idioma val. Padrão Ex: e:lang(val) html:lang(pt) { } quotes: '<< ' ' >>';

52 03 Pseudo-elemento First-line Significado: Padrão Ex: Aplica-se a primeira linha do elemento <e>. e:first-line p:first-line { } text-transform: uppercase;

53 03 Pseudo-elemento First-letter Significado: Padrão Ex: Aplica-se a primeira letra do elemento <e>. e:first-letter p:first-letter { } font-size: 3em; font-weight: normal;

54 03 Pseudo-elemento Before Significado: Padrão Ex: Aplica conteúdo especificado em posição anterior ao elemento <e>. e:before p:before { } content: open-quote;

55 03 Pseudo-elemento After Significado: Aplica conteúdo especificado em posição posterior ao elemento <e>. Padrão Ex: e:after p:after { } content: close-quote;

56 Web Design MEDIDAS 04

57 04 Unidades de Tamanho Relativas Unidade px em ex Descrição Tamanho em pixels (relativo só dispositivo) Tamanho relativo à fonte utilizada Altura da fonte 'x'

58 04 Unidades de Tamanho Absolutas Unidade cm mm pt pc Descrição Centímetros Milímetros Pontos (1/72 polegadas) Picas (12 pontos)

59 04 Porcentagem Unidade Descrição % Porcentagem 0 Valor '0' não requer unid.

60 04 Representação de Cores Unidade red #RRGGBB #RGB Descrição Valor pré-definido Cor RGB hexadecinal 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 04 Modelo de Caixa

62 Web Design PROPRIEDADES 05

63 05 Guia de Referência Bordas; Margens; Espaçamento; Formatação visual; Efeitos visuais; Agregador de conteúdo, numeração e listas; Cores e fundo; Paginação; Fontes; Texto; Tabelas; Interface com o usuário.

64 Tarlis Portela Web Design CSS