Fichas
CSS Fundamentals
Fichas del conjunto (19)
- 1Como funciona a prioridade que é utilizada no CSS ? (Cascade Effect)(4)-External
(3)- Na
(2) - Inline Style Attribute
(1) - Utilizando !important
- se temos 2 declarações iguais, a ultima lida será a que valerá. - 2Como fazemos para adicionar style em um elemento SOMENTE quando 2 classes estão presentes?temos que utilizar o seletor dessa forma:
.content.home {
style comands
} - 3O que temos que lembrar sobre a 'herança' em css?Sempre que aplicamos um style em um elemento pai, os elementos filhos herdaram esse style a menos que nos sobre escrevemos essas modificações.
- 4Como funciona a especifidade dos elementos em css?p { color: #fff; } - 0 , 0 , 0 , 1
.class { color: #fff; } - 0 , 0 , 1 , 0
#idName { color: #fff; } - 0 , 1 , 0 , 0 - 5Como funciona a propriedade 'overflow' e seus values em CSS?A propriedade overflow especifica o que acontece com um elemento se o seu conteúdo transbordar um box element. (elemento onde ele está contido)
Valor padrão:
overflow: visible; //Permite que todo o conteúdo que estende os limites de um contêiner seja visível.
overflow: auto; // Adiciona scrollbars sempre que necessário, dessa forma nosso container mantém o tamanho que definimos, porém podemos ver qualquer conteudo que transbordou.
overflow:hidden; //Faz com que todo o contéudo que estende o container pai seja removido, deixando somente a parte que está dentro do container.
overflow:scroll; // introduz scroll bars independente de ser necessário ou não, para impedir que elementos sofram com transbordamento. - 6Como podemos adicionar uma barra para baixo e sumir com os elementos que transbordam para o lado, em uma div com muitos elementos?Vamos lembrar que existe a propriedade:
overflow-x: hidden;
overflow-y: scroll;
assim criamos um box element que some com os elementos que transbordam para o lado e criar uma scroll para os elementos que estão para baixo, além do tamanho de elemento. - 7Como funciona a propriedade 'position' e seus values em CSS?Tudo que temos em nossa pagina e está no fluxo normal do documento, está em:
position: static;
Usando um valor diferente de 'static' torna o objeto um elemento posicionado -positioned element-.
Em elementos posicionados podemos usar o top,left,bottom e right propriedades para a colocação.
Em position:relative; ele renderiza no fluxo normal, porém podemos modificar o posicionamento via os offsets.
Em position: absolute; nos tiremos o elemento do fluxo normal do documento e posicionamos manualmente. // esse posicionamento é baseado no primeiro elemento pai relative, se nenhum for, é o ;
Em position: fixed; Fixamos um elemento em um local especifico na janela, onde ele vai ficar independente do scroll. Diferente de posicionamentos absolutos, não podemos relativar ele a outro elemento que não seja o window. - 8Como funciona a propriedade 'z-index' em CSS?Para utilizar o z-index devemos utilizar em elementos POSICIONADOS, diferentes de static, então se queremos aplicar z-index em um elemento e não queremos move-lo, vamos utilizar o position: relative;
o ultimo elemento que aparece e esteja posicionado em cima de outro elemento, será o que vai ficar sobre o outro elemento, por padrão no z-index; - 9Como funciona a shorthand de margin?margin: top right bottom left;
lembrar que zero não possui unidade. - 10EXEMPLO ALGUMAS SHORTHADS: PHOTO
- 11Como podemos centralizar um elemento display: block;?width: 500px;
margin: 0 auto; - 12Como fazemos para centralizar um elemento, display: inline; ou display: inline-block;?É necessario somente aplicar, text-align: center; no elemento pai display: block.
- 13Como devemos adicionar imagens que são parte do layout e imagens que são conteúdo?Conteúdo deve ter inline images ;
imagens que fazem parte do conteúdo devem ser definidas como background-image. - 14Qual é a melhor maneira de ajustar um corte de uma imagem?no modo retrado é definir uma width e deixar a height: auto, no modo paisagem é definir uma height e deixar a width: auto.
- 15Como podemos adicionar uma imagem em background image e manipular ela dentro do elemento em css?.more {
background-color: #c09d78;
background-image: url('arrow.png');
background-repeat: no-repeat;
background-position: 100% 0;
display: block;
position: relative;
padding: 0 50px;
}
BACKGROUND-POSITION, AJUDA A POSICIONAR A IMAGEM DENTRO DO ELEMENTO, SUPORTA VALORES EM PX, % ETC.. - 16Se queremos adicionar um logo e sabendo que ele faz parte do layout, e queremos adicionar via CSS, como fazemos para adicionar mantendo a possibilidade do robos lerem o titulo do site?No HTML teremos:
My Company Name
.logo {
background: url(logl.png);
text-indent: -9999px
;}
text-indent tira o texto de um lugar onde seja legível em nossa window, porém mantemos o texto la para os bots lerem o nome de nosso site. - 17Como podemos criar um efeito, como a mudança de uma imagem de um logo em CSS?
- 18Como funciona os 'sprides' ? (que foram usados no logo na pergunta anterior)é uma imagem que criamos, com o efeito como é normal e também o hover juntas, então posicionamos o elemento para mostrar somente uma parte, em determinado trigger (hover ou active) mudamos o background-position, para mudar a imagem e gerar um efeito.
- 19Exemplos de pseudo classes
Información
- Descripción
- asa (Front-End Foundations ) Technical Skills Fichas sobre CSS Fundamentals, creado por Victor Bini el 09/01/2017.
- Creado por
- Victor Bini
- Visitas
- 5
- Valoración