├── .gitignore ├── Modulo-Basico ├── 14-lists.md ├── 16-table.md ├── 13-transition.md ├── 12-box-shadow.md ├── 3-pseudo-seletores.md ├── 11-border-radius.md ├── 8-z-index.md ├── 4-box-model.md ├── 6-units.md ├── 15-manipulacao-texto.md ├── 2-pseudo-classes.md ├── 10-border.md ├── 5-display.md ├── 7-position.md ├── 9-background.md └── 1-selectors.md ├── Modulo-Intermediario ├── animation.md ├── css-grid.md ├── postcss.md ├── flexbox.md ├── attribute-selector.md ├── functions.md └── variables.md ├── english ├── basic-module │ ├── lists.md │ ├── table.md │ ├── transition.md │ ├── box-shadow.md │ ├── border-radius.md │ ├── z-index.md │ ├── box-model.md │ ├── units.md │ ├── manipulacao-texto.md │ ├── selectors.md │ ├── border.md │ ├── display.md │ ├── background.md │ └── position.md ├── middle-module │ ├── animation.md │ ├── variables.md │ ├── pseudo-seletores.md │ ├── css-grid.md │ ├── postcss.md │ ├── flexbox.md │ ├── pseudo-classes.md │ └── attribute-selector.md ├── intro │ ├── communication.md │ ├── what-is-css.md │ ├── what-are-its-advantages.md │ ├── welcome.md │ ├── how-css-works.md │ ├── what-do-u-need-to-know.md │ └── adding-css-into-html.md ├── environment │ └── plugins.md └── README.en.md ├── img ├── inline1.png ├── inline2.png ├── logo-css.png ├── dark-toggle.gif ├── sass-logo1.png ├── block-buttons.gif ├── block-buttons2.gif ├── inline-block1.png ├── box-model-intro.png ├── Introducao │ ├── issue-1.png │ ├── projeto-1.png │ ├── projeto-2.png │ ├── exemplo-de-navbar.png │ ├── anatomia-do-seletor-css.png │ └── css-declaration-small.png ├── border │ ├── border-color-hex.jpg │ ├── border-color-rgb.jpg │ ├── border-separadas.jpg │ ├── border-style-mix.jpg │ ├── border-width-10px.jpg │ ├── border-width_5px.jpg │ ├── border-color-orange.jpg │ ├── border-style-dashed.jpg │ ├── border-style-dotted.jpg │ ├── border-style-double.jpg │ ├── border-style-groove.jpg │ ├── border-style-inset.jpg │ ├── border-style-outset.jpg │ ├── border-style-ridge.jpg │ ├── border-style-solid.jpg │ └── border-width-medium.jpg ├── modulo-1-position-fixed-1.gif ├── modulo-1-position-sticky-1.gif ├── modulo-position-absolute-1.png ├── modulo-1-position-relative-1.png ├── modulo-position-absolute-1-2.gif ├── modulo-position-absolute-1-3.png ├── modulo-1-position-relative-1-2.png ├── Modulo-Basico │ └── z-index │ │ ├── padrao-divs.png │ │ ├── z-index-divs.png │ │ └── position-divs.png ├── border-radius │ ├── border_radius_1_valor.png │ ├── border_radius_2_valores.png │ ├── border_radius_3_valores.png │ └── border_radius_4_valores.png ├── Modulo-Intermediario │ ├── Flexbox │ │ ├── example-html.png │ │ ├── navbar-example.png │ │ └── example-html-terminado.png │ ├── Variaveis │ │ └── caniuse_variaveis_css.png │ └── Attribute-Selector │ │ ├── contain-selector.png │ │ ├── spaced-selector.png │ │ ├── ends-with-selector.png │ │ ├── hyphenated-selector.png │ │ └── start-with-selector.png └── id-4noobs │ └── header-4noobs.svg ├── .github └── ISSUE_TEMPLATE │ └── issue_template.md ├── Introducao ├── 2-como-contribuir.md ├── 3-o-que-e-css.md ├── 1-boas-vindas.md ├── 4-como-o-css-funciona.md └── 5-adicionando-css-no-html.md ├── Ambiente └── plugins.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode -------------------------------------------------------------------------------- /Modulo-Basico/14-lists.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Modulo-Basico/16-table.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Modulo-Intermediario/animation.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /english/basic-module/lists.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /english/basic-module/table.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /english/middle-module/animation.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/inline1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/inline1.png -------------------------------------------------------------------------------- /img/inline2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/inline2.png -------------------------------------------------------------------------------- /img/logo-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/logo-css.png -------------------------------------------------------------------------------- /img/dark-toggle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/dark-toggle.gif -------------------------------------------------------------------------------- /img/sass-logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/sass-logo1.png -------------------------------------------------------------------------------- /img/block-buttons.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/block-buttons.gif -------------------------------------------------------------------------------- /img/block-buttons2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/block-buttons2.gif -------------------------------------------------------------------------------- /img/inline-block1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/inline-block1.png -------------------------------------------------------------------------------- /img/box-model-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/box-model-intro.png -------------------------------------------------------------------------------- /img/Introducao/issue-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Introducao/issue-1.png -------------------------------------------------------------------------------- /img/Introducao/projeto-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Introducao/projeto-1.png -------------------------------------------------------------------------------- /img/Introducao/projeto-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Introducao/projeto-2.png -------------------------------------------------------------------------------- /img/border/border-color-hex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-color-hex.jpg -------------------------------------------------------------------------------- /img/border/border-color-rgb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-color-rgb.jpg -------------------------------------------------------------------------------- /img/border/border-separadas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-separadas.jpg -------------------------------------------------------------------------------- /img/border/border-style-mix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-mix.jpg -------------------------------------------------------------------------------- /img/border/border-width-10px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-width-10px.jpg -------------------------------------------------------------------------------- /img/border/border-width_5px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-width_5px.jpg -------------------------------------------------------------------------------- /img/border/border-color-orange.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-color-orange.jpg -------------------------------------------------------------------------------- /img/border/border-style-dashed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-dashed.jpg -------------------------------------------------------------------------------- /img/border/border-style-dotted.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-dotted.jpg -------------------------------------------------------------------------------- /img/border/border-style-double.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-double.jpg -------------------------------------------------------------------------------- /img/border/border-style-groove.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-groove.jpg -------------------------------------------------------------------------------- /img/border/border-style-inset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-inset.jpg -------------------------------------------------------------------------------- /img/border/border-style-outset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-outset.jpg -------------------------------------------------------------------------------- /img/border/border-style-ridge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-ridge.jpg -------------------------------------------------------------------------------- /img/border/border-style-solid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-style-solid.jpg -------------------------------------------------------------------------------- /img/border/border-width-medium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border/border-width-medium.jpg -------------------------------------------------------------------------------- /img/modulo-1-position-fixed-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-1-position-fixed-1.gif -------------------------------------------------------------------------------- /img/modulo-1-position-sticky-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-1-position-sticky-1.gif -------------------------------------------------------------------------------- /img/modulo-position-absolute-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-position-absolute-1.png -------------------------------------------------------------------------------- /img/Introducao/exemplo-de-navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Introducao/exemplo-de-navbar.png -------------------------------------------------------------------------------- /img/modulo-1-position-relative-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-1-position-relative-1.png -------------------------------------------------------------------------------- /img/modulo-position-absolute-1-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-position-absolute-1-2.gif -------------------------------------------------------------------------------- /img/modulo-position-absolute-1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-position-absolute-1-3.png -------------------------------------------------------------------------------- /img/modulo-1-position-relative-1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/modulo-1-position-relative-1-2.png -------------------------------------------------------------------------------- /img/Introducao/anatomia-do-seletor-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Introducao/anatomia-do-seletor-css.png -------------------------------------------------------------------------------- /img/Introducao/css-declaration-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Introducao/css-declaration-small.png -------------------------------------------------------------------------------- /img/Modulo-Basico/z-index/padrao-divs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Basico/z-index/padrao-divs.png -------------------------------------------------------------------------------- /img/Modulo-Basico/z-index/z-index-divs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Basico/z-index/z-index-divs.png -------------------------------------------------------------------------------- /img/Modulo-Basico/z-index/position-divs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Basico/z-index/position-divs.png -------------------------------------------------------------------------------- /img/border-radius/border_radius_1_valor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border-radius/border_radius_1_valor.png -------------------------------------------------------------------------------- /img/border-radius/border_radius_2_valores.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border-radius/border_radius_2_valores.png -------------------------------------------------------------------------------- /img/border-radius/border_radius_3_valores.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border-radius/border_radius_3_valores.png -------------------------------------------------------------------------------- /img/border-radius/border_radius_4_valores.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/border-radius/border_radius_4_valores.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Flexbox/example-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Flexbox/example-html.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Flexbox/navbar-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Flexbox/navbar-example.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Flexbox/example-html-terminado.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Flexbox/example-html-terminado.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Variaveis/caniuse_variaveis_css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Variaveis/caniuse_variaveis_css.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Attribute-Selector/contain-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Attribute-Selector/contain-selector.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Attribute-Selector/spaced-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Attribute-Selector/spaced-selector.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Attribute-Selector/ends-with-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Attribute-Selector/ends-with-selector.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Attribute-Selector/hyphenated-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Attribute-Selector/hyphenated-selector.png -------------------------------------------------------------------------------- /img/Modulo-Intermediario/Attribute-Selector/start-with-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Allyhere/css4noobs/HEAD/img/Modulo-Intermediario/Attribute-Selector/start-with-selector.png -------------------------------------------------------------------------------- /english/intro/communication.md: -------------------------------------------------------------------------------- 1 | ## Communication 2 | 3 | As we are initially using the Github to host the course, we'd like to ask everyone that, any doubt from some lesson or features, it'll be great if you create an ISSUE on our repository, by doing that, we can solve and mantain a partern of Q/A inside our project. -------------------------------------------------------------------------------- /english/intro/what-is-css.md: -------------------------------------------------------------------------------- 1 | # What is CSS 2 | 3 | The CSS was created about 1995, when [Håkon Wium Lie](https://pt.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie) and [Bert Bos](https://en.wikipedia.org/wiki/Bert_Bos) have presented the proposal, which was quickly suportted by W3C. 4 | 5 | O CSS surgiu por volta do ano de 1995, quando [Håkon Wium Lie](https://pt.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie) e [Bert Bos](https://en.wikipedia.org/wiki/Bert_Bos) apresentaram a proposta do Cascading Style Sheets, que rapidamente foi apoiada pela W3C. -------------------------------------------------------------------------------- /english/intro/what-are-its-advantages.md: -------------------------------------------------------------------------------- 1 | # CSS Advantages 2 | 3 | By using CSS in our websistes, there are some advantages and differences that is notable when we use only the pure HTML 4 | 5 | First of all, the pages earns shape, and turns into more pretty and piece of mind for our eyes 6 | 7 | But, beyond that, the CSS turns the code replication easier than its normally is. By creating an style page, we can replicate it to different HTML documents, which has a important function in the replication and organization of the HTML codes. -------------------------------------------------------------------------------- /english/basic-module/transition.md: -------------------------------------------------------------------------------- 1 | # Transições com CSS 2 | 3 | Transições no CSS é relativamente fácil, usamos `transition: ` para indicar como a transição será feita. 4 | 5 | Um exemplo: 6 | 7 | ```css 8 | div { 9 | background: blue; 10 | height: 100vh; 11 | width: 50vw; 12 | transition: width 1s ease; 13 | } 14 | ``` 15 | 16 | ```css 17 | div:hover { 18 | width: 100vw; 19 | } 20 | ``` 21 | 22 | * Podemos utilizar o `all` como `` para afetar todos os elementos que estão no seletor, mas fazendo isso a transição irá ser acionada também quando a tela da aplicação for redimensionada. 23 | -------------------------------------------------------------------------------- /english/intro/welcome.md: -------------------------------------------------------------------------------- 1 | ## Welcome 2 | 3 | Welcome to He4rt Developer CSS tutorial. 4 | 5 | We are glad that you got here here in our course. We will be working on the next steps to you finish this course understanding the basics to start using CSS into your web applications. 6 | 7 | CSS, which was created in 1994 by Håkon Wium Lie and Bert Bos, they're the guys who revolutionized everything that was understood by website and style from this year. The power of to formate and style data from websites without the needing of create a plenty of HTML tags was a milestone in the development history and even today, the CSS continues being extremely important to the developers all world aroud. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/issue_template.md: -------------------------------------------------------------------------------- 1 | # Título da issue 2 | 3 | > O título ideal é metade de um Tweet ou do tamanho de um título de e-mail. Ele por si só deve indicar do que a issue se trata. 4 | 5 | ## Antes de enviar, confira o seguinte: 6 | 7 | - [ ] Se uma solicitação de material, conferir se o material não existe usando a busca por arquivo. 8 | - [ ] Ao solicitar uma alteração num texto, elaborar sua proposta com exemplos, se posível. 9 | 10 | ## O problema 11 | 12 | > Descreva o que voc6e quer que seja adicionado, melhorado ou corrigido ou a sua dúvida 13 | 14 | ## Onde na documentação está a alteração? 15 | 16 | > Coloque o nome do arquivo e/ou prints, se aplicável 17 | -------------------------------------------------------------------------------- /Introducao/2-como-contribuir.md: -------------------------------------------------------------------------------- 1 | ## Como contribuir? 2 | 3 | Como iremos inicialmente usar o Github para hospedar o curso, gostariamos de pedir para qualquer dúvida referente à alguma aula ou melhorias que você crie uma **Issue** no nosso repositório, para que assim consigamos resolver e manter uma padronização de perguntas/respostas dentro do nosso projeto. 4 | 5 | Para criar uma issue, no [repositório do GitHub do css4noobs](https://github.com/he4rt/css4noobs/issues) clique na aba Issues e no botão **New Issue**. 6 | 7 | ![Criando uma nova issue](../img/Introducao/issue-1.png) 8 | 9 | 10 |
11 | 12 |
13 | 14 | **Próxima página → [O que é CSS?](./3-o-que-e-css.md)** 15 | 16 |
-------------------------------------------------------------------------------- /Modulo-Basico/13-transition.md: -------------------------------------------------------------------------------- 1 | # Transições com CSS 2 | 3 | Transições no CSS é relativamente fácil, usamos `transition: ` para indicar como a transição será feita. 4 | 5 | Um exemplo: 6 | 7 | ```css 8 | div { 9 | background: blue; 10 | height: 100vh; 11 | width: 50vw; 12 | transition: width 1s ease; 13 | } 14 | ``` 15 | 16 | ```css 17 | div:hover { 18 | width: 100vw; 19 | } 20 | ``` 21 | 22 | * Podemos utilizar o `all` como `` para afetar todos os elementos que estão no seletor, mas fazendo isso a transição irá ser acionada também quando a tela da aplicação for redimensionada. 23 | 24 |
25 | 26 |
27 | 28 | **Próxima página → [Manipulação de texto](./15-manipulacao-texto.md)** 29 | 30 |
-------------------------------------------------------------------------------- /english/middle-module/variables.md: -------------------------------------------------------------------------------- 1 | # Variáveis do CSS 2 | 3 | Variáveis CSS são entidades definidas por nós desenvolvedores, contendo valores que irão ser utilizados em todo o nosso projeto. Utilizamos o `var()` para indicar que estamos chamando uma variável do CSS. 4 | 5 | A utilização mais comum é setar as variáveis em um arquivo base de CSS, utilizando o `:root`: 6 | 7 | ```css 8 | :root { 9 | --text-primary: red; 10 | } 11 | ``` 12 | 13 | Utilizando a variável: 14 | 15 | ```css 16 | section { 17 | background-color: var(--text-primary); 18 | } 19 | ``` 20 | 21 | Nas variáveis de CSS, podemos setar qualquer tipo de atributo, como tamanhos: 22 | 23 | ```css 24 | :root { 25 | --padding-1: 8px; 26 | } 27 | ``` 28 | 29 | ```css 30 | article { 31 | padding: var(--padding-1); 32 | } 33 | ``` 34 | 35 | Assim conseguimos controlar e definir tamanhos/cores com clareza e facilidade! 36 | -------------------------------------------------------------------------------- /english/intro/how-css-works.md: -------------------------------------------------------------------------------- 1 | # How CSS works 2 | 3 | The CSS works through a simple structure of selector, property and value. 4 | 5 | Then, all of our code blocks, are made as follows: 6 | 7 | ```css 8 | 9 | selector { 10 | property: value; 11 | property: value; 12 | ... 13 | } 14 | ``` 15 | 16 | Where: 17 | 18 | - __Selector__: HTML element that it'll be style (for example: a div, a paragraph, a section). You can get better about the selectors by acessing the page of [selectors](./../../Modulo-Basico/selectors.md). 19 | 20 | - __Propriedade__: o que será mudado no nosso seletor (por exemplo: a cor do texto, a cor de fundo do elemento, o tamanho dele). 21 | 22 | - __Property__: What it's going to be changed in our selector (for example: the tex color, background color, its size). 23 | 24 | - __Value__: How the property is going to be applied (for example: to set a color `red` for our property `color`). 25 | -------------------------------------------------------------------------------- /english/basic-module/box-shadow.md: -------------------------------------------------------------------------------- 1 | # Box Shadow 2 | 3 | A propriedade box-shadow é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, separando-os com vírgulas. Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco, propagação do raio e cor. 4 | 5 | _Sintaxe_ 6 | 7 | ```css 8 | div { 9 | box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 10 | } 11 | ``` 12 | 13 | Onde: 14 | 15 | - O primeiro valor `2px` equivale ao eixo x da pagina `offset-x`. 16 | 17 | - O segundo valor `2px` equivale ao eixo y da pagina `offset-y`. 18 | 19 | - O terceiro valor `2px` equivale ao blur, que a sombra vai ter `blur-radius`. 20 | 21 | - E o ultimo atributo `rgba(0, 0, 0, 0.2)` é a cor que essa sombra vai receber `color`. 22 | 23 | O [Box-shadow generator](https://www.cssmatic.com/box-shadow) é uma ferramenta interativa que permite a criação de box-shadow. 24 | -------------------------------------------------------------------------------- /Modulo-Basico/12-box-shadow.md: -------------------------------------------------------------------------------- 1 | # Box Shadow 2 | 3 | A propriedade box-shadow é utilizado para adicionar efeitos de sombra em volta de um elemento. Você pode especificar mais de um efeito, separando-os com vírgulas. Uma box-shadow é descrita pelo deslocamentos (offset) X e Y em relação ao elemento, desfoco, propagação do raio e cor. 4 | 5 | _Sintaxe_ 6 | 7 | ```css 8 | div { 9 | box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 10 | } 11 | ``` 12 | 13 | Onde: 14 | 15 | - O primeiro valor `2px` equivale ao eixo x da pagina `offset-x`. 16 | 17 | - O segundo valor `2px` equivale ao eixo y da pagina `offset-y`. 18 | 19 | - O terceiro valor `2px` equivale ao blur, que a sombra vai ter `blur-radius`. 20 | 21 | - E o ultimo atributo `rgba(0, 0, 0, 0.2)` é a cor que essa sombra vai receber `color`. 22 | 23 | O [Box-shadow generator](https://www.cssmatic.com/box-shadow) é uma ferramenta interativa que permite a criação de box-shadow. 24 | 25 |
26 | 27 |
28 | 29 | **Próxima página → [Transições](./13-transition.md)** 30 | 31 |
32 | -------------------------------------------------------------------------------- /english/intro/what-do-u-need-to-know.md: -------------------------------------------------------------------------------- 1 | # What do you need to know 2 | 3 | ## Basics 4 | 5 | 6 | The CSS makes part of the frontend trinity (HTML, CSS and JavaScript) where each language has its own and important function. HTML acts on manipulation of all content which is visibile on the website (images, text, links and other). Javascript is responsible to manage all action on the website, for example, when you tap the button to turn the LightMode into a DarkMode. 7 | 8 | ![toggle](./../../img/dark-toggle.gif) 9 | 10 | ## The CSS's role 11 | 12 | And now, the our dearful CSS comes, acting as a powerful tool that is responsible to make since basics styles - such as change the element color - until animations and geometric figures. The last version of CSS (CSS 3) allows that it becomes more powerful, bringing the possibility to do a lot of things (before that, it was possible only with JavaScript) in a easy way. Hence, a plenty of developer gives the CSS a preferences to certain features, becauce of its practicality, once that the it's not actually a programming language. 13 | -------------------------------------------------------------------------------- /english/middle-module/pseudo-seletores.md: -------------------------------------------------------------------------------- 1 | # Pseudo-Seletores 2 | 3 | Já aprendemos os seletores básicos do CSS, mas que tal dar uma aprofundada? 4 | 5 | ## \* 6 | 7 | Este seletor é usado para **resetar o css** que vem "por padrão", assim temos todo os elementos da página como alvo. 8 | 9 | Exemplo de \* que é bastante utilizado: 10 | 11 | ```css 12 | * { 13 | padding: 0; 14 | margin: 0; 15 | outline: 0; 16 | box-sizing: border-box; 17 | } 18 | ``` 19 | 20 | ## A > B 21 | 22 | Irá selecionar os filhos B que são diretos de A. 23 | 24 | No exemplo a seguir, todos os filhos de ul que são li serão afetados: 25 | 26 | ```css 27 | ul > li { 28 | color: white; 29 | } 30 | ``` 31 | 32 | ## A + B 33 | 34 | O seletor adjacente irá selecionar somente o elemento imediatamente(B) após o primeiro(A) elemento. 35 | 36 | No exemplo a seguir, ele irá chamar o segundo span, e não o primeiro. 37 | 38 | ```css 39 | span + span { 40 | color: white; 41 | } 42 | ``` 43 | 44 | ## A ~ B 45 | 46 | O seletor é parecido com o A + B, com a diferença que irá selecionar todos os elementos imediatamente após B 47 | 48 | ```css 49 | ul ~ section { 50 | background-color: red; 51 | } 52 | ``` 53 | 54 | Existem outros seletores bastante específicos, mas nesta seção mostramos apenas os principais e que com certeza você irá utilizá-los! 55 | -------------------------------------------------------------------------------- /Modulo-Basico/3-pseudo-seletores.md: -------------------------------------------------------------------------------- 1 | # Pseudo-Seletores 2 | 3 | Já aprendemos os seletores básicos do CSS, mas que tal dar uma aprofundada? 4 | 5 | ## \* 6 | 7 | Este seletor é usado para **resetar o css** que vem "por padrão", assim temos todo os elementos da página como alvo. 8 | 9 | Exemplo de \* que é bastante utilizado: 10 | 11 | ```css 12 | * { 13 | padding: 0; 14 | margin: 0; 15 | outline: 0; 16 | box-sizing: border-box; 17 | } 18 | ``` 19 | 20 | ## A > B 21 | 22 | Irá selecionar os filhos B que são diretos de A. 23 | 24 | No exemplo a seguir, todos os filhos de ul que são li serão afetados: 25 | 26 | ```css 27 | ul > li { 28 | color: white; 29 | } 30 | ``` 31 | 32 | ## A + B 33 | 34 | O seletor adjacente irá selecionar somente o elemento imediatamente(B) após o primeiro(A) elemento. 35 | 36 | No exemplo a seguir, ele irá chamar o segundo span, e não o primeiro. 37 | 38 | ```css 39 | span + span { 40 | color: white; 41 | } 42 | ``` 43 | 44 | ## A ~ B 45 | 46 | O seletor é parecido com o A + B, com a diferença que irá selecionar todos os elementos imediatamente após B 47 | 48 | ```css 49 | ul ~ section { 50 | background-color: red; 51 | } 52 | ``` 53 | 54 | Existem outros seletores bastante específicos, mas nesta seção mostramos apenas os principais e que com certeza você irá utilizá-los! 55 | 56 |
57 | 58 |
59 | 60 | **Próxima página → [Box-model](./4-box-model.md)** 61 | 62 |
63 | -------------------------------------------------------------------------------- /Introducao/3-o-que-e-css.md: -------------------------------------------------------------------------------- 1 | # O que é CSS 2 | 3 | A nossa porta de entrada pra web é o HTML. O HTML foi criado no intuito de compartilhar de forma semântica conteúdo científico na internet [fonte ⧉](https://github.com/he4rt/css4noobs/tree/master). Porém com o passar do tempo, esse escopo foi ficando cada vez maior pois pessoas autoras foram colocando cada vez mais personalidade em suas páginas, migrando seus negócios pro ambiente web e criando experiências que exigiam estruturas cada vez mais complexas que não haviam sido previstas no primeiro rascunho do HTML. 4 | 5 | De início foram criadas tags e atributos que realizavam estilizações diretamente no HTML, como a tag [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) e [`
`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/center), porém pra documentos extensos era muito trabalhoso manter os estilos atualizados, daí a necessidade de uma forma mais simples e dissociada do HTML. Os estilos sendo gerenciados no próprio contexto tornam mais fácil o reaproveitamento, a escalabilidade e a facilidade de manter sites. 6 | 7 | Ao referenciar um arquivo com a extensão `.css`, podemos injetar no nosso documento HTML estilos que estarão se referindo a tags ou atributos específicos através de seletores, de forma que conseguimos estilizar grandes blocos de conteúdo ao mesmo tempo com poucas linhas de código. 8 | 9 | 10 |
11 | 12 | **Próxima página → [Como o CSS funciona?](./4-como-o-css-funciona.md)** 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /english/basic-module/border-radius.md: -------------------------------------------------------------------------------- 1 | # Border Radius - O que diabos é isso? 2 | 3 | A propriedade `border-radius` permite adicionar bordas arredondadas no seu elemento. 4 | 5 | O valores usados para definir as bordas podem ser em `px` ou `%`, mas exemplos abaixo terá somente valores em px. 6 | 7 | Essa propriedade pode ter de um a quatro valores. Aqui estão as regras: 8 | 9 | ### Quatro valores: 10 | 11 | O primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica ao canto superior direito, o terceiro valor se aplica ao canto inferior direito e o quarto valor se aplica ao canto inferior esquerdo. 12 | 13 | ```css 14 | border-radius: 125px 100px 50px 20px; 15 | ``` 16 | 17 |
18 | 19 | --- 20 | 21 | ### Três valores: 22 | 23 | O primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica aos cantos superior direito e inferior esquerdo e o terceiro valor se aplica ao canto inferior direito. 24 | 25 | ```css 26 | border-radius: 45px 50px 75px; 27 | ``` 28 | 29 |
30 | 31 | --- 32 | 33 | ### Dois valores: 34 | 35 | O primeiro valor se aplica aos cantos superior esquerdo e inferior direito, e o segundo valor se aplica aos cantos superior direito e inferior esquerdo. 36 | 37 | ```css 38 | border-radius: 15px 50px; 39 | ``` 40 | 41 |
42 | 43 | --- 44 | 45 | ### Um valor: 46 | 47 | O valor se aplica a todos os quatro cantos, que são arredondados igualmente: 48 | 49 | ```css 50 | border-radius: 15px; 51 | ``` 52 | 53 |
54 | -------------------------------------------------------------------------------- /english/basic-module/z-index.md: -------------------------------------------------------------------------------- 1 | # Z-Index 2 | 3 | A propriedade **z-index** funciona como camadas no CSS, por **padrão**, todos os elementos estão com essa propriedade no 0, quer dizer que todos os elementos estão na camada 0 ou **initial**. 4 | 5 | # Exemplo 6 | 7 | Aqui temos duas divs: 8 | 9 |

10 | 11 |

12 | 13 | HTML: 14 | ```html 15 |
16 |
17 | ``` 18 | 19 | CSS: 20 | ```css 21 | .um { 22 | width: 100px; 23 | height: 100px; 24 | background-color: brown; 25 | } 26 | 27 | .dois { 28 | width: 200px; 29 | height: 200px; 30 | background-color: chocolate; 31 | } 32 | ``` 33 | 34 | Caso eu aplique um **position: relative; top: 40px;** na **Div 1**: 35 | 36 | ```css 37 | .um { 38 | width: 100px; 39 | height: 100px; 40 | background-color: brown; 41 | position: relative; 42 | top: 40px; 43 | } 44 | ``` 45 | 46 |

47 | 48 |

49 | 50 | Mas eu quero que a **Div 2** fique por cima, então eu aplico a propriedade **z-index: -1** na **Div 1**. 51 | 52 | ```css 53 | .um { 54 | width: 100px; 55 | height: 100px; 56 | background-color: brown; 57 | position: relative; 58 | top: 40px; 59 | z-index: -1; 60 | ``` 61 | 62 |

63 | 64 |

65 | 66 | # Observações 67 | 68 | - A propriedade z-index aceita somente valores numéricos, incluindo valores negativos. 69 | - Só é possível aplicar o z-index caso o elemento tenha uma **position** setada (relative, absolute, fixed ou sticky).
70 | Por esse motivo aplicamos o z-index na div 1. 71 | -------------------------------------------------------------------------------- /Modulo-Intermediario/css-grid.md: -------------------------------------------------------------------------------- 1 | # CSS Grid - display: grid 2 | 3 | Da mesma forma que o flex, o grid também é baseado no conceito de linhas e colunas: 4 | 5 | ```css 6 | grid-column-start: | | span | span | auto; 7 | grid-column-end: | | span | span | auto; 8 | grid-row-start: | | span | span | auto; 9 | grid-row-end: | | span | span | auto; 10 | ``` 11 | 12 | Podemos resumir com: 13 | 14 | ```css 15 | grid-column: / ; 16 | grid-row: / ; 17 | ``` 18 | 19 | Podemos utilizar a unidade `fr` permite que você defina o tamanho de uma trilha como uma fração do espaço livre do contêiner da grade. Por exemplo, isso definirá cada item com um terço da largura do recipiente da grade: 20 | 21 | ```css 22 | grid-template-columns: 1fr 1fr 1fr; 23 | ``` 24 | 25 | No grid, podemos utilizar o `justify-self` e o `align-selft` para posicionar nossos items: 26 | 27 | ```css 28 | justify-self: start | end | center | stretch; 29 | ``` 30 | 31 | Um truque é utilizar o `repeat` para ter itens com o tamanho exato que precisamos: 32 | 33 | ```css 34 | 35 | /* Vamos criar nosso grid com 12 linhas e 12 colunas */ 36 | 37 | main { 38 | display: grid; 39 | grid-template-rows: repeat(12, 1fr); 40 | grid-template-columns: repeat(12 ,1fr); 41 | width: 100%; 42 | height: 100vh; 43 | } 44 | 45 | /* Podemos utilizar o grid-area para posicionar exatamente onde queremos os nossos items */ 46 | 47 | /* grid-area: / / / */ 48 | 49 | section { 50 | grid-area: 2 / 2 / 10 / 12; 51 | } 52 | ``` 53 | 54 | Para colocar um espaço entre os itens, podemos utilizar o `gap` 55 | 56 | ```css 57 | main { 58 | gap: 10px; 59 | } 60 | ``` 61 | -------------------------------------------------------------------------------- /english/middle-module/css-grid.md: -------------------------------------------------------------------------------- 1 | # CSS Grid - display: grid 2 | 3 | Da mesma forma que o flex, o grid também é baseado no conceito de linhas e colunas: 4 | 5 | ```css 6 | grid-column-start: | | span | span | auto; 7 | grid-column-end: | | span | span | auto; 8 | grid-row-start: | | span | span | auto; 9 | grid-row-end: | | span | span | auto; 10 | ``` 11 | 12 | Podemos resumir com: 13 | 14 | ```css 15 | grid-column: / ; 16 | grid-row: / ; 17 | ``` 18 | 19 | Podemos utilizar a unidade `fr` permite que você defina o tamanho de uma trilha como uma fração do espaço livre do contêiner da grade. Por exemplo, isso definirá cada item com um terço da largura do recipiente da grade: 20 | 21 | ```css 22 | grid-template-columns: 1fr 1fr 1fr; 23 | ``` 24 | 25 | No grid, podemos utilizar o `justify-self` e o `align-selft` para posicionar nossos items: 26 | 27 | ```css 28 | justify-self: start | end | center | stretch; 29 | ``` 30 | 31 | Um truque é utilizar o `repeat` para ter itens com o tamanho exato que precisamos: 32 | 33 | ```css 34 | 35 | /* Vamos criar nosso grid com 12 linhas e 12 colunas */ 36 | 37 | main { 38 | display: grid; 39 | grid-template-rows: repeat(12, 1fr); 40 | grid-template-columns: repeat(12 ,1fr); 41 | width: 100%; 42 | height: 100vh; 43 | } 44 | 45 | /* Podemos utilizar o grid-area para posicionar exatamente onde queremos os nossos items */ 46 | 47 | /* grid-area: / / / */ 48 | 49 | section { 50 | grid-area: 2 / 2 / 10 / 12; 51 | } 52 | ``` 53 | 54 | Para colocar um espaço entre os itens, podemos utilizar o `gap` 55 | 56 | ```css 57 | main { 58 | gap: 10px; 59 | } 60 | ``` 61 | -------------------------------------------------------------------------------- /Modulo-Basico/11-border-radius.md: -------------------------------------------------------------------------------- 1 | # Border Radius - O que diabos é isso? 2 | 3 | A propriedade `border-radius` permite adicionar bordas arredondadas no seu elemento. 4 | 5 | O valores usados para definir as bordas podem ser em `px` ou `%`, mas exemplos abaixo terá somente valores em px. 6 | 7 | Essa propriedade pode ter de um a quatro valores. Aqui estão as regras: 8 | 9 | ### Quatro valores: 10 | 11 | O primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica ao canto superior direito, o terceiro valor se aplica ao canto inferior direito e o quarto valor se aplica ao canto inferior esquerdo. 12 | 13 | ```css 14 | border-radius: 125px 100px 50px 20px; 15 | ``` 16 | 17 |
18 | 19 | --- 20 | 21 | ### Três valores: 22 | 23 | O primeiro valor se aplica ao canto superior esquerdo, o segundo valor se aplica aos cantos superior direito e inferior esquerdo e o terceiro valor se aplica ao canto inferior direito. 24 | 25 | ```css 26 | border-radius: 45px 50px 75px; 27 | ``` 28 | 29 |
30 | 31 | --- 32 | 33 | ### Dois valores: 34 | 35 | O primeiro valor se aplica aos cantos superior esquerdo e inferior direito, e o segundo valor se aplica aos cantos superior direito e inferior esquerdo. 36 | 37 | ```css 38 | border-radius: 15px 50px; 39 | ``` 40 | 41 |
42 | 43 | --- 44 | 45 | ### Um valor: 46 | 47 | O valor se aplica a todos os quatro cantos, que são arredondados igualmente: 48 | 49 | ```css 50 | border-radius: 15px; 51 | ``` 52 | 53 |
54 | 55 |
56 | 57 |
58 | 59 | **Próxima página → [Box-shadow](./12-box-shadow.md)** 60 | 61 |
-------------------------------------------------------------------------------- /Modulo-Basico/8-z-index.md: -------------------------------------------------------------------------------- 1 | # Z-Index 2 | 3 | A propriedade **z-index** funciona como camadas no CSS, por **padrão**, todos os elementos estão com essa propriedade no 0, quer dizer que todos os elementos estão na camada 0 ou **initial**. 4 | 5 | # Exemplo 6 | 7 | Aqui temos duas divs: 8 | 9 |

10 | 11 |

12 | 13 | HTML: 14 | ```html 15 |
16 |
17 | ``` 18 | 19 | CSS: 20 | ```css 21 | .um { 22 | width: 100px; 23 | height: 100px; 24 | background-color: brown; 25 | } 26 | 27 | .dois { 28 | width: 200px; 29 | height: 200px; 30 | background-color: chocolate; 31 | } 32 | ``` 33 | 34 | Caso eu aplique um **position: relative; top: 40px;** na **Div 1**: 35 | 36 | ```css 37 | .um { 38 | width: 100px; 39 | height: 100px; 40 | background-color: brown; 41 | position: relative; 42 | top: 40px; 43 | } 44 | ``` 45 | 46 |

47 | 48 |

49 | 50 | Mas eu quero que a **Div 2** fique por cima, então eu aplico a propriedade **z-index: -1** na **Div 1**. 51 | 52 | ```css 53 | .um { 54 | width: 100px; 55 | height: 100px; 56 | background-color: brown; 57 | position: relative; 58 | top: 40px; 59 | z-index: -1; 60 | ``` 61 | 62 |

63 | 64 |

65 | 66 | # Observações 67 | 68 | - A propriedade z-index aceita somente valores numéricos, incluindo valores negativos. 69 | - Só é possível aplicar o z-index caso o elemento tenha uma **position** setada (relative, absolute, fixed ou sticky).
70 | Por esse motivo aplicamos o z-index na div 1. 71 | 72 |
73 | 74 |
75 | 76 | **Próxima página → [Background](./9-background.md)** 77 | 78 |
-------------------------------------------------------------------------------- /english/environment/plugins.md: -------------------------------------------------------------------------------- 1 | ## 2.1 Plugins 2 | 3 | ## Using VS Code 4 | 5 | As CSS code editor, we're using the Visual Studio Code and I'll show you the best plugins and extensions which you can use when you editing your css files. Theses plugins only help you to boost your productivity, nothing more than that. 6 | 7 | 8 |
9 | 10 | #### HTML CSS Support 11 | 12 | Click here to download. 13 | 14 | The most used plugin with CSS in the VS code's marketplace with almost 3 millions of downloads. It provides an ease to fill out the classes's tags and element's ids. It has support for remotes css and verify all projects folders searching for css files or SCSS (CSS framework). 15 | 16 | #### IntelliSense for CSS 17 | 18 | ![alt text](https://i.imgur.com/5crMfTj.gif "IntelliSense Showcase") 19 | 20 | Click here to download. 21 | 22 | 23 | Still about the most populars, we have the IntelliSense for CSS. It provides the automatic fill of css classes in your projects. Gives support to other external types relationed by the tag ```html ```. And also is able to manage the cache of used classes in auto fill out. 24 | 25 | ### Still about SCSS 26 | 27 | sass 28 | 29 | Nowadays, devs are more into productivity and speed, and the SASS provides everything of it. It's an preprocessor and css framework which creates css files every single time is compiled. This speeds and module the work made in files, just in few lines. Hence, the development time its boosted with this framework. If you're interested in, read the guide from the official SASS website. 30 | 31 | 32 | # Using Webstorm 33 | 34 | A good option is the [Webstorm](https://www.jetbrains.com/pt-br/webstorm/), in general, it don't any of any aditional plugins to improve the css experience, and it also integrates very well with JavaScript's frameworks, such as: React and Vue. -------------------------------------------------------------------------------- /Modulo-Intermediario/postcss.md: -------------------------------------------------------------------------------- 1 | # PostCSS 2 | 3 | [PostCSS](https://postcss.org/) é uma ferramenta para transformar estilos com plug-ins JS. Esses plug-ins podem melhor sua experiência geral com CSS com muitas features diferentes. 4 | 5 | ## Instalação 6 | 7 | A utilização depende da forma que seu projeto está estruturado, recomendamos [ler a documentação](https://github.com/postcss/postcss#usage) 8 | 9 | ## Plugins 10 | 11 | Iremos mostrar os principais plugins do PostCSS: 12 | 13 | ### Autoprefixier 14 | 15 | O [autoprefixier](https://github.com/postcss/autoprefixer) adiciona as tag's necessárias para obter compatibilidade com os browsers. Exemplo: 16 | 17 | O plugin transforma: 18 | 19 | ```css 20 | .example { 21 | display: grid; 22 | background: linear-gradient(to bottom, white, black); 23 | } 24 | ``` 25 | 26 | Nisso: 27 | 28 | ```css 29 | .classe { 30 | display: -ms-grid; 31 | display: grid; 32 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 33 | background: -o-linear-gradient(top, white, black); 34 | background: linear-gradient(to bottom, white, black); 35 | } 36 | ``` 37 | 38 | Dessa forma, não precisamos nos preocupar(pelo menos de forma geral) com a compatibilidade de nosso CSS. 39 | 40 | ### PostCSS-Utilities 41 | 42 | O [postcss-utilities](https://github.com/ismamz/postcss-utilities) adiciona o `@util`, que tráz simplificação de código CSS, facilitando a sua utilização. 43 | 44 | Exemplo: 45 | 46 | ```css 47 | .borda-topo { 48 | @util border-top-radius(4px); 49 | } 50 | ``` 51 | 52 | É transformado em: 53 | 54 | ```css 55 | .borda-topo { 56 | border-top-left-radius: 4px; 57 | border-top-right-radius: 4px; 58 | } 59 | ``` 60 | 61 | A lista completa do que temos disponível: 62 | 63 | ```text 64 | aspect-ratio 65 | border-color 66 | border-radius 67 | border-style 68 | border-width 69 | center 70 | center-block 71 | circle 72 | clear-fix 73 | hd breakpoint 74 | hide-visually 75 | hr 76 | margin 77 | no-hover 78 | no-js 79 | padding 80 | position 81 | reset-list 82 | reset-text 83 | size 84 | min-size 85 | max-size 86 | sticky-footer 87 | text-hide 88 | text-stroke 89 | triangle 90 | truncate 91 | word-wrap 92 | ``` 93 | 94 | ### PurgeCSS 95 | 96 | O [PurgeCSS](https://www.npmjs.com/package/@fullhuman/postcss-purgecss) pode ser utilizado com PostCSS, seu objetivo é diminuir o tamanho do bundle final de nosso CSS. 97 | -------------------------------------------------------------------------------- /english/middle-module/postcss.md: -------------------------------------------------------------------------------- 1 | # PostCSS 2 | 3 | [PostCSS](https://postcss.org/) é uma ferramenta para transformar estilos com plug-ins JS. Esses plug-ins podem melhor sua experiência geral com CSS com muitas features diferentes. 4 | 5 | ## Instalação 6 | 7 | A utilização depende da forma que seu projeto está estruturado, recomendamos [ler a documentação](https://github.com/postcss/postcss#usage) 8 | 9 | ## Plugins 10 | 11 | Iremos mostrar os principais plugins do PostCSS: 12 | 13 | ### Autoprefixier 14 | 15 | O [autoprefixier](https://github.com/postcss/autoprefixer) adiciona as tag's necessárias para obter compatibilidade com os browsers. Exemplo: 16 | 17 | O plugin transforma: 18 | 19 | ```css 20 | .example { 21 | display: grid; 22 | background: linear-gradient(to bottom, white, black); 23 | } 24 | ``` 25 | 26 | Nisso: 27 | 28 | ```css 29 | .classe { 30 | display: -ms-grid; 31 | display: grid; 32 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); 33 | background: -o-linear-gradient(top, white, black); 34 | background: linear-gradient(to bottom, white, black); 35 | } 36 | ``` 37 | 38 | Dessa forma, não precisamos nos preocupar(pelo menos de forma geral) com a compatibilidade de nosso CSS. 39 | 40 | ### PostCSS-Utilities 41 | 42 | O [postcss-utilities](https://github.com/ismamz/postcss-utilities) adiciona o `@util`, que tráz simplificação de código CSS, facilitando a sua utilização. 43 | 44 | Exemplo: 45 | 46 | ```css 47 | .borda-topo { 48 | @util border-top-radius(4px); 49 | } 50 | ``` 51 | 52 | É transformado em: 53 | 54 | ```css 55 | .borda-topo { 56 | border-top-left-radius: 4px; 57 | border-top-right-radius: 4px; 58 | } 59 | ``` 60 | 61 | A lista completa do que temos disponível: 62 | 63 | ```text 64 | aspect-ratio 65 | border-color 66 | border-radius 67 | border-style 68 | border-width 69 | center 70 | center-block 71 | circle 72 | clear-fix 73 | hd breakpoint 74 | hide-visually 75 | hr 76 | margin 77 | no-hover 78 | no-js 79 | padding 80 | position 81 | reset-list 82 | reset-text 83 | size 84 | min-size 85 | max-size 86 | sticky-footer 87 | text-hide 88 | text-stroke 89 | triangle 90 | truncate 91 | word-wrap 92 | ``` 93 | 94 | ### PurgeCSS 95 | 96 | O [PurgeCSS](https://www.npmjs.com/package/@fullhuman/postcss-purgecss) pode ser utilizado com PostCSS, seu objetivo é diminuir o tamanho do bundle final de nosso CSS. 97 | -------------------------------------------------------------------------------- /english/basic-module/box-model.md: -------------------------------------------------------------------------------- 1 | # Box Model - O que diabos é isso? 2 | 3 | Um box model de CSS é basicamente uma caixa, um box, que está envolta de cada elemento HTML. Ela é composta por margem, bordas, padding e o conteúdo. 4 | 5 | Ela funciona como camadas, a camada mais externa é a margem, e a mais interna é o conteúdo. 6 | 7 | Sua organização, usando um exemplo de tag HTML é: 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | Outro modo de você observar como funciona o box model é usar o inspecionar elementos do seu navegador. Na área de **Layout** você poderá ver o Box Model do elemento selecionado, como na imagem abaixo. 20 | 21 |

22 | 23 |

24 | 25 | ## O que são essas camadas do Box Model? 26 | 27 | Como dito acima, o box model é composto por margem, padding, borda e conteúdo. 28 | 29 | **Conteúdo** - Como o nome diz, é o conteúdo desse box. Pode ser texto, imagem, link. É onde o seu conteúdo final irá aparecer. 30 | 31 | Por exemplo: 32 | 33 | ```html 34 |
35 | Exemplo de conteúdo 36 |
37 | ``` 38 | 39 | **Padding** - É uma área transparente que fica além do seu conteúdo. Na imagem acima, ela é representada pela cor roxa. 40 | 41 | **Borda (Border)** - Como o nome diz, é uma borda que fica ao redor do seu padding. Diferente do padding, ela pode possuir cor e forma. 42 | 43 | **Margem (Margin)** - É a camada mais externa do box model. Ela irá determinar as distâncias para os outros elementos e assim como padding, ela é transparente. 44 | 45 | ## Atenção ao tamanho final do seu elemento 46 | 47 | É importe lembrar que o tamanho final do seu elemento, será uma somatória de todas as medidas que você definiu para essas propriedades. 48 | 49 | Se temos: 50 | 51 | ```css 52 | div { 53 | width: 320px; 54 | padding: 10px; 55 | border: 5px solid #000; 56 | margin: 0; 57 | } 58 | ``` 59 | 60 | O tamanho total do seu elemento é calculado como uma equação, onde temos: 61 | 62 | Largura total = width + padding a esquerda + padding a direita + borda a esquerda + borda a direita + margem a esquerda + margem a direita 63 | 64 | Se substituirmos os nomes pelos valores definidos no exemplo assim, fica: 65 | 66 | Largura total = 320px + 10px + 10px + 5px + 5px + 0 67 | 68 | Sendo um total de 350px. 69 | -------------------------------------------------------------------------------- /Modulo-Intermediario/flexbox.md: -------------------------------------------------------------------------------- 1 | # Flexbox - display: flex 2 | 3 | Aqui iremos aprender um pouco sobre o display: flex (ou Flexbox), uma propriedade muito importante nos dias de hoje, usado comumente na maioria dos sites e que nos ajuda demais durante o desenvolvimento do projeto. 4 | 5 | ## O que é o Flexbox 6 | 7 | O flexbox é uma forma de organização de layout do nosso projeto. Essa organização pode ser feita de duas formas, seguindo padrão de linhas (_row_) ou de colunas (_column_). 8 | 9 | ## O que iremos desenvolver nesse módulo 10 | 11 | Vamos desenvolver a seguinte navbar usando apenas o flexbox e alguns outros comandos que já aprendemos aqui no 4noobs. 12 | 13 | ![](../img/Modulo-Intermediario/Flexbox/navbar-example.png) 14 | 15 | ## Como o flexbox funciona 16 | 17 | Como citado acima, o flexbox pode funcionar tanto em linha quanto em coluna. Pra gente começar a mexer com o flexbox, precisaremos dar um `display: flex;` no nosso elemento pai. 18 | 19 | Vamos usar como exemplo o seguinte elemento HTML. 20 | 21 | ```html 22 | 34 | ``` 35 | 36 | ## Manipulando o flexbox 37 | 38 | Utilizando `flex-direction: row/column` podemos indicar a direção dos elementos afetados pelo flex. 39 | 40 | Utilizando `flex-wrap: wrap/nowrap` indicamos se o elemento irá quebrar ou não. 41 | 42 | Utilizando `flex-flow: [row/column] [wrap/nowrap]` seria a junção do `flex-direction` com `flex-wrap`. 43 | 44 | Utilizando `justify-content: center/strart/end/flex-start/flex-end/left/right` alinhamos o posicionamento horizontal dos elementos sem afetar o tamanho deles. 45 | 46 | Utilizando `align-items: center/stretch` podemos alinhar os elementos na vertical, afetando diretamente o tamanho. 47 | 48 | * Também existe o `justify-items` e o `align-content`, assim como a junção dos elementos como o `place-content` e o `place-items`. 49 | 50 | ## Referências 51 | 52 | - [Conceitos básicos do Flexbox](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox) 53 | - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 54 | - [Guia Completo de Flexbox](https://origamid.com/projetos/flexbox-guia-completo/) 55 | -------------------------------------------------------------------------------- /english/middle-module/flexbox.md: -------------------------------------------------------------------------------- 1 | # Flexbox - display: flex 2 | 3 | Aqui iremos aprender um pouco sobre o display: flex (ou Flexbox), uma propriedade muito importante nos dias de hoje, usado comumente na maioria dos sites e que nos ajuda demais durante o desenvolvimento do projeto. 4 | 5 | ## O que é o Flexbox 6 | 7 | O flexbox é uma forma de organização de layout do nosso projeto. Essa organização pode ser feita de duas formas, seguindo padrão de linhas (_row_) ou de colunas (_column_). 8 | 9 | ## O que iremos desenvolver nesse módulo 10 | 11 | Vamos desenvolver a seguinte navbar usando apenas o flexbox e alguns outros comandos que já aprendemos aqui no 4noobs. 12 | 13 | ![](../img/Modulo-Intermediario/Flexbox/navbar-example.png) 14 | 15 | ## Como o flexbox funciona 16 | 17 | Como citado acima, o flexbox pode funcionar tanto em linha quanto em coluna. Pra gente começar a mexer com o flexbox, precisaremos dar um `display: flex;` no nosso elemento pai. 18 | 19 | Vamos usar como exemplo o seguinte elemento HTML. 20 | 21 | ```html 22 | 34 | ``` 35 | 36 | ## Manipulando o flexbox 37 | 38 | Utilizando `flex-direction: row/column` podemos indicar a direção dos elementos afetados pelo flex. 39 | 40 | Utilizando `flex-wrap: wrap/nowrap` indicamos se o elemento irá quebrar ou não. 41 | 42 | Utilizando `flex-flow: [row/column] [wrap/nowrap]` seria a junção do `flex-direction` com `flex-wrap`. 43 | 44 | Utilizando `justify-content: center/strart/end/flex-start/flex-end/left/right` alinhamos o posicionamento horizontal dos elementos sem afetar o tamanho deles. 45 | 46 | Utilizando `align-items: center/stretch` podemos alinhar os elementos na vertical, afetando diretamente o tamanho. 47 | 48 | * Também existe o `justify-items` e o `align-content`, assim como a junção dos elementos como o `place-content` e o `place-items`. 49 | 50 | ## Referências 51 | 52 | - [Conceitos básicos do Flexbox](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox) 53 | - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 54 | - [Guia Completo de Flexbox](https://origamid.com/projetos/flexbox-guia-completo/) 55 | -------------------------------------------------------------------------------- /Modulo-Basico/4-box-model.md: -------------------------------------------------------------------------------- 1 | 2 | # Box Model - O que diabos é isso? 3 | 4 | Um box model de CSS é basicamente uma caixa, um box, que está envolta de cada elemento HTML. Ela é composta por margem, bordas, padding e o conteúdo. 5 | 6 | Ela funciona como camadas, a camada mais externa é a margem, e a mais interna é o conteúdo. 7 | 8 | Sua organização, usando um exemplo de tag HTML é: 9 | 10 | ```html 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ``` 19 | 20 | Outro modo de você observar como funciona o box model é usar o inspecionar elementos do seu navegador. Na área de **Layout** você poderá ver o Box Model do elemento selecionado, como na imagem abaixo. 21 | 22 |

23 | 24 |

25 | 26 | ## O que são essas camadas do Box Model? 27 | 28 | Como dito acima, o box model é composto por margem, padding, borda e conteúdo. 29 | 30 | **Conteúdo** - Como o nome diz, é o conteúdo desse box. Pode ser texto, imagem, link. É onde o seu conteúdo final irá aparecer. 31 | 32 | Por exemplo: 33 | 34 | ```html 35 |
36 | Exemplo de conteúdo 37 |
38 | ``` 39 | 40 | **Padding** - É uma área transparente que fica além do seu conteúdo. Na imagem acima, ela é representada pela cor roxa. 41 | 42 | **Borda (Border)** - Como o nome diz, é uma borda que fica ao redor do seu padding. Diferente do padding, ela pode possuir cor e forma. 43 | 44 | **Margem (Margin)** - É a camada mais externa do box model. Ela irá determinar as distâncias para os outros elementos e assim como padding, ela é transparente. 45 | 46 | ## Atenção ao tamanho final do seu elemento 47 | 48 | É importe lembrar que o tamanho final do seu elemento, será uma somatória de todas as medidas que você definiu para essas propriedades. 49 | 50 | Se temos: 51 | 52 | ```css 53 | div { 54 | width: 320px; 55 | padding: 10px; 56 | border: 5px solid #000; 57 | margin: 0; 58 | } 59 | ``` 60 | 61 | O tamanho total do seu elemento é calculado como uma equação, onde temos: 62 | 63 | Largura total = width + padding a esquerda + padding a direita + borda a esquerda + borda a direita + margem a esquerda + margem a direita 64 | 65 | Se substituirmos os nomes pelos valores definidos no exemplo assim, fica: 66 | 67 | Largura total = 320px + 10px + 10px + 5px + 5px + 0 68 | 69 | Sendo um total de 350px. 70 | 71 |
72 | 73 |
74 | 75 | **Próxima página → [Pseudo-seletores](./5-display.md)** 76 | 77 |
-------------------------------------------------------------------------------- /english/intro/adding-css-into-html.md: -------------------------------------------------------------------------------- 1 | # Adding css into HTML 2 | 3 | We can add CSS into our HTML pages by three ways, using the style tag, using the attribute style or using the link tag, the last one is more recommended nowadays. 4 | 5 | ## Tag ` 22 | 23 | 24 |
25 |

Box

26 |
27 | 28 | 29 | ``` 30 | 31 | ## Attribute style - Style Inline 32 | 33 | Tte Attribute _style_, also known as inline style, is an attribute that we use into our tags to style them. 34 | 35 | To use it, you just have to add the style attribute inside the tag into our HTML document. 36 | 37 | 38 | ```html 39 | 40 | 41 | CSS Inline 42 | 43 | 44 |
45 | 46 |

Box

47 |
48 | 49 | 50 | ``` 51 | 52 | ## External style - Link 53 | 54 | This last one, and more recommended way to use css, consist in use the tag `` to make a connection with our HTML and CSS. 55 | 56 | Imagine that our folder structure is as follows: 57 | 58 | ![](../../img/Introducao/projeto-1.png) 59 | 60 | It's quite usual create a folder where we create our files.css and inside it, create the files itself, letting the folder structure as follows: 61 | 62 | ![](../../img/Introducao/projeto-2.png) 63 | 64 | After that, we write our CSS rules inside the file `main.css`. 65 | 66 | How the HTML catch this info? with the tag ``. 67 | 68 | ```html 69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 |

Box

77 |
78 | 79 | 80 | ``` 81 | 82 | 83 | - __rel__ = The relationship that this link has with our file (in this case is a stylesheet). 84 | - __href__ = The reference of where this file is located (in our case, inside the folder _css_ with the name _main.css_) 85 | -------------------------------------------------------------------------------- /Introducao/1-boas-vindas.md: -------------------------------------------------------------------------------- 1 | # Boas vindas 2 | 3 | **Boas vindas ao tutorial de CSS da He4rt Developers!** 4 | 5 | Ficamos muito felizes de você ter chegado até aqui no nosso curso! Estaremos trabalhando nos próximos passos 6 | para que você saia desse curso entendendo o básico para começar a utilizar CSS em suas aplicações Web. 7 | 8 | O HTML foi inicialmente criado pra compartilhamento de conteúdo científico, mas a gama de possibilidades que a web oferecia foi aos poucos transformando essa perspectiva. Antes, pra se alterar a apresentação dos elementos HTML se utilizavam atributos e tags de estilo como ``, fazendo com que o trabalho de estilização fosse repetitivo e seu processamento fosse muito lento. 9 | 10 | Criado em 1994 por [Håkon Wium Lie](https://pt.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie) e [Bert Bos](https://en.wikipedia.org/wiki/Bert_Bos), O CSS expandiu as possibilidades do que se pretendia com a Web, permitindo com que as pessoas autoras alcançassem uma incrível qualidade de conteúdo, mas que conseguissem também sobrepor com sua marca ou expressão artística. Hoje o CSS é um dos pilares do desenvolvimento, pois toda a experiência de usuário - mesmo as que não usam a internet visualmente - são afetadas pelas definições criadas nas folhas de estilo. 11 | 12 | O CSS moderno vem sendo melhorado por um trabalho conjunto de grandes navegadores, o [interop CSS (em inglês)](https://web.dev/interop-2023/) é uma meta conjunta definida anualmente pra expandir os limites da linguagem fornecendo ainda mais suporte e possibilidades pra webdesigners e pessoas desenvolvedoras em front, mas também abrangendo as novas tecnologias e tendências visuais. 13 | 14 | Apesar de ter uma curva de aprendizagem um pouco complexa, com prática é possível se aprender a construir páginas e aplicações extremamente fieis aos seus desenhos e se tornar um diferencial na carreira de quem escolheu front como um dos focos de estudo. É perfeitamente possível construir páginas incríveis com um conhecimento básico e bastante prática, mas se você tiver a disposição de transpor a barreira do básico, é possível também escrever um CSS limpo, de leve processamento, robusto e acessível. 15 | 16 | A educação não é uma produção individual, mas uma produção social. Coletivamente construímos acertos à partir dos nossos erros, compartilhamos conhecimento através do nosso trabalho e das nossas histórias. Esperamos que você leve um pouco de cada pessoa que contribuiu nessa documentação, mas que também deixe um pouco de si, da forma que puder contribuir. 17 | 18 |
19 | 20 |
21 | 22 | **Próxima página → [Como contribuir](./2-como-contribuir.md)** 23 | 24 |
25 | -------------------------------------------------------------------------------- /Ambiente/plugins.md: -------------------------------------------------------------------------------- 1 | ## 2.1 Plugins 2 | 3 | ## Utilizando VSCode 4 | 5 | vscode 6 | Como editor de texto padrão para CSS utilizaremos o Visual Studio Code e mostrarei os melhores Plugins e Extensões que você pode utilizar quando for editar seus arquivos CSS. Lembrando que esses plugins somente podem ajudar a agilizar o seu desenvolvimento e nada além disso. 7 | 8 |
9 | 10 | #### HTML CSS Support 11 | 12 | Clique aqui para fazer o download. 13 | 14 | O plugin mais utilizado em CSS no marketplace do VScode com quase 3 milhões de downloads. Ele fornece facilidade para preenchimento automático de tags em class e id de elementos HTML. Suporte para arquivos CSS remotos e verifica as pastas do projeto em busca de arquivos CSS ou SCSS (framework de CSS). 15 | 16 | #### IntelliSense for CSS 17 | 18 | ![alt text](https://i.imgur.com/5crMfTj.gif "IntelliSense Showcase") 19 | 20 | Clique aqui para fazer o download. 21 | 22 | Ainda na ala dos plugins mais populares, temos o IntelliSense for CSS. Ele pode fornecer o preenchimento automático para definições de classes CSS encontradas no seu projeto. Dá suporte também a outros arquivos de estilização externos relacionados pela tag ```html ```. E por último tem a propriedade de gerenciar o cache das classes CSS utilizadas no preenchimento automático. 23 | 24 | ### Ainda sobre o SCSS 25 | 26 | sass 27 | 28 | Hoje em dia o foco dos desenvolvedores está na produtividade e agilidade, e o SASS chega pra proporcionar isso. Ele é um pré-processador e framework de CSS que gera arquivos CSS para o usuário cada vez que é compilado. Isso agiliza e modula o trabalho em arquivos com poucas linhas. Sendo assim, o tempo de desenvolvimento de páginas pode ser otimizado através desse framework. Vou evitar citar mais coisa pois são coisas mais complexas, porém se você ficou interessado, leia o guia do próprio site do SASS. 29 | 30 | # Utilizando Webstorm 31 | 32 | Uma boa opção é o [Webstorm](https://www.jetbrains.com/pt-br/webstorm/), em geral ele não necessita de plugins adicionais para melhorar a experiência com CSS, e sua integração com framework's JavaScript como React e Vue funcionam muito bem! -------------------------------------------------------------------------------- /Introducao/4-como-o-css-funciona.md: -------------------------------------------------------------------------------- 1 | # Como o CSS funciona? 2 | 3 | No CSS referenciamos as tags ou atributos HTML através de **seletores** e usando **propriedades** e **valores** conseguimos alterar a aparência e usabilidade de um site. Um bloco de CSS pode conter uma ou mais **declarações** que alteram uma característica específica, como o background-color, que define qual a cor do plano de fundo do elemento HTML referenciado pelo seletor. 4 | 5 |
6 | 7 | 8 | **Se fossemos estilizar uma barra de navegação de um site, sabe aquela que fica no topo da maioria dos sites e contém links para todas suas seções?** 9 | 10 | 11 | ![Exemplo de navbar. Barra de navegação do site Bootstrap com links pra diferentes seções e logo.](../img/Introducao/exemplo-de-navbar.png) 12 | 13 |
14 | 15 | Primeiro, escrevemos o HTML demarcando o conteúdo. Barras de navegação geralmente tem um logo e uma lista de links: 16 | 17 | 18 | ```html 19 | 27 | ``` 28 | 29 |
30 | 31 | Para estilizarmos cada elemento dessa barra de navegação, podemos utilizar [seletores CSS](../Modulo-Basico//seletores.md). 32 | 33 | ```css 34 | nav { 35 | /* CSS de exemplo */ 36 | display: flex; 37 | align-items: center; 38 | justify-content: space-evenly; 39 | } 40 | 41 | img { 42 | /* ---- */ 43 | } 44 | 45 | ul { 46 | /* ---- */ 47 | } 48 | 49 | li { 50 | /* ---- */ 51 | } 52 | 53 | a { 54 | /* ---- */ 55 | } 56 | ``` 57 | 58 |
59 | 60 | ## Mas o que representam essas marcações? 61 | 62 | - __seletor__: Elemento ou atributo do HTML que será estilizado, por exemplo, uma div, um parágrafo, uma section. Para saber mais sobre os seletores, acesse [a nossa documentação sobre seletores ⧉](../Modulo-Basico/seletores.md). 63 | 64 | - __propriedade__: A característica a ser alterada, como, por exemplo, cor do texto, cor de fundo do elemento, seu tamanho e espaçamento. 65 | 66 | - __valor__: As opções de customização dessa característica, como, por exemplo, definir uma cor `red` pra propriedade `color`. 67 | 68 | 69 | ![Anatomia do seletor CSS. Um seletor escrito .seletor h1 contendo dentro das suas chaves a propriedade background-color e o valor #F0F0F0.](../img/Introducao/anatomia-do-seletor-css.png) 70 | 71 | 72 |
73 | 🔎 Código Fonte 74 | 75 | ```css 76 | 77 | .seletor h1 { 78 | background-color: tomato; 79 | } 80 | 81 | ``` 82 | 83 |
84 | 85 |
86 | 87 |
88 | 89 | **Próxima página → [Adicionando CSS no HTML](./5-adicionando-css-no-html.md)** 90 | 91 |
-------------------------------------------------------------------------------- /english/basic-module/units.md: -------------------------------------------------------------------------------- 1 | # Units - Unidades em CSS 2 | 3 | Dentro do CSS, existem várias propriedades que aceitam unidades como valores, como por exemplos as propriedades `width` ou `height`. 4 | Nessa seção, iremos abordar melhor quais as unidades existem e pra que cada uma serve. 5 | 6 | Para começo de conversa, precisamos saber que existem dois tipos de unidades de tamanho, as unidades de tamanho **relativas** e unidades de tamanho **absolutas**. 7 | 8 | ## Unidades absolutas 9 | 10 | Os tamanhos de unidade absolutas irão aparecer do tamanho exato que você definir na tela. 11 | Por exemplo, se você definir que o o `width` de um elemento é _100px_, ele será _100px_ independente do tamanho da tela do dispositivo que você estiver usando. 12 | Esses tamanhos de unidade não são muito recomendados para definir tamanhos em tela, devido a grande quantidade de telas que existem no mercado hoje em dia. 13 | A unidade de medida mais utilizada entre as unidades absolutas, é o **px**, mesmo entrando cada vez mais em desuso, devido as unidades relativas. 14 | Vale lembrar que a unidade **px** varia de acordo com o dispositivo. Para dispositivos com um baixo [dpi](https://www.significados.com.br/dpi/) o comportamento de 1px é igual a um pixel do dispositivo (um ponto), na tela. 15 | 16 | > Caso queira olhar todas as unidades absolutas, você pode consultar o link de referência ao final da página. 17 | 18 | ## Unidades relativas 19 | 20 | As unidades relativas de tamanho especificam o tamanho relativo em relação com outra propriedade de tamanho. Essas medidas escalam melhor na renderização de dispositivos de tamanhos diferentes, por isso são fortemente indicadas para usar quando se pensa em criar elementos com tamanho escalável e diferentes tipos de responsividade. 21 | 22 | As principais unidades de medida relativas são a **em**, **rem**, **vw** e **vh**. 23 | 24 | A unidade de medida **em** é relativa de acordo com o tamanho da `font-size` do elemento. Por exemplo, **2em** equivalem a 2 vezes o tamanho da fonte atual. 25 | 26 | A unidade de medida **rem** é relativa ao tamanho da fonte do elemento root. 27 | 28 | A unidade de medida **vw** equivale a 1% do `width` do viewport. 29 | 30 | A unidade de medida **vh** equivale a 1% do `height` do viewport. 31 | 32 | ***viewport**: o tamanho da janela do browser. Por exemplo, se o viewport for 100cm, 1vw = 1cm 33 | 34 | > Caso queira olhar todas as unidades relativas, você pode consultar o link de referência ao final da página. 35 | 36 | ## Qual unidade de medida usar 37 | 38 | Caso você tenha dúvidas de qual unidade usar, recomendo seguir o que [este artigo](https://www.w3.org/Style/Examples/007/units.pt_BR.html) indica. 39 | 40 | ## Referências 41 | 42 | [https://www.w3schools.com/cssref/css_units.asp](https://www.w3schools.com/cssref/css_units.asp) -------------------------------------------------------------------------------- /Modulo-Basico/6-units.md: -------------------------------------------------------------------------------- 1 | # Units - Unidades em CSS 2 | 3 | Dentro do CSS, existem várias propriedades que aceitam unidades como valores, como por exemplos as propriedades `width` ou `height`. 4 | Nessa seção, iremos abordar melhor quais as unidades existem e pra que cada uma serve. 5 | 6 | Para começo de conversa, precisamos saber que existem dois tipos de unidades de tamanho, as unidades de tamanho **relativas** e unidades de tamanho **absolutas**. 7 | 8 | ## Unidades absolutas 9 | 10 | Os tamanhos de unidade absolutas irão aparecer do tamanho exato que você definir na tela. 11 | Por exemplo, se você definir que o o `width` de um elemento é _100px_, ele será _100px_ independente do tamanho da tela do dispositivo que você estiver usando. 12 | Esses tamanhos de unidade não são muito recomendados para definir tamanhos em tela, devido a grande quantidade de telas que existem no mercado hoje em dia. 13 | A unidade de medida mais utilizada entre as unidades absolutas, é o **px**, mesmo entrando cada vez mais em desuso, devido as unidades relativas. 14 | Vale lembrar que a unidade **px** varia de acordo com o dispositivo. Para dispositivos com um baixo [dpi](https://www.significados.com.br/dpi/) o comportamento de 1px é igual a um pixel do dispositivo (um ponto), na tela. 15 | 16 | > Caso queira olhar todas as unidades absolutas, você pode consultar o link de referência ao final da página. 17 | 18 | ## Unidades relativas 19 | 20 | As unidades relativas de tamanho especificam o tamanho relativo em relação com outra propriedade de tamanho. Essas medidas escalam melhor na renderização de dispositivos de tamanhos diferentes, por isso são fortemente indicadas para usar quando se pensa em criar elementos com tamanho escalável e diferentes tipos de responsividade. 21 | 22 | As principais unidades de medida relativas são a **em**, **rem**, **vw** e **vh**. 23 | 24 | A unidade de medida **em** é relativa de acordo com o tamanho da `font-size` do elemento. Por exemplo, **2em** equivalem a 2 vezes o tamanho da fonte atual. 25 | 26 | A unidade de medida **rem** é relativa ao tamanho da fonte do elemento root. 27 | 28 | A unidade de medida **vw** equivale a 1% do `width` do viewport. 29 | 30 | A unidade de medida **vh** equivale a 1% do `height` do viewport. 31 | 32 | ***viewport**: o tamanho da janela do browser. Por exemplo, se o viewport for 100cm, 1vw = 1cm 33 | 34 | > Caso queira olhar todas as unidades relativas, você pode consultar o link de referência ao final da página. 35 | 36 | ## Qual unidade de medida usar 37 | 38 | Caso você tenha dúvidas de qual unidade usar, recomendo seguir o que [este artigo](https://www.w3.org/Style/Examples/007/units.pt_BR.html) indica. 39 | 40 | ## Referências 41 | 42 | [https://www.w3schools.com/cssref/css_units.asp](https://www.w3schools.com/cssref/css_units.asp) 43 | 44 |
45 | 46 |
47 | 48 | **Próxima página → [Position](./7-position.md)** 49 | 50 |
-------------------------------------------------------------------------------- /Modulo-Basico/15-manipulacao-texto.md: -------------------------------------------------------------------------------- 1 | # Manipulação de Texto 2 | 3 | Neste módulo iremos ensinar os conceitos básicos de como manipular textos com CSS! 4 | 5 | ## Cores 6 | 7 | Podemos manipular a cor dos textos usando `color: ` de várias formas diferentes: 8 | 9 | HEX: `color: #AAAAAA` 10 | 11 | HSV: `color: hsl(0, 100%, 50%)` 12 | 13 | RGB `color: rgb(255, 0, 0)` 14 | 15 | RGBA `color: rgba(255, 0, 0, 0.5)` 16 | 17 | Aplicando em um Seletor: 18 | 19 | ```css 20 | p { 21 | color: #aaaaaa; 22 | } 23 | ``` 24 | 25 | ## Fonte 26 | 27 | Para trocar a fonte padrão, usamos `font-family: 'nome-da-fonte', 'outra-fonte', ...`, por exemplo: 28 | 29 | O CSS irá dar prioridade sempre para a primeira fonte a esquerda, em caso de não encontrado, irá carregar a próxima e assim por diante: 30 | 31 | ```css 32 | p { 33 | font-family: "Poppins", "Raleway", "Muli"; 34 | } 35 | ``` 36 | 37 | Ou seja, se a fonte Poppins não for encontrada, irá chamar a Raleway, se não achar a Raleway, irá chamar a Muli, e se não achar a Muli, irá carregar uma fonte padrão do navegador. 38 | 39 | ## Estilos 40 | 41 | Para aplicar um estilo a uma fonte, usamos `font-style: 'nome do estilo'`, por exemplo 42 | 43 | ```css 44 | p { 45 | font-style: italic; 46 | } 47 | ``` 48 | 49 | Ou seja todas as tags `

` da página vão está com o estilo da fonte em itálico. 50 | 51 | ## Peso 52 | 53 | Para aplicar um peso a uma fonte, usamos `font-weight: 'nome do peso da fonte'`, por exemplo. 54 | 55 | ```css 56 | h1 { 57 | font-weight: bold; 58 | } 59 | ``` 60 | 61 | Ou seja todas as tags `

` da página vão está com o peso da fonte `bold`. 62 | 63 | ## Importar Fontes 64 | 65 | Por requisição usando o Google Fonts, podemos usar o `@import` no nosso arquivo CSS e utilizar a fonte: 66 | 67 | ```css 68 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 69 | 70 | p { 71 | font-family: "Poppins", "sans-serif"; 72 | } 73 | ``` 74 | 75 | Procure fontes de seu interesse [aqui](https://fonts.google.com/) 76 | 77 | Podemos registrar fontes localmente, usando o `@font-face`: 78 | 79 | `main.css` 80 | 81 | ```css 82 | @font-face { 83 | font-family: "Poppins Normal"; 84 | src: url("./to/path/fonts/Poppins-Medium.otf") format("opentype"); 85 | } 86 | ``` 87 | 88 | `outro_arquivo.css` 89 | 90 | ```css 91 | p { 92 | font-family: "Poppins Normal", "sans-serif"; 93 | } 94 | ``` 95 | 96 | # Links 97 | 98 | Para conseguirmos navegar por link's, podemos usar a tag `` usando `href`: 99 | 100 | `Ir para o CSS4Noobs` 101 | 102 | Dessa forma, assim que clicarmos em `Ir para o CSS4Noobs`, iremos para o repositório 103 | 104 | Para formatar essa tag, usamos: 105 | 106 | ```css 107 | a { 108 | text-decoration: none; 109 | color: black; 110 | } 111 | ``` 112 | 113 | - Usando o `text-decoration: none;` tiramos a linha inferior que vem por padrão. 114 | -------------------------------------------------------------------------------- /english/basic-module/manipulacao-texto.md: -------------------------------------------------------------------------------- 1 | # Manipulação de Texto 2 | 3 | Neste módulo iremos ensinar os conceitos básicos de como manipular textos com CSS! 4 | 5 | ## Cores 6 | 7 | Podemos manipular a cor dos textos usando `color: ` de várias formas diferentes: 8 | 9 | HEX: `color: #AAAAAA` 10 | 11 | HSV: `color: hsl(0, 100%, 50%)` 12 | 13 | RGB `color: rgb(255, 0, 0)` 14 | 15 | RGBA `color: rgba(255, 0, 0, 0.5)` 16 | 17 | Aplicando em um Seletor: 18 | 19 | ```css 20 | p { 21 | color: #aaaaaa; 22 | } 23 | ``` 24 | 25 | ## Fonte 26 | 27 | Para trocar a fonte padrão, usamos `font-family: 'nome-da-fonte', 'outra-fonte', ...`, por exemplo: 28 | 29 | O CSS irá dar prioridade sempre para a primeira fonte a esquerda, em caso de não encontrado, irá carregar a próxima e assim por diante: 30 | 31 | ```css 32 | p { 33 | font-family: "Poppins", "Raleway", "Muli"; 34 | } 35 | ``` 36 | 37 | Ou seja, se a fonte Poppins não for encontrada, irá chamar a Raleway, se não achar a Raleway, irá chamar a Muli, e se não achar a Muli, irá carregar uma fonte padrão do navegador. 38 | 39 | ## Estilos 40 | 41 | Para aplicar um estilo a uma fonte, usamos `font-style: 'nome do estilo'`, por exemplo 42 | 43 | ```css 44 | p { 45 | font-style: italic; 46 | } 47 | ``` 48 | 49 | Ou seja todas as tags `

` da página vão está com o estilo da fonte em itálico. 50 | 51 | ## Peso 52 | 53 | Para aplicar um peso a uma fonte, usamos `font-weight: 'nome do peso da fonte'`, por exemplo. 54 | 55 | ```css 56 | h1 { 57 | font-weight: bold; 58 | } 59 | ``` 60 | 61 | Ou seja todas as tags `

` da página vão está com o peso da fonte `bold`. 62 | 63 | ## Importar Fontes 64 | 65 | Por requisição usando o Google Fonts, podemos usar o `@import` no nosso arquivo CSS e utilizar a fonte: 66 | 67 | ```css 68 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 69 | 70 | p { 71 | font-family: "Poppins", "sans-serif"; 72 | } 73 | ``` 74 | 75 | Procure fontes de seu interesse [aqui](https://fonts.google.com/) 76 | 77 | Podemos registrar fontes localmente, usando o `@font-face`: 78 | 79 | `main.css` 80 | 81 | ```css 82 | @font-face { 83 | font-family: "Poppins Normal"; 84 | src: url("./to/path/fonts/Poppins-Medium.otf") format("opentype"); 85 | } 86 | ``` 87 | 88 | `outro_arquivo.css` 89 | 90 | ```css 91 | p { 92 | font-family: "Poppins Normal", "sans-serif"; 93 | } 94 | ``` 95 | 96 | # Links 97 | 98 | Para conseguirmos navegar por link's, podemos usar a tag `` usando `href`: 99 | 100 | `Ir para o CSS4Noobs` 101 | 102 | Dessa forma, assim que clicarmos em `Ir para o CSS4Noobs`, iremos para o repositório 103 | 104 | Para formatar essa tag, usamos: 105 | 106 | ```css 107 | a { 108 | text-decoration: none; 109 | color: black; 110 | } 111 | ``` 112 | 113 | - Usando o `text-decoration: none;` tiramos a linha inferior que vem por padrão. 114 | -------------------------------------------------------------------------------- /english/middle-module/pseudo-classes.md: -------------------------------------------------------------------------------- 1 | # Pseudo-Classes 2 | 3 | Pseudo-classes são referências utilizadas através de sufixos nos seletores, para definir um estado especial de um elemento. Este recurso é muito importante para aplicar estilo para situações específicas de maneira performática, evitando seletores extensos em cascata ou aplicação lógica através do Javascript para manipulação dinâmica. 4 | 5 | Já vimos algumas pseudo-classes nas seções anteriores como o :hover, sua sintaxe base seria: 6 | 7 | ```css 8 | seletor:pseudo-classe { 9 | propriedade: valor; 10 | } 11 | ``` 12 | 13 | Existem múltiplas pseudo-classes, cada uma com aplicação específica para alterar o estilo da página em situações e eventos de fluxo diferentes. 14 | 15 | Lista de pseudo-classes de acordo com a MDN complementada por uma pequena descrição utilizada como referência: 16 | 17 | | Valor | Descrição | 18 | | --- | --- | 19 | | ```:active``` | Utilizada em links e botões, define se um elemento alvo está ativo pela navegação do usuário | 20 | | ```:checked``` | Quando um elemento de formulário (```radio```, ```checkbox``` e ```option```) estão ativos | 21 | | ```:default``` | Elemento(s) padrão(ões) de um formulário | 22 | | ```:dir()``` | Relacionado a direção do conteúdo | 23 | | ```:disabled``` | Quando está desabilitado | 24 | | ```:empty``` | Quando está vazio | 25 | | ```:enabled``` | Quando está habilitado | 26 | | ```:first``` | Primeiro elemento | 27 | | ```:first-child``` | Primeiro elemento filho | 28 | | ```:first-of-type``` | Primeiro elemento pelo tipo | 29 | | ```:fullscreen``` | Elementos atuais em tela cheia | 30 | | ```:focus``` | Aplicado quando o elemento recebe foco | 31 | | ```:hover``` | Quando está com o mouse em cima | 32 | | ```:indeterminate``` | Quando está indeterminado (funciona com formulários) | 33 | | ```:in-range``` | Aplicado aos elementos `````` os quais o **valor atual** está compreendido no intervalo dos atributos **min** e **max** do mesmo | 34 | | ```:invalid``` | Aplicado à **elementos inválidos** de um *formulário* | 35 | | ```:lang()``` | Elementos por língua | 36 | | ```:last-child``` | Último filho | 37 | | ```:last-of-type``` | Último por tipo/grupo de elementos | 38 | | ```:left``` | Utilizado a esquerda em conjunto com o ```@page``` | 39 | | ```:link``` | Quando o elemento é um link | 40 | | ```:not()``` | Quando não tem o requisito do parâmetro | 41 | | ```:nth-child()``` | Elementos baseado em posição, exemplo: ```:nth-child(1n)``` | 42 | | ```:nth-last-child()``` | Elemento baseado no último filho | 43 | | ```:nth-last-of-type()``` | Elemento baseado no último tipo/grupo de elementos | 44 | | ```:nth-of-type()``` | Elemento por tipo/grupo de elementos | 45 | | ```:only-child``` | Elementos que são necessariamente filhos | 46 | | ```:only-of-type``` | Elementos que são especificados no tipo/grupo de elementos | 47 | | ```:optional``` | Elementos de um formulário que são opcionais | 48 | | ```:out-of-range``` | Aplicado aos elementos `````` os quais o **valor atual não está compreendido** no intervalo dos atributos **min** e **max** do mesmo | 49 | | ```:read-only``` | Relacionado ao ```input``` e ```textarea```, quando não está editável | 50 | | ```:read-write``` | Relacionado ao ```input``` e ```textarea```, quando está editável | 51 | | ```:required``` | Elemento de um formulário requirido | 52 | | ```:right``` | Direita relacionado ao ```@page``` | 53 | | ```:root``` | Elemento base `````` | 54 | | ```:scope``` | Elemento que está no escopo | 55 | | ```:target``` | Elemento selecionado através de um identificador único compreendido na URL | 56 | | ```:valid``` | Elemento de um formulário válido | 57 | | ```:visited``` | Link que já foi visitado | 58 | 59 | Relaxa, não precisa decorar todos os pseudo-elementos, mas é bom ter a noção dos elementos existentes para facilitar sua vida futuramente. -------------------------------------------------------------------------------- /Modulo-Intermediario/attribute-selector.md: -------------------------------------------------------------------------------- 1 | # Seletores de Atributos 2 | 3 | Nos já vimos como usarmos o seletor de atributo "igual", onde selecionamos os elementos que contém aquele 4 | atributo com aquele exato valor, por exemplo: 5 | 6 | ```css 7 | /* Estamos pegando todos os elementos que tem o atributo type com valor "button" */ 8 | [type='button'] { 9 | width: 100px; 10 | height: 100px; 11 | background-color: red; 12 | } 13 | ``` 14 | 15 | Podemos aperfeiçoar ainda mais nossos seletores, utilizando algumas expressões a mais. 16 | 17 | ## * 18 | 19 | Para selecionar elementos que o atributo contenha algum valor específico, não importa em qual 20 | posição este valor esteja no atributo. 21 | 22 | Neste exemplo, imagine que queremos aplicar vermelho no texto de todos os links que contenham `login` 23 | no atributo `href`: 24 | 25 | ```html 26 | Login Admin 27 | Login Suporte 28 | Cadastro Suporte 29 | ``` 30 | 31 | ```css 32 | a[href*="login"] { 33 | color: red; 34 | } 35 | ``` 36 | 37 | O resultado seria este: 38 | 39 | ![](../img/Modulo-Intermediario/Attribute-Selector/contain-selector.png) 40 | 41 | ## ^ 42 | 43 | Para selecionar elementos que o atributo comece com aquele valor. 44 | 45 | Neste exemplo, imagine que queremos aplicar amarelo em todos os links que comecem com `https`: 46 | 47 | ```html 48 | Google 49 | My WebSite 50 | Twitter 51 | ``` 52 | 53 | ```css 54 | a[href^="https"] { 55 | color: yellow; 56 | } 57 | ``` 58 | 59 | O resultado seria este: 60 | 61 | ![](../img/Modulo-Intermediario/Attribute-Selector/start-with-selector.png) 62 | 63 | ## $ 64 | 65 | Para selecionar elementos que o atributo termine com aquele valor. 66 | 67 | Neste exemplo, imagine que queremos fazer algumas alterações no fundo e na cor dos links que terminam com `.pdf`: 68 | 69 | ```html 70 | Termos 71 | Video de Apresentação 72 | Contato 73 | ``` 74 | 75 | ```css 76 | a[href$=".pdf"] { 77 | background-color: red; 78 | color: #FFF; 79 | } 80 | ``` 81 | 82 | O resultado seria este: 83 | 84 | ![](../img/Modulo-Intermediario/Attribute-Selector/ends-with-selector.png) 85 | 86 | ## ~ 87 | 88 | Para selecionar os elementos que o atributo tenha aquele valor separado de outros valores por espaço. 89 | 90 | Por exemplo, imagine que alterar a cor de todos os links que tenham o valor `tag` no atributo `rel`, porém este atributo 91 | pode aceitar mais valores separados por espaço: 92 | 93 | ```html 94 | Início 95 | Sobre 96 | Contato 97 | ``` 98 | 99 | ```css 100 | a[rel~="tag"] { 101 | color: red; 102 | } 103 | ``` 104 | 105 | O resultado seria este: 106 | 107 | ![](../img/Modulo-Intermediario/Attribute-Selector/spaced-selector.png) 108 | 109 | ## | 110 | 111 | Para selecionar os elementos que o atributo tenha aquele valor separado de outros valores por hífen e que o atributo comece 112 | com aquele valor declarado. 113 | 114 | Por exemplo, imagine que alterar a cor de todos os links que tenham o valor `pt` declarado no começo do atributo `lang`, porém este atributo 115 | pode aceitar mais valores separados por hífen: 116 | 117 | ```html 118 | Contato 119 | Contact 120 | Contacto 121 | ``` 122 | 123 | ```css 124 | a[lang|="pt"] { 125 | color: green; 126 | } 127 | ``` 128 | 129 | O resultado seria este: 130 | 131 | ![](../img/Modulo-Intermediario/Attribute-Selector/hyphenated-selector.png) 132 | -------------------------------------------------------------------------------- /english/middle-module/attribute-selector.md: -------------------------------------------------------------------------------- 1 | # Seletores de Atributos 2 | 3 | Nos já vimos como usarmos o seletor de atributo "igual", onde selecionamos os elementos que contém aquele 4 | atributo com aquele exato valor, por exemplo: 5 | 6 | ```css 7 | /* Estamos pegando todos os elementos que tem o atributo type com valor "button" */ 8 | [type='button'] { 9 | width: 100px; 10 | height: 100px; 11 | background-color: red; 12 | } 13 | ``` 14 | 15 | Podemos aperfeiçoar ainda mais nossos seletores, utilizando algumas expressões a mais. 16 | 17 | ## * 18 | 19 | Para selecionar elementos que o atributo contenha algum valor específico, não importa em qual 20 | posição este valor esteja no atributo. 21 | 22 | Neste exemplo, imagine que queremos aplicar vermelho no texto de todos os links que contenham `login` 23 | no atributo `href`: 24 | 25 | ```html 26 | Login Admin 27 | Login Suporte 28 | Cadastro Suporte 29 | ``` 30 | 31 | ```css 32 | a[href*="login"] { 33 | color: red; 34 | } 35 | ``` 36 | 37 | O resultado seria este: 38 | 39 | ![](../img/Modulo-Intermediario/Attribute-Selector/contain-selector.png) 40 | 41 | ## ^ 42 | 43 | Para selecionar elementos que o atributo comece com aquele valor. 44 | 45 | Neste exemplo, imagine que queremos aplicar amarelo em todos os links que comecem com `https`: 46 | 47 | ```html 48 | Google 49 | My WebSite 50 | Twitter 51 | ``` 52 | 53 | ```css 54 | a[href^="https"] { 55 | color: yellow; 56 | } 57 | ``` 58 | 59 | O resultado seria este: 60 | 61 | ![](../img/Modulo-Intermediario/Attribute-Selector/start-with-selector.png) 62 | 63 | ## $ 64 | 65 | Para selecionar elementos que o atributo termine com aquele valor. 66 | 67 | Neste exemplo, imagine que queremos fazer algumas alterações no fundo e na cor dos links que terminam com `.pdf`: 68 | 69 | ```html 70 | Termos 71 | Video de Apresentação 72 | Contato 73 | ``` 74 | 75 | ```css 76 | a[href$=".pdf"] { 77 | background-color: red; 78 | color: #FFF; 79 | } 80 | ``` 81 | 82 | O resultado seria este: 83 | 84 | ![](../img/Modulo-Intermediario/Attribute-Selector/ends-with-selector.png) 85 | 86 | ## ~ 87 | 88 | Para selecionar os elementos que o atributo tenha aquele valor separado de outros valores por espaço. 89 | 90 | Por exemplo, imagine que alterar a cor de todos os links que tenham o valor `tag` no atributo `rel`, porém este atributo 91 | pode aceitar mais valores separados por espaço: 92 | 93 | ```html 94 | Início 95 | Sobre 96 | Contato 97 | ``` 98 | 99 | ```css 100 | a[rel~="tag"] { 101 | color: red; 102 | } 103 | ``` 104 | 105 | O resultado seria este: 106 | 107 | ![](../img/Modulo-Intermediario/Attribute-Selector/spaced-selector.png) 108 | 109 | ## | 110 | 111 | Para selecionar os elementos que o atributo tenha aquele valor separado de outros valores por hífen e que o atributo comece 112 | com aquele valor declarado. 113 | 114 | Por exemplo, imagine que alterar a cor de todos os links que tenham o valor `pt` declarado no começo do atributo `lang`, porém este atributo 115 | pode aceitar mais valores separados por hífen: 116 | 117 | ```html 118 | Contato 119 | Contact 120 | Contacto 121 | ``` 122 | 123 | ```css 124 | a[lang|="pt"] { 125 | color: green; 126 | } 127 | ``` 128 | 129 | O resultado seria este: 130 | 131 | ![](../img/Modulo-Intermediario/Attribute-Selector/hyphenated-selector.png) 132 | -------------------------------------------------------------------------------- /Modulo-Basico/2-pseudo-classes.md: -------------------------------------------------------------------------------- 1 | # Pseudo-Classes 2 | 3 | Pseudo-classes são referências utilizadas através de sufixos nos seletores, para definir um estado especial de um elemento. Este recurso é muito importante para aplicar estilo para situações específicas de maneira performática, evitando seletores extensos em cascata ou aplicação lógica através do Javascript para manipulação dinâmica. 4 | 5 | Já vimos algumas pseudo-classes nas seções anteriores como o :hover, sua sintaxe base seria: 6 | 7 | ```css 8 | seletor:pseudo-classe { 9 | propriedade: valor; 10 | } 11 | ``` 12 | 13 | Existem múltiplas pseudo-classes, cada uma com aplicação específica para alterar o estilo da página em situações e eventos de fluxo diferentes. 14 | 15 | Lista de pseudo-classes de acordo com a MDN complementada por uma pequena descrição utilizada como referência: 16 | 17 | | Valor | Descrição | 18 | | --- | --- | 19 | | ```:active``` | Utilizada em links e botões, define se um elemento alvo está ativo pela navegação do usuário | 20 | | ```:checked``` | Quando um elemento de formulário (```radio```, ```checkbox``` e ```option```) estão ativos | 21 | | ```:default``` | Elemento(s) padrão(ões) de um formulário | 22 | | ```:dir()``` | Relacionado a direção do conteúdo | 23 | | ```:disabled``` | Quando está desabilitado | 24 | | ```:empty``` | Quando está vazio | 25 | | ```:enabled``` | Quando está habilitado | 26 | | ```:first``` | Primeiro elemento | 27 | | ```:first-child``` | Primeiro elemento filho | 28 | | ```:first-of-type``` | Primeiro elemento pelo tipo | 29 | | ```:fullscreen``` | Elementos atuais em tela cheia | 30 | | ```:focus``` | Aplicado quando o elemento recebe foco | 31 | | ```:hover``` | Quando está com o mouse em cima | 32 | | ```:indeterminate``` | Quando está indeterminado (funciona com formulários) | 33 | | ```:in-range``` | Aplicado aos elementos `````` os quais o **valor atual** está compreendido no intervalo dos atributos **min** e **max** do mesmo | 34 | | ```:invalid``` | Aplicado à **elementos inválidos** de um *formulário* | 35 | | ```:lang()``` | Elementos por língua | 36 | | ```:last-child``` | Último filho | 37 | | ```:last-of-type``` | Último por tipo/grupo de elementos | 38 | | ```:left``` | Utilizado a esquerda em conjunto com o ```@page``` | 39 | | ```:link``` | Quando o elemento é um link | 40 | | ```:not()``` | Quando não tem o requisito do parâmetro | 41 | | ```:nth-child()``` | Elementos baseado em posição, exemplo: ```:nth-child(1n)``` | 42 | | ```:nth-last-child()``` | Elemento baseado no último filho | 43 | | ```:nth-last-of-type()``` | Elemento baseado no último tipo/grupo de elementos | 44 | | ```:nth-of-type()``` | Elemento por tipo/grupo de elementos | 45 | | ```:only-child``` | Elementos que são necessariamente filhos | 46 | | ```:only-of-type``` | Elementos que são especificados no tipo/grupo de elementos | 47 | | ```:optional``` | Elementos de um formulário que são opcionais | 48 | | ```:out-of-range``` | Aplicado aos elementos `````` os quais o **valor atual não está compreendido** no intervalo dos atributos **min** e **max** do mesmo | 49 | | ```:read-only``` | Relacionado ao ```input``` e ```textarea```, quando não está editável | 50 | | ```:read-write``` | Relacionado ao ```input``` e ```textarea```, quando está editável | 51 | | ```:required``` | Elemento de um formulário requirido | 52 | | ```:right``` | Direita relacionado ao ```@page``` | 53 | | ```:root``` | Elemento base `````` | 54 | | ```:scope``` | Elemento que está no escopo | 55 | | ```:target``` | Elemento selecionado através de um identificador único compreendido na URL | 56 | | ```:valid``` | Elemento de um formulário válido | 57 | | ```:visited``` | Link que já foi visitado | 58 | 59 | Relaxa, não precisa decorar todos os pseudo-elementos, mas é bom ter a noção dos elementos existentes para facilitar sua vida futuramente. 60 | 61 |
62 | 63 |
64 | 65 | **Próxima página → [Pseudo-seletores](./3-pseudo-seletores.md)** 66 | 67 |
-------------------------------------------------------------------------------- /english/README.en.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 | # css4noobs 8 | 9 |

php

10 | 11 |

Basic CSS for beginners.

12 | 13 |

14 | 15 | License MIT 16 | 17 |

18 | 19 | #### Trocar para português: [Portuguese](../README.md) 20 | 21 | ## ROADMAP 22 | 23 | ### Intro 24 | 25 | 1. [Welcome](intro/welcome.md) 26 | 2. [Communication](intro/communication.md) 27 | 3. [What do you nedd to know](intro/what-do-u-need-to-know.md) 28 | 4. [What is CSS](intro/what-is-css.md) 29 | 5. [How CSS works](intro/how-css-works.md) 30 | 6. [What are its advantages](intro/what-are-its-advantages.md) 31 | 7. [Adding CSS into our HTML](intro/adding-css-into-html.md) 32 | 33 | ### Environment configuration 34 | 35 | 1. [Environment and Application](environment/plugins.md) 36 | 37 | ### Basic module (It was not translated yet) 38 | 39 | 1. [Selectors](basic-module/selectors.md) 40 | 2. [Box Model](basic-module/box-model.md) 41 | 3. [Box Shadow](basic-module/box-shadow.md) 42 | 4. [Background](basic-module/background.md) 43 | 5. [Border](basic-module/border.md) 44 | 6. [Border Radius](basic-module/border-radius.md) 45 | 7. [Text manipultion (color, font, links, text)](basic-module/manipulacao-texto.md) 46 | 8. [Display](basic-module/display.md) 47 | 9. [Position](basic-module/position.md) 48 | 10. [Z-index](basic-module/z-index.md) 49 | 11. [Units](basic-module/units.md) 50 | 12. [Transition](basic-module/transition.md) 51 | 52 | ### Middle module (It was not translated yet) 53 | 54 | 55 | 1. [Pseudo-classes](middle-module/pseudo-classes.md) 56 | 2. [Pseudo-selectors](middle-module/pseudo-seletores.md) 57 | 3. [Flexbox](middle-module/flexbox.md) 58 | 4. [CSS Grid](middle-module/css-grid.md) 59 | 5. [Variables CSS](middle-module/variables.md) 60 | 6. [PostCSS](middle-module/postcss.md) 61 | 62 | #### References 63 | 64 | - [https://cdn.rawgit.com/hostinger/banners/94941d64/tutorials/pdf/CSS-3-Cheatsheet.pdf](https://cdn.rawgit.com/hostinger/banners/94941d64/tutorials/pdf/CSS-3-Cheatsheet.pdf) 65 | - [https://www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/](https://www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/) 66 | - [https://www.w3schools.com/css/default.asp](https://www.w3schools.com/css/default.asp) 67 | 68 | ## How to contribute 69 | 70 | Contributions make open source community a wonderful place to learn, inspire and create. All contributions are **extremely appreciated** 71 | 72 | 1. Make a fork 73 | 2. Create a branch with a new feature ('git checkout -b feature/feature-css') 74 | 3. Make a commit (`git commit -m 'Add some feature-css'`) 75 | 4. Push your changes (`git push origin feature/feature-css`) 76 | 5. Open a pull request 77 | 78 | 79 | ## Authors 80 | 81 | - **Matheus Henrique (math95)** - _Developer & Member of He4rt Developers_ - [Twitter](https://twitter.com/math__95) 82 | 83 | - **Guilherme Vieira (@gitlherme)** - _Developer at Just Digital, member of He4rt Developers and organizer at @perifacode_ - [Twitter](https://twitter.com/gitlherme) 84 | 85 | - **Gabriel Angelo (Angells1)** - _Frontend Developer & Member of He4rt Developers_ [Twitter](https://twitter.com/edea_dinsid) 86 | 87 | - **Igor Wessel (igorwessel)** - _Developer & Member of He4rt Developers_ [Twitter](https://twitter.com/igor_wessel) 88 | 89 | - **Giovane Cardoso (Novout)** - _Developer & Member of He4rt Developers_ [Twitter](https://twitter.com/NovoutT) 90 | 91 |

92 | 93 | 94 | 95 |

96 | -------------------------------------------------------------------------------- /english/basic-module/selectors.md: -------------------------------------------------------------------------------- 1 | # Seletores - O que diabos é isso? 2 | 3 | Seletor simplesmente é você informar quais elementos se aplicam a uma regra (estilo) definida por você, **devemos ficar atento pois o seletor pega todos os elementos que ele encontra.** 4 | 5 | ## Seletor com elemento 6 | 7 | Para selecionar qualquer elemento pela tag dele, simplesmente coloque tag, exemplo: 8 | 9 | No HTML 10 | 11 | ```html 12 |
13 | ``` 14 | 15 | No CSS 16 | 17 | ```css 18 | div { 19 | width: 100px; 20 | height: 100px; 21 | background-color: red; 22 | } 23 | ``` 24 | 25 | ## Seletor com ID 26 | 27 | Para selecionar qualquer elemento pelo o id dele, devemos colocar uma cerquilha `#` antes de colocar qual o id do elemento, segue exemplo abaixo: 28 | 29 | No HTML 30 | 31 | ```html 32 |
33 | ``` 34 | 35 | No CSS 36 | 37 | ```css 38 | #exemplo { 39 | width: 100px; 40 | height: 100px; 41 | background-color: red; 42 | } 43 | ``` 44 | 45 | ## Seletor com Classe 46 | 47 | Para selecionar qualquer elemento pela classe, devemos colocar um ponto final `.` antes de referenciar pela classe, segue exemplo: 48 | 49 | No HTML 50 | 51 | ```html 52 |
53 | ``` 54 | 55 | No CSS 56 | 57 | ```css 58 | .exemplo { 59 | width: 100px; 60 | height: 100px; 61 | background-color: red; 62 | } 63 | ``` 64 | 65 |

66 | Importante dizer que ira pegar todos os elementos com a classe referenciada. 67 |

68 | 69 | ## Seletor com atributo 70 | 71 | Não estamos presos a somente selecionar pela classe ou id do elemento, podemos tambem selecionar pelo atributo usando colchetes `[ ]` colocando o nome do atributo e opcionalmente um operador seguido pelo valor dele. 72 | 73 | No HTML 74 | 75 | ```html 76 |
77 | 78 |
79 | ``` 80 | 81 | No CSS 82 | 83 | ```css 84 | /* Estamos pegando todos os elementos que tem o atributo type com valor "button" */ 85 | [type='button'] { 86 | width: 100px; 87 | height: 100px; 88 | background-color: red; 89 | } 90 | ``` 91 | 92 | ## Seletor com pseudo-classes 93 | 94 | Uma pseudo-classe basicamente é uma classe que automaticamente o navegador adiciona em certas ocasiões, por exemplo quando você clica em botão, passa por cima de elemento, visita algum link. 95 | 96 | Para usarmos pseudo-classe vamos adicionar na frente do seletor dois pontos `:` e a pseudo-classe, exemplo: 97 | 98 | No HTML 99 | 100 | ```html 101 |
102 | ``` 103 | 104 | No CSS 105 | 106 | ```css 107 | /* Hover é a pseudo classe para quando a mouse passa sobre o elemento */ 108 | .exemplo:hover { 109 | background-color: blue; 110 | } 111 | ``` 112 | 113 | A lista de pseudo-classes são as abaixo: 114 | 115 | - :link 116 | - :visited 117 | - :active 118 | - :hover 119 | - :focus 120 | - :first-child 121 | - :last-child 122 | - :nth-child 123 | - :nth-last-child 124 | - :nth-of-type 125 | - :first-of-type 126 | - :last-of-type 127 | - :empty 128 | - :target 129 | - :checked 130 | - :enabled 131 | - :disabled 132 | 133 | ## Para finalizar 134 | 135 | Podemos combinar todos esses seletores, por exemplo podemos pegar todos elementos div com a class vermelho: 136 | 137 | No HTML 138 | 139 | ```html 140 |
141 |
142 |
143 | 146 | ``` 147 | 148 | No CSS 149 | 150 | ```css 151 | /* O nosso elemento button não vai entrar no estilo abaixo, pois ele não é uma div */ 152 | 153 | div.vermelho { 154 | background-color: red; 155 | } 156 | 157 | /* Estamos pegando todos os elementos com tag span que tenha a ID font_red */ 158 | 159 | span#font_red { 160 | color: red; 161 | } 162 | 163 | /* Vamos pegar agora todos os button dentro da div */ 164 | 165 | div button { 166 | background-color: blue; 167 | } 168 | ``` 169 | -------------------------------------------------------------------------------- /Introducao/5-adicionando-css-no-html.md: -------------------------------------------------------------------------------- 1 | # Adicionando CSS nas páginas HTML 2 | 3 | Há 3 formas comuns de se adicionar estilos à um documento HTML. Usando a tag ` 29 | 30 | 31 |
32 |

Box

33 |
34 | 35 | 36 | ``` 37 | 38 |
39 | 40 | --- 41 | 42 |
43 | 44 | ## Style externo - Link 45 | 46 | O estilo externo é a forma mais comum de se trabalhar com CSS. Ele consiste no uso de uma tag `` contendo uma URL apontando para o arquivo CSS. Dessa forma, ao identificar a tag o navegador irá baixar a folha de estilos e associar ao documento de HTML que a contém. 47 | 48 | Um HTML pode conter múltiplas folhas de estilo, sendo a ordem de prioridade entre elas da última para primeira. 49 | 50 | Suponhamos que nossa estrutura de pastas está da seguinte forma: 51 | 52 | ![No VSCode, pasta chamada "projeto" contendo um arquivo index.html](../img/Introducao/projeto-1.png) 53 | 54 |
55 | 56 | Quando trabalhamos com múltiplos arquivos `.css`, é comum agrupá-los dentro de uma mesma pasta: 57 | 58 | ![o VSCode, pasta chamada "projeto" contendo um arquivo index.html e uma pasta com o nome de css contendo o arquivo main.css](../img/Introducao/projeto-2.png) 59 | 60 |
61 | 62 | Pensando no exemplo acima, o carregamento do arquivo CSS `main.css` usando a tag `` ficaria da seguinte maneira: 63 | 64 | ```html 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 |

Box

73 |
74 | 75 | 76 | ``` 77 |
78 | 79 | Em que: 80 | - __rel__ - Esse atributo sinaliza ao navegador que o recurso a ser baixado é uma folha de estilo. Isso faz com que ele seja identificado com o tipo `text/css` e seja baixado com alta prioridade. 81 | - __href__ - Um atributo de __hyperlink reference__. Ele recebe o link para a folha de estilo, podendo se referir à um arquivo local (ex: `./style.css`) ou um arquivo remoto. 82 | 83 |
84 | 85 | --- 86 | 87 |
88 | 89 | ## Atributo style - Style Inline 90 | 91 | O atributo _style_, também conhecido como style inline é usado diretamente em qualquer elemento HTML, definindo propriedades CSS pra apenas pro elemento que a possuí. Cada elemento pode possuir apenas um atributo `style` e ele pode receber um ou mais estilos CSS, na mesma sintaxe `propriedade: valor;`. 92 | 93 | ```html 94 | 95 | 96 | CSS Inline 97 | 98 | 99 |
100 | 101 |

Box

102 |
103 | 104 | 105 | ``` 106 | 107 | O estilo inline não é muito recomendado por ter uma especificidade muito alta e difícil replicabilidade e manutenção - você precisa escrever diretamente em todas as tags que vai estilizar, tornando-o difícil de manter. 108 | 109 | Um jeito seguro de usar estilos inline é passando [variáveis CSS](../Modulo-Intermediario/variables.md). 110 | 111 | 112 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 | # css4noobs 8 | 9 |

php

10 | 11 |

CSS básico para iniciantes.

12 | 13 |

14 | 15 | License MIT 16 | 17 |

18 | 19 | #### Switch to english: [English](english/README.en.md) 20 | 21 | ## ROADMAP 22 | 23 | ### Introdução 24 | 25 | 1. [Boas Vindas](/Introducao/1-boas-vindas.md) 26 | 2. [Como Contribuir](/Introducao/2-como-contribuir.md) 27 | 3. [O que é CSS?](/Introducao/3-o-que-e-css.md) 28 | 4. [Como o CSS funciona?](/Introducao/4-como-o-css-funciona.md) 29 | 5. [Adicionando CSS no HTML](/Introducao/5-adicionando-css-no-html.md) 30 | 31 | ### Configuração de Ambiente 32 | 33 | 1. [Ambiente e Aplicação](/Ambiente/plugins.md) 34 | 35 | ### Módulo Básico 36 | 37 | 1. [Seletores](/Modulo-Basico/1-selectors.md) 38 | 2. [Pseudo-classes](/Modulo-Intermediario/2-pseudo-classes.md) 39 | 3. [Pseudo-seletores](/Modulo-Intermediario/3-pseudo-seletores.md) 40 | 4. [Box Model](/Modulo-Basico/4-box-model.md) 41 | 5. [Display](/Modulo-Basico/5-display.md) 42 | 6. [Units](/Modulo-Basico/6-units.md) 43 | 7. [Position](/Modulo-Basico/7-position.md) 44 | 8. [Z-index](/Modulo-Basico/8-z-index.md) 45 | 9. [Background](/Modulo-Basico/9-background.md) 46 | 10. [Border](/Modulo-Basico/10-border.md) 47 | 11. [Border Radius](/Modulo-Basico/11-border-radius.md) 48 | 12. [Box Shadow](/Modulo-Basico/12-box-shadow.md) 49 | 13. [Transition](/Modulo-Basico/13-transition.md) 50 | 14. [Manipulação de Texto (color, font, links, text)](/Modulo-Basico/15-manipulacao-texto.md) 51 | 52 | ### Módulo Intermediário 53 | 54 | 3. [Flexbox](/Modulo-Intermediario/flexbox.md) 55 | 4. [CSS Grid](/Modulo-Intermediario/css-grid.md) 56 | 5. [Variáveis CSS](/Modulo-Intermediario/variables.md) 57 | 6. [PostCSS](/Modulo-Intermediario/postcss.md) 58 | 7. [Funções](/Modulo-Intermediario/variables.md) 59 | 60 | #### Referências 61 | 62 | - [https://cdn.rawgit.com/hostinger/banners/94941d64/tutorials/pdf/CSS-3-Cheatsheet.pdf](https://cdn.rawgit.com/hostinger/banners/94941d64/tutorials/pdf/CSS-3-Cheatsheet.pdf) 63 | - [https://www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/](https://www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/) 64 | - [https://www.w3schools.com/css/default.asp](https://www.w3schools.com/css/default.asp) 65 | 66 | ## Como Contribuir 67 | 68 | Contribuições fazem com que a comunidade open source seja um lugar incrível para aprender, inspirar e criar. Todas contribuições 69 | são **extremamente apreciadas** 70 | 71 | 1. Realize um Fork do projeto 72 | 2. Crie um branch com a nova feature (`git checkout -b feature/feature-css`) 73 | 3. Realize o Commit (`git commit -m 'Add some feature-css'`) 74 | 4. Realize o Push no Branch (`git push origin feature/feature-css`) 75 | 5. Abra um Pull Request 76 | 77 | ## Autores 78 | 79 | - **Matheus Henrique (math95)** - _Developer & Member of He4rt Developers_ - [Twitter](https://twitter.com/math__95) 80 | 81 | - **Guilherme Vieira (@gitlherme)** - _Developer at Just Digital, member of He4rt Developers and organizer at @perifacode_ - [Twitter](https://twitter.com/gitlherme) 82 | 83 | - **Gabriel Angelo (Angells1)** - _Frontend Developer & Member of He4rt Developers_ [Twitter](https://twitter.com/edea_dinsid) 84 | 85 | - **Igor Wessel (igorwessel)** - _Developer & Member of He4rt Developers_ [Twitter](https://twitter.com/igor_wessel) 86 | 87 | - **Giovane Cardoso (Novout)** - _Developer & Member of He4rt Developers_ [Twitter](https://twitter.com/NovoutT) 88 | 89 |

90 | 91 | 92 | 93 |

94 | -------------------------------------------------------------------------------- /Modulo-Intermediario/functions.md: -------------------------------------------------------------------------------- 1 | # Funções CSS 2 | 3 | Usar funções no CSS nos possibilita trabalhar com algumas variáveis e operações lógicas que podem 4 | facilitar a maneira que construímos nossos estilos. 5 | 6 | ## attr() 7 | 8 | A função attr() é capaz de capturar algum atributo/parâmetro do elemento ao qual ela está sendo utilizada. 9 | 10 | Vamos capturar o href do elemento `a` a seguir: 11 | 12 | `He4rt` 13 | 14 | No nosso CSS, iremos colocar o link entre colchetes ( [] ) no nosso pseudo-elemento `::after`. 15 | 16 | ``` 17 | a { 18 | color: violet; 19 | } 20 | a:after { 21 | content: " [" attr(href) "]"; 22 | } 23 | ``` 24 | 25 | Nosso retorno no HTML, é parecido com isto: 26 | 27 | ``` 28 | He4rt [https://heartdevs.com/] 29 | ``` 30 | 31 | ## calc() 32 | 33 | A função calc() é capaz de fazer cálculos sobre os valores e medidas no CSS. 34 | 35 | Digamos que queremos que o container ocupe 100% da tela menos 20px. Podemos usar o calc() para isso desta maneira: 36 | 37 | ``` 38 | .container { 39 | width: calc(100% - 20px); 40 | } 41 | ``` 42 | 43 | Os operadores que podemos usar nele são: adição, subtração, divisão e multiplicação. 44 | 45 | ## hsl() 46 | 47 | A função hsl() define uma cor utilizando o sistema HSL. ela recebe 3 variáveis: o espectro, a saturação e a iluminação. 48 | 49 | | Variável | Valor | 50 | | ---------- | ------------------------------------------------ | 51 | | espectro | 0 a 360, sendo 0 vermelho, 120 verde, e 240 azul | 52 | | saturação | 0% a 100%, sendo 0% esmaecido e 100% intenso | 53 | | iluminação | 0% a 100%, sendo 0% preto e 100% branco | 54 | 55 | Sabendo os parâmetros que precisamos usar, para aplicar o o hsl() siga o exemplo abaixo: 56 | 57 | ``` 58 | div { 59 | background-color: hsl(120, 60%, 70%); 60 | } 61 | ``` 62 | 63 | ## hsla() 64 | 65 | A função hsla() define uma cor utilizando o sistema HSL e Alfa. ela recebe 4 variáveis: o espectro, a saturação, a iluminação e o alfa. 66 | 67 | | Variável | Valor | 68 | | ---------- | --------------------------------------------------------- | 69 | | espectro | 0 a 360, sendo 0 vermelho, 120 verde, e 240 azul | 70 | | saturação | 0% a 100%, sendo 0% esmaecido e 100% intenso | 71 | | iluminação | 0% a 100%, sendo 0% preto e 100% branco | 72 | | alfa | 0 a 1, sendo 0 transparente e 1 opaco (sem transparência) | 73 | 74 | Sabendo os parâmetros que precisamos usar, para aplicar o o hsla() siga o exemplo abaixo: 75 | 76 | ``` 77 | div { 78 | background-color: hsl(120, 60%, 70%, 0.5); 79 | } 80 | ``` 81 | 82 | ## linear-gradient() 83 | 84 | A função linear-gradient() define gradiente de cor em uma direção para ser usado como background. 85 | 86 | A função recebe um parâmetro como direção/ângulo, e pelo menos 2 parâmetros de cor. 87 | 88 | | Direção | Descrição | 89 | | --------------- | ------------------------------ | 90 | | 180deg | 180 graus | 91 | | to right | para direita | 92 | | to bottom right | diagonal: para baixo e direita | 93 | | to top | para cima | 94 | 95 | Para aplicar o linear-gradient(), siga o exemplo abaixo: 96 | 97 | ``` 98 | div { 99 | background-image: linear-gradient(to top right, white, black); 100 | } 101 | ``` 102 | 103 | ## rgb() 104 | 105 | A função rgb() define uma cor utilizando o sistema RGB com valores de 0 à 255 ou de 0% a 100% para cada canal. ela recebe 3 variáveis: red, green e blue. 106 | 107 | Para aplicar a função rgb(), siga o exemplo abaixo: 108 | 109 | ``` 110 | div { 111 | background-color: rgb(128,128,128); 112 | } 113 | ``` 114 | 115 | ## rgba() 116 | 117 | A função rgba() define uma cor utilizando alfa e o sistema RGB com valores de 0 à 255 ou de 0% a 100% para cada canal. ela recebe 4 variáveis: red, green, blue e o alfa. 118 | 119 | Para aplicar a função rgba(), siga o exemplo abaixo: 120 | 121 | ``` 122 | div { 123 | background-color: rgb(128,128,128, 0.5); 124 | } 125 | ``` 126 | 127 | ## url() 128 | 129 | A função url() define um link para um arquivo externo no CSS. 130 | 131 | Por exemplo, para buscar uma imagem: 132 | 133 | ``` 134 | div { 135 | background-image: url("https://heartdevs.com/dist/images/logo-he4rt2.png"); 136 | } 137 | ``` 138 | -------------------------------------------------------------------------------- /english/basic-module/border.md: -------------------------------------------------------------------------------- 1 | # Border - O que diabos é isso? 2 | 3 | A propriedade `border` permite adicionar uma borda no seu elemento e definir um estilo (`border-style`), largura (`border-width`) e cor (`border-color`). 4 | 5 | Assim como a propriedade `margin` e `padding` ela também irá compor o seu [_box-model_](./box-model.md). 6 | 7 | Você pode definir a propriedade em uma única declaração, as chamadas _shorthands_, por exemplo: 8 | 9 | ```css 10 | border: 5px solid #c6c6c6; 11 | ``` 12 | 13 | Você pode ler essa mesma linha acima sendo: 14 | 15 | ```css 16 | border: [border-width] [border-style] [border-color]; 17 | ``` 18 | 19 | ## Largura da borda (border-width) 20 | 21 | Essa propriedade permite que você defina qual a largura será aplicada para a borda, podendo também especificar um tamanho para cada lado. 22 | 23 | Você pode definir a largura da borda utilizando alguma unidade como px, pt, cm, em, % e outras, ou pode também utilizar valores pre-definidos como _thin_, _medium_ e _thick_ 24 | 25 | ```css 26 | border-style: solid; 27 | border-width: 5px; 28 | ``` 29 | 30 |
31 | 32 | ```css 33 | border-style: solid; 34 | border-width: medium; 35 | ``` 36 | 37 |
38 | 39 | ```css 40 | border-style: dotted; 41 | border-width: 5px; 42 | ``` 43 | 44 |
45 | 46 | ## Estilo da borda (border-style) 47 | 48 | Essa propriedade define qual estilo a sua borda terá, podendo aplicar um estilo único para todo o elemento ou definir até 4 tipos diferentes, sendo um para cada lado do elemento (superior, inferior, esquerda e direita). 49 | 50 | Você pode aplicar os seguintes estilos: 51 | 52 | `dotted` - A borda será preenchida com pontos
53 |
54 | `dashed` - A borda será preenchida com traços
55 |
56 | `solid` - A borda possuirá um preenchimento sólido
57 |
58 | `double` - A borda será composta por dois traços sólidos
59 |
60 | `groove` - Aplica um padrão de sombra com aparência 3D
61 |
62 | `ridge` - Aplica um padrão de sombra elevada com aparência 3D
63 |
64 | `inset` - Aplica um padrão de sombra em baixo relevo com efeito 3D
65 |
66 | `outset` - Aplica um padrnao de sombra em alto relevo com efeito 3D
67 |
68 | `none` - Não exibe borda no elemento
69 | `hidden` - Oculta a borda do elemento
70 | 71 | Você também pode aplicar um estilo individual para cada lado do seu elemento, como no exemplo a baixo: 72 | 73 | ```css 74 | border-style: double dotted solid dashed; 75 | ``` 76 | 77 |
78 | 79 | ## Cor da borda (border-color) 80 | 81 | Essa propriedade permite que você defina qual cor será aplicada na borda. Você pode setar as cores como: 82 | 83 | **nome** - Pode especificar a cor pelo nome, como 'red' ou 'black'
84 | 85 | **HEX** - Define a cor através de um valor hexadecimal como #FFFFFF ou ##af47ff
86 | 87 | **RGB** - Define a cor através de um valor da curva rgb, como _rgb(255,255,255)_
88 | 89 | **HSL** - Define a cor através de um valor definido por hue, saturação e luminosidade como _hsl(0, 100%, 50%)_
90 | 91 | **transparent** - Não define uma cor, mas ainda irá ocupar o espaço definido pelo `border-width`
92 | 93 | **_OBS_**: Caso não seja definido nenhuma cor para a borda, ela aplicará a cor do elemento. 94 | 95 | ```css 96 | border-color: orange; 97 | ``` 98 | 99 |
100 | 101 | ```css 102 | border-color: rgb(235, 52, 85); 103 | ``` 104 | 105 |
106 | 107 | ```css 108 | border-color: #663681; 109 | ``` 110 | 111 |
112 | 113 | Todas essas declarações `border-width`, `border-color` ou `border-style` também podem ser feitas passando especificamente em qual lado você quer aplicar. Essa solução se aplica quando você não pretende aplicar a borda em todo o elemento. 114 | 115 | ```css 116 | border-top-color: #663681; 117 | border-top-style: dashed; 118 | border-top-width: 2px; 119 | 120 | border-bottom-color: #b32d88; 121 | border-bottom-style: dotted; 122 | border-bottom-width: thick; 123 | 124 | border-left-color: #ffa436; 125 | border-left-style: solid; 126 | 127 | border-right-color: #28cef7; 128 | border-right-style: double; 129 | border-right-width: 10px; 130 | ``` 131 | 132 |
133 | -------------------------------------------------------------------------------- /Modulo-Basico/10-border.md: -------------------------------------------------------------------------------- 1 | # Border - O que diabos é isso? 2 | 3 | A propriedade `border` permite adicionar uma borda no seu elemento e definir um estilo (`border-style`), largura (`border-width`) e cor (`border-color`). 4 | 5 | Assim como a propriedade `margin` e `padding` ela também irá compor o seu [_box-model_](./box-model.md). 6 | 7 | Você pode definir a propriedade em uma única declaração, as chamadas _shorthands_, por exemplo: 8 | 9 | ```css 10 | border: 5px solid #c6c6c6; 11 | ``` 12 | 13 | Você pode ler essa mesma linha acima sendo: 14 | 15 | ```css 16 | border: [border-width] [border-style] [border-color]; 17 | ``` 18 | 19 | ## Largura da borda (border-width) 20 | 21 | Essa propriedade permite que você defina qual a largura será aplicada para a borda, podendo também especificar um tamanho para cada lado. 22 | 23 | Você pode definir a largura da borda utilizando alguma unidade como px, pt, cm, em, % e outras, ou pode também utilizar valores pre-definidos como _thin_, _medium_ e _thick_ 24 | 25 | ```css 26 | border-style: solid; 27 | border-width: 5px; 28 | ``` 29 | 30 |
31 | 32 | ```css 33 | border-style: solid; 34 | border-width: medium; 35 | ``` 36 | 37 |
38 | 39 | ```css 40 | border-style: dotted; 41 | border-width: 5px; 42 | ``` 43 | 44 |
45 | 46 | ## Estilo da borda (border-style) 47 | 48 | Essa propriedade define qual estilo a sua borda terá, podendo aplicar um estilo único para todo o elemento ou definir até 4 tipos diferentes, sendo um para cada lado do elemento (superior, inferior, esquerda e direita). 49 | 50 | Você pode aplicar os seguintes estilos: 51 | 52 | `dotted` - A borda será preenchida com pontos
53 |
54 | `dashed` - A borda será preenchida com traços
55 |
56 | `solid` - A borda possuirá um preenchimento sólido
57 |
58 | `double` - A borda será composta por dois traços sólidos
59 |
60 | `groove` - Aplica um padrão de sombra com aparência 3D
61 |
62 | `ridge` - Aplica um padrão de sombra elevada com aparência 3D
63 |
64 | `inset` - Aplica um padrão de sombra em baixo relevo com efeito 3D
65 |
66 | `outset` - Aplica um padrnao de sombra em alto relevo com efeito 3D
67 |
68 | `none` - Não exibe borda no elemento
69 | `hidden` - Oculta a borda do elemento
70 | 71 | Você também pode aplicar um estilo individual para cada lado do seu elemento, como no exemplo a baixo: 72 | 73 | ```css 74 | border-style: double dotted solid dashed; 75 | ``` 76 | 77 |
78 | 79 | ## Cor da borda (border-color) 80 | 81 | Essa propriedade permite que você defina qual cor será aplicada na borda. Você pode setar as cores como: 82 | 83 | **nome** - Pode especificar a cor pelo nome, como 'red' ou 'black'
84 | 85 | **HEX** - Define a cor através de um valor hexadecimal como #FFFFFF ou ##af47ff
86 | 87 | **RGB** - Define a cor através de um valor da curva rgb, como _rgb(255,255,255)_
88 | 89 | **HSL** - Define a cor através de um valor definido por hue, saturação e luminosidade como _hsl(0, 100%, 50%)_
90 | 91 | **transparent** - Não define uma cor, mas ainda irá ocupar o espaço definido pelo `border-width`
92 | 93 | **_OBS_**: Caso não seja definido nenhuma cor para a borda, ela aplicará a cor do elemento. 94 | 95 | ```css 96 | border-color: orange; 97 | ``` 98 | 99 |
100 | 101 | ```css 102 | border-color: rgb(235, 52, 85); 103 | ``` 104 | 105 |
106 | 107 | ```css 108 | border-color: #663681; 109 | ``` 110 | 111 |
112 | 113 | Todas essas declarações `border-width`, `border-color` ou `border-style` também podem ser feitas passando especificamente em qual lado você quer aplicar. Essa solução se aplica quando você não pretende aplicar a borda em todo o elemento. 114 | 115 | ```css 116 | border-top-color: #663681; 117 | border-top-style: dashed; 118 | border-top-width: 2px; 119 | 120 | border-bottom-color: #b32d88; 121 | border-bottom-style: dotted; 122 | border-bottom-width: thick; 123 | 124 | border-left-color: #ffa436; 125 | border-left-style: solid; 126 | 127 | border-right-color: #28cef7; 128 | border-right-style: double; 129 | border-right-width: 10px; 130 | ``` 131 | 132 |
133 | 134 |
135 | 136 |
137 | 138 | **Próxima página → [Border-radius](./11-border-radius.md)** 139 | 140 |
-------------------------------------------------------------------------------- /english/basic-module/display.md: -------------------------------------------------------------------------------- 1 | # Display - desmistificando block, inline e inline-block 2 | 3 | Nesse modulo iremos aprender umas das propriedades mais importantes do css, o famigerado **Display** que influencia na forma como os elementos são dispostos na tela. Por **padrão** o display do elemento pode vir setado de duas formas diferentes: Block e Inline. 4 | 5 | ## Tudo são Boxes 6 | 7 | Antes de partimos, você precisa ter outra visão sobre os elementos HTML. Toda vez que colocar um elemento qualquer em sua página (seja ele um titulo, um parágrafo, ou qualquer outro) tenha em mente que está colocando uma "caixa", mesmo que não veja a delimitação dessa caixa, o seu elemento se comportará como uma, se precisar de alguma forma visualizar essa delimitação, faça uso de bordas ou backgrounds para entender melhor. Guarde isso, pois precisará para entender os principais tipos de posicionamento especialmente o que vamos aprender agora. 8 | 9 | ## Display Block 10 | 11 | Começando pelo mais simples, o display block possui duas características básicas: ele sempre ocupa todo espaço disponível na horizontal e sempre começará a partir de uma **nova** linha. 12 | 13 | ### Vamos para o exemplo, irei criar dois elementos button. 14 | 15 | HTML 16 | 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | ### Resultado 23 | 24 | ![Btn](../img/block-buttons.gif) 25 | 26 | ### Agora vamos aplicar o display block no primeiro button e você verá a mágica acontecendo. 27 | 28 | CSS 29 | 30 | ```css 31 | .btn { 32 | display: block; 33 | } 34 | ``` 35 | 36 | ### Resultado 37 | 38 | ![Btn](../img/block-buttons2.gif) 39 | 40 | Note o efeito resultante, o simples fato do primeiro button ter o display block joga o elemento concorrente para a linha seguinte. 41 | 42 | ### Algumas considerações 43 | 44 | Mesmo que elementos block ocupem todo o espaço horizontalmente, você pode setar o tamanho desejado, ao contrário de outros elementos que veremos nesse mesmo módulo. 45 | 46 | É importante você ter em mente quais elementos possuem display block por padrão, portanto listarei alguns abaixo: 47 | 48 | - div 49 | - Todos elementos de título (h1 ao h6) 50 | - p 51 | - form 52 | - header 53 | - footer 54 | - section 55 | 56 | ## Display Inline 57 | 58 | O display inline também possui um funcionamento bastante simples, podemos dizer que se o display block ocupa todo espaço disponível, o display inline é totalmente o contrário, ocupando somente o tamanho correspondente ao seu conteúdo. Vamos aos exemplos. 59 | 60 | Html 61 | 62 | ```html 63 |

Titulo maior 1

64 |

Titulo 2

65 | ``` 66 | 67 | Novamente criei dois elementos. Nesse caso terei que aplicar a propriedade em ambos, uma vez que são elementos block, então sempre partem da próxima linha. 68 | 69 | (Irei colocar um background para melhor visualização dos efeitos do inline, mas você pode ignora-lo por enquanto) 70 | 71 | ```css 72 | .inline { 73 | background: gray; 74 | } 75 | ``` 76 | 77 | ### Resultado 78 | 79 | ![Btn](../img/inline1.png) 80 | 81 | ### Aplicando o Inline 82 | 83 | ```css 84 | .inline { 85 | display: inline; 86 | background: gray; 87 | } 88 | ``` 89 | 90 | ### Resultado 91 | 92 | ![Btn](../img/inline2.png) 93 | 94 | Note que o tamanho do elemento é determinado **apenas** pelo seu conteúdo. 95 | 96 | ### Observações 97 | 98 | Algo muito importante sobre o display inline é que ele não obedece nenhum tipo de definição de largura ou altura, sendo assim, seu tamanho é definido somente pelo seu conteúdo interno. 99 | 100 | ## Display Inline-Block 101 | 102 | Como o nome já sugere, o inline-block é uma "junção" dos dois anteriores, com algumas particularidades. À primeira vista pode parecer um pouco complexo, mas é exatamente o que o nome sugere. Com Inline-block você tem um comportamento inline, ou seja, por padrão o elemento irá ocupar o espaço demandado pelo seu conteúdo, mas com uma característica herdada do display block, você pode setar o tamanho (largura e altura) que desejar sem restrições. 103 | 104 | Irei usar a mesma estrutura do anterior 105 | 106 | HTML 107 | 108 | ```html 109 |

Titulo maior 1

110 |

Titulo 2

111 | ``` 112 | 113 | Aqui estou setando a largura (width) de 250 pixels, a altura (height) de 50 pixels, o display e um background cinza. 114 | 115 | ```css 116 | .inline-block { 117 | display: inline-block; 118 | background: gray; 119 | width: 250px; 120 | height: 50px; 121 | } 122 | ``` 123 | 124 | ### Resultado 125 | 126 | ![Btn](../img/inline-block1.png) 127 | 128 | Observe que mesmo o segundo elemento possuindo um conteúdo menor que o primeiro, os dois possuem mesma largura e altura, pois setamos isso anteriormente. Mas se não tivessemos setado, ambos teriam seus tamanhos próprios. 129 | 130 | ## Concluindo 131 | 132 | Saber bem todas essas propriedades é requisito quase obrigatório se você quiser controlar bem seus Layouts e são pré-requisitos para aprender algumas outras propriedades mais avançadas, por isso pratique todos e tenha-os em mente. Obrigado por ler até aqui e até a próxima :zap: 133 | -------------------------------------------------------------------------------- /Modulo-Basico/5-display.md: -------------------------------------------------------------------------------- 1 | # Display - desmistificando block, inline e inline-block 2 | 3 | Nesse modulo iremos aprender umas das propriedades mais importantes do css, o famigerado **Display** que influencia na forma como os elementos são dispostos na tela. Por **padrão** o display do elemento pode vir setado de duas formas diferentes: Block e Inline. 4 | 5 | ## Tudo são Boxes 6 | 7 | Antes de partimos, você precisa ter outra visão sobre os elementos HTML. Toda vez que colocar um elemento qualquer em sua página (seja ele um titulo, um parágrafo, ou qualquer outro) tenha em mente que está colocando uma "caixa", mesmo que não veja a delimitação dessa caixa, o seu elemento se comportará como uma, se precisar de alguma forma visualizar essa delimitação, faça uso de bordas ou backgrounds para entender melhor. Guarde isso, pois precisará para entender os principais tipos de posicionamento especialmente o que vamos aprender agora. 8 | 9 | ## Display Block 10 | 11 | Começando pelo mais simples, o display block possui duas características básicas: ele sempre ocupa todo espaço disponível na horizontal e sempre começará a partir de uma **nova** linha. 12 | 13 | ### Vamos para o exemplo, irei criar dois elementos button. 14 | 15 | HTML 16 | 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | ### Resultado 23 | 24 | ![Btn](../img/block-buttons.gif) 25 | 26 | ### Agora vamos aplicar o display block no primeiro button e você verá a mágica acontecendo. 27 | 28 | CSS 29 | 30 | ```css 31 | .btn { 32 | display: block; 33 | } 34 | ``` 35 | 36 | ### Resultado 37 | 38 | ![Btn](../img/block-buttons2.gif) 39 | 40 | Note o efeito resultante, o simples fato do primeiro button ter o display block joga o elemento concorrente para a linha seguinte. 41 | 42 | ### Algumas considerações 43 | 44 | Mesmo que elementos block ocupem todo o espaço horizontalmente, você pode setar o tamanho desejado, ao contrário de outros elementos que veremos nesse mesmo módulo. 45 | 46 | É importante você ter em mente quais elementos possuem display block por padrão, portanto listarei alguns abaixo: 47 | 48 | - div 49 | - Todos elementos de título (h1 ao h6) 50 | - p 51 | - form 52 | - header 53 | - footer 54 | - section 55 | 56 | ## Display Inline 57 | 58 | O display inline também possui um funcionamento bastante simples, podemos dizer que se o display block ocupa todo espaço disponível, o display inline é totalmente o contrário, ocupando somente o tamanho correspondente ao seu conteúdo. Vamos aos exemplos. 59 | 60 | Html 61 | 62 | ```html 63 |

Titulo maior 1

64 |

Titulo 2

65 | ``` 66 | 67 | Novamente criei dois elementos. Nesse caso terei que aplicar a propriedade em ambos, uma vez que são elementos block, então sempre partem da próxima linha. 68 | 69 | (Irei colocar um background para melhor visualização dos efeitos do inline, mas você pode ignora-lo por enquanto) 70 | 71 | ```css 72 | .inline { 73 | background: gray; 74 | } 75 | ``` 76 | 77 | ### Resultado 78 | 79 | ![Btn](../img/inline1.png) 80 | 81 | ### Aplicando o Inline 82 | 83 | ```css 84 | .inline { 85 | display: inline; 86 | background: gray; 87 | } 88 | ``` 89 | 90 | ### Resultado 91 | 92 | ![Btn](../img/inline2.png) 93 | 94 | Note que o tamanho do elemento é determinado **apenas** pelo seu conteúdo. 95 | 96 | ### Observações 97 | 98 | Algo muito importante sobre o display inline é que ele não obedece nenhum tipo de definição de largura ou altura, sendo assim, seu tamanho é definido somente pelo seu conteúdo interno. 99 | 100 | ## Display Inline-Block 101 | 102 | Como o nome já sugere, o inline-block é uma "junção" dos dois anteriores, com algumas particularidades. À primeira vista pode parecer um pouco complexo, mas é exatamente o que o nome sugere. Com Inline-block você tem um comportamento inline, ou seja, por padrão o elemento irá ocupar o espaço demandado pelo seu conteúdo, mas com uma característica herdada do display block, você pode setar o tamanho (largura e altura) que desejar sem restrições. 103 | 104 | Irei usar a mesma estrutura do anterior 105 | 106 | HTML 107 | 108 | ```html 109 |

Titulo maior 1

110 |

Titulo 2

111 | ``` 112 | 113 | Aqui estou setando a largura (width) de 250 pixels, a altura (height) de 50 pixels, o display e um background cinza. 114 | 115 | ```css 116 | .inline-block { 117 | display: inline-block; 118 | background: gray; 119 | width: 250px; 120 | height: 50px; 121 | } 122 | ``` 123 | 124 | ### Resultado 125 | 126 | ![Btn](../img/inline-block1.png) 127 | 128 | Observe que mesmo o segundo elemento possuindo um conteúdo menor que o primeiro, os dois possuem mesma largura e altura, pois setamos isso anteriormente. Mas se não tivessemos setado, ambos teriam seus tamanhos próprios. 129 | 130 | ## Concluindo 131 | 132 | Saber bem todas essas propriedades é requisito quase obrigatório se você quiser controlar bem seus Layouts e são pré-requisitos para aprender algumas outras propriedades mais avançadas, por isso pratique todos e tenha-os em mente. Obrigado por ler até aqui e até a próxima :zap: 133 | 134 |
135 | 136 |
137 | 138 | **Próxima página → [Unidades CSS](./6-units.md)** 139 | 140 |
141 | -------------------------------------------------------------------------------- /Modulo-Intermediario/variables.md: -------------------------------------------------------------------------------- 1 | # Variáveis do CSS 2 | 3 | ## Índice 4 | 5 | 1. [O que é](#o_que_é) 6 | 2. [Como usar?](#como_usar) 7 | 3. [Já podemos usar em produção?](#usar_em_prod) 8 | 9 |
10 | 11 | ## O que é 12 | 13 | Variáveis CSS são entidades definidas por nós desenvolvedores, contendo valores que irão ser utilizados em todo o nosso projeto. Utilizamos o `var()` para indicar que estamos chamando uma variável do CSS. Essas variáveis são "vivas", o que significa que ao declará-las no seu código, elas podem ser alteradas no navegador, seja por media queries ou por Javascript. 14 | 15 | Elas foram criadas na especificação [CSS Custom Properties Lvl1](https://drafts.csswg.org/css-variables/#using-variables) pra que a gente possa padronizar as características de design do projeto, como cores, espaçamentos e afins. 16 | 17 | Um uso comum é declarar as variáveis dentro do `:root`, pois na hierarquia de seletores, o escopo dele é mais abrangente do que o do ``, sendo o equivalente a declarar variáveis CSS globalmente, mas você pode declarar variáveis dentro de qualquer seletor CSS, ou `@media`. 18 | 19 |   20 | 21 | > 💡 Pra saber mais sobre `:root` leia [a documentação sobre pseudo-classes](./pseudo-classes.md). 22 | 23 |   24 | 25 | Para declarar variáveis CSS basta inicializá-las com dois traços `--`. 26 | ```css 27 | :root { 28 | --text-primary: red; 29 | } 30 | ``` 31 | 32 | Pra utilizar a variável, basta usar a função `var()`. 33 | ```css 34 | section { 35 | background-color: var(--text-primary); 36 | } 37 | ``` 38 | 39 | É possível também declarar valores padrão pra variáveis, assim caso a variável não exista, ele tem um _default_. 40 | ```css 41 | .element { 42 | width: var(--size, 300px); 43 | /* Na ausência de --size, o valor será 300px */ 44 | } 45 | ``` 46 | 47 |
48 | 49 | ------ 50 | 51 |
52 | 53 | 54 | ## Como usar? 55 | 56 | **Usar variáveis CSS como parâmetros** 57 | 58 | Você pode criar classes CSS com variáveis e usá-las passando valores diferentes. Por exemplo, podemos criar uma classe pra ajustar imagens e usar a mesma classe com diferentes tamanhos. 59 | 60 | ```css 61 | .square-image { 62 | display: block; 63 | max-width: 100%; 64 | width: var(--size, 100px); 65 | height: var(--size, 100px); 66 | object-fit: cover; 67 | } 68 | ``` 69 | 70 | E usamos a classe da seguinte forma: 71 | 72 | ```html 73 | 74 | 75 | 76 | 77 | 78 | 79 | ``` 80 | 81 |   82 | 83 | > 💡 Se você tiver familiaridade com Javascript, pode pensar nessa forma de aplicar variáveis CSS como criar funções de Javascript. O `var(--size, 100px)` pode ser lido como `function size(size='100px') {}`  e o `style="--size: 200px"` no HTML pode ser lido como `size("200px")`. 84 | 85 |   86 | 87 | **Fazer mudanças via media query** 88 | 89 | Uma coisa muito comum é usar media queries pra mudar o layout do site pra um formato de coluna quando a visualização for de telefone celular (mobile). Uma forma legal de controlar esse fluxo de fileira pra é usando flexbox. 90 | 91 | ```css 92 | .main-section { 93 | display: flex; 94 | } 95 | 96 | @media (max-width: 420px) { 97 | .main-section { 98 | flex-direction: column; 99 | } 100 | } 101 | ``` 102 | 103 |   104 | 105 | > 💡 Leia mais sobre flexbox [nessa página aqui!](flexbox.md) 106 | 107 |   108 | 109 | Com variáveis CSS, podemos ser muito mais breves: 110 | 111 | ```css 112 | /* Declaramos flex-direction com a variável --dir e o valor padrão de row */ 113 | .main-section { 114 | display: flex; 115 | flex-direction: var(--dir, row); 116 | } 117 | 118 | /* Na media query, basta atualizar o valor da variável --dir dentro do escopo da classe */ 119 | 120 | @media (max-width: 420px) { 121 | .main-section { 122 | --dir: column; 123 | } 124 | } 125 | ``` 126 | 127 | Isso acontece pois classes CSS criam um escopo de atuação para as variáveis. Note no caso do `:root`, na hierarquia HTML, o root tem o maior escopo (área de abrangência) de todos: 128 | 129 | ```html 130 | 131 | 132 | 133 |
134 |

135 |
136 |
137 | 138 | 139 | 140 | 141 | ``` 142 |   143 | 144 | Então se a gente fizer a seguinte declaração no CSS: 145 | 146 | ```css 147 | :root { 148 | --color: red; 149 | } 150 | 151 | main { 152 | --color: green; 153 | } 154 | 155 | div { 156 | --color: purple; 157 | } 158 | 159 | .color { 160 | color: var(--color, black); 161 | } 162 | 163 | ``` 164 | 165 |   166 | 167 | O resultado vai ser: 168 | ```html 169 | 170 | 171 | 172 |
173 |

174 |
175 |
176 | 177 | 178 | 179 | 180 | ``` 181 | 182 | Percebe que usamos a mesma classe, mas conseguimos ter diferentes resultados apenas redefinindo as variáveis? Dessa forma conseguimos um CSS bem mais limpo e consistente. 183 | 184 |
185 | 186 | ------ 187 | 188 |
189 | 190 | 191 | ## Já podemos utilizar em produção? 192 | Variáveis CSS já tem > 96% de cobertura nos navegadores mais populares, além disso tem _polyfills_ (ferramentas que substituem a funcionalidade onde ela não tem suporte) muito bem consolidados na ausência do suporte. 193 | 194 |
195 | 196 |
Print do site Caniuse no suporte das variáveis CSS nos navegadores mais populares
197 |
198 | 199 | -------------------------------------------------------------------------------- /english/basic-module/background.md: -------------------------------------------------------------------------------- 1 | # Background 2 | 3 | A propriedade background serve para definirmos efeitos de fundo nos nossos elementos, podendo ser eles de cor (`background-color`) ou imagem (`background-image`). 4 | 5 | Nesse documento, iremos aprender sobre essas duas propriedades e também as propriedades `background-repeat`, `background-attachment` e `background-position`. 6 | 7 | ## Background Color (background-color) 8 | 9 | _Sintaxe:_ 10 | 11 | ```css 12 | elemento { 13 | background-color: valor; 14 | } 15 | ``` 16 | 17 | Onde: 18 | 19 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 20 | - valor: qual cor será definida nesse fundo. 21 | 22 | Os valores podem ter quatro padrões: 23 | 24 | - Padrão nominal: você pode definir o fundo usando o nome da cor. Ex: `background-color: red` para a cor vermelha. 25 | 26 | - Padrão Hexadecimal: você pode definir o fundo usando o hexadecimal de uma cor. Ex: `background-color: #ff0015` para a cor vermelha. 27 | 28 | - Padrão RGB: você pode definir o fundo usando o RGB de uma cor. Ex: `background-color: rgb(255, 0, 0)` para a para a cor vermelha. 29 | 30 | - Padrão RGBA: você pode definir o fundo usando o RGBA de uma cor. Ex: `background-color: rgba(255, 0, 0, 0.5)` para a cor vermelha. O parâmetro A, ou alfa, possibilita definir a opacidade de uma cor. 31 | 32 | ## Background Image (background-image) 33 | 34 | _Sintaxe:_ 35 | 36 | ```css 37 | elemento { 38 | background-image: url(''); 39 | } 40 | ``` 41 | 42 | Onde: 43 | 44 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 45 | - Url: diretório onde está localizada a imagem ou endereço web da imagem. 46 | 47 | ## Background Repeat (background-repeat) 48 | 49 | Caso a imagem não tenha tamanho suficiente para preencher toda área necessária, ela irá repetir na horizontal e na vertical até que toda área seja preenchida. Para controlarmos essa repetição usamos a propriedade `background-repeat`. 50 | 51 | _Sintaxe:_ 52 | 53 | ```css 54 | elemento { 55 | background-image: url('imagem/img1.png'); 56 | background-repeat: valor; 57 | } 58 | ``` 59 | 60 | Onde: 61 | 62 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 63 | - valor: qual padrão de repetição será utilizado. 64 | 65 | Os valores podem ter quatro padrões: 66 | 67 | - no-repeat: você pode definir que a imagem não se repita. Ex: `background-repeat: no-repeat` 68 | - repeat: você pode definir que a imagem se repita tanto na horizontal como na vertical. Ex: `background-repeat: repeat` 69 | - repeat-x: você pode definir que a imagem se repita apenas na horizontal. Ex: `background-repeat: repeat-x` 70 | - repeat-y: você pode definir que a imagem se repita apenas na vertical. Ex: `background-repeat: repeat-y` 71 | 72 | ## Background Attachment (background-attachment) 73 | 74 | Com o `background-attachment` você pode definir se a imagem ficará fixada ou se ela irá se mover de acordo com o scrool. 75 | 76 | _Sintaxe:_ 77 | 78 | ```css 79 | elemento { 80 | background-image: url('imagem/img1.png'); 81 | background-attachment: valor; 82 | } 83 | ``` 84 | 85 | Onde: 86 | 87 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 88 | - valor: padrão que diz se a imagem ficará fixada ou se ela irá se mover. 89 | 90 | Os valores podem ter dois padrões: 91 | 92 | - fixed: você pode definir que a imagem fique fixada. Ex: `background-attachment: fixed` 93 | - scrool: você pode definir que a imagem se mova com o scrool. Ex: `background-attachment: scroll;` 94 | 95 | ## Background Position (background-position) 96 | 97 | Com o `background-position` você pode definir a posição inicial em que a imagem irá se posicionar. 98 | 99 | _Sintaxe:_ 100 | 101 | ```css 102 | elemento { 103 | background-image: url('imagem/img1.png'); 104 | background-position: valor; 105 | } 106 | ``` 107 | 108 | Onde: 109 | 110 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 111 | - valor: qual padrão de posição será utilizado. 112 | 113 | Os valores da propriedade de posição de background, podem ser feitas de várias formas, como mostrado na tabela abaixo. 114 | 115 | | Valor | Descrição | 116 | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | 117 | | left top | O background se iniciará na esquerda no eixo horizontal e no topo no eixo vertical. | 118 | | left center | O background se iniciará na esquerda no eixo horizontal e no centro no eixo vertical. | 119 | | left bottom | O background se iniciará na esquerda no eixo horizontal e no ponto inferior no eixo vertical. | 120 | | right top | O background se iniciará na direita no eixo horizontal e no topo no eixo vertical. | 121 | | right center | O background se iniciará na direita no eixo horizontal e no centro no eixo vertical. | 122 | | right bottom | O background se iniciará na direita no eixo horizontal e no ponto inferior no eixo vertical. | 123 | | center top | O background se iniciará no centro no eixo horizontal e no topo no eixo vertical. | 124 | | center center | O background se iniciará no centro no eixo horizontal e no centro no eixo vertical. | 125 | | center bottom | O background se iniciará no centro no eixo horizontal e no ponto inferior no eixo vertical. | 126 | | % | Você também pode passar a porcentagem do eixo horizontal e eixo vertical utilizando o sinal de porcentagem. Ex: `background-position: 50% 50%` | 127 | | rem, px, em | Você também pode utilizar as medidas de CSS, como px, rem e em. | 128 | | initial | Define o padrão default como valor. | 129 | | inherity | Herda os valores do elemento pai. | 130 | 131 | **Obs: Em qualquer um dos casos, se você definir apenas o primeiro valor, ele define o segundo automaticamente. Para os 9 primeiros exemplos, ele definirá o valor do eixo vertical como center, para os exemplos de porcentagem e medidas de CSS, ele aplicará o valor do eixo vertical como 50%.** 132 | -------------------------------------------------------------------------------- /english/basic-module/position.md: -------------------------------------------------------------------------------- 1 | # Position - relative, absolute, fixed, sticky, static 2 | 3 | Vamos desvendar e aprender todas as propriedades do position que é muito importante para o posicionamento dos elementos. 4 | 5 | ## Position static 6 | 7 | Dificilmente ou nunca você vera alguém utilizando o `position: static` pois ele é o valor default de todos os nossos elementos. 8 | 9 | É bom conhecer `static` pois agora você sabe que qualquer elemento tem como padrão `position: static`. 10 | 11 | ## Position absolute 12 | 13 | Quando usamos essa propriedade em nosso documento, retiramos o nosso elemento do fluxo normal de nosso documento, nenhum espaço é criado no layout da pagina e o mesmo é posicionado relativo ao seu elemento pai posicionado mais próximo, se houver. Caso contrário, será relativo ao bloco inicial. 14 | 15 | No HTML: 16 | 17 | ```html 18 |
19 |
20 |
21 | ``` 22 | 23 | No CSS: 24 | 25 | ```css 26 | .normal { 27 | width: 100px; 28 | height: 100px; 29 | background: green; 30 | } 31 | 32 | .absolute { 33 | width: 100px; 34 | height: 100px; 35 | background: red; 36 | } 37 | ``` 38 | 39 | Sem setar a propriedade position, temos esse resultado na nossa tela: 40 | 41 |

42 | 43 |

44 | 45 | Agora iremos setar a propriedade position para absolute: 46 | 47 | No CSS: 48 | 49 | ```css 50 | .normal { 51 | width: 100px; 52 | height: 100px; 53 | background: green; 54 | } 55 | 56 | .absolute { 57 | /* estamos pegando a div com classe absolute */ 58 | position: absolute; 59 | width: 100px; 60 | height: 100px; 61 | background: red; 62 | } 63 | ``` 64 | 65 | O resultado que temos é: 66 | 67 |

68 | 69 |

70 | 71 | O que ocorreu foi que devido o position absolute não criar espaço somente ocupar o conteúdo que o elemento tem, a nossa terceira div foi para cima já que não encontrou nenhum espaço e por conta disso ficou abaixo da nossa div com a position absolute, mas conforme você consegue ver no GIF acima a nossa terceira div esta lá. 72 | 73 | Outro comportamento que o position absolute possui é que se você manipular o elemento com `top`,`left`, `right`, `bottom` ele sempre vai estar naquela posição por que não acompanha o fluxo do nosso documento, vamos ver com um exemplo: 74 | 75 | No CSS: 76 | 77 | ```css 78 | .normal { 79 | width: 100px; 80 | height: 100px; 81 | background: green; 82 | } 83 | 84 | .absolute { 85 | position: absolute; 86 | left: 30px; 87 | width: 100px; 88 | height: 100px; 89 | background: red; 90 | } 91 | ``` 92 | 93 | Temos o resultado: 94 | 95 |

96 | 97 |

98 | 99 | ## Position relative 100 | 101 | Quando usamos `position relative` ele vai deslocar o nosso elemento usando como base o posicionamento que ele tem no fluxo normal do nosso documento, segue um exemplo: 102 | 103 | No CSS: 104 | 105 | ```css 106 | .normal { 107 | width: 100px; 108 | height: 100px; 109 | background: green; 110 | } 111 | 112 | .absolute { 113 | position: relative; 114 | left: 15px; 115 | width: 100px; 116 | height: 100px; 117 | background: red; 118 | } 119 | ``` 120 | 121 | No HTML: 122 | 123 | ```html 124 |
125 |
126 |
127 | ``` 128 | 129 | Esse é o fluxo normal que iria acontecer caso a gente faça as três divs acima: 130 | 131 |

132 | 133 |

134 | 135 | Quando usamos a propriedade `position relative` e manipulamos o `top`,`left`, `right`, `bottom` iremos usar como base a posição que ele tem no fluxo do nosso documento, segue o exemplo: 136 | 137 |

138 | 139 | 140 |

141 |

142 | A imagem da direita demonstra a posição que ira utilizar como base. 143 |

144 | 145 | Agora vamos manipular a posição do elemento 146 | 147 | Adicione ao seu CSS: 148 | 149 | ```css 150 | .absolute { 151 | position: relative; 152 | left: 50px; 153 | width: 100px; 154 | height: 100px; 155 | background: red; 156 | } 157 | ``` 158 | 159 | Temos o resultado: 160 | 161 |

162 | 163 |

164 | 165 | ## Position fixed 166 | 167 | Utilizamos ele para deixar o elemento fixo no nosso documento ou seja independente do que aconteça nunca vai mudar de posição, vamos demonstrar com um exemplo: 168 | 169 | No HTML: 170 | 171 | ```html 172 |

Está fixado

173 |
174 |
175 |
176 |
177 |
178 |
179 | ``` 180 | 181 | No CSS: 182 | 183 | ```css 184 | div { 185 | width: 300px; 186 | margin: 35px; 187 | height: 100px; 188 | background: blue; 189 | } 190 | 191 | h1 { 192 | position: fixed; 193 | top: 0; 194 | width: 500px; 195 | margin: 0 auto; 196 | background: white; 197 | padding: 10px; 198 | } 199 | ``` 200 | 201 | Resultado: 202 | 203 |

204 | 205 |

206 | 207 | ## Position sticky 208 | 209 | É uma mistura entre `position relative` e `position fixed`, o elemento que possui a propriedade `position sticky` é tratado como relativo até alcançar um limite especificado definido pelo `top`,`left`, `right`, `bottom`, a partir do momento que alcança esse ponto ele passa a ser fixo. E se chegar a sua posição original volta a ser tratado como `relative`. 210 | 211 | Vamos ver um exemplo pratico: 212 | 213 | No HTML: 214 | 215 | ```html 216 |

Posicionamento sticky

217 |
218 |
A
219 |
Apple
220 |
Ant
221 |
Altimeter
222 |
Airplane
223 | 224 |
B
225 |
Bird
226 |
Buzzard
227 |
Bee
228 |
Banana
229 |
Beanstalk
230 | 231 |
C
232 |
Calculator
233 |
Cane
234 |
Camera
235 |
Camel
236 | 237 |
D
238 |
Duck
239 |
Dime
240 |
Dipstick
241 |
Drone
242 | 243 |
E
244 |
Egg
245 |
Elephant
246 |
Egret
247 |
248 | ``` 249 | 250 | No CSS: 251 | 252 | ```css 253 | dl { 254 | height: 200px; /* definimos uma altura para mostrar o scroll */ 255 | overflow: auto; /* colocamos o overflow para mostrar o scroll */ 256 | } 257 | 258 | dt { 259 | background-color: black; 260 | color: white; 261 | padding: 10px; 262 | position: sticky; 263 | top: 0; /* Quando o elemento chega na posição top 0 em relação ao elemento pai passa a ser fixo */ 264 | margin: 1em 0; 265 | } 266 | ``` 267 | 268 | Resultado: 269 | 270 |

271 | 272 |

273 | 274 | ## Concluindo 275 | 276 | Conhecer bem essa propriedade é essencial para definir o posicionamento de ícones, botões, imagens, etc..., espero que pratiquem bastante! pois, muito do que vimos aqui é só uma pontinha do que podemos fazer com elas. 277 | -------------------------------------------------------------------------------- /Modulo-Basico/7-position.md: -------------------------------------------------------------------------------- 1 | # Position - relative, absolute, fixed, sticky, static 2 | 3 | Vamos desvendar e aprender todas as propriedades do position que é muito importante para o posicionamento dos elementos. 4 | 5 | ## Position static 6 | 7 | Dificilmente ou nunca você vera alguém utilizando o `position: static` pois ele é o valor default de todos os nossos elementos. 8 | 9 | É bom conhecer `static` pois agora você sabe que qualquer elemento tem como padrão `position: static`. 10 | 11 | ## Position absolute 12 | 13 | Quando usamos essa propriedade em nosso documento, retiramos o nosso elemento do fluxo normal de nosso documento, nenhum espaço é criado no layout da pagina e o mesmo é posicionado relativo ao seu elemento pai posicionado mais próximo, se houver. Caso contrário, será relativo ao bloco inicial. 14 | 15 | No HTML: 16 | 17 | ```html 18 |
19 |
20 |
21 | ``` 22 | 23 | No CSS: 24 | 25 | ```css 26 | .normal { 27 | width: 100px; 28 | height: 100px; 29 | background: green; 30 | } 31 | 32 | .absolute { 33 | width: 100px; 34 | height: 100px; 35 | background: red; 36 | } 37 | ``` 38 | 39 | Sem setar a propriedade position, temos esse resultado na nossa tela: 40 | 41 |

42 | 43 |

44 | 45 | Agora iremos setar a propriedade position para absolute: 46 | 47 | No CSS: 48 | 49 | ```css 50 | .normal { 51 | width: 100px; 52 | height: 100px; 53 | background: green; 54 | } 55 | 56 | .absolute { 57 | /* estamos pegando a div com classe absolute */ 58 | position: absolute; 59 | width: 100px; 60 | height: 100px; 61 | background: red; 62 | } 63 | ``` 64 | 65 | O resultado que temos é: 66 | 67 |

68 | 69 |

70 | 71 | O que ocorreu foi que devido o position absolute não criar espaço somente ocupar o conteúdo que o elemento tem, a nossa terceira div foi para cima já que não encontrou nenhum espaço e por conta disso ficou abaixo da nossa div com a position absolute, mas conforme você consegue ver no GIF acima a nossa terceira div esta lá. 72 | 73 | Outro comportamento que o position absolute possui é que se você manipular o elemento com `top`,`left`, `right`, `bottom` ele sempre vai estar naquela posição por que não acompanha o fluxo do nosso documento, vamos ver com um exemplo: 74 | 75 | No CSS: 76 | 77 | ```css 78 | .normal { 79 | width: 100px; 80 | height: 100px; 81 | background: green; 82 | } 83 | 84 | .absolute { 85 | position: absolute; 86 | left: 30px; 87 | width: 100px; 88 | height: 100px; 89 | background: red; 90 | } 91 | ``` 92 | 93 | Temos o resultado: 94 | 95 |

96 | 97 |

98 | 99 | ## Position relative 100 | 101 | Quando usamos `position relative` ele vai deslocar o nosso elemento usando como base o posicionamento que ele tem no fluxo normal do nosso documento, segue um exemplo: 102 | 103 | No CSS: 104 | 105 | ```css 106 | .normal { 107 | width: 100px; 108 | height: 100px; 109 | background: green; 110 | } 111 | 112 | .absolute { 113 | position: relative; 114 | left: 15px; 115 | width: 100px; 116 | height: 100px; 117 | background: red; 118 | } 119 | ``` 120 | 121 | No HTML: 122 | 123 | ```html 124 |
125 |
126 |
127 | ``` 128 | 129 | Esse é o fluxo normal que iria acontecer caso a gente faça as três divs acima: 130 | 131 |

132 | 133 |

134 | 135 | Quando usamos a propriedade `position relative` e manipulamos o `top`,`left`, `right`, `bottom` iremos usar como base a posição que ele tem no fluxo do nosso documento, segue o exemplo: 136 | 137 |

138 | 139 | 140 |

141 |

142 | A imagem da direita demonstra a posição que ira utilizar como base. 143 |

144 | 145 | Agora vamos manipular a posição do elemento 146 | 147 | Adicione ao seu CSS: 148 | 149 | ```css 150 | .absolute { 151 | position: relative; 152 | left: 50px; 153 | width: 100px; 154 | height: 100px; 155 | background: red; 156 | } 157 | ``` 158 | 159 | Temos o resultado: 160 | 161 |

162 | 163 |

164 | 165 | ## Position fixed 166 | 167 | Utilizamos ele para deixar o elemento fixo no nosso documento ou seja independente do que aconteça nunca vai mudar de posição, vamos demonstrar com um exemplo: 168 | 169 | No HTML: 170 | 171 | ```html 172 |

Está fixado

173 |
174 |
175 |
176 |
177 |
178 |
179 | ``` 180 | 181 | No CSS: 182 | 183 | ```css 184 | div { 185 | width: 300px; 186 | margin: 35px; 187 | height: 100px; 188 | background: blue; 189 | } 190 | 191 | h1 { 192 | position: fixed; 193 | top: 0; 194 | width: 500px; 195 | margin: 0 auto; 196 | background: white; 197 | padding: 10px; 198 | } 199 | ``` 200 | 201 | Resultado: 202 | 203 |

204 | 205 |

206 | 207 | ## Position sticky 208 | 209 | É uma mistura entre `position relative` e `position fixed`, o elemento que possui a propriedade `position sticky` é tratado como relativo até alcançar um limite especificado definido pelo `top`,`left`, `right`, `bottom`, a partir do momento que alcança esse ponto ele passa a ser fixo. E se chegar a sua posição original volta a ser tratado como `relative`. 210 | 211 | Vamos ver um exemplo pratico: 212 | 213 | No HTML: 214 | 215 | ```html 216 |

Posicionamento sticky

217 |
218 |
A
219 |
Apple
220 |
Ant
221 |
Altimeter
222 |
Airplane
223 | 224 |
B
225 |
Bird
226 |
Buzzard
227 |
Bee
228 |
Banana
229 |
Beanstalk
230 | 231 |
C
232 |
Calculator
233 |
Cane
234 |
Camera
235 |
Camel
236 | 237 |
D
238 |
Duck
239 |
Dime
240 |
Dipstick
241 |
Drone
242 | 243 |
E
244 |
Egg
245 |
Elephant
246 |
Egret
247 |
248 | ``` 249 | 250 | No CSS: 251 | 252 | ```css 253 | dl { 254 | height: 200px; /* definimos uma altura para mostrar o scroll */ 255 | overflow: auto; /* colocamos o overflow para mostrar o scroll */ 256 | } 257 | 258 | dt { 259 | background-color: black; 260 | color: white; 261 | padding: 10px; 262 | position: sticky; 263 | top: 0; /* Quando o elemento chega na posição top 0 em relação ao elemento pai passa a ser fixo */ 264 | margin: 1em 0; 265 | } 266 | ``` 267 | 268 | Resultado: 269 | 270 |

271 | 272 |

273 | 274 | ## Concluindo 275 | 276 | Conhecer bem essa propriedade é essencial para definir o posicionamento de ícones, botões, imagens, etc..., espero que pratiquem bastante! pois, muito do que vimos aqui é só uma pontinha do que podemos fazer com elas. 277 | 278 |
279 | 280 |
281 | 282 | **Próxima página → [Z-index](./8-z-index.md)** 283 | 284 |
-------------------------------------------------------------------------------- /Modulo-Basico/9-background.md: -------------------------------------------------------------------------------- 1 | # Background 2 | 3 | A propriedade background serve para definirmos efeitos de fundo nos nossos elementos, podendo ser eles de cor (`background-color`) ou imagem (`background-image`). 4 | 5 | Nesse documento, iremos aprender sobre essas duas propriedades e também as propriedades `background-repeat`, `background-attachment` e `background-position`. 6 | 7 | > Em elementos `img` com imagens válidas carregadas via `src`, caso seja aplicado um background, ele será sobreposto pela imagem carregada. 8 | 9 | Para manipular as propriedades de uma imagem carregada por uma tag `img` temos: 10 | 11 | - object-fit: próximo ao `background-size` porém não recebe valores numéricos, suporta apenas `fill`, `contain`, `cover`, `scale-down` e `none` 12 | 13 | - object-position: equivalente ao `background-position` porém afeta apenas imagens carregadas via tag `img` 14 | 15 | ## Background Color (background-color) 16 | 17 | _Sintaxe:_ 18 | 19 | ```css 20 | elemento { 21 | background-color: valor; 22 | } 23 | ``` 24 | 25 | Onde: 26 | 27 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 28 | - valor: qual cor será definida nesse fundo. 29 | 30 | Os valores podem ter seis padrões 31 | 32 | - Padrão nominal: você pode definir o fundo usando o nome da cor. Ex: `background-color: red` para a cor vermelha. 33 | 34 | - Padrão Hexadecimal: você pode definir o fundo usando o hexadecimal de uma cor. Ex: `background-color: #ff0015` para a cor vermelha. 35 | 36 | - Padrão RGB: você pode definir o fundo usando o RGB de uma cor. Ex: `background-color: rgb(255, 0, 0)` para a para a cor vermelha. 37 | 38 | - Padrão RGBA: você pode definir o fundo usando o RGBA de uma cor. Ex: `background-color: rgba(255, 0, 0, 0.5)` para a cor vermelha. O parâmetro A, ou alfa, possibilita definir a opacidade de uma cor. 39 | 40 | - Padrão HSL: Você pode definir o fundo usando o RGBA de uma cor. Ex: `background-color: hsl(0, 100%, 50%)` para a cor vermelha. 41 | 42 | - Padrão HSLA: Você pode definir o fundo usando o RGBA de uma cor. Ex: `background-color: hsla(0, 100%, 50%, 0.3)` para a cor vermelha. O parâmetro A, ou alfa, possibilita definir a opacidade de uma cor. 43 | 44 | ## Background Image (background-image) 45 | 46 | _Sintaxe:_ 47 | 48 | ```css 49 | elemento { 50 | background-image: url(''); 51 | } 52 | ``` 53 | 54 | Onde: 55 | 56 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 57 | - Url: diretório onde está localizada a imagem ou endereço web da imagem. 58 | 59 | ## Background Repeat (background-repeat) 60 | 61 | Caso a imagem não tenha tamanho suficiente para preencher toda área necessária, ela irá repetir na horizontal e na vertical até que toda área seja preenchida. Para controlarmos essa repetição usamos a propriedade `background-repeat`. 62 | 63 | _Sintaxe:_ 64 | 65 | ```css 66 | elemento { 67 | background-image: url('imagem/img1.png'); 68 | background-repeat: valor; 69 | } 70 | ``` 71 | 72 | Onde: 73 | 74 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 75 | - valor: qual padrão de repetição será utilizado. 76 | 77 | Os valores podem ter quatro padrões: 78 | 79 | - no-repeat: você pode definir que a imagem não se repita. Ex: `background-repeat: no-repeat` 80 | - repeat: você pode definir que a imagem se repita tanto na horizontal como na vertical. Ex: `background-repeat: repeat` 81 | - repeat-x: você pode definir que a imagem se repita apenas na horizontal. Ex: `background-repeat: repeat-x` 82 | - repeat-y: você pode definir que a imagem se repita apenas na vertical. Ex: `background-repeat: repeat-y` 83 | 84 | ## Background Attachment (background-attachment) 85 | 86 | Com o `background-attachment` você pode definir se a imagem ficará fixada ou se ela irá se mover de acordo com o scroll. 87 | 88 | _Sintaxe:_ 89 | 90 | ```css 91 | elemento { 92 | background-image: url('imagem/img1.png'); 93 | background-attachment: valor; 94 | } 95 | ``` 96 | 97 | Onde: 98 | 99 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 100 | - valor: padrão que diz se a imagem ficará fixada ou se ela irá se mover. 101 | 102 | Os valores podem ter dois padrões: 103 | 104 | - fixed: você pode definir que a imagem fique fixada. Ex: `background-attachment: fixed` 105 | - scroll: você pode definir que a imagem se mova com o scroll. Ex: `background-attachment: scroll;` 106 | 107 | ## Background Position (background-position) 108 | 109 | Com o `background-position` você pode definir a posição inicial em que a imagem irá se posicionar. 110 | 111 | _Sintaxe:_ 112 | 113 | ```css 114 | elemento { 115 | background-image: url('imagem/img1.png'); 116 | background-position: valor; 117 | } 118 | ``` 119 | 120 | Onde: 121 | 122 | - elemento: qual elemento terá o seu fundo modificado, por exemplo uma div. 123 | - valor: qual padrão de posição será utilizado. 124 | 125 | Os valores da propriedade de posição de background, podem ser feitas de várias formas, como mostrado na tabela abaixo. 126 | 127 | | Valor | Descrição | 128 | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | 129 | | left top | O background se iniciará na esquerda no eixo horizontal e no topo no eixo vertical. | 130 | | left center | O background se iniciará na esquerda no eixo horizontal e no centro no eixo vertical. | 131 | | left bottom | O background se iniciará na esquerda no eixo horizontal e no ponto inferior no eixo vertical. | 132 | | right top | O background se iniciará na direita no eixo horizontal e no topo no eixo vertical. | 133 | | right center | O background se iniciará na direita no eixo horizontal e no centro no eixo vertical. | 134 | | right bottom | O background se iniciará na direita no eixo horizontal e no ponto inferior no eixo vertical. | 135 | | center top | O background se iniciará no centro no eixo horizontal e no topo no eixo vertical. | 136 | | center center | O background se iniciará no centro no eixo horizontal e no centro no eixo vertical. | 137 | | center bottom | O background se iniciará no centro no eixo horizontal e no ponto inferior no eixo vertical. | 138 | | % | Você também pode passar a porcentagem do eixo horizontal e eixo vertical utilizando o sinal de porcentagem. Ex: `background-position: 50% 50%` | 139 | | rem, px, em | Você também pode utilizar as medidas de CSS, como px, rem e em. | 140 | | initial | Define o padrão default como valor. | 141 | | inherity | Herda os valores do elemento pai. | 142 | 143 | **Obs: Em qualquer um dos casos, se você definir apenas o primeiro valor, ele define o segundo automaticamente. Para os 9 primeiros exemplos, ele definirá o valor do eixo vertical como center, para os exemplos de porcentagem e medidas de CSS, ele aplicará o valor do eixo vertical como 50%.** 144 | 145 | ## Sintaxe Curta (Shorthand Syntax) 146 | 147 | Utilizando a tag `background`, podemos escrever todas as propriedades de background dentro de uma só. O valor de `background-image` irá ficar uma camada acima do `background-color`, caso a imagem não seja carregada, a cor aparecerá como reserva. Os valores são separados por espaços, mas o estilo recomendado é colocar apenas um valor por linha, colocando o ';' na ultima linha. 148 | 149 | _Sintaxe_ 150 | 151 | ```css 152 | 153 | /* normal */ 154 | elemento { 155 | background-image: url('https://source.unsplash.com/random'); 156 | background-position: center; 157 | background-size: 200px 200px; 158 | background-repeat: no-repeat; 159 | background-attachment: fixed; 160 | background-color: tomato; 161 | } 162 | 163 | /* sintaxe curta */ 164 | elemento { 165 | background: 166 | url('https://source.unsplash.com/random') 167 | center / 200px 200px 168 | no-repeat 169 | fixed 170 | tomato; 171 | } 172 | ``` 173 | 174 | Onde: 175 | 176 | - elemento: Qual elemento terá o seu fundo modificado, como por exemplo uma div. 177 | - valor: Quais são as propriedades que serão definidas nesse fundo. 178 | 179 | Os valores na ordem são: 180 | 181 | - background-image 182 | - background-position 183 | - background-size 184 | - background-repeat 185 | - background-attachment 186 | - background-origin 187 | - background-clip 188 | - background-color 189 | 190 | ## Múltiplos Backgrounds 191 | 192 | Na tag `background` é possível colocar como valor múltiplos planos de fundo separados por vírgula, eles serão sobrepostos de acordo com a ordem. Para aplicar outras propriedades relacionadas, basta colocá-las na mesma ordem que os background, separadas por vírgula. Os valores são separados por vírgulas, o estilo recomendado é colocar apenas um valor por linha e colocar o ';' na ultima linha. 193 | 194 | ```css 195 | elemento { 196 | background: 197 | url('imagem/img1.png'), 198 | url('https://source.unsplash.com/random'), 199 | #f1aaaa; 200 | 201 | /* As propriedades relacionadas devem seguir a mesma ordem que os backgrounds foram empilhados */ 202 | background-size: 100%, cover, contain; 203 | background-repeat: no-repeat, repeat, repeat-x; 204 | } 205 | ``` 206 | Onde: 207 | 208 | - elemento: Qual elemento terá o seu fundo modificado, como por exemplo uma div. 209 | - valor: Quais as mídias que serão definidas nesse fundo. 210 | 211 | Existem 3 valores possíveis 212 | 213 | - cores: nominais, hexadecimais ou funções de cor (rgb e hsl). 214 | - url: arquivos locais ou hospedados. 215 |
216 | 217 |
218 | 219 | **Próxima página → [Border](./10-border.md)** 220 | 221 |
222 | -------------------------------------------------------------------------------- /Modulo-Basico/1-selectors.md: -------------------------------------------------------------------------------- 1 | # Seletores 2 | 3 | ## História 4 | 5 | Até a versão 4.1 do HTML a forma mais comum de se estilizar conteúdo era usando atributos de estilo. Você provavelmente deve ter pensado em `style`, mas podíamos alterar o `background` de uma tabela usando o atributo `bgcolor`, ou a cor da fonte de uma tag `` usando o atributo `color`. Abaixo, um código com sintaxe de HTML 4.1 de um card com uma imagem e um parágrafo: 6 | 7 | ```html 8 |
9 | 10 |

11 | Boas vindas 12 |

13 |
14 | 15 | ``` 16 |   17 | 18 | Algumas propriedades acima foram depreciadas na transição do HTML 4.1 pra versão 5. Apesar da versão 4.1 já dar suporte pra tag _inline_ de estilos e a importação via ``, a adoção dop CSS utilizado dessa maneira levou algum tempo, mas foi acelerada pela depreciação de estilos nativos. Abaixo, a referência dos estilos depreciados se quiser conhecer! 19 | 20 | - `align` - Cada grudpo de elementos tinha sua definição de `align`. Na `
` por exemplo, os valores de `align` eram `left | center | right | justify`, pra imagens os valores eram `bottom | middle | top | right | left`. [Documentação oficial, em inglês](https://www.w3.org/TR/html401/struct/objects.html#adef-vspace) 21 | - `vspace` - Define o espaço a ser inserido acima ou abaixo dos elementos ``, `` ou ``, o valor é definido em `px`. [Documentação oficial do align pra ``, em inglês](https://www.w3.org/TR/html401/struct/objects.html#adef-align-IMG), [Documentação oficial do align pra `
`, em inglês](https://www.w3.org/TR/html401/present/graphics.html#adef-align) 22 | - `face` - Na tag ``, define a familia da fonte a ser utilizada, substituido por `font-family` no CSS. [Documentação oficial, em inglês](https://www.w3.org/TR/html401/present/graphics.html#adef-face-FONT) 23 | 24 |   25 | 26 | > 💡 Você ainda pode usar a propriedade `align` pra elementos como `
` e ``, em arquivos Markdown (.md) ela é perfeita pra centralizar conteúdo na ausência de CSS. 27 | 28 |   29 | 30 | Além da sintaxe limitada, o código era bem difícil de reutilizar, obrigando a pessoa desenvolvedora a copiar e colar grandes trechos de código. Na proposta de criar uma folha de estilos, era necessária uma forma de selecionar elementos do HTML através das suas características, pra que fosse possível selecionar um só, um grupo específico ou criar estilos padrões pra certos elementos. 31 | 32 | 33 |
34 | 35 | --- 36 | 37 |
38 | 39 | ## Seletores 40 | 41 |   42 | 43 | ### ◽️ **Seletor universal** 44 | 45 | O seletor universal `*` se refere à todos elementos que vão dentro do `` e o elemento ``. Usamos esse seletor quando queremos aplicar mudanças que influenciem todos elementos do HTML que são tangíveis1, ou seja, que renderizam na tela. 46 | 47 | O uso mais comum dele é pra zerar as `margins` e `padding` quem vem por padrão na maioria dos elementos HTML, definido pelo _user-agent_ 2. 48 | 49 | ```css 50 | * { 51 | margin: 0px; 52 | padding: 0px; 53 | } 54 | ``` 55 | 56 |   57 | 58 | ### ◽️ **Seletor de tipo** 59 | 60 | O seletor de tipo seleciona um elemento de HTML diretamente. Usado dessa forma, ele aplica borda à todos elementos `

` no documento. 61 | 62 | Um uso comum de seletor de tipo é formatar os estilos base dos elementos HTML. Um exemplo disso são [resets de CSS](https://www.alura.com.br/artigos/o-que-e-reset-css), que removem estilos padrões definidos pelos navegadores, fazendo com que você não precise sobrescrevê-los. 63 | 64 | ```css 65 | h1 { 66 | font-size: 2.5rem; 67 | } 68 | ``` 69 | 70 |   71 | 72 | ### ◽️ **Seletor do tipo classe** 73 | 74 | Esse seletor se refere ao atributo `class` de um elemento HTML. Cada elemento pode ter um ou mais classes e as classes podem ser reutilizadas entre elementos. As classes podem ter qualquer nome, com a restrição de não poderem começar com números e [caracteres não suportados](https://www.w3.org/TR/CSS21/syndata.html#characters). No HTML podemos definir a classe `class="btn"`, e pra acessá-la, basta usar o mesmo nome precedido de um ponto `.btn {}`. 75 | 76 | Usando o exemplo acima, uma classe `.btn` que pode ser aplicada em todos os botões de uma mesma página: 77 | 78 | No HTML 79 | 80 | ```html 81 | 82 | ``` 83 | 84 | No CSS 85 | 86 | ```css 87 | .btn { 88 | background: tomato; 89 | border: none; 90 | padding: 0.5em 0.75em; 91 | } 92 | ``` 93 | 94 |   95 | 96 | Podemos inclusive usar mais de uma classe em um elemento: 97 | 98 | No HTML 99 | 100 | ```html 101 | 102 | ``` 103 | 104 | No CSS 105 | 106 | ```css 107 | .btn-outline { 108 | background: transparent; 109 | border: tomato; 110 | } 111 | ``` 112 | 113 | Como o `.btn-outline` também declara as propriedades `background` e `border` e vem depois da classe `.btn`, ela vai sobrescrever essas propriedades, mantendo o `padding` da classe original. 114 | 115 | 116 |   117 | ### ◽️ **Seletor de Id** 118 | 119 | O seletor de `id` segue as mesmas regras de nomenclatura que o de classe, porém no CSS ele é representado pela junção da hashtag `#` e o nome do id, ex: `#first-section`. Os ids foram pensados como identificadores únicos de um elemento e não podem ser reutilizados. Ao aplicar uma classe em um elemento, você: 120 | 121 | - Cria um identificador único desse elemento 122 | - Cria uma âncora que pode ser referenciada através de um link. [Artigo sobre links e âncoras com id](https://www.alura.com.br/artigos/ancorando-elementos-com-html5) 123 | - Cria uma variável global contendo o elemento 124 | 125 | Ou seja, usar `id` apenas pra estilizar elementos CSS pode fazer com que suas capacidades sejam mal aproveitadas. No geral, arquiteturas CSS costumam dar preferência às classes, pelo fato de seletores `id` serem mais específicos e não poderem ser reutilizados. Abaixo, um exemplo de `id`: 126 | 127 | No HTML 128 | 129 | ```html 130 |
131 | ``` 132 | 133 | No CSS 134 | 135 | ```css 136 | #blog { 137 | display: grid; 138 | gap: 2ch; 139 | } 140 | ``` 141 | 142 |   143 | ### ◽️ **Seletor com atributo** 144 | 145 | Todos elementos HTML possuem atributos, e esses podem ser utilizados pra atribuir CSS. Elementos como `` são diferenciados apenas pelo seu atributo type, o seletor de atributo possibilita estilizar, entre outras coisas, diferentes tipos de input individualmente: 146 | 147 | No HTML 148 | 149 | ```html 150 | 151 | 152 | ``` 153 | 154 | No CSS 155 | 156 | ```css 157 | 158 | [type='text'] { 159 | width: 100px; 160 | height: 100px; 161 | background-color: red; 162 | } 163 | 164 | [type='submit'] { 165 | width: 100px; 166 | height: 100px; 167 | background-color: blue; 168 | } 169 | ``` 170 | 171 |   172 | 173 | O seletor de atributos dá suporte ao uso de caracteres coringa que possibilitam você a referenciar diferentes valores de atributos. No exemplo abaixo, podemos selecionar links de acordo com seu tipo de arquivo e colocar uma imagem referente a esse tipo nele usando CSS: 174 | 175 | No HTML 176 | 177 | ```html 178 | 189 | ``` 190 | 191 | No CSS 192 | 193 | ```css 194 | 195 | /* O caractere coringa $ significa "termina com". A linha abaixo adiciona um ícone à todo link que possui o final .pdf */ 196 | a[href$=".pdf"]::before { 197 | background-image: url(https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/fc7bLiJYf5US6QxTOKsF.png); 198 | } 199 | 200 | a[href$=".jpg"]::before, 201 | a[href$=".png"]::before { 202 | background-image: url(https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/N79qCc0c06217YT4ofYM.png); 203 | } 204 | 205 | ``` 206 | 207 | [Nesse link do Codepen](https://codepen.io/web-dot-dev/pen/BapBbOy) você consegue inspecionar o código desse exemplo. O exemplo foi criado pela galera do google no curso de CSS básico deles, o [web.dev](https://web.dev/learn/css). 208 | 209 |   210 | 211 | Os caracteres coringa do seletor de atributos são: 212 | 213 | ```css 214 | /* Um href que contém o link "example.com" */ 215 | [href*='example.com'] { 216 | color: red; 217 | } 218 | 219 | /* Um href que começa com https */ 220 | [href^='https'] { 221 | color: green; 222 | } 223 | 224 | /* Um href que termina com .com */ 225 | [href$='.com'] { 226 | color: blue; 227 | } 228 | ``` 229 | Exemplo retirado [do curso web.dev nesse link.](https://web.dev/learn/css/selectors/#seletor-de-atributo) 230 | 231 |   232 | 233 | ### ◽️ **Agrupando seletores** 234 | 235 | É possível estilizar vários seletores ao mesmo tempo separando-os por vírgula: 236 | 237 | No CSS 238 | 239 | ```css 240 | header, 241 | footer, 242 | section, 243 | [data-body="section"], 244 | .section { 245 | display: flex; 246 | } 247 | 248 | ``` 249 | 250 |   251 | 252 | Também podemos selecionar seletores que estão dentro de outros usando espaço em branco: 253 | 254 | ```css 255 | 256 | /* Estiliza todo .input-text dentro de um
*/ 257 | form .input-text { 258 | 259 | } 260 | 261 | /* Estiliza todo #submit que estiver dentro de um
  • que estiver dentro de um
      */ 262 | ul li #submit { 263 | 264 | } 265 | 266 | ``` 267 | 268 |   269 | 270 | E selecionar elementos que precisam obrigatóriamente possuir mais de uma característica, como um elemento que precisa ter uma classe específica: 271 | 272 | ```css 273 | /* Todo elemento do tipo form que também tem a classe .special-form */ 274 | form.special-form { 275 | 276 | } 277 | 278 | /* Todo elemento do tipo input que também tem o atributo type=color */ 279 | input[type="color"] { 280 | 281 | } 282 | ``` 283 | 284 |
      285 | 286 | --- 287 | 288 |
      289 | 290 | ## Notas de rodapé 291 | 292 | 1. **Tangível** é uma categoria de conteúdo do HTML. A categoria de **tangível** ou _palpable content_ é a de elementos que **não são vazios, nem ocultos (hidden), e que seu conteúdo é renderizado e substancial**. Elementos como `` ou ``, por exemplo, não fazem parte dessa categoria. [Documentação oficial, em inglês](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#palpable_content). 293 | 294 | 2. **User-agent stylesheet** se refere à folha de estilo do navegador. Cada navegador aplica uma folha de estilo padrão dando uma aparência base nos elementos HTML. O `