351 | ```
352 |
353 | Onde quer que adicionemos esta imagem, é lá que ela irá aparecer quando apresentada ao usuário, ou seja, será respeitada a ordem em que ela se encontra dentro do documento.
354 |
355 | Note que o elemento ```img``` não possui tag de fechamento! Além disso, este elemento possui um componente que não havia aparecido até agora, o **atributo** ```src```. Veremos muitos outros atributos ao longo deste livro, mas saiba por ora que atributos estendem a funcionalidade de um elemento. Nesse caso, além de indicarmos que queremos uma imagem naquele local, estamos dizendo que "queremos esta imagem especificamente".
356 |
357 | Crie uma pasta chamada "imagens" dentro da pasta "meu-site", salve a seguinte imagem nela e insira-a no documento HTML com um elemento ```img```. Depois, veja o resultado no navegador.
358 |
359 | http://i.imgur.com/ixsAXVk.jpg
360 |
361 | Também é possível adicionar a imagem inserindo a URL acima diretamente no atributo ```src```.
362 |
363 | Faça os exercícios propostos para este capítulo em:
364 |
365 |
366 |
367 |
368 | # 8 - Tamanho e acessibilidade em imagens
369 |
370 | Agora que temos uma imagem em nosso site, vamos acrescentar alguns detalhes. Começaremos pelo indispensável atributo ```alt```. Este atributo é responsável por fornecer ao navegador um texto **alt**ernativo à imagem, dessa forma, caso o navegador falhe em apresentar a imagem ou alguém visite seu site através de um leitor de tela (muito comum entre portadores de deficiências visuais), este texto será apresentado no lugar da imagem. Forneça sempre uma breve descrição da imagem, o suficiente para saber do que se trata sem vê-la.
371 |
372 | A imagem anterior ficará assim em nosso site:
373 |
374 | ```html
375 | HTML é incrível
1070 |Postado em: 20/06/2017
1072 |Desenvolva sites e mostre seu poder!
1074 |Seja bem-vindo
1045 |Somos uma empresa com mais de 150 anos no mercado [...]
1046 |- ```.
404 |
405 | Cada item da lista (**l**ist **i**tem), tanto para listas ordenadas quanto desordenadas, é identificado pela tag ```
- ```.
406 |
407 | Sendo assim, adicionaremos uma receita ao nosso site! Listaremos os ingredientes, que não precisam de ordem e os passos que devem ser seguidos em uma ordem específica (não levaremos o bolo ao forno antes de misturar os ingredientes, *eu* acho).
408 |
409 | Adicione este trecho de código depois da imagem, no arquivo ```index.html```:
410 |
411 | ```html
412 |
Bolo Delícia
413 |Ingredientes
414 |-
415 |
- 2 xícaras de farinha de trigo 416 |
- 2 ovos 417 |
- 1/2 xícara de leite 418 |
Modo de preparo
420 |-
421 |
- Misture os ingredientes 422 |
- Despeje no lixo 423 |
- Não repita isso em casa 424 |
477 |
478 | ```
479 |
480 | Faça os exercícios propostos para este capítulo em:
481 |
482 |
483 |
484 |
485 | # 11 - Tabelas
486 |
487 | Até a criação do CSS (lá por 1996), usava-se tabelas para criar layouts (rodapés, cabeçalhos, etc.). Se você não está em 1995, sugiro que *nunca* use tabelas para organizar conteúdo em uma página.
488 |
489 | Tabelas são criadas com o elemento ```table``` e precisamos definir a estrutura das tabelas célula a célula, linha a linha.
490 |
491 | Cada **linha** é criada utilizando o elemento ```tr``` (**t**able **r**ow) e cada coluna é criada a partir de células contidas na linha, representadas pelo elemento ```td``` (**t**able cell/**d**ata).
492 |
493 | Uma tabela com duas linhas e duas colunas é criada da seguinte forma:
494 |
495 | ```html
496 | 497 |
506 | ``` 507 | 508 | Insira esta tabela após o link criado no capítulo anterior, no arquivo ```index.html``` e abra-o no navegador. 509 | 510 | O resultado pode parecer um pouco confuso. Apesar de nossas células conterem cores, elas não estão pintadas. Isso só será possível com CSS, na segunda parte do livro. É possível ver também que as células "azuis" formaram a primeira coluna, enquanto que as "vermelhas" a segunda. 511 | 512 | Faça os exercícios propostos para este capítulo em: 513 | 514 | 515 | 516 | 517 | # 12 - Tabelas avançadas 518 | 519 | Por padrão, o texto dos elementos ```td``` têm o mesmo estilo de parágrafos, ou seja, em fonte e tamanhos normais. Porém, assim como textos, tabelas também têm cabeçalhos, que neste contexto será o elemento ```th``` (**t**able **h**eader). 520 | 521 | Um cabeçalho é criado simplesmente substituindo um elemento ```td``` por um ```th```: 522 | 523 | ```html 524 |498 | 501 |Linha 1, azul 499 |Linha 1, vermelho 500 |502 | 505 |Linha 2, azul 503 |Linha 2, vermelho 504 |525 |
534 | ``` 535 | 536 | Um tabela pode ter uma célula que se estende por mais de uma linha. Isso é alcançado com o atributo ```rowspan``` e a quantidade de células a ocupar. No exemplo abaixo, "Química" ocupará toda a coluna "Segunda-feira". 537 | 538 | ```html 539 |526 | 529 |Cabeçalho coluna 1 527 |Cabeçalho coluna 2 528 |530 | 533 |Linha 2, azul 531 |Linha 2, vermelho 532 |540 |
552 | ``` 553 | 554 | Pode-se expandir uma célula por mais de uma coluna também, através do atributo ```colspan``` e a quantidade de células a ocupar. No exemplo abaixo, "Química" ocupará a primeira linha tanto de "Segunda-feira" quanto de "Terça-feira". 555 | 556 | ```html 557 |541 | 544 |Segunda-feira 542 |Terça-feira 543 |545 | 548 |Química 546 |Matemática 547 |549 | 551 |Matemática 550 |558 |
570 | ``` 571 | 572 | Temos [este código][html exemplo 2] até aqui. 573 | 574 | Faça os exercícios propostos para este capítulo em: 575 | 576 | 577 | 578 | 579 | # 13 - Formulários 580 | 581 | Uma das principais formas de interação entre um site e seus usuários, é através de formulários. Eles permitem que o usuário faça contato com o site, forneça dados de cartão de crédito para uma compra, cadastre-se em um rede social, entre diversas outras opções. 582 | 583 | O elemento essencial para criar um formulário é o ```form```. Grande parte dos formulários começa da seguinte forma: 584 | 585 | ```html 586 | 589 | ``` 590 | 591 | Aqui temos dois atributos analisados em detalhes: 592 | 593 | - ```action```: define a localização para onde os dados do formulário serão enviados, geralmente algum lugar especificado no servidor onde o site está hospedado. Ao chegar no destino, os dados são tratados e o usuário recebe uma resposta de sucesso ou erro. No lado do servidor, existem várias linguagens de programação que podem ser utilizadas para analisar e processar os dados enviados pelo formulário, entre diversas outras temos: Javascript, PHP, Ruby, C#, Java, Python, etc. 594 | 595 | - ```method```: define qual o método de envio dos dados do formulário. Pode ser ```get``` ou ```post```. 596 | 597 | Ainda sobre o atributo ```method``` e os valores que ele aceita, usamos ```post``` quando queremos enviar mais que algumas palavras e de forma mais privada (a solicitação para o servidor é enviada longe dos olhos do usuário comum), enquanto que o método ```get``` é usado para envio de pequenos formulários, como campos de busca e cadastro de e-mails, quando a solicitação para o servidor é enviada na URL do navegador, como no exemplo abaixo de uma busca no Google sobre "métodos http": 598 | 599 | https://www.google.com.br/search?q=métodos+http 600 | 601 | Faça os exercícios propostos para este capítulo em: 602 | 603 | 604 | 605 | 606 | # 14 - Formulários: entrada de texto curta 607 | 608 | Criaremos um formulário simples de contato e, para isso, o usuário precisa de um local para inserir seu nome. Esse local é o elemento ```input```. 609 | 610 | ```html 611 | 617 | ``` 618 | 619 | Insira este trecho de código no arquivo ```index.html``` e veja o resultado no navegador. Experimente clicar sobre o título do campo "Nome". Observe como ao clicar sobre o título, o cursor vai automaticamente para dentro da caixa de texto. 620 | 621 | Temos dois elementos novos aqui: ```input``` e ```label```. 622 | 623 | Label significa rótulo e é exatamente para isso que este elemento serve. Ele rotula outros elementos e é usado principalmente em formulários para facilitar a usabilidade dos usuários e auxiliar quem depende da acessibilidade de seu site. O texto dentro dele é o texto que antecederá a caixa de texto. 624 | 625 | O elemento ```input``` define uma caixa de texto simples, de apenas uma linha e é ideal para dados curtos como nome, e-mail, telefones, etc. Nosso elemento possui dois atributos: 626 | 627 | - ```type="text"```: significa que nossa caixa receberá texto do usuário. ```type``` também pode ter outros valores, entre eles: ```number```, ```email```, ```tel```, ```password``` (esconde os caracteres) e etc. 628 | - ```name="nome"```: o nome do campo que será enviado junto com os dados do formulário. Pode ser qualquer valor, desde que não tenha espaços. 629 | 630 | Uma forma alternativa de escrever o código anterior e que tem o mesmo resultado é atribuindo um **id**entificador (```id```) ao ```input``` e conectando este identificador ao atributo ```for```, do ```label```. 631 | 632 | ```html 633 | 637 | ``` 638 | 639 | O ```id``` pode ter qualquer valor, desde que não contenha espaços, seja único no documento inteiro e seja o único ID do elemento em questão. Portanto, no exemplo anterior onde utilizamos "campoNome", poderíamos, para simplificar, utilizar apenas "nome". 640 | 641 | Você escolhe qual dos dois modos utilizar. 642 | 643 | Faça os exercícios propostos para este capítulo em: 644 | 645 | 646 | 647 | 648 | # 15 - Formulários: entrada de texto longa 649 | 650 | Para campos de texto com mais de uma linha (onde um ```input``` seria insuficiente), usamos o elemento ```textarea```. 651 | 652 | ```html 653 | 664 | ``` 665 | 666 | Primeiro, adicionamos um rótulo (```label```) que está conectado ao ```textarea``` através do atributo ```for```. Em seguida, adicionamos o elemento ```textarea```. Vamos aos detalhes: 667 | 668 | 1. Não temos um atributo ```type```, já que está explícito no nome do elemento que teremos apenas texto (**text**area); 669 | 2. O atributo ```name``` tem a mesma função já vista; 670 | 3. ```rows``` e ```cols``` definem quantas **linhas** e **colunas** o campo terá. Se omitidos, o elemento assume um tamanho padrão de acordo com cada navegador; 671 | 4. Por fim, mas não menos importante, temos uma tag de fechamento ``````, coisa que não temos no elemento ```input```. Isso porque podemos inserir texto que será carregado por padrão no campo, entre as tags de abertura e fechamento. 672 | 673 | A **br**uxaria aqui fica por conta do elemento ```br```, que cria uma quebra de linha (line **br**eak) e deixa nosso formulário mais legível (eu disse legível, não bonito). Apesar de apresentá-lo este elemento somente agora, ele pode ser usado em qualquer lugar, desde dentro de um parágrafo ou cabeçalho até entre elementos, como no exemplo acima. 674 | 675 | Faça os exercícios propostos para este capítulo em: 676 | 677 | 678 | 679 | 680 | # 16 - Formulários: radio buttons 681 | 682 | *Radio buttons* permitem que o usuário selecione apenas uma opção entre várias. Abaixo do ```label``` do nosso ```textarea```, insira o seguinte trecho de código e veja o resultado no navegador. 683 | 684 | ```html 685 |559 | 562 |Segunda-feira 560 |Terça-feira 561 |563 | 565 |Química 564 |566 | 569 |Matemática 567 |Matemática 568 |
686 | O que você está achando deste livro até agora? 687 |
688 | 692 | 696 | 700 | ``` 701 | 702 | Poucas novidades por aqui. 703 | 704 | 1. ```type```, que era ```text```, passou a ser ```radio```; 705 | 706 | 2. O que dá a funcionalidade que queremos de selecionar apenas uma opção entre várias é que todos ```radio```s compartilham do mesmo ```name```; 707 | 708 | 3. O atributo ```value``` é o valor que será enviado ao servidor no momento da submissão do formulário, de acordo com a opção selecionada; 709 | 710 | 4. O atributo ```checked```, no caso de botões radio, só pode ser usado em um elemento e selecionará por padrão este elemento, podendo ser alterado pelo usuário. 711 | 712 | Faça os exercícios propostos para este capítulo em: 713 | 714 | 715 | 716 | 717 | # 17 - Formulários: checkboxes 718 | 719 | Enquanto que os ```radio``` buttons permitem a seleção de apenas uma opção, as ```checkbox```es (caixas de seleção) não têm limites. 720 | 721 | Abaixo do nosso último exemplo, insira o seguinte código e visualize o resultado no navegador: 722 | 723 | ```html 724 |
725 | Quem além de você poderia aprender HTML e CSS? 726 |
727 | 731 | 735 | 739 | ``` 740 | 741 | Esta frase está ficando frequente. Isso significa que você já tem um conhecimento significativo. 742 | 743 | > Sem novidades por aqui. 744 | 745 | Faça os exercícios propostos para este capítulo em: 746 | 747 | 748 | 749 | 750 | # 18 - Formulários: select 751 | 752 | O elemento de seleção, ou ```select``` é o elemento ideal para quando o usuário precisa selecionar apenas uma opção entre várias, similar ao ```radio``` button, mas existem muitas opções ou você quer deixar as opções mais organizadas. 753 | 754 | Insira o seguinte trecho de código após as checkboxes do exemplo anterior e execute o arquivo: 755 | 756 | ```html 757 |
758 | Como você prefere ser chamado(a)? 759 |
760 | 766 | ``` 767 | 768 | Aqui temos algumas diferenças em relação aos últimos elementos do formulário: 769 | 770 | 1. O elemento ```select``` é o único que contém o atributo ```name``` e contém todas as opções dentro dele; 771 | 772 | 2. Cada opção (```option```) tem um valor (```value```) que corresponde ao apresentado ao usuário entre as tags ``````; 773 | 774 | 3. Assim como em outros tipos de ```input```, podemos apresentar ao usuário uma resposta pré-selecionada, neste caso, usando o atributo ```selected``` (não confunda com ```checked``` do ```checkbox``` e ```radio```). 775 | 776 | Faça os exercícios propostos para este capítulo em: 777 | 778 | 779 | 780 | 781 | # 19 - Formulários: envio 782 | 783 | O envio do formulário é feito através do botão de submissão, ou ```submit```. Através dele, quando o usuário envia o formulário, os dados deste são enviados ao servidor (geralmente) para que sejam processados. 784 | 785 | Antes da tag ``````, adicione um botão para enviar o formulário, execute o arquivo ```index.html``` no navegador e veja o resultado. 786 | 787 | ```html 788 |
789 | 790 | ``` 791 | 792 | Talvez este seja o elemento mais simples do formulário. O atributo ```type="submit"``` indica que este elemento submeterá os dados para o valor que estiver no atributo ```action``` da tag ``` 861 | ``` 862 | 863 | O que foi feito aqui: 864 | 865 | 1. Separamos o formulário em duas seções: "contato" e "perguntas"; 866 | 867 | 2. Cada seção é criada a partir de um ```fieldset``` que circunda os elementos daquele grupo; 868 | 869 | 3. O nome de cada grupo é atribuído através do elemento ```legend```, que está posicionado imediatamente após a tag de abertura do ```fieldset```; 870 | 871 | 4. Com inclusão da "moldura" proporcionada pelo ```fieldset```, pudemos eliminar algumas quebras de linha (```br```). 872 | 873 | Faça os exercícios propostos para este capítulo em: 874 | 875 | 876 | 877 | 878 | # 21 - Indentação 879 | 880 | Ou "da arte de tornar o código legível". Uma das principais virtudes de um bom código não está no que você escreveu e sim no **espaço em branco**. Note que até aqui, todo nosso código foi inserido com um padrão de espaço em branco entre os elementos. O navegador não se importa com este espaço deixado **fora** dos elementos. Portanto, podemos abusar dessa virtude para deixar nosso código melhor organizado. 881 | 882 | Veja dois exemplos de organização: 883 | 884 | ```html 885 | 886 | 887 | 888 |Meu documento desorganizado 889 | 890 | 891 |Seja bem-vindo
892 |Este é o pior site do mundo
893 | 900 | 901 | 902 | ``` 903 | 904 | ```html 905 | 906 | 907 | 908 |Meu documento organizado 909 | 910 | 911 |Seja bem-vindo
912 |Este é o melhor site do mundo (ou pelo menos o mais organizado)
913 | 920 | 921 | 922 | ``` 923 | 924 | Os dois códigos apresentarão o mesmo resultado ao navegador. Em qual dos dois padrões você acredita que será mais fácil fazer alterações, encontrar determinado elemento e encontrar uma tag que você esqueceu de fechar? 925 | 926 | A esta organização chamamos de indentação, que nada mais é que organizar de forma hierárquica os elementos. Se um elemento (que chamaremos de pai) tem outro elemento (filho) contido nele, o filho deverá estar localizado alguns espaços à frente. Quantos? Você define o que é melhor. Os espaçamentos mais utilizados variam de dois a quatro espaços ou um "tab". Neste livro, estou utilizando quatro espaços a cada "tab". 927 | 928 | Faça os exercícios propostos para este capítulo em: 929 | 930 | 931 | 932 | 933 | # 22 - Comentários 934 | 935 | Nem sempre apenas o espaçamento tornará o código mais compreensível. Às vezes você precisa deixar mensagens no código para um colega ou para você mesmo no futuro, sobre o porque de um determinado elemento estar naquela posição ou para descrever melhor para qual seção do código está olhando ou até mesmo para excluir da visualização do navegador um trecho de código sem removê-lo definitivamente do documento HTML. 936 | 937 | ```html 938 | 939 | 940 | 941 |Site do Estevan Maito 942 | 943 | 944 | 945 | 951 |Seja bem-vindo ao meu site!
952 |Eu sou um desenvolvedor web!
953 |Sobre mim
954 | 955 | 956 | 957 | 958 |E eu sou legal!
959 | 960 | 961 | ``` 962 | 963 | De agora em diante, deixaremos comentários em nosso código, iniciando com ``````. 964 | 965 | Faça os exercícios propostos para este capítulo em: 966 | 967 | 968 | 969 | 970 | # 23 - Seções 971 | 972 | A partir deste capítulo veremos como estruturar nossas páginas de forma semântica e organizada, ou seja, cada elemento é tão descritivo por si só que não há necessidade de apelar para comentários, classes e ids (veremos estes dois em breve) para entender o que ele significa. Estes elementos têm função apenas de **identificar uma determinanda seção com base em sua funcionalidade**. 973 | 974 | Uma página muito simples se parece com essa imagem: 975 | 976 |  977 | 978 | Além das facilidades que estas estruturas proporcionam a nós desenvolvedores, elas também auxiliam na acessibilidade, identificando cada seção para programas leitores de tela, por exemplo. 979 | 980 | Faça os exercícios propostos para este capítulo em: 981 | 982 | 983 | 984 | 985 | 986 | # 24 - Seções: cabeçalho e navegação 987 | 988 | O elemento ```header``` define um cabeçalho. Não confunda este cabeçalho com aqueles que identificam textos, como ```h1``` e ```h2```. O ```header``` tem o papel de agrupar elementos introdutórios, como logos, alguns menus e títulos, mas sem limitar-se ao topo da página, já que também podemos ter cabeçalhos em artigos e diversos outros lugares da página. 989 | 990 | Já o elemento ```nav``` é responsável por identificar uma seção de navegação. Aqui podem ser agrupados links que levam a outras páginas do site, pequenos formulários de busca, menus e etc. 991 | 992 | ```html 993 | 994 | 995 | 996 |Exemplo de seções 997 | 998 | 999 |1000 | 1003 | 1011 | 1012 | 1013 | ``` 1014 | 1015 | Faça os exercícios propostos para este capítulo em: 1016 | 1017 | 1018 | 1019 | 1020 | # 25 - Seções: principal e secundária 1021 | 1022 | O elemento ```main``` corresponde ao principal conteúdo da página e deve ser usado apenas uma vez, dentro do ```body```. Dentro dele teremos formulários, artigos e tudo mais que considerarmos como conteúdo principal da página. 1023 | 1024 | Conteúdo *à parte* do principal, que não tem relação direta com este, como glossário, biografia do autor, links relacionados, etc., serão englobados pelo elemento ```aside```. 1025 | 1026 | ```html 1027 | 1028 | 1029 |
1001 | Site oficial da Estevan Corp.
1002 |1030 | 1033 | 1034 | 1042 | 1043 |
1031 | Site oficial da Estevan Corp.
1032 |1044 | 1047 | 1048 | 1052 | 1053 | ``` 1054 | 1055 | Faça os exercícios propostos para este capítulo em: 1056 | 1057 | 1058 | 1059 | 1060 | # 26 - Seções: artigos e seções genéricas 1061 | 1062 | O conteúdo de uma página é geralmente dividido em diversos blocos de conteúdo relacionado, mas que não tem um nome específico como navegação, cabeçalho e rodapé por exemplo. Estes blocos podem ser agrupados em seções chamadas de ```section```. Uma ```section``` pode agrupar outros elementos como também pode estar agrupada dentro de outros elementos, como um ```article```, que define um artigo. 1063 | 1064 | ```html 1065 | 1066 |1067 | 1080 | ``` 1081 | 1082 | Faça os exercícios propostos para este capítulo em: 1083 | 1084 | 1085 | 1086 | 1087 | # 27 - Seções: rodapé e divs 1088 | 1089 | Direitos autorais, informações de contato e links úteis também têm um elemento específico para repousar no HTML, é o ```footer``` (rodapé). Assim como o ```header```, a utlização do rodapé não se limita ao final da página, já que podemos ter notas ao final de um artigo, um botão de curtir depois de uma foto, etc. 1090 | 1091 | ```html 1092 | 1093 | 1096 | ``` 1097 | 1098 | Por fim, temos o controverso elemento ```div``` (de **div**isão). É muito comum encontrar sites em que **nenhum** dos elementos vistos anteriormente são usados e temos apenas ```divs``` para separar o conteúdo. Até a introdução da última especificação do HTML, a 5 (o famoso HTML5), não havia outro meio de dividir e organizar o conteúdo senão com ```div```. Hoje, já podemos escrever código muito mais claro com o auxílio das seções vistas anteriormente, mas podem existir momentos em que nenhum daqueles elementos se encaixa, como um bloco de botões para redes sociais ou um bloco de elementos que deve ser agrupado unicamente para alterar seu estilo, por exemplo. Nestes casos, pode-se usar ```div```. 1099 | 1100 | ```html 1101 |Artigos
1068 |1069 | 1075 |1071 | 1073 |1076 | 1079 |Aprenda a criar sites
1077 |Criar um site é mais simples do que parece.
1078 |1102 |1104 | ``` 1105 | 1106 | Faça os exercícios propostos para este capítulo em: 1107 | 1108 | 1109 | 1110 | 1111 | # 28 - ID 1112 | 1113 | Vimos brevemente o uso de ```id``` no capítulo 14, para conectar um ```label``` a ```inputs```. O ```id``` define um **id**entificador **único** no elemento que deve ser único também no documento HTML inteiro. Os valores válidos para um ```id``` são: letras, números, "_", "-" e ".". 1114 | 1115 | Os principais usos do ```id``` são para identificação de estilos (usando CSS), em algum script e links internos (visto no próximo capítulo). 1116 | 1117 | ```html 1118 | 1119 |Um parágrafo que precisa de um estilo único. O diferentão.
1103 |Tente novamente mais tarde
1120 | 1121 | 1122 |Não espere que funcione como deveria...
1123 | ``` 1124 | 1125 | Faça os exercícios propostos para este capítulo em: 1126 | 1127 | 1128 | 1129 | 1130 | # 29 - Links internos 1131 | 1132 | Já vimos como criar links para outras páginas, tanto dentro de nosso site quanto para outros sites, mas existe mais uma possibilidade que o link nos dá, que é a de criar links dentro da própria página. 1133 | 1134 | Esse tipo de link é muito comum e auxilia os usuários da nossa página a se localizar e navegar mais rápido por ela. 1135 | 1136 | Adicione o seguinte código ao arquivo ```index.html```. A primeira linha deve ser inserida imediatamente abaixo da tag `````` enquanto que a última, imediatamente antes da tag ``````. Feito isso, visualize o resultado no navegador e experimente clicar no link criado no começo da página. 1137 | 1138 | ```html 1139 | 1140 | Ir para o fim da página 1141 | 1142 | 1143 |Você chegou ao fim!
1144 | ``` 1145 | 1146 | O valor do atributo ```href``` do link acima é igual ao valor do ```id``` que queremos como destino (nesse caso o destino será o elemento `````` com ```id="fim"```), acrescido de ```#``` no começo. 1147 | 1148 | Faça os exercícios propostos para este capítulo em: 1149 | 1150 | 1151 | 1152 | 1153 | # 30 - Áudio e vídeo 1154 | 1155 | Adicionar áudio e vídeo a uma página vem junto com alguns problemas de compatibilidade entre os navegadores. Isso quer dizer que se o seu objetivo for atingir o máximo de pessoas possíveis para um vídeo ou áudio, talvez você acabe com diversos arquivos apenas para tocar um "bip". Neste livro, manteremos nosso foco em atingir o melhor resultado usando o mínimo de código possível e isso implica em usar apenas um formato para cada mídia: ```.mp3``` para áudio e ```.mp4``` para vídeo. 1156 | 1157 | Como criar estes arquivos foge do escopo do livro. 1158 | 1159 | ```html 1160 | 1161 | 1162 | ``` 1163 | 1164 | Com exceção das próprias tags, quase tudo aqui é conhecido, com exceção do atributo ```controls``` que, quando presente, adiciona controles (play, pause, barra de tempo, etc.) ao áudio ou vídeo em que for adicionado. 1165 | 1166 | A forma mais segura (e menos custosa) de inserir mídia a uma página é utilizar serviços específicos que disponibilizam seu conteúdo de forma muito fácil, como a opção de incorporar vídeos do YouTube, por exemplo. 1167 | 1168 | Faça os exercícios propostos para este capítulo em: 1169 | 1170 | 1171 | 1172 | 1173 | # 31 - Iframes 1174 | 1175 | Iframes são responsáveis por carregar páginas web dentro de outras páginas web. Tome cuidado com as páginas que são carregadas dentro de sua página, ou melhor, evite ao máximo fazer isso. Iframes trazem consequências sérias em performance, acessibilidade e segurança. Dados sensíveis podem ser capturados por hackers através de um iframe. Um exemplo muito comum para o uso de iframe é incorporar vídeos do YouTube à página. 1176 | 1177 | ```html 1178 | 1179 | 1180 | ``` 1181 | 1182 | Aqui temos atributos praticamente iguais aos de uma imagem, com exceção do ```allowfullscreen```, que dá permissão para a execução do vídeo em tela cheia. 1183 | 1184 | Caso seja imprescindível utilizar um ```iframe``` que insira uma página de outro site ao seu, use o atributo ```sandbox```. Este atributo bloqueia a execução de scripts, formulários, popups, etc., a partir do ```iframe```. Não torna o elemento 100% seguro, mas dificulta o caminho do atacante. 1185 | 1186 | ```html 1187 | 1188 | ``` 1189 | 1190 | Faça os exercícios propostos para este capítulo em: 1191 | 1192 | 1193 | 1194 | 1195 | # 32 - Blocos e linhas 1196 | 1197 | Cada elemento, por padrão, pode ser apresentado em uma de duas formas ao usuário: em bloco (```block```) ou em linha (```inline```). 1198 | 1199 | Elementos de bloco criam uma nova linha e lá se estabelecem. Sem alterar suas propriedades com CSS, eles não terão nada ao seu lado. Exemplos desses elementos são: ```div```, ```p```, ```h1``` e todos os demais cabeçalhos, ```footer``` e todos os outros elementos dos capítulos de seções, ```form```, ```ul```, entre outros. 1200 | 1201 | Elementos em linha não criam uma nova linha. Por padrão, mesmo que coloquemos seus códigos um abaixo do outro, eles serão apresentados lado a lado. Exemplos são: ```input```, ```img```, ```a```, ```span```, entre outros. 1202 | 1203 | ```html 1204 |
Cabeçalhos são blocos
1205 |Parágrafos também
1206 | 1207 | 1208 | 1209 |
1210 | Link são elementos em linha e podem aparecer dentro de parágrafos!
1211 |
1212 |
1213 | 1214 | Sou em linha, mas estou dentro de um bloco! 1215 |1216 |1217 | 1218 | Estou na mesma linha do input, mas separado do link acima. 1219 |1220 | ``` 1221 | 1222 | Aprenderemos formas de mudar esse comportante em seguida com CSS! 1223 | 1224 | Faça os exercícios propostos para este capítulo em: 1225 | 1226 | 1227 | 1228 | 1229 | # 33 - Mais texto 1230 | 1231 | Os seguintes elementos alteram o estilo do texto: 1232 | 1233 | - ```em```: torna o trecho itálico, sinalizando ênfase; 1234 | - ```strong```: torna o texto negrito; 1235 | - ```mark```: marca o texto em amarelo; 1236 | - ```u```: sublinha o texto. 1237 | 1238 | Adicione o seguinte trecho de código ao arquivo ```index.html``` e visualize os resultados no navegador. 1239 | 1240 | ```html 1241 |Este texto é itálico.
1242 |Este texto é negrito.
1243 |Este texto está marcado.
1244 |Este texto está sublinhado.
1245 | ``` 1246 | 1247 | Faça os exercícios propostos para este capítulo em: 1248 | 1249 | 1250 | 1251 | 1252 | # 34 - Meta tags 1253 | 1254 | Meta tags são elementos invisíveis ao usuário, que se comunicam diretamente com o navegador, e que não podem ser representadas por outro elemento HTML. 1255 | 1256 | Saiba que existem diversos formatos e utilidades para as meta tags. Exploraremos aqui seu uso mais básico. 1257 | 1258 | Insira o seguinte código dentro do elemento ```head```; É lá que ele ficará em todos os casos. 1259 | 1260 | ```html 1261 | 1262 | 1263 | ``` 1264 | 1265 | A primeira tag informa ao navegador qual conjunto de caracteres estamos utilizando (```charset```). As chances são grandes de que você sempre utilizará o valor ```utf-8```. 1266 | 1267 | A última, dá uma breve introdução ao conteúdo que será encontrado na página e é utilizada principalmente pelos mecanismos de busca para complementar o resultado para seu site. 1268 | 1269 | Ao final do livro criaremos uma página de exemplo com outras ```meta```. Por enquanto, estas serão o suficiente. 1270 | 1271 | Faça os exercícios propostos para este capítulo em: 1272 | 1273 | 1274 | 1275 | 1276 | # 35 - Validando HTML 1277 | 1278 | É fundamental testar seu código HTML contra os padrões da linguagem. Este passo pode te mostrar problemas que você não tinha percebido enquanto escrevia seu código e ainda garante que este está em conformidade com o que os navegadores esperam receber, ou seja, seu código será apresentado ao usuário da forma que você espera. 1279 | 1280 | A principal ferramenta para realizar esta validação é desenvolvida pelo próprio comitê responsável pelo desenvolvimento dos padrões da Web (World Wide Web Consortium, ou W3C), e está disponível gratuitamente no endereço abaixo: 1281 | 1282 | https://validator.w3.org/ 1283 | 1284 | Chegamos ao fim da Parte 1. Seu código até o momento deve estar parecido com [este][html exemplo 3]. 1285 | 1286 | Este capítulo não tem exercícios. 1287 | 1288 | 1289 | # PARTE 2 - CSS 1290 | 1291 | # 36 - Escrevendo CSS 1292 | 1293 | CSS (Cascading Style Sheets), ou Folhas de Estilo em Cascata, é uma linguagem que instrui o navegador como apresentar uma página. Essas instruções basicamente dizem ao navegador **como** (lembra que o HTML dizia "onde"?) cada parte da página deve aparecer, seja um parágrafo azul, uma seção de dimensões específicas posicionanda lateralmente, imagens e etc. 1294 | 1295 | Você pode escrever CSS no mesmo programa em que escreveu HTML até agora. Não é necessária nenhuma modificação, com exceção do nome do arquivo que será salvo. Documentos CSS são identificados através de uma extensão própria. O nome do arquivo termina com ```.css```, como em ```estilos.css```. 1296 | 1297 | As regras para escrita dos nomes dos arquivos ```css``` são as mesmas do ```html```. 1298 | 1299 | Faça os exercícios propostos para este capítulo em: 1300 | 1301 | 1302 | 1303 | 1304 | # 37 - Escrevendo CSS: no HTML com style 1305 | 1306 | Existem duas formas de escrever CSS dentro do HTML, a primeira delas é utilizando o elemento ```style```. 1307 | 1308 | Para não deixar nosso exemplo construído no arquivo ```index.html``` feio (está lindo até agora), vamos criar um arquivo HTML novo que servirá de laboratório para nossas experiências com CSS. 1309 | 1310 | Crie na pasta "meu-site" um arquivo chamado ```laboratorio.html```, com o seguinte conteúdo e execute no navegador. 1311 | 1312 | ```html 1313 | 1314 | 1315 | 1316 |Laboratório de CSS 1317 | 1322 | 1323 | 1324 |Meu primeiro teste com CSS
1325 |Primeiro parágrafo
1326 |Segundo parágrafo
1327 |Terceiro parágrafo
1328 | 1329 | 1330 | ``` 1331 | 1332 | Entraremos em detalhes sobre a forma de escrever CSS no capítulo 40. Por enquanto, nos ateremos à localização desse código. 1333 | 1334 | Você deve ter visto que os três parágrafos agora estão em vermelho. Isso porque o elemento ```style``` cria um espaço para inserir as regras CSS dentro dele. Os prós e contras deste método são: 1335 | 1336 | Prós 1337 | - Os estilos inseridos no elemento ```style``` serão aplicados apenas aos elementos da página em questão; 1338 | - Não há necessidade de carregar um arquivo externo (capítulo 39), o que diminui a quantidade de arquivos solicitados ao servidor e consequentemente o tempo de carregamento da página. 1339 | 1340 | Contras 1341 | - Se tivermos mais de uma página e quisermos manter o mesmo estilo para o site inteiro, para fazer uma alteração, será necessário abrir cada arquivo HTML, encontrar as regras específicas e alterar uma a uma. Imagine isso em um site com 10, 50, 100, 1000 páginas! A manutenção é inviável; 1342 | - O estilo está misturado com a estrutura da página, o que é uma má prática. 1343 | 1344 | Utilize esta técnica apenas se os estilos para a página em questão forem poucos e exclusivos dela. 1345 | 1346 | Faça os exercícios propostos para este capítulo em: 1347 | 1348 | 1349 | 1350 | 1351 | # 38 - Escrevendo CSS: no HTML em linha 1352 | 1353 | A segunda forma de escrever CSS dentro do HTML é em linha, utilizando o **atributo** ```style``` (não o elemento) no elemento específico. 1354 | 1355 | Apague o elemento ```style``` do exemplo anterior, altere o código para o seguinte e execute no navegador. 1356 | 1357 | ```html 1358 | 1359 | 1360 | 1361 |Laboratório de CSS 1362 | 1363 | 1364 |Meu primeiro teste com CSS
1365 |Primeiro parágrafo
1366 |Segundo parágrafo
1367 |Terceiro parágrafo
1368 | 1369 | 1370 | ``` 1371 | 1372 | Visualmente, não há diferença no resultado deste para o exemplo do capítulo anterior. A diferença está nos prós e contras: 1373 | 1374 | Prós 1375 | - O estilo é aplicado a um único elemento (o que também pode ser alcançando utilizando um ```id```, como veremos no futuro); 1376 | - Não há necessidade de carregar um arquivo externo (capítulo 39), o que diminui a quantidade de arquivos solicitados ao servidor e consequentemente o tempo de carregamento da página. 1377 | 1378 | Contras 1379 | - Os mesmos de se usar o elemento ```style```, mais... 1380 | - Imagine alterar 10 páginas para que todos os parágrafos sejam de outra cor. Se cada página dessas tiver pelo menos 20 parágrafos, serão no mínimo 200 alterações! 1381 | 1382 | Evite utilizar este método. 1383 | 1384 | Faça os exercícios propostos para este capítulo em: 1385 | 1386 | 1387 | 1388 | 1389 | # 39 - Escrevendo CSS: em arquivo externo 1390 | 1391 | Será a forma de escrever CSS adotada daqui em diante e aconselho que você utilize em seus projetos também (a menos que seus estilos tenham menos de 100 linhas, então pode-se cogitar o uso de estilos dentro do elemento ```style```, direto no HTML). 1392 | 1393 | Na pasta "meu-site", crie um arquivo chamado ```estilos.css``` com o seguinte conteúdo: 1394 | 1395 | ```css 1396 | p { 1397 | color: red; 1398 | } 1399 | ``` 1400 | 1401 | E altere o arquivo ```laboratorio.html```: 1402 | 1403 | ```html 1404 | 1405 | 1406 | 1407 |Laboratório de CSS 1408 | 1409 | 1410 | 1411 | 1412 |Meu primeiro teste com CSS
1413 |Primeiro parágrafo
1414 |Segundo parágrafo
1415 |Terceiro parágrafo
1416 | 1417 | 1418 | ``` 1419 | 1420 | Execute o arquivo ```laboratorio.html``` no navegador e veja os resultados. 1421 | 1422 | Visualmente, mais uma vez, não há diferença no conteúdo apresentado, porém, temos algumas novidades no código. 1423 | 1424 | Primeiro, temos um arquivo novo, ```estilos.css```. Nele vamos escrever todo nosso CSS de agora em diante. Note que o conteúdo deste arquivo é o mesmo que preenchia o elemento ```style```. 1425 | 1426 | Segundo, para que o estilo escrito em ```estilos.css``` seja aplicado ao conteúdo de ```laboratorio.html```, precisamos conectar os dois arquivos. Isso é alcançado através do elemento ```link```. 1427 | 1428 | O elemento ```link``` é composto por dois atributos: 1429 | 1430 | - ```rel```: define o **rel**acionamento do arquivo *linkado* (nesse caso ```estilos.css```) com o documento HTML. ```stylesheet``` siginifica, surpreendentemente, que estamos conectando um documento de stylesheet, ou folhas de estilos (CSS); 1431 | 1432 | - ```href```: define o caminho para o arquivo. 1433 | 1434 | Prós 1435 | - Estilo separado da estrutura. Esta separação permite além da separação de conceitos, uma manutenção mais fácil; 1436 | - Um único arquivo pode ser vinculado a diversas páginas. Isso significa que alterações em um único local serão refletidas a todas as páginas que tiverem esta folha de estilos. 1437 | 1438 | Contras 1439 | - É necessário o carregamento de um arquivo externo, o que afeta a performance e, dependendo do tamanho da página, quantidade de estilos a ser carregada e velocidade da conexão do usuário, pode fazer a tela "piscar" (primeiro a tela carrega sem nenhum estilo e, em poucos instantes, quando o arquivo externo é finalmente baixado e os estilos aplicados, a tela é colorida e reorganizada instantaneamente); 1440 | - Quanto mais arquivos de CSS forem necessários para um página, maior será o problema anterior. 1441 | 1442 | Os prós superam os contras se o uso desta técnica for consciente. Evite criar muitos arquivos. Um documento bem comentado e organizado pode conter todas as regras de um site. 1443 | 1444 | Faça os exercícios propostos para este capítulo em: 1445 | 1446 | 1447 | 1448 | 1449 | # 40 - Estrutura das regras 1450 | 1451 | Analisaremos o CSS abaixo... 1452 | 1453 | ```css 1454 | p { 1455 | color: red; 1456 | } 1457 | ``` 1458 | 1459 | ...a partir da seguinte matriz: 1460 | 1461 | ```css 1462 | seletor { 1463 | propriedade: valor; 1464 | } 1465 | ``` 1466 | 1467 | 1. seletor: seleciona o(s) elemento(s) a serem estilizados. Pode ser o nome de um elemento (exatamente como aparece no HTML, sem os sinais ```<>```), uma classe ou um id (veremos em breve estes dois últimos). No exemplo acima, aplicamos a cor vermelha a todos os ```p``` (parágrafos); 1468 | 1469 | 2. propriedade: identifica qual característica será alterada (ex: fonte, cor de fundo, largura). No exemplo, é a propriedade ```color``` (cor). É seguida imediatamente por ```:``` (dois pontos) e um espaço; 1470 | 1471 | 3. valor: especifica qual valor será aplicado à propriedade em questão (ex: que fonte será aplicada, qual a cor do fundo, qual a largura). No exemplo, alteramos a cor (```color```) para vermelho (```red```); 1472 | 1473 | 4. pares de propriedade e valor são chamados de *declarações*. Cada declaração é finalizada com ```;``` (ponto e vírgula); 1474 | 1475 | 5. as declarações são colocadas dentro de um *bloco de declarações*, identificado por chaves (```{}```); 1476 | 1477 | 6. o conjunto (do seletor à chave final ```}```) corresponde a uma regra. 1478 | 1479 | Faça os exercícios propostos para este capítulo em: 1480 | 1481 | 1482 | 1483 | 1484 | # 41 - Classes 1485 | 1486 | No capítulo 28, vimos como o atributo ```id``` cria um identificador único. Neste capítulo, as *classes* (que não têm nada a ver com classes da programação orientada a objetos) nos possibilitarão identificar mais de um elemento com um mesmo identificador. Este comportamento será essencial para estilizarmos diferentes elementos com uma mesma regra (ex: um cabeçalho e um parágrafo, entre centenas de outros, devem ser azuis). 1487 | 1488 | No documento ```laboratorio.html```, abaixo do último parágrafo, insira os seguintes elementos: 1489 | 1490 | ```html 1491 |Comprar pão
1492 |Tirar o lixo
1493 |Consertar janela
1494 | ``` 1495 | 1496 | Adicionamos classes a um elemento através do atributo ```class```, de forma que cada classe esteja separada das demais por um espaço (isso nos impede de criar classes com espaços no nome, o que criaria outra classe). 1497 | 1498 | Faça os exercícios propostos para este capítulo em: 1499 | 1500 | 1501 | 1502 | 1503 | # 42 - Seletores de tipo 1504 | 1505 | O capítulo 40 nos introduziu ao conceito de seletores. Eles são usados para selecionar os elementos do documento HTML que queremos estilizar. 1506 | 1507 | Existe uma grande variedade de seletores disponível, que nos permite selecionar elementos com grande precisão. Neste e nos seguintes capítulos nos dedicaremos aos *seletores simples*, representados por tipos (ou elementos), classes e ids. 1508 | 1509 | O seletor de tipo é a forma mais simples de atingir todos os elementos de um determinado tipo. Atualmente, já temos um exemplo em funcionamento em nosso arquivo ```estilos.css```, em que selecionamos todos os parágrafos do documento HTML. Edite este documento para que o cabeçalho fique azul (insira abaixo da regra do elemento ```p```): 1510 | 1511 | ```css 1512 | h1 { 1513 | color: blue; 1514 | } 1515 | ``` 1516 | 1517 | Execute o arquivo ```laboratorio.html``` e veja o resultado no navegador. 1518 | 1519 | Faça os exercícios propostos para este capítulo em: 1520 | 1521 | 1522 | 1523 | 1524 | # 43 - Seletores de classe 1525 | 1526 | No capítulo 41 adicionamos três parágrafos com classes ao arquivo ```laboratorio.html```. Neste exemplo selecionaremos elementos específicos através destas classes. 1527 | 1528 | Ao final de ```estilos.css``` adicione o seguinte código e visualize o resultado no navegador: 1529 | 1530 | ```css 1531 | .primeiro { 1532 | color: green; 1533 | } 1534 | 1535 | .feito { 1536 | font-weight: bold; 1537 | } 1538 | ``` 1539 | 1540 | O seletor de classe consiste em um ponto (```.```), seguido pelo nome da classe. No exemplo acima, dois parágrafos com a classe ```feito``` terão o peso da fonte (```font-weight```) alterado para negrito (```bold```), enquanto que o parágrafo com a classe ```primeiro``` ficará verde. 1541 | 1542 | Faça os exercícios propostos para este capítulo em: 1543 | 1544 | 1545 | 1546 | 1547 | # 44 - Seletores de id 1548 | 1549 | Na sequência dos últimos três parágrafos com classes no arquivo ```laboratorio.html```, adicione o seguinte código: 1550 | 1551 | ```html 1552 |Ooops!
1553 | ``` 1554 | 1555 | Adicione ao arquivo ```estilos.css``` o seguinte trecho também e visualize o resultado no navegador (executando o arquivo ```laboratorio.html```): 1556 | 1557 | ```css 1558 | #erro { 1559 | background-color: red; 1560 | } 1561 | ``` 1562 | 1563 | O seletor de id é a forma mais fácil de selecionar apenas um elemento e consiste em um sustenido (```#```), seguido pelo nome do id. Lembre-se que um elemento pode ter apenas um ```id``` e este ```id``` deve ser único no documento inteiro. 1564 | 1565 | No exemplo acima, alteramos a cor de fundo (```background-color```) para vermelho. 1566 | 1567 | Evite usar ids para alterar o estilo de um elemento. Ainda que no momento haja a necessidade de estilizar apenas um elemento, estilos aplicados a um ```id``` ficam restritos àquele elemento, enquanto que uma classe torna aquele mesmo estilo aplicável a quaisquer outros elementos. 1568 | 1569 | Faça os exercícios propostos para este capítulo em: 1570 | 1571 | 1572 | 1573 | 1574 | # 45 - Cascata 1575 | 1576 | Na introdução ao CSS vimos que a letra **C**, de CSS, significa *cascata*. No nível mais básico, isso significa que a ordem das regras importa. Ou seja, uma regra especificada posteriormente tem maior importância que uma regra no começo do documento. Se isso pareceu complicado, saiba que você já tem um exemplo pronto, desde o capítulo 43. 1577 | 1578 | Ao executar o exemplo daquele capítulo você deve ter percebido que um dos parágrafos, entre tantos vermelhos, ficou verde. Isso porque a regra que atinge todos os parágrafos e os pinta de vermelho aparece antes da regra ```.primeiro```, que está vinculada a um parágrafo e o pinta de verde. 1579 | 1580 | A ordem em que os estilos são aplicados é: 1581 | 1582 | 1. Importância 1583 | 1584 | 2. Especificidade 1585 | 1586 | 3. **Ordem no código** 1587 | 1588 | Acabamos de aprender como a ordem das regras no código afeta o resultado exibido no navegador. As demais regras serão vistas ao longo do livro e têm algumas peculiaridades. Talvez este seja o conceito mais complexo e poderoso do CSS. Por sua compreensão ser fundamental, introduzirei os demais conceitos (mais complexos) futuramente para não confundir você. 1589 | 1590 | Faça os exercícios propostos para este capítulo em: 1591 | 1592 | 1593 | 1594 | 1595 | # 46 - Cores 1596 | 1597 | Até agora, usamos cores indicando seu nome em inglês. A lista de cores possíveis utilizando seu nome é limitada a aproximadamente 150 nomes. Porém, existem outras formas de indicar cores, como RGB, RGBa (usada para transparências), hexadecimal, entre outras. 1598 | 1599 | Neste capítulo, detalharei o funcionamento de cores em RGB e em hexadecimal e passaremos a utilizar o hexadecimal para o restante do livro. Os demais padrões, apesar de simples, tomariam um espaço considerável da nossa capacidade de memorizar neste momento. Você pode pesquisá-los na internet a qualquer momento. 1600 | 1601 | A notação de uma cor em hexadecimal respeita o padrão RGB (red green blue): ```#RRGGBB``` ou ```#RGB``` (```#``` seguido por caracteres hexadecimais). Assim, a cor ```blue``` (experimente alterar a cor de todos os parágrafos para ela) pode ser reescrita da seguinte forma, nos formatos RGB e hexadecimal, com o mesmo resultado: 1602 | 1603 | ```css 1604 | /* 00 - Red, 00 - Green, FF - Blue */ 1605 | /* maiúsculas e minúsculas são aceitas */ 1606 | #0000ff 1607 | #0000FF 1608 | /* caso um par seja composto por números iguais, pode-se escrever apenas um deles */ 1609 | #00f 1610 | #00F 1611 | /* 0 - Red, 0 - Green, 255 - Blue */ 1612 | /* as notações com e sem espaços têm o mesmo efeito */ 1613 | rgb(0, 0, 255) 1614 | rgb(0,0,255) 1615 | /* também é possível indicar a porcentagem de cada cor */ 1616 | /* 0% - Red, 0% - Green, 100% - Blue */ 1617 | rgb(0%,0%,100%) 1618 | ``` 1619 | 1620 | Veja alguns exemplos de cores comuns, escritas em hexadecimal: 1621 | 1622 | - Vermelho: #FF0000; 1623 | - Verde: #00FF00; 1624 | - Azul: #0000FF; 1625 | - Preto: #000000; 1626 | - Amarelo: #FFFF00; 1627 | - Branco: #FFFFFF. 1628 | 1629 | Faça os exercícios propostos para este capítulo em: 1630 | 1631 | 1632 | 1633 | 1634 | # 47 - Herança 1635 | 1636 | Em CSS, herança se comporta como na vida real, passando propriedades de (elemento) pai para (elemento) filho. 1637 | 1638 | Por exemplo, um um pai tem quatro itens: 1639 | - mil reais; 1640 | - uma casa; 1641 | - dois metros de altura; 1642 | - cem quilos. 1643 | 1644 | Algumas propriedades suas serão passadas ao seus filhos (mil reais e uma casa), enquanto que outras são únicas do pai (peso e altura). Em CSS não existe uma regra fixa que diga qual propriedade passará de pai para filho, mas o bom senso impera. Se eu aplicar uma propriedade de cor de fonte (```color```) a um bloco (um ```header```, por exemplo), os parágrafos, cabeçalhos e todo o texto que estiver lá dentro receberá as mesmas propriedades de cor (a menos que eu altere cada um individualmente), enquanto que as imagens não, afinal, não é possível alterar o texto de um imagem a não ser em um editor de imagens. 1645 | 1646 | Margens, bordas, altura, largura, imagem de fundo, entre outros, NÃO são herdados. Seria bizarro se eu aplicasse uma margem ao elemento pai mais externo (```html```) e TODOS os demais elementos internos herdassem este espaçamento. Em uma reação em cadeia, logo eu teria conteúdos com vinte vezes mais margem que o elemento alvo inicialmente. A regra aqui é usar o bom senso e testar. Não tenha medo de aplicar estilos a um determinado elemento e executar dezenas de vezes o documento no navegador para visualizar os resultados. 1647 | 1648 | Ao arquivo ```estilos.css```, adicione o seguinte código ao final das demais regras (queremos que esta sobreponha as demais, no efeito cascata): 1649 | 1650 | ```css 1651 | body { 1652 | color: orange; 1653 | text-decoration: underline; 1654 | } 1655 | ``` 1656 | 1657 | Execute no navegador e visualize o resultado. Apenas o último cabeçalho (```h2```) foi pintado, mas todos os demais elementos receberam o sublinhado (```text-decoration: underline```). Mesmo nossa regra estando posicionada por último, os demais elementos continuam com as mesmas cores de antes. Isso se deve à *especificidade* (vista no decorrer do livro). 1658 | 1659 | Herança é muito importante, pois evita que tenhamos que repetir o mesmo código para diversos elementos. Dessa forma, um estilo aplicado ao elemento pai pode ser herdado pelos filhos. 1660 | 1661 | Faça os exercícios propostos para este capítulo em: 1662 | 1663 | 1664 | 1665 | 1666 | # 48 - Medidas 1667 | 1668 | Em CSS existem diversas formas de declarar medidas de comprimento, separadas em dois grandes grupos: 1669 | 1670 | - Absolutas ou de comprimento fixo (o pixel - px - é a principal delas), em que os elementos são apresentados exatamente no tamanho em que foram declarados; 1671 | - Relativas (em, rem, e % são as mais utilizadas), em que o comprimento é relativo ao especificado em outro elemento e pode variar. 1672 | 1673 | Crie duas ```div``` em ```laboratorio.html```, uma com a classe ```absoluto``` e outra com a classe ```relativo```: 1674 | 1675 | ```html 1676 | 1677 | 1678 | ``` 1679 | 1680 | O CSS destas duas classes será o seguinte (no arquivo ```estilos.css```). Além disso, adicione ao ```body``` a altura de ```800px```: 1681 | 1682 | ```css 1683 | /* ao body acrescente a altura */ 1684 | 1685 | body { 1686 | /* demais propriedades acima */ 1687 | height: 800px; 1688 | } 1689 | 1690 | .absoluto { 1691 | width: 100px; 1692 | height: 100px; 1693 | background-color: red; 1694 | } 1695 | 1696 | .relativo { 1697 | width: 30%; 1698 | height: 30%; 1699 | background-color: blue; 1700 | } 1701 | ``` 1702 | 1703 | Execute o exemplo no navegador e experimente alterar a largura do navegador arrastando as bordas da janela. Observe como o exemplo com medidas absolutas não é afetado por nada, enquanto que a caixa com medidas relativas varia a largura (mudando a altura do ```body```, a caixa se adaptará ao novo valor). 1704 | 1705 | Usaremos a medida que melhor couber em cada momento daqui em diante. 1706 | 1707 | Faça os exercícios propostos para este capítulo em: 1708 | 1709 | 1710 | 1711 | 1712 | # 49 - Caixas (box-model) 1713 | 1714 | Tudo em CSS é uma caixa. Experimente adicionar ao seletor universal (```*```; atinge todos os elementos) uma borda: 1715 | 1716 | ```css 1717 | * { 1718 | /* veremos bordas em detalhes em um capítulo a parte, a seguir */ 1719 | border: 1px solid black; 1720 | } 1721 | ``` 1722 | 1723 | Veja o resultado no navegador e exclua esta regra. 1724 | 1725 | Este conceito é a base de qualquer layout na web. Cada elemento é representado como uma caixa retangular composta pelo conteúdo, *padding* (espaço interno ao redor do conteúdo), *border* (borda; delimita interno e externo) e *margin* (margem; camada mais externa, ao redor da borda). 1726 | 1727 | A imagem abaixo ilustra isso: 1728 | 1729 |  1730 | 1731 | 1. A área do conteúdo (content) é a área que contém o conteúdo do elemento, incluindo outros elementos que forem filhos deste elemento; 1732 | 1733 | 2. A área do ```padding``` representa a margem interna, localizada entre a borda e o conteúdo; 1734 | 1735 | 3. A área da borda (```border```) fica entre o ```padding``` e a margem; 1736 | 1737 | 4. A área da margem (```margin```) representa a margem externa da caixa. 1738 | 1739 | Cada um destes elementos será detalhado nos próximos capítulos, antes, vejamos um exemplo. Adicione o CSS e HTML abaixo aos seus respectivos documentos: 1740 | 1741 | ```html 1742 |Eu sou uma caixa!1743 | ``` 1744 | 1745 | A cada linha adicionada à classe ```.caixa```, execute o arquivo ```laboratorio.html``` e veja o resultado. 1746 | 1747 | ```css 1748 | .caixa { 1749 | background-color: red; 1750 | padding: 10px; 1751 | border: 5px solid black; 1752 | margin: 10px; 1753 | } 1754 | ``` 1755 | 1756 | Por padrão, o ```padding``` é contabilizado no tamanho do elemento, ou seja, o seguinte exemplo não resulta em uma largura de ```100px``` e sim ```140px``` (```20px``` de cada lado): 1757 | 1758 | ```css 1759 | width: 100px; 1760 | padding: 20px; 1761 | ``` 1762 | 1763 | A solução para isso é adicionar uma declaração que diz ao navegador para contabilizar a largura como tudo até a borda do elemento, assim, o resultado anterior teria ```100px``` de largura total, ```20px``` de ```padding``` em cada lado e ```60px``` de espaço para o conteúdo (100 de largura - 20 de padding em cada lado = 60). Adicione esta linha à regra do elemento: 1764 | 1765 | ```css 1766 | box-sizing: border-box; 1767 | ``` 1768 | 1769 | Faça os exercícios propostos para este capítulo em: 1770 | 1771 | 1772 | 1773 | 1774 | # 50 - Padding 1775 | 1776 | Já vimos que o ```padding``` é responsável pelo espaço interno da caixa, entre o conteúdo e a borda. Quando o conteúdo tem uma cor ou imagem de fundo, este irá se estender ao ```padding```, como no exemplo do capítulo anterior. 1777 | 1778 | Existem duas formas de aplicar valores ao ```padding```: 1779 | 1780 | 1. Indicando o valor de cada lado: 1781 | 1782 | ```css 1783 | /* cima */ 1784 | padding-top: 10px; 1785 | /* direita */ 1786 | padding-right: 10px; 1787 | /* baixo */ 1788 | padding-bottom: 10px; 1789 | /* esquerda */ 1790 | padding-left: 10px; 1791 | ``` 1792 | 1793 | 2. Abreviando em uma única expressão: 1794 | 1795 | ```css 1796 | padding: 10px; 1797 | ``` 1798 | 1799 | O valor acima aplica o mesmo valor de ```10px``` para todos os lados. 1800 | 1801 | Podemos ainda usar a forma abreviada para indicar valores diferentes para cada lado, da seguinte forma: 1802 | 1803 | ```css 1804 | padding: 10px 15px 10px 15px; 1805 | ``` 1806 | 1807 | No exemplo anterior, os valores são declarados no sentido horário, começando pelo topo (```top```), ou seja, ```top```, ```right```, ```bottom```, ```left```. 1808 | 1809 | No último caso, poderíamos abreviar ainda mais, já que temos os mesmos valores para ```top``` e ```bottom```, ```right``` e ```left```. O resultado seria: 1810 | 1811 | ```css 1812 | padding: 10px 15px; 1813 | ``` 1814 | 1815 | O primeiro valor representa ```top``` e ```bottom```, enquanto que o segundo ```right``` e ```left```. 1816 | 1817 | Por fim, estas formas têm o mesmo resultado: 1818 | 1819 | ```css 1820 | /* cima */ 1821 | padding-top: 10px; 1822 | padding-right: 10px; 1823 | padding-bottom: 10px; 1824 | padding-left: 10px; 1825 | 1826 | padding: 10px 10px; 1827 | 1828 | padding: 10px; 1829 | ``` 1830 | 1831 | Faça os exercícios propostos para este capítulo em: 1832 | 1833 | 1834 | 1835 | 1836 | # 51 - Bordas 1837 | 1838 | Ao final do ```padding``` começa a borda do elemento, ou ```border```, que se estende até o início da margem. 1839 | 1840 | Usaremos apenas o formato abreviado da declaração de borda, que determina a espessura, estilo e cor da borda. 1841 | 1842 | O elemento caixa tem, até o momento a seguinte declaração de borda: 1843 | 1844 | ```css 1845 | border: 5px solid black; 1846 | ``` 1847 | 1848 | Onde ```5px``` define a espessura, ```solid``` o estilo (experimente alterar para ```dotted``` (pontilhado) ou ```dashed``` (tracejado)) e ```black``` a cor, que pode ter qualquer nome válido de cor ou valor em RGB, hexadecimal, etc. 1849 | 1850 | Também é possível arredondar os cantos da borda usando a propriedade ```border-radius``` com o valor de alguma medida de comprimento. Experimente adicionar à ```.caixa```: 1851 | 1852 | ```css 1853 | border-radius: 3px; 1854 | ``` 1855 | 1856 | Faça os exercícios propostos para este capítulo em: 1857 | 1858 | 1859 | 1860 | 1861 | # 52 - Margem 1862 | 1863 | A margem (```margin```) representa a área ao redor do elemento (caixa) e afasta este de outros elementos. As formas de aplicar valor às margens seguem as mesmas regras que se aplicam ao ```padding```. 1864 | 1865 | Estas formas têm o mesmo resultado: 1866 | 1867 | ```css 1868 | margin-top: 10px; 1869 | margin-right: 10px; 1870 | margin-bottom: 10px; 1871 | margin-left: 10px; 1872 | 1873 | margin: 10px 10px; 1874 | 1875 | margin: 10px; 1876 | ``` 1877 | 1878 | Apesar disso, as margens se comportam de forma particular, principalmente quando a margem de um elemento toca a de outro. Esse comportamento é chamado de *margin collapsing* ou "colapso de margem". Quando dois elementos se tocam, a distância entre eles é o valor da maior margem entre os dois, e não sua soma. 1879 | 1880 | Este comportamento pode ser visto adicionando-se outra ```caixa``` abaixo da que já temos em ```laboratorio.html```. 1881 | 1882 | ```html 1883 |Eu sou uma caixa 2!1884 | ``` 1885 | 1886 | Alterando-se o valor de ```margin``` na classe ```.caixa``` é possível ver que a distância entre as duas é a mesma que a aplicada ao topo ou laterais, e não a soma das duas. 1887 | 1888 | Faça os exercícios propostos para este capítulo em: 1889 | 1890 | 1891 | 1892 | 1893 | # 53 - Texto 1894 | 1895 | Texto é o coração da web. Conteúdo atualmente é um dos maiores indicadores de sucesso de uma página. De que adianta o melhor layout, ser a melhor empresa em determinado ramo, ter os melhores produtos se não formos capazes de capturar a atenção do usuário através de conteúdo que importe para ele? Pelo menos é o que eu e a Google (mais especificamento o Google Search) achamos. Há algum tempo o mecanismo de ranking de páginas do Google já não utiliza palavras-chave com tanto peso como há algum tempo. Hoje seus algorítmos já são capazes de determinar do que uma página se trata através de seu conteúdo. 1896 | 1897 | Mas só bom conteúdo não adianta. É preciso apresentar o conteúdo de forma que encante o usuário. E é isso o que faremos em breve (antes vamos continuar o esforço de deixar a página mais feia). 1898 | 1899 | Adicione os seguintes trechos de código aos arquivos ```laboratorio.html``` e ```estilos.css```, respectivamente: 1900 | 1901 | ```html 1902 |1903 | Texto é o coração da web. Conteúdo atualmente é um dos maiores 1904 | indicadores de sucesso de uma página. 1905 |
1906 | ``` 1907 | 1908 | ```css 1909 | .texto-padrao { 1910 | color: #333; 1911 | letter-spacing: 2px; 1912 | line-height: 2; 1913 | text-decoration: underline; 1914 | text-align: center; 1915 | } 1916 | ``` 1917 | 1918 | Visualize os resultados no navegador. 1919 | 1920 | O papel de cada regra: 1921 | 1922 | 1. ```color```: define a cor do texto; 1923 | 1924 | 2. ```letter-spacing```: altera o espaçamento entre cada letra; 1925 | 1926 | 3. ```line-height```: altera a altura de cada linha. 1 é o padrão; 1927 | 1928 | 4. ```text-decoration```: responsável pela decoração do texto. Adiciona uma linha sob (```underline```), sobre (```overline```) ou através (```line-through```) do texto; 1929 | 1930 | 5. ```text-align```: altera o alinhamento do texto. Os valores mais comuns são: ```left```, ```right``` e ```center```. 1931 | 1932 | Faça os exercícios propostos para este capítulo em: 1933 | 1934 | 1935 | 1936 | 1937 | # 54 - Fontes 1938 | 1939 | Aos estilos atuais de ```body``` e ```h1```, faça as modificações necessárias para que as regras fiquem iguais às seguintes e visualize os resultados no navegador: 1940 | 1941 | ```css 1942 | h1 { 1943 | color: blue; 1944 | font-family: Georgia, "Times New Roman", serif; 1945 | font-size: 30px; 1946 | font-style: italic; 1947 | font-weight: bold; 1948 | } 1949 | 1950 | body { 1951 | height: 500px; 1952 | font-family: sans-serif; 1953 | } 1954 | ``` 1955 | 1956 | No cabeçalho ```h1```, alteramos as seguintes propriedades: 1957 | 1958 | 1. ```font-family```: especifica uma lista de fontes em que o texto deve ser exibido. Cada valor é separado por vírgula e diz ao navegador: "Carregue esta fonte, mas se não tiver, carregue esta outra" e assim por diante, até chegar à última opção que geralmente é um padrão em que o navegador carregará uma determinada fonte padrão naquela categoria (```serif``` para fontes com serifa, ```sans-serif``` para fontes sem serifa e ```monospace``` para fontes monoespaçadas). O conceito de serifa foge ao escopo deste livro; 1959 | 1960 | 2. ```font-size```: determina o tamanho da fonte; 1961 | 1962 | 3. ```font-style```: altera o estilo da fonte e pode ser ```normal```, ```italic``` e ```oblique```; 1963 | 1964 | 4. ```font-weight```: corresponde à espessura dos caracteres, pode ser ```bold``` (negrito), ```normal``` ou um valor numérico especificado pela própria fonte. 1965 | 1966 | No ```body``` apenas dissemos ao navegador para aplicar qualquer fonte que não tenha serifa (```sans-serif```). 1967 | 1968 | Faça os exercícios propostos para este capítulo em: 1969 | 1970 | 1971 | 1972 | 1973 | # 55 - Listas 1974 | 1975 | A propriedade mais importante para um lista é ```list-style```, que especifica o estilo da lista (o tipo do marcador, a posição e até uma imagem para ele, se for o caso). 1976 | 1977 | Crie uma lista em ```laboratorio.html``` e visualize o resultado no navegador. Em seguida, mude o estilo da lista e veja o que mudou. 1978 | 1979 | ```html 1980 | 1986 | ``` 1987 | 1988 | ```css 1989 | li { 1990 | list-style: square; 1991 | } 1992 | ``` 1993 | 1994 | No exemplo anterior a propriedade ```list-style``` foi alterada para ```square``` (quadrado). Outros valores possíveis são: ```disc```, ```decimal```, ```none``` (nenhum), entre outros. 1995 | 1996 | Podemos criar um menu a partir do exemplo anterior alterando o comportamento de cada ```li```, de bloco para em linha (se precisar, volte ao capítulo 32 para rever o conceito de blocos e linhas). 1997 | 1998 | Altere a regra que atinge os ```li``` para o seguinte: 1999 | 2000 | ```css 2001 | li { 2002 | list-style: none; 2003 | display: inline-block; 2004 | padding: 5px; 2005 | } 2006 | ``` 2007 | 2008 | Neste exemplo, removemos o estilo da lista (```list-style: none```) e alteramos o comportamento de cada ```li``` para que ficassem como blocos, porém em linha! Fique à vontade para adicionar links (```a```) ao redor do texto de cada ```li``` para transformar o exemplo em um menu real. 2009 | 2010 | Faça os exercícios propostos para este capítulo em: 2011 | 2012 | 2013 | 2014 | 2015 | # 56 - Tabelas 2016 | 2017 | Vamos trazer para o ```laboratorio.html``` um exemplo do arquivo ```index.html```. 2018 | 2019 | ```html 2020 |2021 |
2033 | ``` 2034 | 2035 | A ele adicionaremos o seguinte estilo: 2036 | 2037 | ```css 2038 | table { 2039 | border-collapse: collapse; 2040 | } 2041 | 2042 | td, th { 2043 | border: 1px solid white; 2044 | padding: 5px; 2045 | background-color: tomato; 2046 | } 2047 | ``` 2048 | 2049 | Primeiro, no elemento ```table```, alteramos a propriedade ```border-collapse``` para que as bordas colapsem (se unam, através do valor ```collapse```. O padrão é ```separate```). Em seguida, para não repetir a mesma regra para dois elementos diferentes, listamos os elementos que devem receber determinado estilo, separados por vírgula, e damos uma borda às células e cabeçalhos da tabela. As demais regras já são conhecidas. 2050 | 2051 | Faça os exercícios propostos para este capítulo em: 2052 | 2053 | 2054 | 2055 | 2056 | # 57 - Imagens de fundo 2057 | 2058 | Usaremos a seguinte imagem para simular o cabeçalho de uma página com uma imagem de fundo: 2059 | 2060 | http://i.imgur.com/UIp1qfs.jpg 2061 | 2062 | Adicione ao ```laboratorio.html``` o seguinte código: 2063 | 2064 | ```html 2065 |2022 | 2025 |Segunda-feira 2023 |Terça-feira 2024 |2026 | 2029 |Química 2027 |Matemática 2028 |2030 | 2032 |Matemática 2031 |2066 | 2069 | ``` 2070 | 2071 | E ao ```estilos.css``` o seguinte código. Visualize o resultado no navegador. 2072 | 2073 | ```css 2074 | .imagem-fundo { 2075 | background-image: url("http://i.imgur.com/UIp1qfs.jpg"); 2076 | background-repeat: no-repeat; 2077 | background-size: cover; 2078 | background-position: center; 2079 | height: 400px; 2080 | width: 100%; 2081 | padding-top: 200px; 2082 | text-align: center; 2083 | } 2084 | ``` 2085 | 2086 | As quatro primeiras declarações são nosso foco aqui. 2087 | 2088 | 1. ```background-image```: especifica a localização de uma imagem, que pode estar em nosso servidor (na pasta "imagens") ou em algum outro lugar na internet, como no exemplo. O caminho para a imagem é precedido pela palavra ```url``` e fica entre parênteses e aspas ```("")```; 2089 | 2090 | 2. ```background-repeat```: determina se a imagem deve ser repetida caso haja espaço para tal. Os valores aceitáveis são ```repeat```, ```no-repeat```, ```repeat-x``` (repete no eixo x), ```repeat-y``` (repete no eixo y), entre outros; 2091 | 2092 | 3. ```background-size```: altera o tamanho da imagem ao fundo. Pode receber um valor numérico em alguma medida do CSS (px, em, %, etc.) ou uma palavra chave como ```cover``` (que cobre automaticamente o espaço do elemento, podendo esticar a imagem proporcionalmente para que isso ocorra) e ```contain``` (a imagem será apresentada inteiramente no elemento, mesmo que sobre espaço ao redor dela); 2093 | 2094 | 4. ```background-position```: especifica a posição da imagem ao fundo. Os valores possíveis são medidas numéricas e valores como ```top```, ```left```, ```center```, ```bottom``` e ```right```. 2095 | 2096 | Os demais valores já são familiares. 2097 | 2098 | Faça os exercícios propostos para este capítulo em: 2099 | 2100 | 2101 | 2102 | 2103 | # 58 - Posicionamento 2104 | 2105 | Até agora, todos nossos elementos estão posicionados em suas posições padrão. Podemos alterar este comportamento utilizando a propriedade ```position```. 2106 | 2107 | Insira o seguinte código em seus respectivos arquivos e visualize o resultado no navegador: 2108 | 2109 | ```html 2110 |Bovinos
2067 |Essa carne, é Bovinos
2068 |Absoluta2111 |Fixa2112 |Relativa2113 |Estática2114 | ``` 2115 | 2116 | ```css 2117 | .posicao { 2118 | height: 100px; 2119 | width: 100px; 2120 | } 2121 | 2122 | .absoluta { 2123 | background-color: red; 2124 | position: absolute; 2125 | top: 20px; 2126 | right: 40px; 2127 | } 2128 | 2129 | .fixa { 2130 | background-color: green; 2131 | position: fixed; 2132 | top: 0; 2133 | left: 40px; 2134 | } 2135 | 2136 | .relativa { 2137 | background-color: blue; 2138 | position: relative; 2139 | top: 40px; 2140 | left: 120px; 2141 | } 2142 | 2143 | .estatica { 2144 | background-color: black; 2145 | position: static; 2146 | } 2147 | ``` 2148 | 2149 | O código com apenas este exemplo pode ser visualizado [aqui][position]. 2150 | 2151 | Cada posição acima comporta-se de maneira diferente, posicionada através das propriedades ```top```, ```right```, ```bottom``` e ```left```, que indicam a distância do elemento a partir de cada lado da página. vamos analisar cada uma: 2152 | 2153 | - absoluta: ```position: absolute;``` remove o elemento do fluxo normal (os elementos ao redor, se existirem, ocuparão seu espaço) e posiciona-o 2154 | relativamente ao elemento ancestral mais próximo; 2155 | 2156 | - fixa: ```position: fixed;``` remove o elemento do fluxo normal (os elementos ao redor, se existirem, ocuparão seu espaço) e posiciona-o fixado relativamente à tela do navegador, não permitindo que o elemento se mova com o rolar da página; 2157 | 2158 | - relativa: ```position: relative;``` apresenta o elemento como se ele não tivesse sido posicionado e, então, ajusta a posição do elemento, sem alterar o layout. Dessa forma, o elemento não é removido do fluxo, mesmo que esteja distante de sua posição inicial. Pense nesta posição como uma posição absoluta, porém, mantida no fluxo; 2159 | 2160 | - estática: ```position: static;``` mantém o elemento na posição normal, seguindo o fluxo do documento. Propriedades de posição não se aplicam. 2161 | 2162 | Faça os exercícios propostos para este capítulo em: 2163 | 2164 | 2165 | 2166 | 2167 | # 59 - Ordem (z-index) 2168 | 2169 | Aproveitando o exemplo do capítulo anterior, podemos ver que alguns elementos se sobrepoem. Talvez a ordem em que em eles foram empilhados pelo navegador não seja a melhor para nosso layout, então alteraremos a ordem em que os elementos são apresentados com a propriedade ```z-index```. Note que o navegador ordena os elementos de acordo com a ordem em que foram escritos no HTML. 2170 | 2171 | Adicione a linha abaixo a sua respectiva classe: 2172 | 2173 | ```css 2174 | .fixa { 2175 | /* o código acima permance inalterado */ 2176 | z-index: 1; 2177 | } 2178 | ``` 2179 | 2180 | Veja [aqui][z-index] um exemplo "limpo". 2181 | 2182 | Veja que a caixa "fixa" agora sobrepõe a caixa "relativa", isso porque, por padrão, todos os elementos herdam a propriedade ```z-index``` do elemento pai, que inicialmente é igual a ```auto```. 2183 | 2184 | Com exceção dos elementos estáticos (```position: static```), os demais podem ter a ordem de apresentação alterada. 2185 | 2186 | Faça os exercícios propostos para este capítulo em: 2187 | 2188 | 2189 | 2190 | 2191 | # 60 - Seletores de atributos 2192 | 2193 | Outra forma de selecionar elementos (mais avançada), é com base em seus elementos. 2194 | 2195 | Adicione o código HTML e CSS aos seus resectivos documentos e visualize o resultado no navegador: 2196 | 2197 | ```html 2198 | Nome: 2199 | Email: 2200 | ``` 2201 | 2202 | ```css 2203 | [type="email"] { 2204 | border: 1px solid red; 2205 | } 2206 | 2207 | [name="nome"] { 2208 | border: 2px solid magenta; 2209 | } 2210 | 2211 | [type] { 2212 | background-color: yellow; 2213 | } 2214 | ``` 2215 | 2216 | Aqui selecionamos dois elementos distintos com base em seus atributos. Qualquer elemento que tenha um atributo pode ser atingido por este formato de seletor, contato que respeite o seguinte formato: 2217 | 2218 | 1. O conteúdo do seletor deve estar entre colchetes ```[]```; 2219 | 2220 | 2. Caso seja necessário atingir um elemento com atributo de valor específico, o restante do atributo é escrito da mesma forma em que está inserido no HTML, respeitando sinais e aspas. 2221 | 2222 | Faça os exercícios propostos para este capítulo em: 2223 | 2224 | 2225 | 2226 | 2227 | # 61 - Combinando seletores 2228 | 2229 | Usar um seletor por vez pode ser útil em alguns casos (selecionar todos elementos de um determinado tipo ou classe), mas pode ser ineficiente em algumas situações. Podemos selecionar elementos com precisão muito maior se combinarmos seletores. Existem cinco formas de combinações: 2230 | 2231 | 1. AB: seleciona qualquer elemento que se enquadre em A e B ao mesmo tempo; 2232 | 2233 | 2. A B: seleciona todos B dentro de A; 2234 | 2235 | 3. A > B: seleciona todos B que sejam filhos diretos de A; 2236 | 2237 | 4. A + B: seleciona todos B que tenham A como irmão imediato; 2238 | 2239 | 5. A ~ B: seleciona todos B que tenham A como irmão (em qualquer posição). 2240 | 2241 | Abaixo temos um exemplo de cada seletor, comentado individualmente. Caso queira executar este exemplo localmente, sugiro que você crie um arquivo ```.html``` e ```.css``` separados para evitar conflitos com as regras já existentes. Um exemplo pronto pode ser encontrado [aqui][seletores]: 2242 | 2243 | ```html 2244 |2245 | 2256 | ``` 2257 | 2258 | ```css 2259 | /* AB */ 2260 | /* todos h1 com a classe título */ 2261 | h1.titulo { 2262 | font-family: sans-serif; 2263 | color: blue; 2264 | } 2265 | 2266 | /* A B */ 2267 | /* todos h1 que estejam em qualquer nível dentro de main */ 2268 | main h1 { 2269 | text-decoration: underline; 2270 | } 2271 | 2272 | /* A > B */ 2273 | /* todos p que sejam filhos diretos de main */ 2274 | main > p { 2275 | color: red; 2276 | } 2277 | 2278 | /* A + B */ 2279 | /* todos p que tenham como irmão imediato um h1 */ 2280 | h1 + p { 2281 | font-size: 22px; 2282 | } 2283 | 2284 | /* A ~ B */ 2285 | /* todos h2 que tenham section como irmão */ 2286 | section ~ h2 { 2287 | color: green; 2288 | } 2289 | ``` 2290 | 2291 | Faça alterações no código acima, experimente selecionar elementos diferentes e em seguida faça os exercícios propostos para este capítulo em: 2292 | 2293 | 2294 | 2295 | 2296 | # 62 - Especificidade 2297 | 2298 | Especificidade é uma forma de os navegadores decidirem qual propriedade CSS é mais relevante para determinado elemento. Quando mais de uma propriedade tiver a mesma especificidade, a que aparecer por último será aplicada. 2299 | 2300 | Por ordem de importância (quanto mais próxima ao fim, mais específica é): 2301 | 2302 | 1. Seletores de tipo (ex: ```h1```, ```p```); 2303 | 2304 | 2. Seletores de classe (ex: ```.caixa```) e seletores de atributo (ex: ```[type="text"]```); 2305 | 2306 | 3. Seletores de id (ex: ```#erro```); 2307 | 2308 | 4. Estilos em linha (ex: ```Minha página
2246 |Seja bem-vindo(a)
2247 |Não será selecionado por h1.titulo, que atinge apenas capeçalhos com estas classes.
2248 |Não será selecionado por h1 + p, pois não tem como irmão imediato um h1
2249 |2250 | 2254 |main é meu avô e eu herdo a regra main h1
2251 |Section é meu pai, não meu irmão.
2252 |Não será selecionado pelo seletor main > p, pois não é filho direto do main
2253 |Quem somos
2255 |Olá
```); 2309 | 2310 | 5. Valor ```!important```. 2311 | 2312 | Adicione o seguinte HTML ao final do arquivo ```laboratorio.html``` e visualize o resultado: 2313 | 2314 | ```html 2315 |Seletor de tipo, peso 1
2316 |Seletor de classe, peso 2
2317 |Seletor de id, peso 3
2318 |Estilo em linha. Péssima prática. Peso 4
2319 |Valor !important aplicado à regra. Maior peso.
2320 | ``` 2321 | 2322 | Agora adicione uma regra do CSS abaixo por vez ao arquivo ```estilos.css``` e visualize o resultado de cada uma no navegador: 2323 | 2324 | ```css 2325 | h3 { 2326 | color: green; 2327 | } 2328 | 2329 | .peso-2 { 2330 | color: blue; 2331 | } 2332 | 2333 | #peso-3 { 2334 | color: magenta; 2335 | } 2336 | 2337 | h3 { 2338 | color: black !important; 2339 | } 2340 | ``` 2341 | 2342 | Perceba que na última regra utilizamos o seletor mais fraco (de tipo), porém, com o valor de ```!important``` ao final da declaração, o que sobrepõe qualquer outro estilo. Você pode, inclusive, tentar diminuir a importância dele mudando sua posição de último na ordem para primeiro. Nada será alterado. 2343 | 2344 | Apesar disso, não é considerado uma boa prática utilizar o valor ```!important```. Prefira ser mais específico nas regras, utilizando os seletores que vimos anteriormente e talvez você nunca precise utilizar este valor. 2345 | 2346 | Faça os exercícios propostos para este capítulo em: 2347 | 2348 | 2349 | 2350 | 2351 | # 63 - Pseudo classes 2352 | 2353 | Uma pseudo classe é uma palavra chave, precedida por dois pontos (```:```), que é adicionada ao final de um seletor para especificar um estilo apenas quando o elemento estiver em um determinado estado. 2354 | 2355 | Existem aproximadamente quarenta pseudo classes, das quais cinco muito utilizadas estão abaixo. Adicione os códigos abaixo aos seus respectivos arquivos e veja o resultado no navegador (passe o mouse sobre a lista): 2356 | 2357 | ```html 2358 |-
2359 |
- Lista número 1 2360 |
- Lista número 2 2361 |
- Lista número 3 2362 |
- Lista número 4 2363 |
2587 |2593 | ``` 2594 | 2595 | ```css 2596 | .container-flex { 2597 | display: flex; 2598 | flex-direction: row; 2599 | 2600 | /* adicionadas medidas e cor para visualização apenas */ 2601 | background-color: #ddd; 2602 | width: 300px; 2603 | height: 100px; 2604 | } 2605 | 2606 | .item { 2607 | /* espaçamento e cor adicionados para visualização apenas */ 2608 | padding: 10px; 2609 | background-color: #999; 2610 | } 2611 | ``` 2612 | 2613 | O fato de os itens estarem ocupando todo o espaço vertical do container será abordado em seguida. Nos ateremos à direção por ora. 2614 | 2615 | ```flex-direction: row``` significa que nossos itens serão dispostos em linha, como num caderno. Da mesma forma que num caderno, numa página web temos um eixo vertical e um eixo horizontal: 2616 | 2617 |  2618 | 2619 | Podemos alterar a direção de linha para coluna com ```flex-direction: column```. O efeito é o mesmo que virar nosso caderno. Os eixos vão junto: 2620 | 2621 |  2622 | 2623 | Faça os exercícios propostos para este capítulo em: 2624 | 2625 | 2626 | 2627 | 2628 | # 71 - Flexbox: quebras 2629 | 2630 | Além da direção, que é determinada por padrão (```row```) ao definir um container como ```flex```, a quebra padrão (neste caso, de linha) é configurada para ser contínua, ou seja, sem quebra. 2631 | 2632 | ```css 2633 | .container-flex { 2634 | display: flex; 2635 | flex-direction: row; 2636 | flex-wrap: nowrap; 2637 | /* adicionadas medidas e cor para visualização apenas */ 2638 | background-color: #ddd; 2639 | width: 300px; 2640 | height: 100px; 2641 | } 2642 | ``` 2643 | 2644 | Para alterar o comportamento padrão, utilizamos a propriedade ```flex-wrap``` e os valores ```wrap``` (quebrar/multi linha) e ```nowrap``` (sem quebra). 2645 | 2646 | É possível, e aconselhável, utilizar uma única declaração para definir o sentido e a quebra de linhas com a propriedade ```flex-flow```. O primeiro valor é equivalente a ```flex-direction``` enquanto que o segundo equivale a ```flex-wrap```. 2647 | 2648 | ```css 2649 | .container-flex { 2650 | display: flex; 2651 | flex-flow: row nowrap; 2652 | /* adicionadas medidas e cor para visualização apenas */ 2653 | background-color: #ddd; 2654 | width: 300px; 2655 | height: 100px; 2656 | } 2657 | ``` 2658 | 2659 | Faça os exercícios propostos para este capítulo em: 2660 | 2661 | 2662 | 2663 | 2664 | # 72 - Flexbox: justificar conteúdo 2665 | 2666 | A propriedade ```justify-content``` define o alinhamento dos itens no eixo principal (horizontalmente se o itens estiverem em linha e verticalmente se estiverem em colunas) e só tem efeito se houver espaço livre entre os itens. 2667 | 2668 | Pode ter os seguintes valores: 2669 | 2670 | - ```flex-start```: alinha todos os itens no começo do container; 2671 | 2672 | - ```flex-end```: alinha todos os itens no final do container; 2673 | 2674 | - ```center```: centraliza todos os itens no container; 2675 | 2676 | - ```space-between```: alinha os itens no container de modo que o espaço livre fique **entre** eles; 2677 | 2678 | - ```space-around```: alinha os itens no container de modo que todos tenham a mesma quantidade de espaço **ao redor** de si. 2679 | 2680 |  2681 | 2682 | ```css 2683 | .container-flex { 2684 | display: flex; 2685 | flex-flow: row nowrap; 2686 | justify-content: space-around; 2687 | /* adicionadas medidas e cor para visualização apenas */ 2688 | background-color: #ddd; 2689 | width: 300px; 2690 | height: 100px; 2691 | } 2692 | ``` 2693 | 2694 | Experimente alterar os valores de ```justify-content``` e visualize os resultados no navegador. 2695 | 2696 | Faça os exercícios propostos para este capítulo em: 2697 | 2698 | 2699 | 2700 | 2701 | # 73 - Flexbox: alinhar itens 2702 | 2703 | A propriedade ```align-items```é reponsável pelo alinhamento dos itens de um container flex no eixo cruzado (verticalmente, se os itens estiverem em linha). 2704 | 2705 | Os seguintes valores são aceitos: 2706 | 2707 | - ```flex-start```: alinha todos os itens no começo do container; 2708 | 2709 | - ```flex-end```: alinha todos os itens no final do container; 2710 | 2711 | - ```center```: centraliza todos os itens no container; 2712 | 2713 | - ```baseline```: alinha todos os itens de acordo com a linha base do texto em seu conteúdo. Exemplo abaixo; 2714 | 2715 | - ```stretch```: estica todos os elementos para que preencham o espaço do container. É o valor padrão. 2716 | 2717 |  2718 | 2719 | ```css 2720 | .container-flex { 2721 | display: flex; 2722 | flex-flow: row nowrap; 2723 | justify-content: space-around; 2724 | align-items: baseline; 2725 | /* adicionadas medidas e cor para visualização apenas */ 2726 | background-color: #ddd; 2727 | width: 300px; 2728 | height: 100px; 2729 | } 2730 | 2731 | .box-4 { 2732 | font-size: 40px; 2733 | } 2734 | ``` 2735 | 2736 | As regras acima alinharão todos os itens do container pela linha base do texto. Veja como todos os elementos acompanham a linha do ```.box-4```. 2737 | 2738 | É possível alterar itens individuais (ao invés de o container inteiro), usando a propriedade ```align-self``` (auto alinhar) no elemento desejado, usando os mesmos valores de ```align-items```. 2739 | 2740 | Faça os exercícios propostos para este capítulo em: 2741 | 2742 | 2743 | 2744 | 2745 | # 74 - Flexbox: alinhar conteúdo 2746 | 2747 | ```align-content``` é responsável por alinhar as **linhas** (não os itens, como ```align-itens```; precisa ter mais de uma linha) quando há espaço entre elas no eixo cruzado, similar ao que o ```justify-content``` faz em itens individuais. 2748 | 2749 | Seus valores podem ser: 2750 | 2751 | - ```flex-start```: alinha todos as linhas no começo do container; 2752 | 2753 | - ```flex-end```: alinha todos as linhas no final do container; 2754 | 2755 | - ```center```: centraliza todos as linhas no container; 2756 | 2757 | - ```space-between```: alinha as linhas no container de modo que o espaço livre fique **entre** elas; 2758 | 2759 | - ```space-around```: alinha as linhas no container de modo que todas tenham a mesma quantidade de espaço **ao redor** de si; 2760 | 2761 | - ```stretch```: estica todas as linhas para que preencham o espaço do container. É o valor padrão. 2762 | 2763 |  2764 | 2765 | ```css 2766 | .container-flex { 2767 | display: flex; 2768 | flex-flow: row wrap; 2769 | justify-content: space-around; 2770 | align-content: space-between; 2771 | /* adicionadas medidas e cor para visualização apenas */ 2772 | background-color: #ddd; 2773 | width: 300px; 2774 | height: 100px; 2775 | } 2776 | 2777 | .item { 2778 | /* adicione uma largura para todos os itens */ 2779 | /* as demais declarações permancem intactas */ 2780 | width: 70px; 2781 | } 2782 | 2783 | .box-4 { 2784 | /* apague o conteúdo desta regra */ 2785 | } 2786 | ``` 2787 | 2788 | Visualize o resultado no navegador. 2789 | 2790 | Faça os exercícios propostos para este capítulo em: 2791 | 2792 | 2793 | 2794 | 2795 | # 75 - Flexbox: tamanho dos itens 2796 | 2797 | Está até no nome: flexível. Este comportamento se reflete nas medidas de tamanho. Não é aconselhável utilizar as mesmas medidas que usamos para os demais elementos, como campos de texto e imagens, por exemplo. Para itens flexíveis usaremos medidas relativas próprias. As seguintes declarações são aplicadas aos itens. 2798 | 2799 | - ```flex-grow```: define o tamanho de um item em relação aos demais no container. Aceita um número; 2800 | 2801 | - ```flex-shrink```: especifica a proporção em que um item encolherá relativamente aos outros do container, quando o espaço livre em uma linha for preenchido. Aceita um número; 2802 | 2803 | - ```flex-basis```: é equivalente à propriedade ```min-width``` para os elementos em bloco (```block```). É o tamanho mínimo até onde um elemento encolherá antes de ir para a próxima linha. Aceita um valor e uma unidade de medida (ex: ```200px```). 2804 | 2805 | Podemos declarar estas três regras individualmente, ou, como é recomendado na especificação do flexbox, utilizar a versão curta ```flex```: 2806 | 2807 | ```css 2808 | .item { 2809 | background-color: #999; 2810 | padding: 10px; 2811 | flex: 0 0 60px; 2812 | } 2813 | 2814 | .box-5 { 2815 | flex: 1; 2816 | background-color: red; 2817 | } 2818 | ``` 2819 | 2820 | Os valores de ```flex``` aparecem nesta ordem: ```flex-grow``` ```flex-shrink``` ```flex-basis``` 2821 | 2822 | No exemplo acima, definimos que todos os itens terão tamanho inicial de ```60px```, enquanto que a ```.box-5``` terá o valor de 1 para ```flex-grow``` (quando apenas um valor é fornecido à propriedade ```flex```, ele equivale a ```flex-grow```). Veja o resultado no navegador. 2823 | 2824 | Experimente alterar o valor de ```flex``` da ```.box-5``` para 8, por exemplo. Note como este item agora é proporcionalmente maior que os demais da mesma linha (o item 4 nesse caso). 2825 | 2826 | Todo o código para a parte 2 do livro está disponível [aqui][css exemplo final]. 2827 | 2828 | Vamos aos últimos exercícios do livro e a partir do próximo capítulo aplicaremos tudo o que aprendemos até agora em um site completo. 2829 | 2830 | 2831 | 2832 | 2833 | # PARTE 3 - BÔNUS 2834 | 2835 | Com o conteúdo atual você já é capaz de criar qualquer layout estático da internet. Digo estático pois é necessário, no mínimo, Javascript para dar interatividade à página. 2836 | 2837 | Caso você queira ficar para os festejos finais, vamos criar um portfólio para você começar a divulgar seus trabalhos, com base no conteúdo do livro. 2838 | 2839 | Aperte os cintos, pois a brincadeira começa agora! 2840 | 2841 | 2842 | # 76 - Ferramentas 2843 | 2844 | Algumas ferramentas que podem nos auxiliar no desenvolvimento em geral: 2845 | 2846 | ### Brackets 2847 | 2848 | Se você ainda não está utilizando nenhum editor de código, sugiro que comece usando o Brackets. Ele é desenvolvido em HTML, CSS e Javascript pela Adobe e tem algumas funcionalidades incríveis que já vêm por padrão, como a função *Live preview*, em que você escreve o código e o editor atualiza o navegador automaticamente a cada alteração. Isso pode economizar tempo significativo entre mudanças de janela e F5s. Além disso, é gratuito. 2849 | 2850 | [Acesse o site][brackets] 2851 | 2852 | ### Autoprefixer 2853 | 2854 | Como citei durante o livro, nem todos os navegadores têm as mesmas propriedades implementadas da mesma forma, por isso, esta ferramenta é tão útil. Com ela, você pode copiar o seu CSS no site e ter como resultado o mesmo código, porém, com os prefixos para cada navegador para as propriedades que precisam. 2855 | 2856 | [Acesse o site][autoprefixer] 2857 | 2858 | ### Visual Hunt 2859 | 2860 | O Google das imagens de qualidade e gratuitas. São mais de 354 milhões de imagens para usar em qualquer projeto. 2861 | 2862 | [Acesse o site][visualhunt] 2863 | 2864 | ### Google Fonts 2865 | 2866 | Nem sempre uma fonte disponível em nosso computador estará presente no computador dos usuários do nosso site. Para isso contornar esta situação, existem duas opções: disponibilizar para download o arquivo da fonte que temos em nosso computador ou utilizar um serviço que faça exatamente isso com diversas fontes. 2867 | 2868 | Usaremos no projeto a seguir o Google Fonts. Com ele é possível escolher diversos tipos de fontes (708 nesse momento) de qualidade e gratuitas, ou seja, não precisamos nos preocupar com direitos autorais. 2869 | 2870 | [Acesse o site][google fonts] 2871 | 2872 | ### Ferramentas de desenvolvedor dos navegadores 2873 | 2874 | Dedique algum tempo para conhecer melhor seu navegador, em específico as ferramentas de desenvolvedor. No Firefox ou Chrome, é possível ter acesso a elas pelo atalho ```ctrl``` + ```shift``` + ```i```. Com estas ferramentas você será capaz de visualizar o código de qualquer site na internet, inclusive o HTML e CSS, fazer alterações no documento e visualizar em tempo real, entre muitas outras funcionalidades. 2875 | 2876 | Para Firefox, você encontra mais informações [aqui][firefox dev]. 2877 | 2878 | Enquanto que para o Chrome, [aqui][chrome dev]. 2879 | 2880 | ### Normalize CSS 2881 | 2882 | Cada navegador tem um padrão próprio para apresentar os elementos ao usuário. O projeto Normalize CSS é um "resetador" de estilos. Com ele na página, podemos adicionar nossos estilos sem nos preocupar com a aparência padrão de determinado elemento em cada navegador, já que o Normalize, que é apenas um arquivo ```.css```, padroniza os elementos por nós. 2883 | 2884 | O [download][normalize] pode ser feito acessando o site e clicando com o botão direito do mouse em **Download** e Salvar como (ou algo similar). Salve este arquivo na pasta css do projeto e adicione um ```link``` no ```head``` de cada página. 2885 | 2886 | ### Favicon 2887 | 2888 | Favicons são pequenos ícones, geralmente com tamanho de 16x16px, que são mostrados próximos ao título da página, no navegador. Servem para, além de diferenciar as abas/janelas do navegador, facilitar a identificação de seu site caso o usuário tenha sua página em seus favoritos junto de outras páginas. 2889 | 2890 | Você pode criar sua própria imagem ou utilizar algum gerador gratuito online. 2891 | 2892 | Para adicionar o favicon ao site, basta colocá-lo na pasta raiz do site e adicionar a seguinte linha ao ```head``` do documento: 2893 | 2894 | ```html 2895 | 2896 | ``` 2897 | 2898 | 2899 | # 77 - Planejamento do projeto 2900 | 2901 | Antes de sair escrevendo código para todos os lados, é importante definir um escopo, limites para que não desperdicemos tempo, esforço e código. 2902 | 2903 | Você geralmente criará um site a partir de um layout desenvolvido, geralmente, por um designer. Mas nem todo layout precisa de um designer. Com um pouco de pesquisa, analisando o que outros desenvolvedores e empresas estão utilizando em suas páginas, podemos ter ideias e apresentar um layout compatível. 2904 | 2905 | Com um pouco de pesquisa, um lápis e um caderno, temos o seguinte wireframe (esboço). 2906 | 2907 |  2908 | 2909 | Usaremos uma técnica conhecida como *mobile-first*, que consiste em desenvolver desde o começo a página como uma versão para dispositivos móveis, e, a partir daí, alterar os estilos para adaptarem-se a telas maiores. 2910 | 2911 | Você pode simular o tamanho das telas destes dispositivos diminuindo e aumentando o tamanho da janela do navegador. 2912 | 2913 | 2914 | # 78 - Estrutura dos arquivos 2915 | 2916 | Como teremos mais arquivos que de costume (até agora usávamos apenas um .html e um .css), o ideal é separar cada arquivo com seus pares. Veja um exemplo de organização do diretório do projeto: 2917 | 2918 | - projetos 2919 | - portfolio 2920 | - css 2921 | - estilos.css 2922 | - normalize.css 2923 | - imagens 2924 | - index.html 2925 | 2926 | Começamos com um diretório que será o destino de todos nossos projetos daqui em diante. Em seguida, na pasta portfolio ficarão todos os arquivos referentes ao projeto. 2927 | 2928 | - pasta css: lar dos nossos estilos CSS; 2929 | 2930 | - pasta imagens: onde ficarão as imagens utilizadas no projeto; 2931 | 2932 | - ```index.html``` ficará dentro da pasta portfolio (na raíz) e conterá a estrutura do site. 2933 | 2934 | 2935 | # 79 - HTML padrão 2936 | 2937 | É comum criar diversos arquivos ```.html``` para cada projeto e muito do código destes arquivos é sempre o mesmo. Para evitar ter de escrever do início toda a estrutura básica cada vez que precisarmos de um arquivo ou projeto novo, criaremos um código que você poderá usar para seus próprios projetos. 2938 | 2939 | Este tipo de arquivo é conhecido por *boilerplate* e é possível encontrar diversos modelos prontos na internet. 2940 | 2941 | ```html 2942 | 2943 | 2944 | 2945 | 2946 | 2947 | 2948 | 2949 |12588 |22589 |32590 |42591 |52592 |2950 | 2951 | 2952 | 2953 | 2954 | 2955 | 2956 | 2957 | 2958 | 2959 | 2960 | 2961 | 2962 | 2963 | 2964 | 2965 | ``` 2966 | 2967 | 2968 | # 80 - Desenvolvimento HTML 2969 | 2970 | A partir deste capítulo começaremos a desenvolver o HTML de nossa página. 2971 | 2972 | Caso você queira utilizar as mesmas imagens, você as encontra no link abaixo: 2973 | 2974 | http://imgur.com/a/Muui9 2975 | 2976 | ## Head 2977 | 2978 | Começaremos o desenvolvimento deste portfólio pelo ```head```. 2979 | 2980 | - Dê um título à página; 2981 | 2982 | - Altere o conteúdo da descrição; 2983 | 2984 | - Certifique-se de que os arquivos de CSS foram criados e estão na pasta "css"; 2985 | 2986 | - Adicione o seguinte link de fontes depois da adição do ```normalize.css``` e antes de ```estilo.css```. Isso fará com que as fontes carregadas estejam disponíveis para uso dentro de ```estilos.css```, graças à cascata, que atinge os arquivos também. 2987 | 2988 | ```html 2989 | 2990 | ``` 2991 | 2992 | ## Navegação 2993 | 2994 | Já dentro do ```body```, começaremos a criar o conteúdo visível ao usuário. 2995 | 2996 | - Dentro de um ```nav```, adicione um link com seu nome, que servirá como logo, e uma lista (```ul```); 2997 | 2998 | - Dentro da lista, adicione quatro ```li``` e, em cada um, crie um link; 2999 | 3000 | - Em cada link, adicione o nome de cada seção do site: SOBRE, SERVIÇOS, PORTFÓLIO E CONTATO; 3001 | 3002 | - O destino de cada link será o id de cada seção, de mesmo nome, ex: ```#sobre```. 3003 | 3004 | ## Cabeçalho 3005 | 3006 | - Adicione um ```header``` na sequênca do ```nav```; 3007 | 3008 | - Dentro do ```header```, adicione: 3009 | - um cabeçalho ```h1``` com seu nome; 3010 | - um parágrafo com uma breve descrição (aproximadamente oito palavras); 3011 | - e um link interno para o ```id``` ```sobre```, com a ```class``` ```button``` e com o conteúdo "VER MAIS". 3012 | 3013 | ## Sobre 3014 | 3015 | - Crie uma ```section``` com ```id``` e ```class``` iguais a ```sobre```. O ```id``` servirá de destino para nossos links internos, enquanto que a ```class``` receberá o estilo; 3016 | 3017 | - Dentro da ```section```, adicione: 3018 | - um cabeçalho ```h2``` com o nome da seção: SOBRE; 3019 | - um parágrafo com aproximadamente vinte palavras apresentando você; 3020 | - e um link interno para o ```id``` ```contato```, com a ```class``` ```button``` e com o conteúdo "ENTRE EM CONTATO". 3021 | 3022 | ## Serviços 3023 | 3024 | - Crie uma ```section``` com ```id``` e ```class``` iguais a ```servicos```. O ```id``` servirá de destino para nossos links internos, enquanto que a ```class``` receberá o estilo; 3025 | 3026 | - Dentro da ```section```, teremos um cabeçalho ```h2```, com o nome da seção, SERVIÇOS, e quatro componentes iguais que representam cada serviço. 3027 | 3028 | - Cada serviço será composto por um ```article``` com a ```class``` ```servico```; 3029 | 3030 | - Dentro de cada serviço teremos: 3031 | - uma ```img``` de um ícone; 3032 | - um cabeçalho ```h3``` com o nome do serviço; 3033 | - e um parágrafo com a descrição do serviço. 3034 | 3035 | A estrutura final será: 3036 | 3037 | - ```section#servicos.servicos``` 3038 | - ```h2``` 3039 | - ```article.servico``` (repetida a mesma estrutura para os 4 serviços) 3040 | - ```img``` 3041 | - ```h3``` 3042 | - ```p``` 3043 | 3044 | ## Portfólio 3045 | 3046 | - Crie uma ```section``` com ```id``` e ```class``` iguais a ```portfolio```. O ```id``` servirá de destino para nossos links internos, enquanto que a ```class``` receberá o estilo; 3047 | 3048 | - Dentro da ```section```, teremos um cabeçalho ```h2```, com o nome da seção, PORTFÓLIO, e seis imagens com o mesmo tamanho (edite as fotos em um editor ou atribua a mesma altura e largura à imagem). 3049 | 3050 | ## Contato 3051 | 3052 | - Crie uma ```section``` com ```id``` e ```class``` iguais a ```contato```. O ```id``` servirá de destino para nossos links internos, enquanto que a ```class``` receberá o estilo; 3053 | 3054 | - Dentro da ```section```, adicione: 3055 | - um cabeçalho ```h2```, com o nome da seção, CONTATO; 3056 | - um parágrafo com uma breve introdução ao contato; 3057 | - um formulário (detalhado a seguir); 3058 | - dois componentes para telefone e email (datalhado a seguir). 3059 | 3060 | ### O formulário 3061 | 3062 | - Ao ```form```, adicione uma url fictícia para a ```action``` e o ```method``` ```post```. Adicione ao ```form```: 3063 | - um ```input```, ```type=text```, ```name=nome```,```placeholder=Nome```; 3064 | - um ```input```, ```type=email```, ```name=email```,```placeholder=Email```; 3065 | - um ```select```, ```name=assunto``` com quatro opções: 3066 | - a primeira ```option``` terá apenas o atributo ```selected``` e o conteúdo "Selecione um assunto"; 3067 | - as demais ```option``` terão valores (```value```) e conteúdo diferentes; 3068 | - uma ```textarea```, ```name=mensagem```, ```placeholder=Mensagem```; 3069 | - um ```button```, ```type=submit```, ```class=buttton``` e o conteúdo "ENVIAR". 3070 | 3071 | O atributo ```placeholder``` pode ser novo para você. Ele é responsável pelo conteúdo interno de um ```input``` ou ```textarea``` e some assim que o usuário começa a digitar no campo. 3072 | 3073 | ### Componentes de contato 3074 | 3075 | Assim como em serviços tínhamos quatro componentes repetidos para cada serviço, aqui teremos um componente repetido duas vezes, uma para cada forma de contato. 3076 | 3077 | - Crie uma ```div``` com a ```class``` icone-contato e a ela adicione: 3078 | - uma ```img``` com um ícone; 3079 | - um link. 3080 | 3081 | ##### Links para telefone 3082 | 3083 | É possível criar um link que, ao ser acionado, inicie uma ligação. Para isso, basta adicionar ao atributo ```href``` o número do telefone, sem espaços, precedido por ```tel:```. Por exemplo: ```(0XX) 9999 9990``` 3084 | 3085 | ##### Links para email 3086 | 3087 | É possível criar um link que, ao ser acionado, crie um e-mail a partir do gerenciador padrão de emails do sistema. Para isso, basta adicionar ao atributo ```href``` o email desejado, precedido por ```mailto:```. Por exemplo: ```email@contato.com``` 3088 | 3089 | ## Rodapé 3090 | 3091 | Crie um ```footer``` e adicione a ele um parágrafo com algum texto. Geralmente o conteúdo do texto do rodapé fala sobre os direitos sobre o site, algo como: todos os direitos reservados a João Ninguém, ou, desenvolvido por João Ninguém. 3092 | 3093 | 3094 | # 81 - Desenvolvimento CSS 3095 | 3096 | Todos os estilos daqui visam atingir dispositivos móveis, portanto, sugiro que você simule o tamanho de um diminuindo a largura do navegador. 3097 | 3098 | ## Geral 3099 | 3100 | Estruturaremos nosso arquivo CSS de acordo com a ordem dos elementos no HTML. Porém, alguns estilos são comuns a elementos que aparecem em diversos locais da página. Para não repetir os estilos, vamos inserí-los no início do arquivo. 3101 | 3102 | Separar cada seção com um comentário dizendo do que ela se trata pode ajudar você a encontrar estilos mais rapidamente dentro do documento. 3103 | 3104 | Selecione a classe ```button``` e adicione os seguintes estilos: 3105 | 3106 | - ```border``` será ```0```, o que a tornará invisível; 3107 | - ```color``` será ```white```, para que o texto seja branco; 3108 | - ```background-color``` igual a ```#13a9ba``` resultará em um tom de azul; 3109 | - ```padding``` de ```10px``` em cima e embaixo e ```30px``` em cada lado; 3110 | - ```border-radius``` de ```3px``` arredondará as bordas do elemento; 3111 | - ```font-family``` igual a ```"Open Sans", "Helvetica Neue", Arial, sans-serif```. Não esqueça das aspas ao redor dos nomes com espaços; 3112 | - ```font-size``` de ```0.9em```, para que o tamanho do texto seja de 90% relativo ao tamanho da fonte do elemento pai; 3113 | - ```text-decoration```, que define a decoração do texto será "nenhum", ou ```none```. 3114 | 3115 | Selecione o ```body``` e adicione os seguintes estilos: 3116 | 3117 | - ```font-family``` igual a ```"Open Sans", Helvetica, Arial, sans-serif```; 3118 | - ```color``` será ```#333```, para que o texto de todos os elementos seja cinza escuro. 3119 | 3120 | Selecione os cabeçalhos ```h1```, ```h2``` e ```h3``` e aplique os seguintes estilos: 3121 | 3122 | - ```margin``` será ```0```, para que não haja margens em nenhum lado; 3123 | - ```font-family``` igual a ```"Roboto Slab", "Helvetica Neue", Arial, sans-serif```; 3124 | - ```font-weight``` será ```700```, que se parece com ```bold```. 3125 | 3126 | Usando o seletor universal ```*```, aplique o seguinte estilo a todos os elementos: 3127 | 3128 | - ```box-sizing``` terá o valor de ```border-box```. Isso fará com que o comprimento de todos elementos seja calculado sem levar em conta o ```padding```. 3129 | 3130 | Selecione todas as ```section``` com o atributo id (```[id]```) e aplique ```58px``` ao ```padding-top```. 3131 | 3132 | ## Navegação 3133 | 3134 | Selecione todos os ```nav``` e aplique o seguinte estilo: 3135 | 3136 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3137 | - ```flex-flow``` apenas com o valor ```column```, direcionará os elementos em coluna além de implicitamente atribuir o valor de ```nowrap``` à propriedade ```flex-wrap```, que seria a segunda propriedade da declaração de ```flex-flow```; 3138 | - ```align-items``` sendo ```center``` centralizará os itens no container; 3139 | - ```background-color``` será ```#333```, o que torna o fundo cinza escuro. 3140 | 3141 | Selecione todos os ```a``` filhos diretos (```>```) de ```nav``` e aplique o seguinte estilo: 3142 | 3143 | - ```text-decoration``` ```none``` removerá o sublinhado padrão dos links; 3144 | - ```color``` será ```white``` para que o texto seja branco; 3145 | - ```font-weight``` será ```700```; 3146 | - ```font-size``` será de ```28px```; 3147 | - ```font-family``` igual a ```Pacifico, serif``` para termos uma fonte diferente para o logo; 3148 | - ```margin-bottom``` igual a ```8px``` para aumentar o espaçamento abaixo do link. 3149 | 3150 | Selecione todos os ```ul``` dentro de ```nav``` e aplique os seguintes estilos: 3151 | 3152 | - ```list-style``` sendo ```none```, significa que não teremos estilo para os itens da lista; 3153 | - ```padding``` igual a ```0```, remove o espaçamento interno da lista; 3154 | - ```margin``` igual a ```0```, remove o espaçamento externo da lista; 3155 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3156 | - ```flex-flow``` apenas com o valor ```column```, direcionará os elementos em coluna além de implicitamente atribuir o valor de ```nowrap``` à propriedade ```flex-wrap```, que seria a segunda propriedade da declaração de ```flex-flow```; 3157 | - ```align-items``` sendo ```center, centralizará os itens no container; 3158 | - ```width``` com valor de ```100%```, fará com que a lista ocupe toda a largura da tela. 3159 | 3160 | Selecione todos ```li```, dentro de ```ul```, dentro de ```nav``` e aplique os seguintes estilos: 3161 | 3162 | - ```text-align``` altera o alinhamento do texto e, neste caso, será igual a ```center```; 3163 | - ```width``` igual a ```100%```, fará com que cada item da lista ocupe toda a largura disponível. 3164 | 3165 | Selecione todos os ```a```, dentro de ```li```, dentro de ```ul```, dentro de ```nav``` e aplique os seguintes estilos: 3166 | 3167 | - ```display``` igual a ```inline-block```, fará com que nossos links, que tem como padrão o valor ```inline```, se comportem como blocos em linha, o que nos permite dar valores a eles como largura; 3168 | - ```padding``` tendo o valor ```10px 0```, atribuirá ```10px``` acima e abaixo do conteúdo além de remover qualquer espaço interno nas laterais; 3169 | - ```width``` igual a ```100%``` forçará os links a também ocuparem toda a largura disponível para eles; 3170 | - ```text-decoration``` igual a ```none``` remove a decoração padrão dos links; 3171 | - ```color``` será ```white``` para que o texto dos links seja branco. 3172 | 3173 | ## Cabeçalho 3174 | 3175 | Selecione todos os ```header``` e aplique os seguintes estilos: 3176 | 3177 | - ```background-image``` igual a ```url("http://i.imgur.com/lxiJa87.jpg")``` , colocará a imagem entre ```url()``` como fundo. Você pode inserir um imagem de outro site ou que você tenha no seu computador; 3178 | - ```background-size``` com valor de ```cover```, será responsável por cobrir o fundo com a imagem; 3179 | - ```background-position``` posiciona a imagem ao fundo. Nesse caso terá o valor de ```center```; 3180 | - ```background-repeat``` igual a ```no-repeat``` evita que o a imagem de fundo seja repetida; 3181 | - ```color``` será ```white```, para que o texto do cabeçalho seja branco; 3182 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3183 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3184 | - ```align-items``` sendo ```center```, centralizará os itens no container; 3185 | - ```text-align``` igual a ```center```, alinha o o conteúdo dos itens ao centro; 3186 | - ```padding``` igual a ```50px 0```, cria espaço interno no topo e na base do elemento, além de zerar o espaçamento lateral. 3187 | 3188 | Selecione todos os ```p``` dentro de ```header``` e aplique o seguinte estilo: 3189 | 3190 | - ```margin-bottom``` igual a ```2em```, corresponde a duas vezes o tamanho de fonte definido para o elemento pai. 3191 | 3192 | ## Sobre 3193 | 3194 | Selecione a classe ```sobre``` e aplique os seguintes estilos: 3195 | 3196 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3197 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3198 | - ```align-items``` sendo ```center```, centralizará os itens no container; 3199 | - ```text-align``` igual a ```center```, alinha o o conteúdo dos itens ao centro; 3200 | - ```background-color``` igual a ```#13a9ba```, colorirá o fundo em um tom de azul; 3201 | - ```color``` igual a ```white```, tornará o texto branco; 3202 | - ```padding-bottom``` com o valor de ```58px``` aumenta o espaçamento inferior do elemento. 3203 | 3204 | Selecione todos os ```p``` dentro da classe ```sobre``` e aplique os seguintes estilos: 3205 | 3206 | - ```margin-bottom``` igual a ```2em```, corresponde a duas vezes o tamanho de fonte definido para o elemento pai; 3207 | - ```max-width``` determina que a largura máxima será de ```1000px```. 3208 | 3209 | Selecione todos os elementos da classe ```button``` dentro da classe ```sobre``` e aplique os seguintes estilos: 3210 | 3211 | - ```background-color``` igual a ```white```, tornará o fundo branco; 3212 | - ```color``` sendo ```#333```, deixará o texto legível em um tom de cinza escuro. 3213 | 3214 | ## Serviços 3215 | 3216 | Selecione a classe ```servicos``` e aplique os seguintes estilos: 3217 | 3218 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3219 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3220 | - ```align-items``` sendo ```center```, centralizará os itens no container. 3221 | 3222 | Selecione todos os elementos da classe ```servico``` dentro da classe ```servicos``` e aplique os seguintes estilos: 3223 | 3224 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3225 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3226 | - ```align-items``` sendo ```center```, centralizará os itens no container; 3227 | - ```text-align``` será ```center```, para centralizar o conteúdo no elemento; 3228 | - ```margin-top``` igual a ```30px```, criará mais espaço com uma margem no topo. 3229 | 3230 | Selecione todos os ```h3```, dentro da classe ```servico```, dentro da classe ```servicos``` e aplique o seguinte estilo: 3231 | 3232 | - ```margin-top``` igual a ```10px```, para aumentar o espaçamento externo no topo; 3233 | 3234 | Selecione todas as ```img```, dentro da classe ```servico```, dentro da classe ```servicos``` e aplique os seguintes estilos: 3235 | 3236 | - ```width``` igual a ```100%```, fará com que a imagem ocupe toda a largura disponível; 3237 | - ```max-width``` com o valor de ```80px``` evitará que as imagens dos ícones creçam excessivamente e fiquem deformadas. 3238 | 3239 | ## Portfólio 3240 | 3241 | Selecione a classe ```portfolio``` e aplique os seguintes estilos: 3242 | 3243 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3244 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3245 | - ```align-items``` sendo ```center```, centralizará os itens no container. 3246 | 3247 | Selecione todos os ```h2``` dentro da classe ```portfolio``` e aplique o seguinte estilo: 3248 | 3249 | - ```margin-bottom``` igual a ```20px```, adicionará espaço à margem inferior. 3250 | 3251 | Selecione todas as ```img``` dentro da classe ```portfolio``` e aplique o seguinte estilo: 3252 | 3253 | - ```width``` igual a 100%, fará com que a imagem ocupe toda a largura disposnível. 3254 | 3255 | ## Contato 3256 | 3257 | Selecione a classe ```contato``` e aplique os seguintes estilos: 3258 | 3259 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3260 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3261 | - ```align-items``` sendo ```center```, centralizará os itens no container; 3262 | - ```text-align``` será ```center```, para centralizar o conteúdo no elemento. 3263 | 3264 | Selecione todos os ```a``` dentro da classe ```contato``` e aplique os seguintes estilos: 3265 | 3266 | - ```display``` igual a ```block```, evitará que os links que estão junto a imagens fiquem na mesma linha delas; 3267 | - ```color``` receberá o valor de ```inherit```, que significa herdar, ou seja, nossos links herdarão a cor do texto do elemento pai. 3268 | 3269 | Selecione todos os ```form``` e aplique os seguintes estilos: 3270 | 3271 | - ```display``` igual a ```flex```, tornará o elemento um container flex; 3272 | - ```flex-flow``` com o valor de ```column``` direcionará os itens do container em coluna; 3273 | - ```width``` igual a ```80%```, fará com que o formulário ocupe 80% da largura disponível; 3274 | - ```margin-bottom``` com o valor de ```30px```, aumentará o espaçamento inferior para os outros elementos. 3275 | 3276 | Selecione todos os ```input```, ```select``` e ```textarea``` e aplique os seguintes estilos: 3277 | 3278 | - ```width``` igual a ```100%```, fará com que os elementos ocupem toda a largura disponível; 3279 | - ```margin-bottom``` igual a ```10px```, separará os elementos entre si. 3280 | 3281 | Selecione o último elemento filho com a classe ```icone-contato``` (usando ```:last-child```) e aplique o seguinte estilo: 3282 | 3283 | - ```margin-top``` igual a ```10px```, fará com que o último elemento, que nesse caso é o segundo, ao ficar abaixo do primeiro componente ```icone-contato```, tenha ```10px``` de margem superior para aquele elemento. Removeremos este estilo quando o objetivo de tela for desktop. 3284 | 3285 | ## Rodapé 3286 | 3287 | Selecione todos os ```footer``` e aplique os seguintes estilos: 3288 | 3289 | - ```text-align``` igual a ```center```, centralizará o conteúdo ; 3290 | - ```padding``` com o valor de ```10px```, aumentará o espaçamento interno do elemento; 3291 | - ```background-color``` igual a ```#13a9ba```, colorirá o fundo em um tom de azul; 3292 | - ```color``` igual a ```white```, tornará o texto branco; 3293 | - ```margin-top``` igual ```58px``` aumentará o espaço superior. 3294 | 3295 | ## Media Queries 3296 | 3297 | A partir daqui, nossos estilos terão por objetivo atingir determinadas resoluções de tela. No caso deste exemplo especificamente, maiores que 768px. 3298 | 3299 | - ```@media``` inicia a declaração de uma media query; 3300 | - ```screen``` define que pretendemos atingir telas e monitores; 3301 | - ```and (min-width: 768px)``` e que tenha largura mínima de ```768px```. 3302 | 3303 | Completa, a media query deve se parecer com isso, e os estilos a seguir serão inseridos entre as chaves ```{}```: 3304 | 3305 | ```css 3306 | @media screen and (min-width: 768px) { 3307 | 3308 | } 3309 | ``` 3310 | 3311 | Apenas alguns estilos serão alterados ou adicionados, uma vez que estas regras já foram, em sua maioria, escritas anteriormente e seu estilo é herdado. 3312 | 3313 | ## Navegação 3314 | 3315 | Selecione todos os ```nav``` e aplique os seguintes estilos: 3316 | 3317 | - ```flex-flow``` passará a ter o valor de ```row```, que antes era de ```column```; 3318 | - ```position``` igual a ```fixed```, fixará a barra de navegação na posição definida abaixo; 3319 | - ```top``` igual a ```0```, equivale ao mais próximo possível do topo do navegador; 3320 | - ```left``` igual a ```0```, equivale ao mais próximo possível da lateral esquerda do navegador; 3321 | - ```width``` com valor de ```100%```, fará a barra ocupar toda a largura disponível; 3322 | - ```justify-content``` igual a ```space-around```, organizará os itens para que o espaço livre fique ao redor deles; 3323 | - ```background-color``` será igual a ```rgba(0, 0, 0, 0.8)```, que é equivalente a preto com 80% de opacidade (ou 20% transparente, como preferir). 3324 | 3325 | Selecione todos os ```ul``` dentro de ```nav``` e aplique os seguintes estilos: 3326 | 3327 | - ```flex-flow``` passará a ter o valor de ```row```, que antes era de ```column```; 3328 | - ```width``` passará a ter o valor de ```50%```, para que ocupe largura equivalente a 50% do disponível na tela. 3329 | 3330 | ## Cabeçalho 3331 | 3332 | Selecione todos os ```header``` e aplique os seguintes estilos: 3333 | 3334 | - ```height``` igual a ```100vh```, tornará o cabeçalho da altura da janela, automaticamente. A unidade ```vh``` significa ```viewport height``` e equivale à porcentagem da altura da tela. ```50vh``` é equivale à metade, e assim por diante; 3335 | - ```justify-content``` igual a ```center```, centralizará os itens do container verticalmente. 3336 | 3337 | ## Sobre 3338 | 3339 | Selecione a classe ```sobre``` e aplique o seguinte estilo: 3340 | 3341 | - ```justify-content``` igual a ```center```, centralizará os itens do container verticalmente. 3342 | 3343 | ## Serviços 3344 | 3345 | Selecione a classe ```servicos``` e aplique os seguintes estilos: 3346 | 3347 | - ```flex-flow``` passará a ter o valor de ```row wrap```, que antes era de ```column```; 3348 | - ```align-items``` igual a ```flex-start``` alinhará todos os itens no topo do container flex; 3349 | - ```max-width``` terá o valor de ```1000px``` para limitar a largura do container; 3350 | - ```margin``` terá o valor de ```0 auto```, que removerá as margens do topo e base além de tornar automático o tamanho das margens laterais. 3351 | 3352 | Selecione todos os ```h2``` da classe ```servicos``` e aplique os seguintes estilos: 3353 | 3354 | - ```text-align``` com o valor de ```center```, centralizará o conteúdo do elemento; 3355 | - ```width``` igual a ```100%```, fará com que o elemento ocupe toda a largura disponível, forçando os demais itens a ocuparem outra linha (graças ao container estar configurado como ```row``` e a quebra de linha ```wrap```). 3356 | 3357 | Selecione todos os elementos da classe ```servico``` dentro da classe ```servicos``` e aplique os seguintes estilos: 3358 | 3359 | - ```flex``` igual a ```1 1 150px```, dá um tamanho proporcional a todos os itens além de largura mínima de ```150px```; 3360 | - ```padding``` igual a ```0 10px```, remove o espaçamento interno do topo e base e adiciona ```10px``` às laterais. 3361 | 3362 | ## Portfólio 3363 | 3364 | Selecione a classe ```portfolio``` e aplique o seguinte estilo: 3365 | 3366 | - ```flex-flow``` passará a ter o valor de ```row wrap```, que antes era de ```column```. 3367 | 3368 | Selecione todos os ```h2``` dentro da classe ```portfolio``` e aplique os seguintes estilos: 3369 | 3370 | - ```text-align``` com o valor de ```center```, centralizará o conteúdo do elemento; 3371 | - ```width``` igual a ```100%```, fará com que o elemento ocupe toda a largura disponível, forçando os demais itens a ocuparem outra linha (graças ao container estar configurado como ```row``` e a quebra de linha ```wrap```). 3372 | 3373 | Selecione todas as ```img``` dentro da classe ```portfolio``` e aplique o seguinte estilo: 3374 | 3375 | - ```width``` igual a ```33.33333333333%``` (experimente uma precisão um pouco menor...), dá um tamanho proporcional a todos os itens, colocando assim, três itens em cada linha; 3376 | 3377 | ## Contato 3378 | 3379 | Selecione a classe ```contato``` e aplique os seguintes estilos: 3380 | 3381 | - ```flex-flow``` passará a ter o valor de ```row wrap```, que antes era de ```column```; 3382 | - ```justify-content``` igual a ```space-around```, distribuirá a mesma quantidade de espaço ao redor de cada item; 3383 | - ```max-width``` com valor de ```500px```, limitará a largura do container; 3384 | - ```margin``` terá o valor de ```0 auto```, que removerá as margens do topo e base além de tornar automático o tamanho das margens laterais. 3385 | 3386 | Selecione todos os ```h2``` dentro da classe ```contato``` e aplique os seguintes estilos: 3387 | 3388 | - ```text-align``` com o valor de ```center```, centralizará o conteúdo do elemento; 3389 | - ```width``` igual a ```100%```, fará com que o elemento ocupe toda a largura disponível, forçando os demais itens a ocuparem outra linha (graças ao container estar configurado como ```row``` e a quebra de linha ```wrap```). 3390 | 3391 | Selecione o último elemento filho com a classe ```icone-contato``` (usando ```:last-child```) e aplique o seguinte estilo: 3392 | 3393 | - ```margin-top``` será igual a ```0```, já que não é mais necessário que o último elemento tenha margem superior. 3394 | 3395 | 3396 | # 82 - Fim 3397 | 3398 | Se tudo correu conforme planejado, você tem um site pronto. 3399 | 3400 | Você pode conferir o resultado [aqui][codepen]. 3401 | 3402 | Mas, ainda há o que fazer. Alguns estilos são repetidos ao longo do CSS e poderiam ser agrupados em uma classe específica e aplicada aos elementos desejados. Outros detalhes, como o espaçamento interno dos containeres, para que o texto não toque nas laterais, não foram adicionados. Os botões estão estáticos ao passar do mouse. Você pode, a partir de agora, fazer modificações e, inclusive, melhorar este layout. 3403 | 3404 | Não se esqueça de prefixar as propriedades necessárias. O Autoprefixer pode te ajudar nessa tarefa. 3405 | 3406 | 3407 | [Link can i use]: http://caniuse.com/#search=flex 3408 | [Link anuncio Microsoft]: https://www.microsoft.com/pt-br/WindowsForBusiness/End-of-IE-support 3409 | [normalize]: https://necolas.github.io/normalize.css/ 3410 | [brackets]: http://brackets.io/ 3411 | [autoprefixer]: https://autoprefixer.github.io/ 3412 | [visualhunt]: https://visualhunt.com/ 3413 | [html exemplo 1]: https://jsfiddle.net/estevanmaito/mo0jxLd9/ 3414 | [html exemplo 2]: https://jsfiddle.net/estevanmaito/mo0jxLd9/1/ 3415 | [html exemplo 3]: https://jsfiddle.net/estevanmaito/mo0jxLd9/3/ 3416 | [position]: https://jsfiddle.net/estevanmaito/4d1eLLj8/2/ 3417 | [z-index]: https://jsfiddle.net/estevanmaito/4d1eLLj8/4/ 3418 | [seletores]: https://jsfiddle.net/estevanmaito/o3ymy9cr/ 3419 | [css exemplo final]: https://jsfiddle.net/estevanmaito/91eg9dm4/2/ 3420 | [google fonts]: https://www.google.com/fonts 3421 | [firefox dev]: https://developer.mozilla.org/pt-BR/docs/Tools 3422 | [chrome dev]: https://developers.google.com/web/tools/chrome-devtools/ 3423 | [codepen]: http://codepen.io/estevanmaito/pen/Xddrwv 3424 | --------------------------------------------------------------------------------