Seletores e Propriedades CSS

Prévia do material em texto

Seletores
 Os seletores selecionam determinados elementos
 Existem vários seletores, pois cada um emprega um critério distinto para selecionar um 
ou mais elementos. Vejamos alguns exemplos:
1. Seletor de todos os elementos: *
* {
padding: 0px;
margin: 0px;
box-sizing: border-box
}
Seletores
2. Seletor de todos os elementos com a mesma tag: tag
3. Seletor de todos os elementos com a mesma classe: .nome-da-classe
p {
color: #0000FF
font-size: 36px
}
h1 {
font-size: 48px
}
.small-text {
color: #000000
font-size: 12px
}
.image-logo {
width: 400
height: 100
}
Seletores
4. Seletor de todos os elementos com o mesmo id: #nome-do-id
5. Seletor de elementos descendentes de outros: seletor-A seletor-B
#main-container {
background-color: red
align-items: center
}
#description {
font-size: 10px;
color: #000000
}
.img-container p {
font-size: 16px
}
Seleciona somente os p dentro dos 
elementos de classe img-container
Seletores
6. Seletor de elementos que vêm logo depois de outro: seletor-A + seletor-B
7. Seletor de todos os elementos que vem depois de outro: seletor-A ~ seletor-B
h1 + p {
font-style: italic;
font-size: 12px
}
h2 ~ p {
font-style: bold;
font-size: 22px
}
Seleciona todos os p que vêm depois do 
primeiro h2 (e não estão dentro de outros 
elementos... devem ser ‘vizinhos diretos’)
Seleciona somente os p que vêm 
imediatamente depois (adjacentes) a um h1
Seletores
8. Seletor de mais de um elemento: seletor-A, seletor-B
.small-txt, h2 {
font-size: 24px;
color: ‘#F0F0F0’’
}
Seleciona somente todos os elementos de 
classe small-txt e todos os h2
Colors
 Existem 4 modos de expressarmos cores em CSS: 
1. Key-words (Palavras chave): red, green, hotpink...
2. Hexadecimal: #FFFFFF, #FFC0CB, #13A351
3. RGB (Red Green Blue): rgb(0, 255, 0), rgb(206, 105, 72)...
4. HSL (Hue Saturation Lightness): hsl(240, 100%, 75%)...
Propriedades Comuns
 Margin: cria um espaço ao redor, externo, em torno do elemento
margin: 10px;
margin: 40px 80px;
margin: 3px 20px 16px 10px;
margin: auto;
margin-left: 20px;
margin-top: 40px;
margin-right: 10px;
margin-bottom: 80px;
top e bottom rigth e left
todas
Propriedades Comuns
 Padding: cria um espaço interno ao elemento
padding: 10px;
padding: 40px 80px;
padding: 3px 20px 16px 10px;
padding : auto;
padding-left: 20px;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 80px;
top e bottom rigth e left
todas
Propriedades Comuns
 Border: adiciona uma borda na fronteira do elemento
border: solid;
border: 5px dotted;
padding: 3px dashed black;
border-color: #32A1CE;
border-width: 2px;
border-style: dotted;
border-left-width: 4px;
width style
style
border-style: dashed solid solid dotted
Propriedades Comuns
Propriedades Comuns
 Font: modifica atributos da sua fonte
font-size: 36px;
font-weight: normal;
font-family: serif;
font-variant: slashed zero
ou 100, 
200... 900
color: green;
Propriedades Comuns
 Background: modifica propriedades relacionadas ao fundo do elemento
background-color: rgb(0, 255, 0);
background-image: url(‘../../assets/wallpaper.jpg’)
background-image: url(‘./stars.png’), url(‘./sky.png’)
background-image: linear-gradient(#FF23AB, rgba(255, 255, 0, 0.5))
transparência
Position
 Position: 
position: static;
position: relative;
position: absolute;
Pseudo-Classes
 São classes que são adicionadas ao elemento somente em determinada ação
 Por exemplo, quando passamos o mouse pelo elemento, ou clicamos no elemento
 Anatomia:
seletor:pseudoclasse {
propriedade: valor
}
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
}
.box:hover {
background-color: ‘blue’
}
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
transition: background 1s ease-in-out
transform: rotate(180deg)
}
.box:hover {
background-color: ‘blue’
}
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
transition: background 1s ease-in-out
transform: rotate(180deg)
}
.box:hover {
background-color: ‘blue’
}
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
transition: background 1s ease-in-out
transform: rotate(180deg)
}
.box:hover {
background-color: ‘blue’
}
transition-property: width, 
height, background...
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
transition: background 1s ease-in-out
transform: rotate(180deg)
}
.box:hover {
background-color: ‘blue’
}
transition-duration: 
1s, 2s...
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
transition: background 1s ease-in-out
transform: rotate(180deg)
}
.box:hover {
background-color: ‘blue’
}
transition-timing-function: 
linear, ease-in, ease-out, ease-
in-out... (Bézier Curves) 
Pseudo-Classes
 Hover: é ativada ao passar pelo elemento com o mouse, sem necessariamente ativá-lo
.box {
background-color: ‘red’;
transition: background 1s ease-in-out
transform: rotate(180deg)
}
.box:hover {
background-color: ‘blue’
}
transition-property: width, 
height, background...
transition-duration: 
1s, 2s...
transition-timing-function: 
linear, ease-in, ease-out, ease-
in-out... (Bézier Curves)