# CSS CSS é a sigla para "Cascading Style Sheets" (Folhas de Estilo em Cascata, em tradução livre). É uma linguagem de estilo utilizada para definir a aparência e o formato de um documento HTML. O CSS separa o conteúdo de um documento HTML da sua apresentação visual, permitindo que os desenvolvedores web apliquem estilos personalizados aos elementos da página. ## CSS Inline/Externo/Incorporado Podemos importar o Css para a pagina html através de um 'link' adicionado na tag head da página ``` <link rel="stylesheet" href="style.css"> ``` Ou Podemos adicionar um estilo diretamente numa linha/tag: ```css body style="background-color: aquamarine; font-family: Arial, Helvetica, sans-serif;"> <h1 style="color: blue;">Capítulo 1</h1> <h2 style="color: red;">Capítulo 1.1</h2> <p style="text-align: justify;"> Lorem ipsum ``` Contudo não é ideal para um estilo mais elaborado ou algo que ultrapasse duas características Ou tbm podemos adicionar diretamente na página html todo estilo Css sem criar outro arquivo: ``` css <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>alinhamento</title> <style> body{ font: normal 17px; font-family: Arial, Verdana, serif; } h1{ text-align: center; } h2{ text-align: left; } p{ text-align: justify; text-indent: 15px; } </style> </head> ``` ## Seletores e Classes Os seletores e as classes são elementos fundamentais do CSS, pois permitem direcionar e estilizar elementos específicos em um documento HTML. Existem vários tipos de seletores, incluindo seletores de elementos, seletores de classes, seletores de IDs, seletores de atributos, seletores de descendentes, seletores de filhos diretos, entre outros. - **Os seletores de elementos** selecionam os elementos com base no nome da tag HTML. Por exemplo, o seletor **"p"** selecionará todos os parágrafos em um documento HTML. - **Os seletores de classes** selecionam elementos com base no valor do atributo "class" em HTML. Eles são precedidos por um ponto (.), seguido pelo nome da classe. Por exemplo, o seletor **".destaque"** selecionará todos os elementos que possuem a classe "destaque" atribuída a eles. - **Os seletores de IDs** selecionam elementos com base no valor do atributo "id" em HTML. Eles são precedidos por uma hashtag (#), seguida pelo nome do ID. Por exemplo, o seletor **"#logo"** selecionará o elemento com o ID "logo". ```htmlembedded <h1>Titulo do Site</h1> <p>AAAAAAAAAAAAAA</p> <p id="p1">BBBBBBBBBBBB</p> <h2 style="font-size: 30px;">Analise</h2> <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto nemo quo eaque mollitia, perferendis tempore deleniti exercitationem non. Saepe ad tempora distinctio possimus dolorum labore earum neque voluptatibus unde doloribus.</p> ``` ```css body{ background-color: cornsilk; } p{ // seletor marcando todas as tag p com essas características color: red; font-family: 'Times New Roman', Times, serif; } #p1{ // seletor de id marcando qualquer tag que tenha esse respectivo id color: green; font-size: 25px; } .lorem{ // seletor de classe marcando qualquer tag que seja dessa respectiva classe color: blue; font-size: 30px; } ``` ## Valores de Tamanho Em CSS, você pode usar diferentes unidades de medida para especificar o tamanho de elementos. É importante entender que existem dois tipos de valores de tamanho, **valores absolutos e relativos** e possuem comportamentos diferentes em relação à resposta às alterações de tamanho da janela ou a outras propriedades pai. Os valores absolutos são fixos, enquanto os valores relativos são escaláveis e se ajustam conforme as alterações de contexto. **Valores absolutos:** 1. **Pixels (px)**: É uma unidade fixa e representa um único pixel no dispositivo de exibição. Por exemplo, **`width: 200px;`** define a largura de um elemento como 200 pixels. 2. **Centímetros (cm)**: É uma unidade de medida física que representa uma proporção do centímetro no dispositivo de exibição. Por exemplo, **`width: 5cm;`** define a largura de um elemento como 5 centímetros. 3. **Milímetros (mm)**: É uma unidade de medida física que representa uma proporção do milímetro no dispositivo de exibição. Por exemplo, `**width: 50mm;`** define a largura de um elemento como 50 milímetros. 4. **Polegadas (in)**: É uma unidade de medida física que representa uma proporção da polegada no dispositivo de exibição. Por exemplo, **`width: 2in;`** define a largura de um elemento como 2 polegadas. 5. **Pontos (pt)**: É uma unidade de medida tipográfica que representa uma proporção do ponto tipográfico no dispositivo de exibição. Por exemplo, **`font-size: 12pt;`** define o tamanho da fonte como 12 pontos. **Valores relativos:** 1. **Porcentagem (%):** A unidade de porcentagem permite definir o tamanho de um elemento em relação ao elemento pai. Por exemplo, **`width: 50%;`** define a largura de um elemento como metade da largura do elemento pai. 2. **Em (em)**: Esta unidade é relativa ao tamanho da fonte do elemento pai. Por exemplo, **`font-size: 1.2em;`** define o tamanho da fonte como 1,2 vezes o tamanho da fonte do elemento pai. 3. **Rem (rem)**: Semelhante ao "em", mas relativo ao tamanho da fonte do elemento raiz (normalmente o tamanho da fonte do `<html>`). Por exemplo, `f**ont-size: 1.5rem;`** define o tamanho da fonte como 1,5 vezes o tamanho da fonte do elemento raiz. 4. **Viewport Width/Height (vw/vh):** Essas unidades estão relacionadas ao tamanho da janela de visualização do navegador. 1vw é igual a 1% da largura da janela de visualização, enquanto 1vh é igual a 1% da altura da janela de visualização. Por exemplo, **`width: 50vw;`** define a largura de um elemento como 50% da largura da janela de visualização. ## Cores ### Propriedade COLOR A propriedade "color" em CSS é usada para definir a cor do texto de um elemento. Ela determina a cor do conteúdo textual dentro do elemento selecionado. Aqui estão algumas informações importantes sobre a propriedade "color": ```css seletor { color: valor; } ``` O valor da propriedade "color" pode ser especificado de diferentes maneiras: - **Nomes de cores pré-definidos**: Existem cerca de 140 nomes de cores pré-definidos em CSS, como "**red**" (vermelho), "**blue**" (azul), "**green**" (verde), entre outros. - **Códigos de cores hexadecimais**: Você pode usar códigos de cores hexadecimais de 6 dígitos para especificar uma cor. Por exemplo, "**#FF0000**" representa a cor vermelha e "**#00FF00**" representa a cor verde. - **Códigos de cores RGB**: Você pode usar valores de cor RGB para definir uma cor. Por exemplo, "**rgb(255, 0, 0)**" representa a cor vermelha, onde os valores RGB variam de 0 a 255. - **Códigos de cores RGBA**: Semelhante ao RGB, você pode usar valores RGBA para definir uma cor com transparência. O valor "**rgba(255, 0, 0, 0.5)**" representa a cor vermelha com 50% de transparência. ### Psicologia das Cores A psicologia das cores é frequentemente aplicada no design de sites para influenciar a percepção e as emoções dos usuários. Aqui estão algumas diretrizes gerais sobre o uso das cores em sites com base na psicologia das cores: * **Cores primárias para ações importantes**: Use cores primárias, como vermelho, verde e azul, para chamar a atenção dos usuários em ações importantes, como botões de call-to-action ou links de destaque. * **Contraste para legibilidade**: Garanta que haja contraste suficiente entre o texto e o plano de fundo para facilitar a legibilidade. Cores escuras com texto claro ou vice-versa geralmente oferecem boa legibilidade. * **Consistência da marca**: Use as cores da marca para criar uma identidade visual consistente e fortalecer o reconhecimento da marca. Mantenha a consistência nas cores escolhidas em todo o site. * **Significado cultural**: Esteja ciente das associações culturais específicas das cores em diferentes partes do mundo. Por exemplo, o vermelho pode simbolizar sorte e felicidade em algumas culturas asiáticas, enquanto pode representar perigo em outras. Embora as respostas às cores possam variar dependendo de fatores individuais, culturais e contextuais, algumas recomendações gerais sobre o uso das cores no design de um site são padrões. ![](https://hackmd.io/_uploads/H1mbXXaHn.png) **Site com um bom trabalho de cores e css em geral ->** [Callem Pt](https://calem.pt) ### Harmonia das cores ![](https://hackmd.io/_uploads/BJ6lvPTSn.png) **As cores primárias** são os três pigmentos básicos que podem ser combinados para criar todas as outras cores. As cores primárias tradicionais são vermelho, azul e amarelo Da junção das cores primárias, temos as 3 **cores secundárias** que são laranja (vermelho+amarelo), verde(amarelo + azul) e violeta(azul+vermelho) As **cores complementares** são aquelas que estão localizadas em lados opostos do círculo cromático. Quando combinadas, essas cores criam um forte contraste e podem ser usadas de forma eficaz para criar impacto visual e equilíbrio em um design. Já as **cores análogas** são aquelas que estão próximas umas das outras no círculo cromático. Essas cores têm uma relação harmoniosa entre si e geralmente são escolhidas para criar um esquema de cores suave e coeso. ![](https://hackmd.io/_uploads/HJNZdwTrh.png)![](https://hackmd.io/_uploads/HJUBdP6rn.png) **Cores Análogas mais uma complementar**: Quebra de ritmo das cores análogas adicionando um grande contraste **Cores análogas relacionadas**: Neste tipo de harmonia escolhemos duas cores análogas e depois a terceira pulamos uma faixa de cor, assim se tem um contraste maior porém ainda suave em comparação **Cores Triádicas**: Tecnica bastante utilizada que possui uma boa harmonia e constraste, basicamente fazendo um triangulo equilatero no circulo cromático. ![](https://hackmd.io/_uploads/SJ3mqDpH3.png =150x150)![](https://hackmd.io/_uploads/HkHzqv6Bh.png =150x150)![](https://hackmd.io/_uploads/BJoBqD6B2.png =150x150) **Cores em quadrado:** Semelhante ao esquema triádico, mas permite escolher 4 cores com contraste razoável **Cores Tetrádicas:** Nesse caso escolhemos duas cores complementares em lados opostos do circulo, obtendo tbm um bom constraste **Monocromia:** Nesse caso utilizamos apenas uma cor porém variações da mesma através de saturação e brilho, criando um efeito degradê de cria. ![](https://hackmd.io/_uploads/rygusPpBn.png =150x150)![](https://hackmd.io/_uploads/H1gYsv6Sn.png =150x150)![](https://hackmd.io/_uploads/HkotsvpHh.png =150x150) ### Site e Ferramentas para Cores [**Adobe Color**](https://color.adobe.com/pt/create/color-wheel) * Mais completo, com diversos possibilidades de combinações (monocromia, cor complementar etc) * Extrair cores e degradê de uma imagem * Ideias de paletas **[Coolors](https://coolors.co)** Gerador rápido de combinação de cores podendo escolher uma ou mais cores e gerar a partir disso **[ColorZilla]([https://](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related?hl=pt-BR))** Extensão para descobrir o numero hex de uma cor no navegador. ## Gradiente em CSS Em CSS, é possível criar gradientes usando a propriedade **`background-image`**. Existem dois tipos principais de gradientes: gradientes lineares e gradientes radiais. Aqui estão exemplos de como criar cada um deles: 1. **Gradiente Linear**: Você pode criar um gradiente linear usando a função **`linear-gradient()`**. Ela aceita uma direção ou ângulo para especificar a orientação do gradiente e os pontos de parada para definir as cores. ```css .gradient { background-image: linear-gradient(to bottom, #ff0000, #0000ff); } ``` ![](https://hackmd.io/_uploads/S1dC__prh.png =150x100) 2. **Gradiente Radial**: Você pode criar um gradiente radial usando a função `radial-gradient()`. Ela aceita coordenadas de origem para especificar o ponto inicial do gradiente e os pontos de parada para definir as cores. Aqui está um exemplo básico de um gradiente radial: ```css .gradient { background-image: radial-gradient(circle, #ff0000, #0000ff); } ``` ![](https://hackmd.io/_uploads/ryVbTuaHn.png =150x100) ### Valores Opcionais Para os gradientes lineares e radiais em CSS, existem alguns valores opcionais que você pode utilizar para personalizar ainda mais o efeito desejado **Valores opcionais para gradientes lineares:** 1. **Direção**: Você pode especificar a direção do gradiente linear usando os seguintes valores: - **`to top`**: Do fundo para o topo. - **`to bottom`**: De cima para baixo (padrão). - **`to left`**: Da direita para a esquerda. - **`to right`**: Da esquerda para a direita. - **`to top left`**: Do canto inferior direito para o canto superior esquerdo. - **`to top right`**: Do canto inferior esquerdo para o canto superior direito. - **`to bottom left`**: Do canto superior direito para o canto inferior esquerdo. - **`to bottom right`**: Do canto superior esquerdo para o canto inferior direito. - **Ângulo em graus**: Você também pode especificar um ângulo personalizado para o gradiente linear, como `45deg` (45 graus) ou `-135deg` (-135 graus). **Valores opcionais para gradientes radiais:** 1. **Formato**: Você pode definir o formato do gradiente radial usando os seguintes valores: - **`circle`**: O gradiente terá uma forma circular (padrão). - **`ellipse`**: O gradiente terá uma forma elíptica. 2. **Posição**: Você pode especificar a posição inicial do gradiente radial usando os seguintes valores: - **`at center`**: O gradiente começa no centro do elemento (padrão). - **`at top left`**: O gradiente começa no canto superior esquerdo. - **`at top right`**: O gradiente começa no canto superior direito. - **`at bottom left`**: O gradiente começa no canto inferior esquerdo. - **`at bottom right`**: O gradiente começa no canto inferior direito. ## Texto Em CSS existem diversas propriedades ligadas a formatação e decoração do texto. As principais são: ### Font Size A propriedade CSS **`font-size`** é usada para definir o tamanho da fonte do texto em um elemento. Ela permite especificar o tamanho da fonte de várias maneiras. 1. Valores de Tamanho: - **Valores Absolutos**: Você pode definir um tamanho de fonte específico usando unidades absolutas, como pixels (`px`), pontos (`pt`), centímetros (`cm`) ou polegadas (`in`), por exemplo: `font-size: 16px;`. - **Valores Relativos**: Também é possível usar unidades relativas para ajustar o tamanho da fonte em relação ao tamanho de outros elementos. As unidades relativas incluem em (`em`) e porcentagem (`%`). Por exemplo: `font-size: 1.2em;` aumentará o tamanho da fonte em 20% em relação ao tamanho do elemento pai. ```css p { font-size: 16px; } h1 { font-size: 0.8em; } ``` ### Font Weight A propriedade CSS **`font-weight`** é usada para definir a espessura ou peso da fonte do texto em um elemento. Ela permite controlar o estilo visual da fonte, tornando-a mais fina ou mais negrita. 1. Valores numéricos: - A propriedade `font-weight` pode receber valores numéricos específicos que variam de 100 a 900, em incrementos de 100. Os valores mais comumente usados são: - **`normal` ou `400`** (corresponde à espessura normal da fonte). - **`bold` ou `700`** (corresponde à fonte em negrito). - Além desses valores, você pode usar valores intermediários, como `300`, `500` ou `600`, para obter níveis de espessura personalizados. 2. Palavras-chave adicionais: - Além de `normal` e `bold`, existem outras palavras-chave que podem ser usadas para definir o peso da fonte: - **`lighter`**: Define a fonte como mais fina do que o valor pai. - **`bolder`**: Define a fonte como mais negrita do que o valor pai. ```css h1 { font-weight: bold; } p { font-weight: 300; } ``` ### Font Style A propriedade CSS `font-style` é usada para definir o estilo da fonte do texto em um elemento. Ela permite aplicar efeitos como itálico ou oblíquo ao texto. 1. Valores de estilo: - **`normal`**: Este é o valor padrão e define a fonte com estilo normal. - **`italic`**: Aplica o estilo itálico à fonte, inclinando-a ligeiramente para a direita. Esse estilo é usado para enfatizar o texto. - **`oblique`**: Aplica um estilo oblíquo à fonte, inclinando-a para a direita. Esse estilo pode ser mais inclinado do que o estilo itálico, dependendo da fonte. ```css h1 { font-style: italic; } p { font-style: normal; } ``` ### Text Decoration A propriedade CSS `text-decoration` é usada para adicionar decorações visuais ao texto, como sublinhado, tachado (riscado) e linha sobre o texto. 1. Valores de decoração: - **`none`**: Este é o valor padrão e remove todas as decorações do texto. - **`underline`**: Adiciona uma linha horizontal embaixo do texto, criando um efeito de sublinhado. - **`overline`**: Adiciona uma linha horizontal acima do texto. - **`line-through`**: Adiciona uma linha horizontal que atravessa o meio do texto, criando um efeito de tachado (riscado). - **`underline overline`**: Adiciona tanto o sublinhado quanto a linha superior ao texto. 2. Valores opcionais: - **`dotted`**, **`dashed`**, **`solid`**, **`double`**, **`wavy`**: Esses valores opcionais podem ser adicionados aos valores de decoração para definir o estilo da linha. Por exemplo, `text-decoration: underline dotted;` adicionará um sublinhado pontilhado ao texto. ```css p { text-decoration: line-through; } span { text-decoration: underline dotted; } ``` ![](https://hackmd.io/_uploads/Hy0PrURrn.png =150x100) ### Text Align A propriedade CSS `text-align` é usada para definir o alinhamento horizontal do texto dentro de um elemento. Ela permite posicionar o texto à esquerda, à direita, no centro ou justificado. 1. Valores de alinhamento: - **`left`**: Alinha o texto à esquerda do contêiner. - **`center`**: Centraliza o texto horizontalmente no contêiner. - **`right`**: Alinha o texto à direita do contêiner. - **`justify`**: Distribui o texto igualmente entre as margens esquerda e direita, criando espaçamento adicional entre as palavras. Esse valor é comumente usado em blocos de texto justificado. ![](https://hackmd.io/_uploads/HJmCTLArn.png) ### Text Trasform A propriedade CSS `text-transform` é usada para controlar a transformação do texto em relação às letras maiúsculas e minúsculas. Ela permite modificar a capitalização do texto para criar efeitos visuais específicos. 1. Valores de transformação: - **`none`**: Este é o valor padrão e não aplica nenhuma transformação ao texto. O texto é exibido exatamente como foi inserido. - **`capitalize`**: Transforma a primeira letra de cada palavra em maiúscula. As outras letras permanecem em minúsculas. - **`uppercase`**: Transforma todas as letras em maiúsculas. - **`lowercase`**: Transforma todas as letras em minúsculas. ### Text indent A propriedade CSS **`text-indent`** é usada para especificar o recuo da primeira linha de um bloco de texto. Ela permite controlar o recuo ou a distância entre a margem esquerda do contêiner e o início do primeiro trecho de texto dentro desse contêiner. 1. Valores de recuo: - **Valores positivos**: Um valor positivo indica um recuo para dentro, empurrando a primeira linha do texto para dentro do contêiner. - **Valores negativos**: Um valor negativo indica um recuo para fora, estendendo a primeira linha para além da margem esquerda do contêiner. 2. Unidades de medida: - Os valores do `text-indent` podem ser especificados usando unidades de medida como pixels (`px`), porcentagem (`%`), em (`em`), rem (`rem`), entre outras. ### Outras propriedades 1. **`line-height`**: Define a altura da linha do texto. 2. **`letter-spacing`**: Define o espaçamento entre letras. 3. **`word-spacing`**: Define o espaçamento entre palavras. 4. **`text-shadow`**: Define a sombra do texto. 5. **`text-overflow`**: Define como o texto deve ser exibido quando estiver além do espaço disponível (por exemplo, cortado, com reticências). 6. **`white-space`**: Define como o espaço em branco dentro do texto deve ser tratado (por exemplo, ignorado, preservado). 7. **`word-wrap`**: Define como as palavras longas devem ser quebradas em várias linhas. 8. **`color`**: Define a cor do texto. ## Fontes ### Font Family A propriedade CSS `font-family` é usada para especificar a família de fontes a ser usada para renderizar o texto em um elemento. Ela permite definir uma lista prioritária de fontes para que o navegador use, caso a fonte principal não esteja disponível. 1. **Valor da família de fontes:** - O valor da propriedade `font-family` pode ser uma lista de nomes de fontes separados por vírgulas. Por exemplo: `font-family: Arial, Helvetica, sans-serif;`. O navegador tentará usar a primeira fonte da lista e, se não estiver disponível, passará para a próxima e assim por diante. A palavra-chave `sans-serif` é uma fonte genérica que o navegador usará se nenhuma das fontes especificadas estiver disponível. 2. **Citação de nomes de fontes:** - Se o nome da fonte contiver espaços ou caracteres especiais, é necessário colocá-lo entre aspas. Por exemplo: `font-family: "Times New Roman", Arial, sans-serif;`. ```css h1 { font-family: "Helvetica Neue", Arial, sans-serif; } p { font-family: Georgia, "Times New Roman", serif; } ``` ### Adicionando fontes externas Existem algumas formas de adicionar fontes e diversos sites para baixar ou copiar o link da fonte. Uma das formas de usar uma fonte externa é o **@import** dentro da tag style: ```css <style> @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); </style> ``` Outra forma de usar fonte externa é baixar e utilizar a propriedade **`@font-face`** em CSS. Isso permite que você incorpore fontes personalizadas e as utilize em seu design. 1. Baixe as fontes: - Primeiro, você precisa baixar os arquivos de fonte em um formato adequado, como TrueType Font (TTF) ou OpenType Font (OTF). 2. Defina a fonte usando `@font-face`: - No seu arquivo CSS, use a regra `@font-face` para definir a fonte personalizada. Você precisa especificar o nome da fonte, o caminho para o arquivo de fonte e o formato do arquivo. ```css @font-face { font-family: "MinhaFonte"; //Nome da fonte src: url("caminho/para/minha-fonte.ttf") format("truetype"); font-weight: normal; font-style: normal; } ``` 3 - Use a fonte em seu CSS: - Depois de definir a fonte usando `@font-face`, você pode usá-la em qualquer seletor CSS especificando o nome da fonte como valor da propriedade `font-family`. ### Sites e Ferramentas de Fontes **Sites de Fontes para baixar e copiar:** **[Google Fonts](https://fonts.google.com)** **[Adobe Fonts](https://fonts.adobe.com/fonts/snug-variable)** **[DaFont](https://www.dafont.com/pt/)** **Extensão para descobrir fontes de um site:** **[Fonts Ninja](https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh/related)** **Sites para descobrir fontes de uma Imagem:** **[Font Finder]([https://](https://www.whatfontis.com))** **[Font Squirrel](https://www.fontsquirrel.com/matcherator)** **[My fonts](https://www.myfonts.com/pages/whatthefont)** ## Background A propriedade CSS `background` é usada para definir o estilo de plano de fundo de um elemento. Ela permite aplicar cores, imagens, gradientes e outras propriedades relacionadas ao plano de fundo. ### **`background-color`** É usada para definir a cor de fundo de um elemento. Pode ser especificada usando nomes de cores, valores hexadecimais, RGB ou HSL. Por exemplo: **`background-color: #ff0000;`** define um fundo vermelho. ![](https://hackmd.io/_uploads/BkxwhMNNIh.png) ### **`background-image`** Permite adicionar uma imagem como fundo de um elemento. É possível especificar a URL da imagem ou usar a função `url()` para definir o caminho do arquivo. Por exemplo: **`background-image: url("caminho/para/imagem.jpg");`**. ![](https://hackmd.io/_uploads/S1a1z8VLh.png) ### **`background-repeat`** Controla como a imagem de fundo é repetida. Os valores possíveis incluem: - **`repeat`** (padrão): A imagem é repetida vertical e horizontalmente. - **`repeat-x`**: A imagem é repetida apenas horizontalmente. - **`repeat-y`**: A imagem é repetida apenas verticalmente. - **`no-repeat`**: A imagem não é repetida. ### **`background-position`** É usada para definir a posição inicial de uma imagem de fundo em relação ao elemento que a contém. Ela permite controlar onde a imagem será exibida dentro do elemento. A propriedade `background-position` aceita valores separados por espaço, que indicam as coordenadas horizontal e vertical da posição da imagem de fundo. Você pode especificar essas coordenadas utilizando diferentes unidades de medida, como pixels (`px`), porcentagem (`%`), palavras-chave, ou valores relacionados a palavras-chave. Algumas palavras-chave comumente usadas para definir a posição da imagem de fundo são: - **`left`, `center`, `right`**: Controlam a posição horizontal da imagem em relação ao elemento. - **`top`, `center`, `bottom`**: Controlam a posição vertical da imagem em relação ao elemento. Exemplos: **`background-position: 50% 50%;`** centraliza a imagem tanto horizontalmente quanto verticalmente no elemento, onde `50%` indica o centro. **`background-position: left top;`** alinha a imagem de fundo no canto superior esquerdo do elemento. **`background-position: 10px 20px;`** desloca a imagem de fundo 10 pixels à direita e 20 pixels para baixo em relação ao elemento. ![](https://hackmd.io/_uploads/rJdfv8E8n.png) ### **`background-attachment`** Controla se a imagem de fundo rola com o conteúdo ou permanece fixa. Os valores possíveis são `scroll` (padrão) e `fixed`. ### **`background-size`** A propriedade `background-size` permite definir o tamanho da imagem de fundo. Ela controla como a imagem se ajusta ao elemento que a contém. Os valores possíveis incluem: **sintaxe**: ```css background-size: valorX valorY; ``` - **Valores de comprimento**: Você pode especificar o tamanho usando valores de comprimento, como pixels (px), pontos (pt), porcentagens (%) ou unidades relativas. Por exemplo, 200px 100px define um tamanho de plano de fundo de 200 pixels de largura e 100 pixels de altura. - **`auto`** (padrão): A imagem de fundo é exibida no tamanho original. - **`cover`**: A imagem de fundo é redimensionada para cobrir todo o elemento, mantendo a proporção. Pode resultar em corte da imagem ou expansão para preencher completamente o elemento. - **`contain`**: A imagem de fundo é redimensionada para que caiba completamente dentro do elemento, mantendo a proporção. Pode resultar em espaços vazios ao redor da imagem. - **Valores únicos**: Se você especificar apenas um valor para background-size, ele será aplicado tanto à largura quanto à altura, mantendo a proporção original da imagem. Por exemplo, 50% definirá o tamanho do plano de fundo em 50% da largura e altura do elemento. ### **`background-origin e background-clip`** A propriedade **`background-origin`** especifica a origem do plano de fundo em relação ao elemento. Ela define onde o plano de fundo é posicionado e começa a ser exibido. Já o **`background-clip`** especifica até onde o plano de fundo se estende em relação ao conteúdo do elemento. Ela controla a área na qual o plano de fundo é visível. - `padding-box` (padrão): O plano de fundo começa a partir da borda interna do elemento ou se estende até a borda. - `border-box`: O plano de fundo começa a partir da borda externa do elemento, ou se estende até a borda externa do elemento. . - `content-box`: O plano de fundo começa a partir do conteúdo do elemento, excluindo as bordas ou se estende até o fim do elemento. ### **`background-blend-mode`** (https://www.youtube.com/watch?v=ZRkcVberPrk) A propriedade **`background-blend-mode`** permite misturar o plano de fundo com o conteúdo que está por trás dele, criando efeitos de blend. Ela define o modo de mesclagem para a imagem de fundo. Os valores possíveis incluem: - **`normal`** (padrão): O plano de fundo é exibido sem mesclagem, ocultando o conteúdo que está por trás dele. - **`multiply`**: O plano de fundo é mesclado multiplicando a cor do conteúdo que está por trás dele pela cor do plano de fundo. - **`overlay`**, **`screen`**, **`darken`**, **`lighten`** e outros: Diferentes modos de mesclagem estão disponíveis para criar diferentes efeitos de combinação. ## Border A propriedade CSS **`border`** é usada para definir a borda de um elemento HTML. Ela permite controlar a aparência, estilo, espessura e cor da borda. **border: *Estilo*, *Espessura*, *Cor*;** 1. **Estilo da borda**: - A propriedade `border-style` define o estilo da borda. Alguns valores possíveis incluem: - **none**: Sem borda (padrão). - **solid**: Borda sólida. - **dotted**: Borda pontilhada. - **dashed**: Borda tracejada. - **double**: Borda dupla. - **groove**: Borda entalhada. - **ridge**: Borda em relevo. - **inset**: Borda interna. - **outset**: Borda externa. 2. **Espessura da borda**: - A propriedade `border-width` define a espessura da borda. Você pode especificar um valor em pixels (`px`), em (`em`), rem (`rem`), pontos (`pt`), porcentagem (`%`) ou usando valores predefinidos como `thin`, `medium` e `thick`. 3. **Cor da borda**: - A propriedade **`border-color`** define a cor da borda. Você pode especificar uma cor usando nomes de cores, valores hexadecimais, RGB **Borda individual**: - É possível definir as propriedades da borda individualmente para cada lado do elemento usando as propriedades `border-top`, `border-right`, `border-bottom` e `border-left`. Isso permite controlar estilos, espessuras e cores diferentes para cada lado. **Borda arredondada**: ~~Isso aqui é ELITE~~ - A propriedade **`border-radius`** permite arredondar as bordas de um elemento. Você pode especificar um valor em pixels ou porcentagem para criar cantos arredondados. ```css #n1{ border: 2px solid red; border-radius: 10px; } #n2{ border: 2px dashed blue; } #n3{ border-bottom: 5px groove green; border-right: 5px groove green; } ``` ![](https://hackmd.io/_uploads/ryMIllSU3.png) ## Margin A propriedade CSS `margin` é usada para definir o espaço em branco (margem) ao redor de um elemento HTML. Ela controla a distância entre o elemento e os outros elementos vizinhos. **Margin de todos os lados:** - A propriedade **`margin`** pode aceitar um único valor ou até quatro valores separados por espaço. A ordem dos valores é a seguinte: **`margin: cima direita baixo esquerda;`**. Você pode especificar valores em pixels (`px`), em (`em`), rem (`rem`), pontos (`pt`), porcentagem (`%`) ou usando valores predefinidos como `auto`. **Margin individual:** - É possível definir a margem para cada lado do elemento individualmente usando as propriedades **`margin-top`, `margin-right`, `margin-bottom` e `margin-left`**. **Margin negativo:** - É possível usar valores negativos na propriedade `margin` para criar margens negativas, o que pode ser útil para posicionar elementos de maneira específica ou criar sobreposições. ```css div { margin: 10px; /* Define uma margem de 10 pixels em todos os lados */ margin-top: 20px; /* Define uma margem de 20 pixels apenas no topo */ margin: 0 auto; /* Define uma margem zero no topo e no rodapé, e centraliza o elemento horizontalmente */ margin-left: -10px; /* Define uma margem negativa de 10 pixels no lado esquerdo */ } ``` ## Padding A propriedade CSS `padding` é usada para definir o espaço de preenchimento dentro de um elemento HTML. Ela controla a distância entre o conteúdo do elemento e suas bordas. **Padding de todos os lados:** - A propriedade **`padding`** pode aceitar um único valor ou até quatro valores separados por espaço. A ordem dos valores é a seguinte: **`padding: cima direita baixo esquerda;`**. Você pode especificar valores em pixels (`px`), em (`em`), rem (`rem`), pontos (`pt`), porcentagem (`%`) ou usando valores predefinidos. **Padding individual:** - É possível definir o preenchimento para cada lado do elemento individualmente usando as propriedades **`padding-top`, `padding-right`, `padding-bottom` e `padding-left`**. **Padding negativo:** - Embora não seja uma prática comum, é possível usar valores negativos na propriedade `padding` para reduzir o espaço de preenchimento dentro do elemento. ![](https://hackmd.io/_uploads/HJ4QIgr8h.png) ## Width e Height (Largura e Altura) As propriedades CSS **`width`** e **`height`** são usadas para definir a largura e altura de um elemento HTML, respectivamente. Elas permitem controlar o tamanho do elemento na página **`width`** A propriedade `width` define a largura de um elemento. Ela pode ser especificada em pixels (`px`), em (`em`), rem (`rem`), pontos (`pt`), porcentagem (`%`) ou usando valores predefinidos como `auto`. - Alguns exemplos de valores para `width` são `100px`, `50%`, `auto`, etc. **`height`** A propriedade **`height`** define a altura de um elemento. Ela pode ser especificada da mesma forma que a propriedade `width`, em pixels, em, rem, pontos, porcentagem ou com o valor `auto`. - Exemplos de valores para `height` incluem `200px`, `50%`, `auto`, etc. ![](https://hackmd.io/_uploads/rkGGolBIn.png) ### Max e Min width/height As propriedades CSS `max-width`, `max-height`, `min-width` e `min-height` são usadas ,como o nome sugere, para definir limites máximos e mínimos para as dimensões de um elemento. Elas permitem controlar o tamanho mínimo e máximo de largura e altura de um elemento, garantindo que ele se ajuste adequadamente e mantenham a resposividade do site. ```css .container { min-width: 200px; /* Define uma largura mínima de 200 pixels */ max-width: 800px; /* Define uma largura máxima de 800 pixels */ min-height: 100px; /* Define uma altura mínima de 100 pixels */ max-height: 500px; /* Define uma altura máxima de 500 pixels */ } ``` ## Display A propriedade CSS **`display`** é usada para controlar como um elemento HTML é exibido na página. Ela determina o tipo de caixa de layout usada para renderizar o elemento e afeta o comportamento e a interação com outros elementos ao redor. ![](https://hackmd.io/_uploads/ByTKDB_Lh.png) 1. **`block`**: - O valor **`block`** faz com que o elemento seja renderizado como um bloco. Ele ocupa toda a largura disponível horizontalmente e começa em uma nova linha. Exemplos de elementos que têm **`display: block` são `<div>`, `<p>`, `<h1>` a `<h6>`, `<section>`**, entre outros. ![](https://hackmd.io/_uploads/BJyZwH_8h.png) 2. **`inline`**: - O valor **`inline`** faz com que o elemento seja renderizado como uma caixa inline. Ele ocupa apenas o espaço necessário (altura e largura) para o seu conteúdo, sem iniciar uma nova linha. Exemplos de elementos com **`display: inline`** são **`<span>`**, **`<a>`**, **`<strong>`**, **`<em>`**, entre outros. ![](https://hackmd.io/_uploads/H18NPHu8n.png) 3. `inline-block`: - O valor `inline-block` combina as características dos valores `inline` e `block`. O elemento é renderizado como uma caixa inline, mas permite que sejam definidas propriedades de largura e altura. Ele ocupa apenas o espaço necessário para o conteúdo e pode começar em qualquer lugar da linha. Isso permite que elementos tenham largura e altura definidas, mas ainda mantenham o comportamento inline. ![](https://hackmd.io/_uploads/HySPPrdUn.png) 4. **`none`**: - O valor **`none`** faz com que o elemento seja removido do fluxo normal da página. Ele não é renderizado e ocupará nenhum espaço. É útil para ocultar elementos dinamicamente usando JavaScript ou CSS. ![](https://hackmd.io/_uploads/Hy1TvSd82.png) ## Position A propriedade CSS `position` é usada para controlar o posicionamento de um elemento em relação ao seu contexto de layout. Ela permite definir como um elemento deve ser posicionado na página, levando em consideração outros elementos ao redor. Existem cinco valores principais para a propriedade **`position`**: ![](https://hackmd.io/_uploads/S1fJksFU2.png) 1. **`static` (padrão):** - É o valor padrão para todos os elementos. - O elemento segue o fluxo normal do documento e não é afetado por outras propriedades de posicionamento. - Ignora as propriedades `top`, `bottom`, `left` e `right`. (propriedades de deslocamento horizontal e vertical) 2. **`relative`**: - O elemento é posicionado de forma relativa ao seu local original no fluxo do documento. - Pode ser deslocado usando as propriedades `top`, `bottom`, `left` e `right`. - O espaço original do elemento é preservado mesmo quando deslocado. ![](https://hackmd.io/_uploads/SJ-909KIh.png) 3. **`fixed`**: - O elemento é posicionado em relação à janela de visualização. - Ele permanece fixo mesmo durante a rolagem da página. - Também usa as propriedades `top`, `bottom`, `left` e `right` para definir sua posição. 4. **`absolute`**: - O elemento é posicionado em relação ao seu ancestral ou seja ao elemento html em que ele estiver contido (ou o próprio documento, se não houver ancestral posicionado). - Para funcionar o posicionamento absoluto é necessário que o container pai possua qualquer posicionamento que não seja estatico. - Usa as propriedades `top`, `bottom`, `left` e `right` para definir sua posição. ![](https://hackmd.io/_uploads/r1becsFUh.png) ```css position: absolute; right: 40px; top: 50px; ``` 5. **`sticky`**: - O elemento é posicionado com base no fluxo normal do documento, mas se comporta como `fixed` quando alcança um determinado ponto de rolagem. - É uma combinação de `relative` e `fixed`. - Usa as propriedades `top`, `bottom`, `left` e `right` para definir a posição fixa. ![](https://hackmd.io/_uploads/SkuxhotIh.gif =250x250) ### Z index A propriedade CSS **`z-index`** é usada para controlar a ordem de empilhamento dos elementos em um contexto de sobreposição (quando os elementos se sobrepõem uns aos outros). Ela define a "profundidade" de um elemento, determinando se ele deve aparecer à frente ou atrás de outros elementos. A propriedade **`z-index`** aceita valores numéricos e pode ser definida em qualquer número inteiro, positivo ou negativo. Quanto maior o valor, mais à frente o elemento será posicionado. Se dois elementos tiverem o mesmo **`z-index`**, a ordem de empilhamento será determinada pela ordem em que eles aparecem no HTML. - **Ele só tem efeito em elementos que tenham sido posicionados (`position` diferente de `static`, que é o valor padrão).** - **Valores negativos são permitidos, permitindo que um elemento seja posicionado atrás de outros elementos.** ![](https://hackmd.io/_uploads/ryaj4kjL2.png =200x300) **Default (Z index 1, 2 ,3)** ![](https://hackmd.io/_uploads/B125VkjUh.png =200x300) **Invertido (Z index 3, 2, 1)** ## Overflow A propriedade CSS `overflow` é usada para controlar o comportamento de um elemento quando o conteúdo dentro dele é maior do que sua área visível. Ela determina como o conteúdo extra será tratado em relação à área de exibição do elemento. ![](https://hackmd.io/_uploads/BkxQi1jL3.png) > **Conteudo saindo da div** Existem várias opções para a propriedade **`overflow`**: 1. **`visible` (padrão):** - O conteúdo que ultrapassa a área visível do elemento é exibido além dos limites do elemento. - O conteúdo pode se sobrepor a outros elementos na página. 2. **`hidden`**: - O conteúdo que ultrapassa a área visível do elemento é cortado e não é exibido. - Qualquer conteúdo que esteja fora dos limites do elemento é ocultado. 3. **`scroll`**: - O conteúdo que ultrapassa a área visível do elemento é exibido e uma barra de rolagem é adicionada automaticamente para permitir que o usuário role e visualize o conteúdo extra. - Uma barra de rolagem será sempre visível, mesmo se o conteúdo não exceder os limites do elemento. 4. **`auto`**: - O comportamento é semelhante a **`scroll`**, mas a barra de rolagem é adicionada apenas se o conteúdo ultrapassar os limites do elemento. - Se o conteúdo não exceder os limites, nenhuma barra de rolagem será exibida. ## Float A propriedade CSS **`float`** é usada para posicionar um elemento de forma que ele flutue em relação aos outros elementos em torno dele. Ela permite que um elemento seja movido para o lado esquerdo ou direito de seu contêiner, fazendo com que o restante do conteúdo flua ao redor dele. **Principais pontos sobre o uso da propriedade `float`:** - Ela pode receber dois valores: `left` (esquerda) e `right` (direita). - Quando um elemento é definido como `float`, ele se torna um elemento de nível de bloco e é retirado do fluxo normal do documento. - Os elementos subsequentes no fluxo normal se ajustam ao redor do elemento flutuante, ocupando o espaço restante disponível. - É comum usar a propriedade `clear` para evitar que elementos subsequentes sejam posicionados ao lado do elemento flutuante. ![](https://hackmd.io/_uploads/r1rEnhs82.png) **Sem Float** ![](https://hackmd.io/_uploads/BJgG3hsL3.png) **Com Float na imagem para a esquerda** ## Opacity A propriedade CSS **`opacity`** é usada para controlar a opacidade de um elemento, ou seja, o quão transparente ele é. Ela aceita valores entre 0 e 1, onde 0 significa totalmente transparente e 1 significa totalmente opaco. **Principais pontos sobre o uso da propriedade `opacity`:** - Ela afeta não apenas o elemento selecionado, mas também todos os seus elementos filhos. - Um valor de `opacity: 0` torna o elemento completamente invisível, enquanto um valor de `opacity: 1` mantém o elemento completamente visível. - Elementos com uma opacidade reduzida ainda podem receber eventos de mouse e interação, mesmo que sejam parcialmente transparentes. ![](https://hackmd.io/_uploads/ByN2gTiL3.png) ## Text Shadow e Box Shadow As propriedades CSS **`text-shadow`** e **`box-shadow`** são usadas para adicionar sombras a elementos de texto e caixas, respectivamente. 1. A propriedade **`text-shadow`** permite adicionar sombras a texto. Ela aceita valores separados por vírgulas para definir **o deslocamento horizontal, o deslocamento vertical, o desfoque da sombra e a cor da sombra respectivamente.** ```css <div > <h1 style="text-shadow: 5px 5px 10px black;">Mengo</h1> <h1 style="text-shadow: 1px 5px 3px red;">Mengo</h1> <h1 style="text-shadow: 2px 0px 1px darkgoldenrod;">Mengo</h1> </div> ``` ![](https://hackmd.io/_uploads/ryOO6m3U2.png) A propriedade **`box-shadow`** permite adicionar sombras a elementos de caixa (como divs, botões, etc.). Ela também aceita valores separados por vírgulas para definir **o deslocamento horizontal, o deslocamento vertical, o desfoque da sombra e a cor da sombra respectivamente.** ```css #div1{box-shadow: 5px 5px 10px black;} #div2{box-shadow: 6px 6px 2px red;} #div3{box-shadow: 0px 0px 50px darkgoldenrod;} ``` ![](https://hackmd.io/_uploads/rk7NbVhIh.png) ## Media Queries As Media Queries são uma funcionalidade do CSS que permitem aplicar regras de estilo diferentes com base nas características do dispositivo e nas condições de exibição. Elas permitem criar layouts responsivos, adaptando o design de um site ou aplicativo para diferentes tamanhos de tela e dispositivos. **As Media Queries são definidas usando a sintaxe `@media`, seguida de uma condição de mídia específica.** ```css @media (max-width: 768px) { /* Estilos aplicados quando a largura da tela é 768px ou menor */ body {font-size: 16px;} } @media (min-width: 769px) and (max-width: 1024px) { /* Estilos aplicados quando a largura da tela é entre 769px e 1024px */ body {font-size: 18px;} } ``` As Media Queries não se limitam apenas à largura da tela. É possível aplicar estilos diferentes com base na altura da tela, orientação do dispositivo (retrato ou paisagem), resolução do dispositivo, densidade de pixels, tipo de dispositivo e muito mais. **1. Orientação da tela:** ```css @media (orientation: portrait) { /* Estilos aplicados quando a orientação é retrato */ body { background-color: #f5f5f5; } } @media (orientation: landscape) { /* Estilos aplicados quando a orientação é paisagem */ body { background-color: #ffffff; } } ``` **2. Resolução da tela:** ```css @media (min-resolution: 300dpi) { /* Estilos aplicados quando a resolução é de pelo menos 300dpi */ img { border: 2px solid red; } } @media (max-resolution: 72dpi) { /* Estilos aplicados quando a resolução é de no máximo 72dpi */ img { border: 2px solid blue; } } ``` **3. Tipo de dispositivo:** ```css @media (hover: hover) { /* Estilos aplicados quando o dispositivo suporta interações de hover */ button { background-color: #ff0000; } } @media (hover: none) { /* Estilos aplicados quando o dispositivo não suporta interações de hover */ button { background-color: #0000ff; } } ``` ### Tamanhos pré definidos **1. Smartphones (abaixo de 600px)** ```css @media only screen and (max-width: 600px){ } ``` 2. Dispositivos um pouco maiores como tablets (acima de 600px) ```css @media only screen and (min-width: 600px){ } ``` 3. Dispositivos médios (Tablets deitados - acima de 768px) ```css @media only screen and (min-width: 768px){ } ``` 4. Dispositivos Largos (Notebook/PC - acima de 992px) ```css @media only screen and (min-width: 992px){ } ``` 5. Dispositivos super largos (Telas maiores - acima de 1200px) ```css @media only screen and (min-width: 1200px){ } ``` ![](https://hackmd.io/_uploads/ByQ-s1pUn.png) ## Variáveis em Css As variáveis em CSS, também conhecidas como Custom Properties (Propriedades Personalizadas), permitem definir valores que podem ser reutilizados em várias partes do seu código CSS. Elas são declaradas usando a sintaxe **`--nome-da-variavel: valor;`** e podem ser utilizadas em qualquer lugar em que você normalmente usaria um valor. **Declaração de variáveis**: Para criar uma variável em CSS, você precisa declará-la em um seletor. A declaração **`:root`** é usada para definir as variáveis globalmente, tornando-as acessíveis em todo o documento CSS. Você também pode definir variáveis dentro de um seletor específico, limitando seu escopo a esse seletor. ```css :root { --cor-primaria: #ff0000; --espacamento: 20px; } ``` **Utilizando variáveis:** Para usar uma variável, você pode atribuir seu valor a uma propriedade. ```css .elemento { color: var(--cor-primaria); padding: var(--espacamento); } ``` * **Sobrescrevendo variáveis**: As variáveis em CSS podem ser sobrescritas. Isso significa que você pode alterar o valor de uma variável em uma parte específica do seu código. * **Cascading (Cascateamento)**: As variáveis em CSS também seguem as regras de cascata. Isso significa que se você definir uma variável em um seletor específico, ela terá precedência sobre a definição global.