0% acharam este documento útil (0 voto)

29 visualizações23 páginas

Notes - CSS3

Enviado por

Ronaldo Filho

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

29 visualizações23 páginas

Notes - CSS3

Enviado por

Ronaldo Filho

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd

Notes - CSS3 - As Folhas de Estilo em Cascata - Cascading Style Sheets

Baseada em seletores. Estrutura.:

body[seletor] {
font-family: Arial; [declaração]
font-size:[propriedade] 20pt;
color: blue[valor];
}

Design: cores, sombras, tamanhos, posicionamento...

CSS3 - <style>

body{
background-color (cor de fundo)
}

color (cor da letra)

font: normal 20pt Arial;

/fonte = fonte, o pt é tamanho, e dps vem o nome da fonte/

font-family: Arial //tipo da fonte

font-size: 20pt //20 pontos, diz o tamanho da fonte

width: 200px; >> largura da caixa (w é mais largo q h, ent é largura)

height: 200px; >> altura da caixa (h é mais alto q w, ent é altura)
altura da tela do usuário: vh. Ex.: 100vh (100% da view port). Nmr bom: 98vh pra
ter margem

CAIXAS

Anatomia das Caixas

content (conteúdo) >> é o conteúdo da caixa. Toda caixa, por padrão, possui somente
o conteúdo. Exceção: o <body> já possu uma margin de 8px.

width (largura) e height (altura) >> seu conjunto é chamado de box-size (tamanho da
caixa).

border (borda) >> contorna o content. Pode ter espessura, cor e formato.
border-width: 10px; (grossura/largura da borda)
border-style: solid; (tipo de borda)
border-color: red; (cor da borda)

shorthand - border: 10px solid red;

padding (preenchimento) >> é o espaço entre o conteúdo e a borda (da borda pra
dentro). É o espaço lateral de dentro da caixa.
padding: 15px; (todos iguais)

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

shorthand - padding: 10px 15px 20px 25px;

ou
shorthand - padding 10px 20px;
*Obs: o 2° só é possível caso top e bottom sejam iguais assim como right e
left.

margin (margem) >> distância do elemento entre os outros elementos do site. Da

borda pra fora.
margin: 3px; (todas iguais)

margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;

shorthand - margin: 0px 10px 20px 30px

ou
shorthand - margin: 0px 15px;
*Obs: o 2° só é possível caso top e bottom sejam iguais assim como right e
left.

centralizar blocos - para centralizar blocos na página, por meio da adaptação

automática das margens laterais para que o bloco seja colocado no meio do
navegador, independente do tamanho da janela, utilizamos - margin: auto; (caso nn
funcione, testa com um "display: block;" pq as vezes o elemento n é um bloco (Ex.:
<img>), aí assim funciona)

outline (contorno) >> pouco usado, mas fica entre a margem e a borda. É a borda da
borda.
outline-width: 10px; (largura do contorno)
outline-style: solid; (tipo de contorno)
outline-color: red; (cor ddo contorno)

shorthand - outline: 10px solid red;

*OBS¹.: para calcular a largura e a altura total de um elemento na tela, deve-se

somar os tamanhos do content + padding + border + margin. O outline não entra na
contagem.

*OBS².: a ordem para os valores é: top>right>bottom>left (relógio no sentido

horário).

SOMBRA/SHADOW NAS CAIXAS E TEXTOS

box-shadow: 5px 5px 10px black; (sombra da caixa) (rgba(5px 5px 15px 0.616)
box-shadow: 5px 5px 10px rgba(5px 5px 15px 0.616);
main >> box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.418)

text-shadow: 2px 2px 2px black / (rgba(1px 1px 0px black)

text-shadow: 2px 2px 2px rgba(1px 1px 2px 0.733);
h1 >> text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.267);
p >> text-shadow: 2px 2p 0px rgba(0, 0, 0, 0.315);

Parâmetros: os parâmetros são deslc horizontal (h-offset) (tam. sombra p/ lado),

vertical (v-offset) (tam. sombra p/ baixo), espalhamento da sombra (blur) e cor da
sombra (color), respectivamente. O ideal visualmente é utilizar transparência no
preto (rgba, normalmente), evite usar sombra de outra cor ou sem transparência.

BORDAS DECORADAS

Bordas Arredondadas da Caixa/Div

border-radius: 10px; >> arredonda os 4 vértices da caixa (¹Obs.: caso dentro do
container que receba essa propriedade tiver uma imagem e ela tiver quadrada
{normal}, ultrapassando e trapalhando a borda da caixa, basta utilizar no
container: ' overflow:hidden; ' que isso apagará qlqr "sobra" p fora da borda do
container)

border-radius: 50%; >> a depender do tamanho da imagem, transforma ela em um

círculo (quadrado para círculo)

Para medidas diferentes - border-radius: 10px 20px 30px 40px; ou border-radius 10px
30px; (os primeiros px referem-se as bordas top-left e top-right. Os outros dois ao
bottom-right e o bottom-left.)

Ordem: top-left > top-right > bottom-left > bottom-right;

border: 8px solid white; >> shorthand pra uma borda de radius 8px, sólida e branca;

//
h2, h3, h4 {
color: rgb(192, 0, 0);
}

// diz a cor de um grupo todo

TIPOS DE REPRESENTAÇÃO DE CORES

Hexadecimal
#00.00.00 (sem os pontos, o 1 é red, 2 gren, 3 blue)
Se adicionar mais dois "zeros", é a transparência. #[Link]

RGB - Red, Green, Blue

rgba(xxx, xxx, xxx, x) (red/greend/blue/transparencia q vai de 0(invisivel) a

1(visivel) (normalmente só tem as 3 primeiras casas {rgb} que vão de 0 a 255, mas
dps mostra a transparência q vai de 0,00 a 1,00.)

HSL - Hue (Matriz - 0/356 {eu acho}), Saturation (saturação - 0%/100%), Luminosity
(luminosidade - 0%/100%)

CMYK (Ciano(cyan), Magenta(magenta), Amarelo(yellow), Key(chave)

usado por impressoras

CÍRCULO CROMÁTICO
Harmonia de cores:
Círculo cromático
cores primárias (triângulo equilátero comum):
amarelo, azul e vermelho;
cores secundárias triângulo equilátero de cabeça pra baixo):
verde, laranja e violeta;
cores terciárias:
cor primária + cor
secundária; ex: amarelo-esverdeado (meio entre o a secundária verde e a
primária amarelo) / vermelho-alaranjado (meio entre a secundária laranja e
a primária
vermelho. / azul-arroxeado (meio entre a secundária violeta e a
primária azul).
temperatura das cores: frias e quentes (dá para dividir o círculo no meio entre o
amarelo-esverdeado e o amarelo & entre o violeta e o vermelho-arroxeado) (lado
"vermelho" = quentes // lado "azul" = frias)

cores complementares: maior contraste;

cores análogas: cores vizinhas;

paleta de cores: entre 3 a 5 cores (média: 4). Ideias: pega a cor principal,
seleciona duas análogas e uma complementar, resultando em 4 cores.

paletas:

+cores análogas relacionadas: pega duas cores análogas (qlqr lado), pula uma, e
seleciona a "4". Ex.: verde, amarelo, amarelo-alaranjado.

+cores intercaladas: escolhe uma cor, pula uma, e vai seguindo pulando. Ex.:
amarelo, laranja, vermelho (mt forte).

+cores triádicas: cores primárias e as secundárias (formam um triângulo equilátero,

pulando 3)

+cores em quadrado: formam um quadrado, pulando 4. Ex.: amarelo, laranja-

avermelhado, violeta e verde-azulado.

+cores tetrádicas: escolhe duas cores (fica mais balanceado se forem duas análogas)
e traça as complementares, formando um retângulo.

+monocromia: trabalha com uma só cor, porém, modifica a saturação e a luminosidade.

body-> background-image: url([Link]);

[Link]-legenda img {controla o width e height da foto ds acordo c a dimensão

da pagina sempre}

[Link]-legenda figcaption {position: absolute} // Demarca a legenda em algum

lugar (se usado com "position:relative" do [Link]-legenda ele restringe a
legenda a imagem

padding: 10px; // espaço na leganda

box-sizing: border-box; // reduz as coisas ao tamanho da borda

[Link]-legenda:hover figcaption {} // despara uma formatação específica qnd vc

passa o mouse em cima (normalmente a formatação comum fica com opacity 0 e a hover
fica com 1)

dentro de um nav puxado por id:

nav#menu ul {}

list-style: none// tira as marcações da lista

"Modificações na Fonte":
text-transform: uppercase; // muda p caixa alta

font-variant: small-caps;
Tipos de técnica para as CSS

CSS Inline Style ->> atualizações específicas, e não para o dia a dia ou para o
estilo gera do projeto. Feito na mesma linha.

CSS Internal Style ->> organiza melhor o código. Ideal para páginas únicas e
isoladas com estilos próprios, que não serão replicados em outras páginas. Opte
também por essa técnica caso a quantidade de configurações de estilo for
pequena/média. Usar muitos seletores fará com que o arquivo .html fique muito
grande e que o conteúdo seja visualmente jogado lá para baixo do código.

CSS External Style ->> use essa técnica sempre que o mesmo estilo vá ser usado em
várias páginas dentro do site. Usando a tag <link> (recomendado usar abaixo do
title) em várias páginas, você pode compartilhar o mesmo estilo entre elas. (é
possível adicionar mais de um link, portanto, mais de um documento com o estilo do
site (Ex.: [Link])

Resumo:
Ext > use sempre que puder
Int > use para pequenas configurações
Inl > procure evitar

É possível misturar as 3 técnicas ao criar um CSS externo para as configurações

globais, CSS interno para as configurações locais e CSS inline para pequenas
configurações pontuais.

As propriedades inline se sobressaem sobre a outra em questão de prioridade. Isso

também acontece com algum elemento com id/class. O programa priorizará as
propriedades do id e não as gerais.

Para CSS Externo, é recomendado colocar { @charset "UTF-8"; (usar aspas duplas)}
como segurança no início do [Link].

Dica para criar CSS externo com VSCode:

link:css >> href >> ctrl+clique em cima do [Link] >> ele vai lhe direcionar para
o arquivo mas caso ele n tenha sido criado ainda, ele cria.

Pegar cores do site

f12 (inspecionar)> styles > qlqr lugar q tenha cor > clica no quadradinho > setinha
no canto superior esquerdo > color picker > vai na cor

Degradê em css:
body {
background-image: linear-gradient(to bottom {top, right, left}, color 1,
color 2 (pode usar "transparent",...)
background-attachment: fixed; //quando se usa to top ou to bottom as vezes
fica uma linha estranha em baixo e isso resolve. Porém, depois é necessário usar
height: auto; nos outros elementos pois as vezes eles somem por alguma razão q eu
ainda n sei dizer, mas acho q é pq o fundo deles aumenta mt e eles somem.
}

(ao invés de "to ___", pode usar ângulos. Ex.: (45deg, cor 1, ... )
Se ao invés de linear for radial-gradient e em vez de vc usar "to ___" vc usar
"circle", faz um gradiente cujo início é no centro e se expande como um círculo.
Ex.: radial-gradient(circle, cor1,...)

Colocar um % após as cores, mas na mesma vírgula, muda a "quantidade" delas no

gradiente

IMAGENS DE FUNDO (background images):

background-image: url(); (pode ser externo ou interno)
Podemos configurar 4 propriedades para imagens de fundo: repetição (repeat),
posição (position), redimensionamento (size) e vínculo (attachment).

Repetição:
Quando o tamanho da caixa é maior que o tamanho da imagem, por padrão, ela será
repetida no eixo x (horizontalmente até o limite) e no eixo y (verticalmente até o
limite).

Para visualizar melhor isso:

background-repeat: repeat; (tudo)
background-repeat: no-repeat; (img 1 vez)
background-repeat: repeat-x; (img repete só eixo x)
background-repeat: repeat-y; (img repete só eixo y)

Posição:
Além de definir o nível de repetição, é possível mudar a posição de referência (de
início) da imagem. padrão: left top. Podem ser outros. Ex.: left top, center top,
right top, left center, center center, right center, left bottom, center bottom,
right bottom. (background-position: ;)

¹Obs.: pode-se posicionar a imagem mais especificamente. Primeiro, é necessário

determinar uma height e width fixa (mlhr por porcentagem) p o local onde a imagem
estará. Depois, coloca-se ' float: left /ou/ right ' na imagem para fazer com que
ela se desloque para algum local específico em meio aos textos.

Redimensionamento:
É possível redimensionar a imagem para forçá-la a caber na caixa. Por padrão, as
configurações originais da imagem são mantidas. Para redimensionar, utilizamos a
propriedade "background-size: ;". Ela aceita os seguintes valores: auto (padrão,
tamanho original), length ([length px][length %] redimensiona a largura da img e
faz a altura se adaptar automaticamente. Pode-se informar as 2 dimensões na
sequência ou usar valores percentuais), cover (muda o tamanho da imagem pra q ela
sempre seja totalmente exibida na tela, sem cortes), contain (redimensiona a imagem
pra q ela cubra o contêiner, mesmo q ocorram alguns cortes). Ordem: width height.
Ex.:
background-size: 100px 200px; (100px de width e 200px de height);

Vínculo:
Configura o vínculo da imagem de fundo com o resto do documento. Usado
principalmente se o conteúdo for maior que a altura da pág e seja necessário vazar
uma rolagem vertical. Utilizamos a propriedade" background-attachment: ;". Ela
recebe 2 parâmetros, normalmente: scroll (padrão, imagem rola junto c o conteúdo)
ou fixed (imagem fica fixada enquanto o conteúdo vai sendo rolado).

Shorthand (ordem dos atributos de backgorund): [background-color] > [background-

image] > [background-repeat] > [background-attachment] > [background-position] > /
[background-size] > [background-origin] > [background-clip]
background-color: black;
background-image: url(imagens/[Link]);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;

Ao invés disso, pode-se usar:

backgroud: black url(imagens/[Link]) no-repeat fixed center center;

ex.: background: darkblue url(imagens/[Link]) no-repeat fixed center center /
cover;

>Imagem de Fundo Bem Responsiva e Posicionada:

body {

background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;

height: 98vh

/* background: no-repeat fixed center center / cover; */

}

main { /* if text use this */

max-width: 400px;
margin: auto;

adicionar configurações de estilo globais nas css (seleciona todos os elementos

HTML: <p>, <h1>, etc) (SELETOR UNIVERSAL):
Ex.:
* {
margin: 0px;
padding: 0px;
}

ORDEM dos atributos em CSS:

font style-->font-variant-->font-weight-->font-size/line-height--> font-family.

ALINHAMENTO DE TEXTO
Por padrão, os textos no HTML (h1, h2, p,...) vêm alinhados à esquerda. Para mudar,
utilizamos a propriedade "text-align:".

4 tipos:
>À esquerda (left):
>À direita (right):
>Centralizado (center):
>Justify (ajustar o alinhamento do lado esquerdo e direito, deixando "reto"):
text-indent: 30px; >> propriedade de alinhamento para parágrafos: recuo no início
do parágrafo (normalmente, 30px)

line-height: 2em; >> ajuda na leitura pois distancia as linhas uma das outras.

text-decoration: underline >> botar sublinhado e outras decorações de texto.

content: 'texto'; >> escrever.

display: inline block; >> o inline faz com que os elementos fiquem seguidos na
linha e o block faz com que a largura e a altura sejam mantidas.

box-sizing: border-box; // reduz as coisas ao tamanho da borda

line-height: 200px; >> altura da linha (distância entre uma linha e outra
verticalmente)

text-align: center; >>alinha texto. Se usado no body, alinha os conteúdos.

Parâmetros: center, end, justify, ...

# Seletores Personalizados #

# = id
. = class
: = pseudo-class
:: = pseudo-element
> = children

Pseudo-classes >> é uma palavra-chave adicionada às declarações de um seletor após

um sinal de dois pontos (" : ") e especificam um estado especial de um elemento.
Exemplos: :hover (caso o mouse passe em cima), :visited (configura as âncoras já
visitadas. Serve para alterar a aparência dos links quando já foram
acessados), :active, :checked, :empty e :focus.

Pseudo-elementos >> é uma palavra-chave adicionada às declarações e um seletor após

dois sinais de dois pontos (" :: ") e permitem que você formate um pedaço
específico do elemento referenciado. Exemplos: ::before (escreve algo antes do
elemento), ::after (escreve algo depois do elemento), ::first-letter, ::first-line.

Personalizando links
Basta abrir um seletor para as âncoras e mudar a color, que ele ficará com uma cor
diferente.
Para mudar algo quando passar o mouse, coloca :hover.
Para mudar a aparência quando já visitaram, usa :visited.
Para mudar a cor quando o mouse clicar, colcoa :active.

Emoji para colocar ao lado de links: Link Symbol (emojipedia) U+1F517. (ideal para
links externos)
Ex.:
a[target="_blank"]::after {
content: '\1f517';
}
Exemplo de hover:

Nesse exemplo, temos um <p> dentro de uma <div>. Nós fazemos ele "desaparecer"
utilizando div > p (display: none;). Daí, utilizamos o div:hover > p (display:
block;) para fazê-lo aparecer novamente, somente quando o mouse passar por cima da
div.

Children >> serve para indicar filhos diretos. Ex.:

Logo:

div > p {

Caso queira representar um children indireto ("neto"). Ex.:

Logo:
div p {

Pseudo-var >> :root

É a raiz do documento. Tudo que for declarado aqui, serve para o código inteiro.

Variáveis em CSS (normalmente, declara-se em ":roots") >> inicia com "--", dá o

nome, dois pontos ":", configuração/elemento/cor referente a essa variável.

Ex.:
:root {
--cor0: #c5ebd6;
--cor1: #83e1ad;
--cor2: #3ddc84;
--cor3: #2fa866;
--cor4: #1a5c37;
--cor5: #063d1e;
}

depois >

h1 {
color: var(--cor3); // após declaradas, "ctrl + espaço" faz elas aparecerem em
meio as outras
}

DICA: caso queira salvar alguma configuração específica, como por exemplo, uma
config. de "font-family":

Digita em qlqr seletor: font-family: (configuração q vc quer); > Copia > Cola na
variável.

Isso provavelmente fará com que fique mais fácil colocar alguma característica
depois.

content: 'blablabla'; (escreve coisas no local. Caso queira escrever sem substituir
o q ja tá, no seletor, usa ::after.)

símbolos html5 --> tem vários símbolos

RESPONSIVIDADE

# Position #

position: relative; >> Vai no contêiner. Colocamos relative para que seja
considerado o posicionamento atual do elemento de divisão e que ele se mantenha
adaptável para caso o navegador altere seu tamanho.

position: absolute; >> Vai no elemento de dentro. Colocamos absolute para que a div
(seu contêiner) torne-se o ponto de partida para o posicionamento desse elemento. A
partir daí podemos utilizar as propriedades: left/top para configurar seu
deslocamento e para seu tamanho: width e height. Todos esses em porcentagem de
tela.

SITE RESPONSIVO (etabas básicas para criar um site simples): site que pode ser bem
visualizado em vários dispositivos com tamanhos diferentes de tela.

Extensão do google p facililtar: Window Resizer (ou, inspecionar > canto superior
esquerdo no toggle device toolbar {ctrl + shift + m})
(sempre mexer primeiro nos containers e depois no conteúdo)

0.1) Com o seletor universal, coloca margin e padding 0px; para que o header e o
footer fiquem até o final (lembrar de colocar padding e margin dps caso necessário
dentro dos outros elementos como o main e o body), determina o ' font-family ' e
define ' box-sizing: border-box; ' para que a borda faça parte do objeto, fazendo
com que os itens não se desloquem com o aparecimento dela.

0.2) Selecionando "html, body" (html e o body), determina um background-color para

ficar de fundo caso o site demore a carregar. Além disso, determina height e width
para ocuparem 100% da vieport com height: "100vh;" e "width: 100vw;".

1) Determina a max-width e a min-width do main (caso queira limitar o main)

min-width >> É ideal que min seja 320px (colocar um pouco menos por causa que os
paddings contam, talvez 250px) pois os celulares mais antigos normalmente possuem
esse tamanho de tela.

max-width >> É ideal que max seja alguma medida que esteja visualemente gradável
para ler (Ex.: 1000px, 800px, 715px, etc) para que o tamanho do main fique restrito
a no máx esse tamanho. Caso o usuário vá para uma tela maior, como uma tv, o main
fica restrito a esse tamanho que permite uma boa visualização. (para possibilitar o
alinhamento vertical, talvez usar 98vh {90% da view port})

caso não queira limitá-lo, basta colocar " height: 100vh; " e ele ficará ocupando
toda a tela da viewport (não é necessário colocar " width: 100vw; " pois ele já
fica ocupando toda a width da tela baseado em seu conteúdo interno)

além disso, nos dois casos, coloca-se " position: relative; " para configurar os
elementos posteriormente, os quais receberão " position: absolute; ".

2) Organização visual:

Para centralizar tudo, coloca-se " margin: auto; "

Caso queira ajustar especificamente a posição dos elementos, será necessário usar
left/top e transform: translate (é necessário, SEMPRE que usar left e top para
determinar a posição de algum elemento, utilizar " transform: translate(-%left, -
%top); para ajustar esse ponto de referência para o centro do objeto), junto ao "
position: absolute; ". Ex.:

elemento ao centro = left: 50% (metade da tela) e top: 50%;. Porém, o ponto
de referência é a "ponta" do elemento (left top). Daí, utiliza-se " transform:
translate(-50%, -50%); " (transform deve SEMPRE ser o ÚLTIMO elemento dentro
da caixa de seleção ' {} '.

3) Algum elemento diferente de texto que esteja dentro do main, deve receber
"width: 100%" caso ele deva ficar ocupando quase toda a largura do main,
independente de qual seja. Para menos, determina uma width max uns 50px menor que a
original pra não embaçar. Caso seja um elemento inline, além de margin: auto,
display: block. Desse modo ele ficará centralizado de fato.

4) Adiciona padding de 20px no main pra organizar.

¹Obs.: para modificar tamanhos de fontes/textos, é recomendado usar em ao invés de

px. Para o modelo de impressão, é recomendado usar pt.

RECOMENDAÇÕES RESPONSIVAS E/OU INTERESSANTES

TEXTOS: "text-alignt: center;" pra centralizar // text-align: justify; pra

organizar os textos // text-indent: 30px; caso queira pôr espaçamentos de
parágrafos // line-height: 2em; pra facilitar a leitura. // Normalmente, é mlhr
criar o contêiner e definir sua largura antes de ver o tamanho do texto; //
Adicionar padding top e bottom em um contâiner que tenha o texto (section > p,
header > h1, ...) é sempre bom com viewport height (vh), 10 talvez. // Dica: se
quiser restringir a caixa ao texto que está, basta usar display: inline-block; no
texto (h1, p,...) para fazer com q sua área n seja uma linha toda (inline) e vire
block tbm (vai restringir a caixa ao conteúdo)

HEADER: colocar uma min-height (150px talvez) pra q ele fique sempre em um tamanho
adequado // colocar um padding-top (50px talvez) pra q o título se afaste do topo
sem distânciar o header do body // entre o h1 e algum texto abaixo, é interessante
colocar uma margin-bottom (20px talvez) nesse h1 (header > h1) para deixar uma
distância // opção de customização: no h1 (header > h1, 3em; no p (header > p),
1.2em; // caso queira diminuir a largura do <p>, coloque max-width ( 600px talvez).
Porém, caso faça isso, talvez ele n fique mais centralizado, daí basta usar margin:
auto; // padding no p para ele se afastar um pouco das bordas (left and right 10px
talvez) // text-shadow no h1 (talvez: text-shadow: 2px 2px 0px rgba(0, 0, 0,
0.267);) // text-shadow no p (talvez: text-shadow: 2px 1.5px 0px rgba(0, 0, 0,
0.315);) //

NAV: padding (10px talvez) // box-shadow para dar a impressão q todo o cabeçalho
tem sombra (talvez box-shadow: 0px 7px 7px rgba(0, 0, 0, 0.192);) // âncoras do nav
(nav > a) padding (10px tlvz), text-decoration: none para tirar o underline, font-
weight: bold (pra destacar) // em "nav > a:hover", pode colocar background-color
mais claro e color mais escuro (add tbm um border-radius: 5px; no "nav > a"), pode
colocar text-decoration: underline;, pode colocar um font-size maior, transition-
duration: 0.2s; //

P: caso vc tenha tirado o margin e o padding nas configurações gerais, coloca

padding: 15px 0px; pra os parágrafos voltarem a ter o padding "original" // text-
align: justify; // text-indent: 30px; pra parágrafos // line-height: 2em; p
facilitar a leitura //

ASIDE: padding: 10px // border-radius: 10px. // (aside > ul {} ) list-style-

position: inside, columns: 2; // (aside > h {} ) padding: 10px, margin: -10px -10px
0px -10px; para criar um "header" nesse aside. Isso é feito diminuindo a margem
entre a área do título, aproximando-a do aside. border-radius: 10px 10px 0px 0px;
*com as bordas de cima arredondadas e as de baixo retas. // box-shadow: 3px 3px 8px
rgba(0, 0, 0, 0.281); //

FOOTER: text-align: center; // font-size: 0.8em // padding: 5px // (footer a {})

text-decoration: none; // (footer > a:hover) text-decoration: underline; //
IFRAME/VIDEO ANEXADO:

Parâmetros do iframe:

>Width e Height: Iframe também recebe height e width dentro da tag, sem a
necessidade do style antes.

Ex.: <iframe src="[Link] frameborder="0"

width="500" height="500"></iframe>. (obs: as css prevalecem caso elas
determinem alguma height ou width diferente das escritas no iframe).

>Rolagem (scrolling="x"): Determina confrigurações para a barra de rolagem.

O x pode ser auto (se o conteúdo execeder o tamanho do frame, ele cria a
barra de rolagem), yes (mesmo que o conteúdo esteja todo no frame, ele cria a
barra), no (mesmo que o conteúdo não fique inteiro no frame, ele não vai criar a
barra). Utilizamos ' scrolling="" ' dentro da tag <iframe>. Ex.: <iframe
src="[Link] frameborder="0"
scrolling="auto"></iframe>

Esconder scrollbar: body::-webkit-scrollbar {} display: none;

>Borda (frameborder="0"):

Por padrão, o vscode cria o <iframe> com "frameborder="0". Essa característica só

recebe dois parâmetros: 0 (sem borda) ou qualquer outro número acima (ele adiciona
uma borda pequena, independente do número). Caso queira aumentar ou estilizar a
borda, basta criar em css "iframe {}" e estilizar com "border:".

>Estilização dentro do iframe (srcdoc="";):

É possível criar códigos simples já dentro da tag <iframe> ao substituir o src=""
pelo srcdoc="". Ex.:

<iframe id="tela" name="frame" srcdoc="<h1>Escolha uma das opções

acima</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In ullam
illum itaque laboriosam quos, inventore reiciendis delectus tempore numquam
tenetur, soluta eos esse rem doloremque pariatur repellat. Expedita, ut
voluptates.</p><img src='imagens/[Link]'>"><p>[ Infelizmente seu navegador não
é compatível com isso !]</p>
</iframe>

>Iframe Responsivo :

Primeiro, envelopa com uma div de class='video'. Depois faz as seguintes

configurações:

([Link] {}) add background-color, margin: 0px -20px 25px -20px; para colar o
fundo na borda do main e afastar 25px dos conteúdos de baixo, padding: 20px; para
ficar visualmente bonito, position: relative; // padding-bottom: 56,25%; (evita as
barrinhas pretas em cima e do lado). Para achar a "porcentagem perfeita", divide a
height do iframe por sua width e multiplica o resultado por 100. // 56,5%
representa vídeos 16:9 (FullHD). 75% representa vídeos 4:3. // tamanho padrão:
300x160px //

([Link] > iframe {}) position: absolute; // top: e left: 5px para posicionar o
vídeo na div de acordo com essas medidas // width e height 90% para determinar a
porcentagem que o tamanho que o vídeo vai aparecer ocupa na tela (devem ser
iguais). //
ORGANIZAÇÃO VISUAL DO SITE (alinhamento com position, left/top e transform:
translate -> transform tem q ser o último elemento dentro da caixa de seleção ' {}
')(caso algum desses elementos n sejam display: block, talvez deva-se usar display:
inline-block):

1) O elemento pai recebe " position: relative; " e o filho, "absolute".

2) A partir daí, as % de left e top variam de acordo com o interesse (*Obs.: é
necessário, SEMPRE que usar left e top para determinar a posição de algum elemento,
utilizar " transform: translate(-%left, -%top); para ajustar esse ponto de
referência para o centro do objeto. Pois o referencial padrão é a "ponta" (left
top)).

¹Obs.: transform sempre tem q ser o último elemento dentro da caixa de seleção ' {}
'.

Ex.:

>Alinhamento VERTICAL (centralizar a div):

1°: conteúdo recebe "left: 50%;" e "top: 50%;" em teoria, isso já resolveria, caso
o ponto de referência fosse o centro do conteúdo. Porém, como é a ponta left top,
ele ainda fica desalinhado dessa forma.
2°: conteúdo recebe "transform: translate(-50%, -50%);" - isso resolve o problema
anterior, mudando o "ponto de referência" do conteúdo do left top para o seu
próprio centro (center center) {o height do container deve ser 98vh para funcionar
- testar**}.

Ex.:

container {

position: relative;
height: 98vh;

conteudo {

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

*Obs: se a imagem do conteúdo n tiver aparecendo, talvez determinar um width e um

height do tamanho das dimensões da imagem, resolva

>Add no contêiner (elemento-pai) as seguintes declarações:

#container {

display: flex;
justify-content:center;
align-items: center;
}
Explicação:

display: flex; >> possui várias funções; uma delas é habilitar o manejamento do
conteúdo.
justify-content:center; >> alinhamento horizontal; dispensa o uso do margin: auto
align-items: center; >> alinhamento vertical.

>Alinhamento À ESQUERDA:
1°: conteúdo recebe "left: 100%;". Isso "adiciona" 100% da esquerda da tela a
esquerda do objeto, orém, como o referencial é a ponta left top, ele ainda fica
desalinhado pra fora do conteiner.
2°: conteúdo recebe "transform: translate(-100%);" - isso resolve o problema
anterior, mudando o "ponto de referência" do conteúdo do left top para o seu
próprio centro (center center){o height do container deve ser 98vh para funcionar -
testar**}( transform sempre tem q ser o último elemento dentro da caixa de seleção
' {} '.)

TEXTO DINÂMICO (texto responsivo):

Faz com que o texto aumente e diminua de acordo com o tamanho (mais especificamente
a largura) da janela do navegador (viewport width, vw) (existe tbm vieport height,
vh).
Medida fixa: font-size: 5em;

Para fazer com que o tamanho da fonte mude com o tamanho da tela, basta usar font-
size: 10vw; (exemplo).

Isso faz com que o font-size tenha SEMPRE 10% do tamanho da janela do usuário,
logo, não importa o tamano da tela.

*Obs.: ñ exagerar no uso de texto dinâmico, é importante usar somente em textos

específicos (sites em que o texto faz parte de sua principal ideia, talvez) pois
pode ficar difícil de adaptar a telas depois.

EFEITO PARALLAX:
Em tese, é a sensação de que o que olhamos perto se move mais rápido e o que está
longe se move mais lento. Para simular o efeito em sites, podemos fazer as
seguintes configurações:

div {

background-image: url(../imagens/[Link]);

background-repeat: no-repeat;
background-attachment: fixed;
background-position: right center;
background-size: cover;
}

É interessante acrescentar sombra na caixa acima da que irá conter a imagem. Ex.:
box-shadow: inset 6px 6px 13px 0px rgba(0, 0, 0, 0.473);

*Obs.: normalmente, imagens usadas no efeito parallax são nítidas no centro e

desfocadas no top e no bottom, para intensificar o efeito, provavalmente.

PARAMETROS/ESPECIFICAR SELETOR (nome real é qual??)

se usar nas css duas barras e especificar algum parâmetro, ele restringe aquelas
configurações a ele.
Abaixo, adicionaremos um emoji logo após os links, mas somente para aqueles com o
target: _blank (externos).

a[target="_blank"]::after {
content: '\1f517';
}

input[type="submit"] {
background-color: red;
}

columns: 2; >> divide o conteúdo da caixa em colunas. Nesse caso, em duas. É bom
para listas.

PERSONALIZANDO TABELAS

"border-collapse" >> Personaliza características da borda.

collapse > as bordas dos "td" ficam coladas.

separate (padrão) > as bordas dos "td" ficam separadas.

Efeito Zebrado (uma linha de cada cor, para facilitar a visualização):

tr:nth-child(x). X pode ser: 2n (ou even, vai mudar a cor a cada 2 linhas) / 2n-1
(ou odd, vai mudar a cor em cada linha ímpar)

tbody > tr:nth-child(2n) {

background-color: lightgray;
}

*Obs: (2n) faz com que seja de 2 em duas linhas. 3n, de três em três, e assim
por diante.

Cabeçalho Fixo (só funciona bem no chrome, talvez em outros):

table {} = position: relative;

thead > tr > th {} =

position: sticky; (p grudar ele & fzr com q ele n vaze da tabela dps, eu acho)
top: -1px; (top 0 ou menor é pra ele ficar no top da página qnd tiver rolando, mas
por causa do position, ainda restrito a tabela)
background-color: darkgray; (tem que ter um backcolor igual a cor do th, pois senão
só o texto vai descer)

>Mesclagem de Células:

colspan (caso vá expandir uma célula para o lado {ocupar mais de uma coluna}: <td
colspan="2">texto</td>
rowspan : (caso vá expandir uma célula para baixo {ocupar mais de uma linha}: <td
colspan="3">texto</td> [bom pra cabeçalho vertical]

>Alinhamento vertical dos textos das células:

vertical-align: middle; (se somado com "text-align: center;", fica ótimo)

*Obs: pra criar o efeito de os números estarem sempre na esquerda, como no

excel, basta criar uma classe numero e colocar "text-align: right;" nela.

>Agrupando colunas ("seletor de colunas"):

Para selecionar uma coluna e mudar configurações que envolvem todos os seus
elementos, colocar uma classe em cada um é trabalhoso. Para tal, em HTML5,
podemos fazer o seguinte:

<colgroup></colgroup> = Dentro de <table>, colocamos um colgroup para

colocarmos/nomearmos dentro as colunas da tabela (deve ficar abaixo do <caption>
e acima do restante [thead, tbody,... ]).

<col> = Dentro de <colgroup>, criaremos quantos "col"s forem necessários, de

acordo com a quantidade de colunas da tabela, EM ORDEM. Em cada <col>
colocaremos uma classe referente a tabela que ele representa. Ex.: coluna: nome //
<col class="cnome">.

Após isso, basta usar um seletor de classe em css (".cnome { background-

color: red; } ) e estará funcionando.

*Obs.: caso uma coluna tenha um scope: "colgroup", ou seja, possua dados em
mais de uma coluna, devemos acrescentar ' span="x" ' em seu col, sendo "x" o
número de colunas que ela engloba.

>Tabelas Responsivas:
Para a tabela não ultrapassar a vw (viewport width) e criar uma rolagem lateral, é
recomendado criar uma <div> e envelopar toda a tabela. Daí, em css, utiliza-se:

div { overflow-x: auto; } >> overflow é usado para configurar elementos que estão
"vazando". Nesse caso, está vazando no eixo x.

>Configurações interessantes:

body {} = font-family: arial, Helvetica, sans-serif; //

table{} = width: 400px; (dentro desses 400px, se você quer que algumas colunes
fiquem maiores que outras, é interessante usar css inline no <th> dessa coluna.
Daí, ela altera a coluna, mas adapta o restante, mantendo o width determinado. //
border-collapse: collapse;

td, th {} = border: 1px solid black; // padding: 10px;

caption {} = font-size: 1.5em; // font-weight: bolder; // padding: 5px; // text-

align: center; // background-color: rgb (236, 236, 236); //

thead {} = background-color: #636363; // color: white;

tfoot {} = background-color: #636363; // color: white; // font-weight: bolder;

tr:hover, td:hover {} = border: 2px solid #282646; >> pra facilitar a leitura,
marcando a linha e as infos q o mouse está passando

TRANSIÇÕES LEGAIS/HOVERS LEGAIS :

>Efeito "limpo" com tempo (:hover):

transition-duration: 0.2s;
>Efeito de clique (:active):

section img {
transform: scale(95%);
}

>Efeito de selecionar (top left)(:hover):

transform: translate(-3px, -3px);

¹Obs.: transform sempre tem q ser o último elemento dentro da caixa de seleção '
{} '.

>Borda(:hover):
border: 2px solid rgb (255, 255, 255, 0.637);
*obs: pra n bugar a img na tela, usa-se " box-sizing: border-box; " no seletor da
img sem o hover pra resolver. Faz com que a borda faça parte do objeto, fazendo com
que os itens não se desloquem com o aparecimento dela.

>Input checkbox:
Pode-se mudar o tamanho das caixas da checkbox utilizando uma classe em cada
uma e modificando o width e o height. Para aumentar o texto ao lado, basta
modificar os labels com uma classe tbm.

É bom usar <br> após cada label visando deixar cada checkbox abaixo da outra.

>Efeito de transição limpa de width e height com media query:

Pode-se fazer uma transição limpa ao acrescentar isso na folha principal de estilo
do mobile first, no container que mudará de tamanho:
section {
transition: width 0.3s, height 0.3s; /* altera o tempo no qual o
container muda o tamanho */
transition-timing-function: ease; /* deixa a transição mais limpa, fznd
com que ele ñ acelere e desacelere na msm velocidade */
}

>Efeito de botão selecionado:

Basta mudar o background-color para uma mais escura do que a original do botão que
fica interessante.

>ALTERAR O CURSOR (cursor mãozinha):

CSS:
cursor: pointer;

FORMULÁRIOS(inputs):
Pode-se editar vários configurações em formulários como borda, fundo, cor do texto,
entre outros...

Configurações gerais e interessantes:

' outline: none; ' para tirar a linha preta quando se seleciona o formulário

Para fazer com que o fundo volte a ser branco (caso você tenha definido um
background-color diferente de branco) quando o formulário for selecionado:
[Link] input:focus-within{
background-color: white;
}

>>MEDIA QUERIES (media query)<<:

É uma estrutura das CSS que permite aplicar estilizações específicas para uma
página web de acordo com certas condições, fazendo assim com que esta página possa
se adequar ao layout de tela em diferentes tamanhos e tipos de mídia (a adaptação a
telas diferentes
não é automática e é necessário prestar atenção nisso). Media Query é a união de
media type + media features.

Não possui tradução para o Português, mas de forma simples, media significa meio ou
mídia e query significa solicitação ou indagação. Sendo assim, a explicação para o
termo seria algo como o seu navegador solicitando um formato especial (CSS) pra a
exibição em meios diferentes. Os primeiros estudos sobre essa tecnologia surgiram
com os "media types", que basicamente criavam um formato específico para
determinado tipo de mídia (tela, impressora, dispositivos para braille, portáteis,
handheld, projetores, conteúdo lido, TVs, telas de grade fica, etc), entretanto,
somente elas não foram suficientes devido aos diversos tamanhos, formatos, suporte
máximo de cores, resoluções, etc, que uma tela de um mesmo tipo de aparelho
(smartphone diferentes, por exemplo) podiam apresentar. Daí surgiram as "medias
queries" que são basicamente as "medias types" somadas às "medias features".

*Obs.: primeiro "media type" e dps "media features".

Principais media types (tipos de mídia) (indicada sem parênteses):

media = "print" >> impressoras; (bom usar font-familys que sejam monospace /
background-imagem n funciona / shadows ñ são boas) // "screen" >> para monitores de
computadores, tablets e smarthphones; // "handheld" >> para dispositivos de mão; //
"all" >> para todos os tipos de mídia.

Principais media features (características de tela) (indicadas com parênteses):

Medidas especificadas pela W3Schools: "Typical Device Breakpoints" =

<link rel="stylesheet" href="[Link]" media="all">

/* Typical Device Breakpoints

------------------------------
Pequenas telas: até 600px
Celular: de 600px até 768px
Tablet: 768px até 992px
Desktop: 992px até 1200px
Grandes telas: acima de 1200px
*/

screen >> modo retrato >> ' and (orientation: portrait) '
screen >> modo paisagem >> ' and (orientation: landscape) '

Ex.:
<link rel="stylesheet" href="estilos/[Link]" media="screen and
(orientation: portrait)">
<link rel="stylesheet" href="estilos/[Link]" media="screen and
(orientation: landscape)">

¹Obs.: existem operadores - and / or / not / only.

>Como usar Media Query:

Pode ser definida em HTML ou nas CSS.

+HTML
É definida com link:css no <head> do site, após o <title>. Após o link, renomeia-se
o arquivo com a media referente e acrescenta-se dentro da tag um media="".
Ex.:
<link rel="stylesheet" href="estilos/[Link]" media="all"> (estilo
base para todos os dispositivos)
<link rel="stylesheet" href="estilos/[Link]" media="screen"> (estilo
específico para telas)
<link rel="stylesheet" href="estilos/[Link]" media="print"> (estilo
específico para impressoras)

+CSS
É definida com @media nas CSS.
Ex.:
/* declarações gerais */
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
html,
body {
width: 100vw;
height: 100vh;
background-color: #233eff;
background-size: contain;
background-repeat: no-repeat;
}
/* declarações retrato */
@media screen and (orientation: portrait) {
body {
background-image: url(../imagens/[Link]);
background-position: center bottom;
}
}
/* declarações paisagem */
@media screen and (orientation: landscape) {
body {
background-image: url(../imagens/[Link]);
background-position: left bottom;
}
}

>>MOBILE FIRST<< (o móvel primeiro): resumindo, é optar, na criação do site, por um

caminho específico, pensando inicialmente no layout e funcionalidades da versão
móvel e depois adaptando tudo a telas maiores.

A princípio, tradicionalmente os devs criam toda a estrutura, os recursos visuais

do site e o layout completo, implementam o projeto em um pc e depois se preocupam
em adaptar toda a estrutura para telas menores, retirando elementos caso
necessário. Isso se chama Desing Responsivo.

Porém, Luke Wroblewski, em 2009, propôs essa ideia do mobile first. Atualmente ele
é chefe de produtos Google e é considerado um dos "pais" dessa abordagem de
desenvolvimento.

>Vantagens: uma maior divulgação do site pois ferramentas de busca como a Google
vão valorizá-lo // uma melhor experiência do usuário que terá acesso ao conteúdo
que foi pensado para que pudesse ser consumido de forma mais confortável // aumento
na credibilidade já que os visitantes terão a percepção (ainda que inconsciente) de
que quem criou o site se preocupou com sua experiência // otimização do
carregamento, uma vez que o site será otimizado em sua criação para que possa ser
bem carregado com conexões lentas e dispositivos sem muito poder de carregamento.

>Criando a versão mobile (minha preferência):

Cria-se o estilo principal que será designado para telas de telefone. Nele, criamos
duas @medias:

@medias screen and (orientation: portrait) & @medias screen and (orientation:
landscape) para as versões em pé e deitado do telefone.

Após isso, em html, após o title, cria-se as demais folhas de estilo com ' link:css
'.

>Configurações Interessantes:

Para ocultar e apresentar elementos (que variam de uma versão para outra), basta
utilizar = ' display: block &/ou inline; ' para ele aparecer e ' display: none; '
para ele desaparecer.

Em telas maiores, normalmente é interessante aumentar o tamanho de divs para que

ocupem mais espaço na tela. Ex.:

No mobile e telas menores, utiliza-se main { width: 90vw } mas isso incomodaria em
telas maiores, portanto, ao ultrapassar 768px (min-width: 768px em medias queries),
coloca-se como width: 758px (width fixa) para telas maiores que essa, visando
facilitar a leitura.

MENU BURGUER (menu que aparece quando clica):

Cria-se um elemento para ser o "botão" (um ícone= <i></i> / um input=
<inout></input, etc) e o nav com os itens do menu. No "botão", se adiciona a
chamada da função com onclick: ' onclick="clickMenu()" '. No nav, coloca-se um
id="" ("itens", talvez) para manipulá-lo com JS. Para funcionar, primeiramente o
nav deve estar com display="none" em CSS para que o site carregue primeiramente com
o menu fechado. Ex.:

Mobile =

HTML:
<i id="burguer" class="material-icons" onclick="clickMenu()">menu</i>
<nav id="itens">
<ul>
<li><a href="#">Opção 1</a></li>
<li><a href="#">Opção 2</a></li>
<li><a href="#">Opção 3</a></li>
<li><a href="#">Opção 4</a></li>
<li><a href="#">Opção 5</a></li>
</ul>

JavaScript:
<script>
function clickMenu() {
if ([Link] == 'block') {
[Link] = 'none'
} else {
[Link] = 'block'
}
}
</script>

>Para adaptar esse menu para quando a tela do dispositivo for maior (maior que
mobile, min-width: 768px):

Com uma media query (melhor em outro link de css), deve-se colocar ' display: none;
' no "botão" e ' display: block ' no nav. (caso queira que os itens do nav fiquem
um ao lado do outro no header, também coloca-se ' display: inline-block ' nos "li"
do nav.

Também é necessário fazer algumas modificações em JavaScript para corrigir um

detalhe ao migrar de uma configuração de estilo para outra (quando o botão está
desselecionado e a tela migra para uma maior, as vezes o ' display: block ' ñ
funciona adequadametne e essa configuração força esse ' display: block ' a ser
ativado.):

Ex.:

HTML:
<body onresize="mudouTamanho()">

JavaScript:
function mudouTamanho() {
if ([Link] >= 768) {
[Link] = 'block'
} else {
[Link] = 'none'
}
}

FLOAT
A propriedade float é usada para posicionar e formatar conteú[Link] exemplo, para
fazer uma imagem flutuar à esquerda ou à direita do texto em um contêiner.
WEB - MODEL
--color-0: #?????? (cor destaque / principal)
--color-1: #3a3a3a;
--color-2: #3a3a3a;
--color-3: #4B4F58;
--color-4: #F5F5F5;
--color-5: #FFFFFF;
--color-6: #E5E5E5;
--color-7: #424242;
--color-8: #000000;

WEB - MODEL 2
#101e23
#213c45
#315a68
#41788b
#5296ad
#74abbe
#97c0ce
#bad5de
#dceaef
#eef5f7

#5252ad