[go: up one dir, main page]
Scribd
Carregar
47 visualizações2 páginas

Conteudosda Apostila HTML&CSS

Pseudoclasses e pseudoelementos são usados para estilizar elementos em diferentes estados. Propriedades como display, text-decoration e content controlam a exibição e formatação de elementos. Caixas controlam o layout e são afetadas por propriedades como height, width, padding e margin.

Enviado por

Davi Xavier
Direitos autorais
© © All Rights Reserved
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 DOCX, PDF, TXT ou leia on-line no Scribd
47 visualizações2 páginas

Conteudosda Apostila HTML&CSS

Pseudoclasses e pseudoelementos são usados para estilizar elementos em diferentes estados. Propriedades como display, text-decoration e content controlam a exibição e formatação de elementos. Caixas controlam o layout e são afetadas por propriedades como height, width, padding e margin.

Enviado por

Davi Xavier
Direitos autorais
© © All Rights Reserved
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 DOCX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 2

Pseudoclasse: usamos o dois pontos : assim: div:nome da psudoclasse{}

:hover essa pseudoclasse serve para quando passar mouse acontecer algo,
se relaciona ao estado de um elemento; mais informações ex020

:visited aqui a psedoclasse visited quer dizer que o a (link) for visitado ou
clicado ficar uma configuração diferente, pode mudar a cor dele por exemplo

:active essa psedoclasse é para quando o link ficar ativo/clicado

Display: inline-block; serve para por na mesma linha

Display: none serve para não mostrar, block vai mostrar

Filho: usamos o > assim: div > p {} nesse exemplo podemos fazer alterações
exclusivamento no paragrafo que esta dentro da div

text-decoration: none; /*aqui para tirar o subliado do links*/

::after usamos o dois ponto para pseudo elementos, o affter é para adicionar
algo no final ou depois que nesse caso vai ser do link*/

content: '→'; aqui vai ser a coisa que vai ser adicionada

::before

content: '←'; /*o before é para antes*/ aqui vai ser a coisa que vai
ser adicionada # = id

. = class

: = pseudoclasse

:: = pseudo elemento

> filho\clildren+
Modelo de caixas

No html e css tudo que é exibido na tela é em forma de caixa, e pode estar
uma dentro da outra, termo que usamos é aninhamento.

Height é a altura, modificamos a altura do box de algum elemento

Width é a largura

Border é a borda do box

Padding é o espaço entre a borda do box

Margin é o espaço para fora do box

Outline é um tracado fora da borda do box do elemento


Tipo de box:

 Box-level: a tag div,h1,main,form,p... é um box level; ele quebra a


linha e usa o tamnho inteiro
 Inline-level: a tag span,a,small,Strong,button… é um inline level ; ele
nao quebra a linha, e continua na mesma linha
Podemos mudar um box se ele for box-level podemos mudalo para inline usando
o display: inline ou block para ao contrario.

No devtools do google podemos visualizar a nossa pagina, e lá podemos


ver os box de cada elemento. (botão direito do mouse, e em inspecionar.)

Podemos simplificar usando shortheand nas tags


pading,margin,border,outline...

Assim:

 Padding: 10px 10px 20px 10px; cada lado um valor, ao inves de usar o
padding-left, bottom, top e right…
 Padding 10px; usando assim todos os lados serão do mesmo valor
 Para o margin mesma regra
 Outiline: 5px dashed blue aqui colocamos primeiro a largura, tipo do
outiline e a co aqui colocamos primeiro a largura, tipo do outiline e a cor

Você também pode gostar