PSEUDOCLASS-
:hover- Usado normalmente em botões, ele tem a função de mudar a cor, fonte, tamanho ou qualquer outra coisa quando o usuário passar o ponteiro do mouse em cima.
::focus- Usado normalmente em inputs, o focus muda de visual quando CLICAMOS. Meio parecido com o hover, mas o focus só funciona quando clicamos em algum campo, botão... etc. Incrível.
(Obsevações: sempre que for usar o focus, retirar o outline do input ou outra tag que esteja sendo estilizada pelo focus. Só ssim para mostrar os resultados em tela.
CHILD-
Aqui você seleciona o que vai ser estilizado, exemplo:
- texto 01
- texto 02
- texto 03
- texto 04
Suponhamos que o texto 011 tenha que ser azul, o 2 tenha que ser roxo, o 3 tenha que ser ciano e o 4 tenha que ser vermelho.
No css, puxamos a ul, depois a li e adicionamos o :nth-child(posição do li) {
estilizações
}
Assim:
ul li:nth-child(1){
color: blue;
} texto 1 azul
ul li:nth-child(4){
color: red;
} texto 4 vermelho
ul li:nth-child(3) {
color: aqua;
} texto 3 ciano
ul li:nth-child(2) {
color: blueviolet;
} texto 2 roxo
FÁCIL.
DISPLAYS-
Display-block:
Algumas tags já possuem, por padrão, a display-block. Eles são: div, section, p, h1, h2, ul, article. Essa display block, por padrão, ela joga os elementos pra debaixo dela. Ou seja, qualquer tag padronizada display-block ou tag estilizada com a display-block, ocupa 100% da linha que ela está e automaticamente joga a outra tag para baixo dela. (A menos que na estilização você defina o máximo de largura que tenha que ocupar).
Display-inline:
Alinha as divs um ao lado do outro. Não é recomendável usar o display-inline em div´s, pois o display inline deixa somente um ao lado do outro mas fica "bloqueado", não é possível estilizar com margin, height... etc. Serve somente para alinhar as divs, mais nenhuma estilização.
Display: inline-block:
Como já diz o nome, a inline-block é a função de inline com block. Como assim? A display-block ocupa todo o espaço na linha e joga todas as outras div´s para baixo, porém, é possível estilizá-las com margin, height... etc, certo? Já o display inline alinha todas as div´s na mesma linha, porém não pode ser estilizada, ela fica limitada, certo? Com a fusão dos dois, com a inline block nós simplesmente conseguimos alinhar as div´s na mesma linha e estilizá-las com margin, height, e outras propriedades. Recomenda-se usar, pelo menos para div´s, sempre o inline-block.
POSITION-
Position-static:
Essa propriedade é padrão do navegador. Se você aplicar um position-static em algo, ele ficará parado, seja com margin, bottom, left, right, top... etc. Não mudará nada. E, importante lembrar que o static é PADRAO, mesmo que seja só o Position sozinho, as outras propriedades não vão fazer diferença.
Position-fixed:
Com a fixed podemos estilizar a position e, o mais legal, é que com o fixed, quando você descer o scroll na página, aquela position fixed faz com que o elemento desça junto. Se não tivesse o fixed, ficaria lá em cima.
Position-sticky:
Muito parecido com o fixed, a diferença é que com o sticky aplicado, o elemento só fica fixo na sua viewport quando você descer o scroll até ele, então ele só começa a te seguir a partir daí. Já o fixed te segue desde o início. Aplicamos o sticky quando queremos deixar algo fixo a partir de uma determinada área do nosso site.
Top comments (0)