Resumo de CSS

Prévia do material em texto

O que é CSS e CSS inline?
CSS
Cascading Style Sheets
O css é responsável pela parte estética da página
Exemplo: cor de fundo, cor de texto, tamanho da fonte
Css foi desenvolvimento pelo W3C em 1996
p{
color: blue;
}
css inline : quando coloca o CSS dentro do próprio componente
HTML
Ex:
<h1 style="color: blueviolet;">O que é CSS e CSS inline?</h1>
css incorporado na página
Ex:
<style>
h1{
color: blueviolet;
}
</style>
Seletores e Classes
Seletor universal
*{
background-color:red;
}
Seletor de tag
p{
}
Seletor de classe
.conteudo{
background-color:red;
}
Seletor de id
#conteudo{
background-color:red;
}
Seletor de atributo
input[type = "text"]{
background-color: red;
}
Combinadores de seletores
Seletor de descendentes
p span{
background-color:red;
}
Seletores de irmãos adjacentes
p + span{
backgrond-color:red;
}
Seletores de irmãos gerais
p ~ span{
background-color:red;
}
Seletor de filhos
p > span{
background-color:red;
}
Propriedades
color (cor dos textos)
background (maneira abreviada para declarar todas as propriedades
anteriores).
background-color (define a cor do fundo);
hexadecimal, rgb, rgba, hsl, hsla
background-image (define uma imagem de fundo);
url(“ “), linear-gradient( , ,), radial-gradiente( px, px, cor, cor,cor)
background-repeat (define a maneira como a imagem de fundo é
posicionada);
1. imagem não repete: no-repeat
2. imagem repete na vertical e horizontal: repeat
3. imagem repete na vertical: repeat-y
4. imagem repete na horizontal: repeat-x
5. imagem toca as quatro bordas internas do box e são espaçadas de modo a
se distribuir igualmente: space
background-attachment (define se a imagem de fundo "rola" ou não
com a tela);
1. fixed
2. scroll
background-position (define como e onde a imagem de fundo é
posicionada);
1. left
2. right
3. top
4. bottom
5. top left
6. top center
7. top right
8. center left
9. center center
10.center right
11. bottom left
12.bottom center
13.bottom right
background-clip (define a área do box onde a imagem de fundo é
aplicada);
1. border-box: imagem ocupa até a área das bordas do box
2. padding-box: imagem ocupa até a área de padding do bo
3. content-box: imagem ocupa até a área de conteúdo do boxe não ocupa as
áreas de padding e bordas
background-origin (define a posição de origem da imagem no box);
1. border-box
2. padding-box
3. content-box
background-size (define as dimensões da imagem no box);
1. auto
2. contain
3. cover
Propriedade border
border: é uma propriedade que define uma borda em um elemento HTML.
solid: o valor define uma borda sólida;
none: o valor não define borda;
hidden: o valor define uma borda oculta;
dashed: o valor define uma borda tracejada;
dotted: o valor define uma borda pontilhada;
double: o valor define uma borda dupla;
groove: o valor define uma borda 3D com aparência de botão
pressionado;
Border-radius: possui uma propriedade que dá a capacidade de
adicionar bordas arredondadas a um elemento.
Propriedade Margin: As propriedades para as margens, definem a dimensão de
cada uma das quatro margens de um elemento
margin | margin-left | margin-bottom | margin-right | margin-top
Propriedade Padding: se destina a criar um espaçamento interno em um um
box entre seus 4 lados e a área de conteúdo do box.
padding | padding-left | padding-bottom| padding-right |padding-top
Propriedade Width e Height
width, min-width e max-width: se destinam a definir a largura.
height, min-height e max-height: se destinam a definir a altura .
Propriedade text
text-align: alinhamento de texto: left| right| justify|center
text-decoration: linha decorativa para o texto: underline | overline |
line-through | blink| none
text-transform : uppercase | lowercase |
line-heigh:
text-shadow :
letter-spacing:
https://maujor.com/tutorial/propriedades-css-para-estilizacao-de-textos.php#text-align
https://maujor.com/tutorial/propriedades-css-para-estilizacao-de-textos.php#text-decoration
https://maujor.com/tutorial/elinhas.php
https://maujor.com/tutorial/css3-text-shadow.php
https://maujor.com/tutorial/propriedades-css-para-estilizacao-de-textos.php#letter-spacing
Propriedade font
color: cor da fonte;
font-family:família (tipo) de fontes;
font-size:tamanho da fonte;
font-style:estilo da fonte;
font-variant:fontes maiúsculas de menor altura;
font-weight:peso da fonte;
font-stretch:grau de expansão/contração dos glifos;
font: maneira abreviada para declarar todas as propriedades anteriores
(exceto cor).
Propriedade display permite que você defina a maneira como determinado
elemento HTML deve ser renderizado.
display: block
block faz com que o elemento HTML seja renderizado como bloco, tal como os
parágrafos e os cabeçalhos o são.
tags estilo block: <p> <h1> até<h6> <form><header><footer><section
display: inline
inline faz com que o elemento HTML seja renderizado inline, dentro do bloco
na mesma linha.
tags estilo inline: <a><span><img>
display: none
faz com que o elemento HTML não seja renderizado
display: inline-block
funciona somente para os elementos HTML que por sejam display: inline.
Propriedade Max-Width
é usada para definir a largura máxima de um elemento. O valor da
largura não pode ser maior do que o valor de largura máxima.
Propriedade Position
a propriedade position define a posição de um elemento na página HTML
position: static | relative | fixed | absolute | sticky
Propriedade Overflow
especifica o comportamento do conteúdo quando ele ultrapassa as
bordas superior e inferior de um elemento de nível de bloco. O
conteúdo pode ser cortado, oculto ou uma barra de rolagem pode ser
exibida de acordo com o valor atribuído à propriedade overflow-y.
overflow-y: scroll | hidden | visible | auto
Propriedade Float
usamos para posicionar algo na tela, seja um elemento em bloco ou em
linha. Com a propriedade float definida, um elemento pode ser
empurrado para esquerda ou para a direita, permitindo que os outros
elementos possam organizar em torno dele.
Propriedade Opacity
nos permite alterar a opacidade de um elemento, deixando-o mais ou
menos transparente.
https://blog.betrybe.com/desenvolvimento-web/comandos-e-tags-html/
Efeito Dropdown
Efeito gradiente linear-gradient
Propriedades Text Shadow e Box Shadow
Media Queries
A Media Query permite que sejam aplicadas diversas formatações para
atender diferentes dispositivos.
/* Smartphones (600px para baixo) */ @media only screen and
(max-width: 600px) {...}
/* Dispositivos um pouco maiores, mas ainda pequenos (Pequenos
Tablets e Smartphones + largos, 600px para cima) */ @media only
screen and (min-width: 600px) {...} /*Dispostivos Médios (Tablets
deitados, 768px para cima) */ @media only screen and (min-width:
768px) {...} /* Dispostivos Largos (laptops/desktops, 992px para cima)
*/ @media only screen and (min-width: 992px) {...} /* Super Largos
(Telas maiores laptops, desktops e até TVs, 1200px para cima) */
@media only screen and (min-width: 1200px) {...}