89 |
90 |
91 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/Aula 2 - CSS/README.md:
--------------------------------------------------------------------------------
1 | Este guia é parte do curso APRENDA HTML5 & CSS3 e está relacionado ao vídeo [APRENDA HTML5 & CSS3 - #3 CSS]()
2 |
3 | #Guia básico de CSS3
4 |
5 | Além de um introdução CSS3, este guia pretende mostrar como criar um site responsivo, ou seja, que se adapte a qualquer dispositivo.
6 |
7 | Você terá um nível de compreensão muito maior se acompanhar também meu vídeo no YouTube, onde eu mostro passo a passo como criar um site responsivo, mobile-first (técnica de criar páginas partindo do menor tamanho possível e ir escalando até chegar ao tamanho final, que geralmente é o desktop).
8 |
9 | O objetivo deste guia não é esgotar o conteúdo proposto (CSS e CSS3), e sim apresentar o necessário para construir um site completamente responsivo, bem estruturado, utilizando as melhores práticas e útlimas especificações da linguagem.
10 |
11 | Animações, transições e outras interações mais complexas virão em um próximo guia, acompanhadas de um vídeo no canal.
12 |
13 | ##Público alvo deste guia
14 | Pessoas que estão iniciando o aprendizado de tecnologias para desenvolvimento web, desenvolvedores que queiram atualizar seus conhecimentos em CSS3 e design responsivo e quem mais estiver curioso sobre como funciona um site “por baixo do capô”. É aconselhável conhecimento básico em HTML, que pode ser adquirido [aqui](https://www.youtube.com/watch?v=T65y3oj9s50) e um entendimento mínimo de inglês.
15 |
16 | ##O que veremos
17 | Como criar o estilo de um site responsivo, utilizando o máximo possível das últimas especificações do CSS3, com muito flexbox e nada de floats.
18 |
19 | ##O que não veremos
20 | História do CSS, quem criou, por que criou, especificações antigas, elementos
21 | antigos e fora de uso, animações e transições. As duas últimas serão abordadas em um material futuro.
22 |
23 | ##Índice
24 |
25 |
26 | ###Introdução
27 | CSS significa **C**ascading **S**tyle **S**heets, ou folhas de estilo em cascata. O detalhe aqui é a parte de “cascata”. Basicamente isso quer dizer que as regras de estilo se sobrepõem, ou seja, uma regra que eu escrever no começo do meu documento de CSS (no alto da cascata) vai ter menor prioridade sobre uma que eu escrever no fim deste documento (no fim da cascata), por exemplo. O exemplo é tosco, mas é assim que funciona.
28 |
29 | Por fim, CSS é uma linguagem utilizada para prover **estilo**, que define a **aparência** do conteúdo (HTML).
30 |
31 | Mãos à obra.
32 |
33 | ###Sintaxe
34 |
35 | Aqui entra o requisito de entender o mínimo de inglês. TODAS as regras e valores são descritas em inglês. Apesar disso, CSS é muito intuitivo. Vou configurar a **cor** e o **tamanho da fonte** de todos os parágrafos de uma página para que você possa ver isso:
36 |
37 | ```css
38 | p {
39 | font-size: 24px;
40 | color: black;
41 | }
42 | ```
43 |
44 | No exemplo acima, ```p``` é um **seletor** que aplica estilo a todos os elementos ```
``` de uma só vez. As **propriedades** ```font-size``` e ```color``` estão inclusas entre chaves e descrevem qual característica está sendo alterada. Os **valores** determinam o estilo da propriedade em questão e devem vir depois do ```:``` (dois pontos) e seguidos por ```;``` (ponto e vírgula) para finalizar a declaração.
45 |
46 | Resumindo: Um par de **propriedade** e **valor** é chamado de **declaração** e deve estar entre ```{}``` (chaves) e separados por ```:``` (dois pontos) e seguidos por ```;``` (ponto e vírgula).
47 |
48 | ###Onde escrever CSS
49 | Existem três principais locais onde você pode escrever CSS:
50 |
51 | * Em linha (inline)
52 | ```html
53 |
Aqui vai meu texto
54 | ```
55 | * No documento HTML
56 | ```html
57 |
62 | ```
63 | * Arquivo externo (onde você vai usar em 98% dos casos)
64 | ```css
65 | p {
66 | color: red;
67 | }
68 | ```
69 |
70 | No caso 1, você precisa aplicar os estilos a cada elemento, misturado com o HTML. Imagine ter que estilizar 400 parágrafos e depois de uma semana ter que mudar a cor de todos… Só faça isso se for em últimos casos.
71 |
72 | No caso 2, geralmente se adiciona dentro do `````` uma tag ```
35 | 
40 | 
45 | 
50 | 
59 | 
62 | 
65 | 
68 | 
71 | 
74 | 
82 | 
87 |