FRONTEND - CSS
EXPECTATIVA
REALIDADE
REALIDADE
Deus, ajude-nos!
CSS significa Cascading Style Sheets, com ênfase em "Estilos". Enquanto o HTML é usado para estruturar um documento da web (definindo coisas como manchetes e parágrafos, e permitindo que você incorpore imagens, vídeo e outras mídias), CSS vem e especifica o estilo do seu documento - layouts de página, cores e fontes são todos determinados com CSS. Pense no HTML como a base (cada casa tem um) e no CSS como as escolhas estéticas.
ESTILO DE FOLHA EM CASCATA
Cascading Style Sheet
A ESTILIZAÇÃO:
CSS
Você deve estar se perguntando como esse código CSS é realmente aplicado ao conteúdo HTML.
Muito parecido com o HTML, o CSS é escrito em texto simples e sem formatação por meio de um editor de texto ou processador de texto em seu computador, e há três maneiras principais de adicionar esse código CSS às suas páginas HTML. O código CSS (ou folhas de estilo) pode ser externo, interno ou embutido.
As folhas de estilo externas são salvas como arquivos .css e podem ser usadas para determinar a aparência de um site inteiro por meio de um arquivo. Para usar uma folha de estilo externa, seus arquivos .html precisam incluir uma seção de cabeçalho com link para a folha de estilo externa
COMUNICAÇÃO COM HTML
<link>, <style>, .css
inline
Comunicação inline é quando inserimos dentro de alguma tag atributos que estilizam aquela determinada tag.
Interno
Comunicação interna é quando criamos um trecho de código CSS dentro da tag <head> para estilizar determinadas tags .
Externo
Comunicação externa é a mais usada (é indício de boa prática), onde dentro da tag <head> chamamos um arquivo com a extensão .css que engloba todas as tags, classes e ids que chamamos dentro da tag .
CSS: APRENDENDENDO NA PRÁTICA
seletor {
propriedade: valor;
}
p { color: blue; }
Seletor
Declaração
CSS: APRENDENDENDO NA PRÁTICA
elemento{
propriedade: valor;
}
Seleciona e estiliza todos os elementos que tenham a classe definida criada pela desenvolvedora.
CLASSIFICANDO ELEMENTOS
CSS: APRENDENDENDO NA PRÁTICA
.classe{
propriedade: valor;
}
CSS: APRENDENDENDO NA PRÁTICA
SISTEMAS
DE
CORES
CSS: APRENDENDENDO NA PRÁTICA
Hexadecimal
#FFFFFF
Nominal
white
rgb
rgb(255,255,255)
COR DO FUNDO:
BACKGROUND-COLOR
COR
DA FONTE
color
CSS: APRENDENDENDO NA PRÁTICA
CATEGORIA
DE
FONTES
Fontes devem estar instaladas no computador do usuário(existem milhares de fontes e a maioria delas não é gratuita).
O CSS fornece um mecanismo para compensar esta lacuna.
Você define uma lista de fontes para seu documento a serem usadas na ordem que você definiu (se a primeira da lista não estiver disponível no computador do usuário usar a segunda e assim por diante) e a última fonte da lista deverá ser uma fonte genérica dentre uma das cinco disponíveis: serif, sans-serif, monospace, cursive e fantasy.
GENÉRICAS
CSS: APRENDENDENDO NA PRÁTICA
.fonte-biografia {
font-family: "Times New Roman", Times, serif;
}
Categoria de fonte genérica
Para garantir que o site fique com uma fonte semelhante à que utilizamos, colocamos várias opções e uma categoria genérica.
CSS: APRENDENDENDO NA PRÁTICA
Porém...Temos a opção de utilizar fontes de terceiros, como por exemplo do Google Fonts.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
HTML
.texto-biografia {
font-family: "Roboto", serif;
}
CSS
TIPOS
DE FONTE
font-family
ESPESSURA DA FONTE
font-weight
Define o tamanho da fonte.
TAMANHO
DA FONTE
font-size
ESPAÇAMENTO
DAS LINHAS
line-height
A propriedade list-style é utilizado para estilizar a lista e contém mais propriedades atribuídas.
Todas as propriedades da list-style:
list-style: Define de uma vez valores das propriedades abaixo.
list-style-type: Define o tipo de identificador da lista.
list-style-image: Permite o uso de uma imagem no identificador da lista.
list-style-position: Define o posicionamento do texto relativamente ao identificador da lista.
TIPO DE ESTILO
DA LISTA
list-style-
DECORAÇÃO DO TEXTO
text-decoration
MEDIDAS ABSOLUTAS
pixel (px), em, %
PIXEL
Pixels (px) são relativos ao dispositivo de visualização. Para dispositivos de baixo pontos por polegada, 1px é um pixel de dispositivo (ponto) da tela. Para impressoras e telas de alta resolução, 1px implica vários pixels de dispositivo.
PORCENTAGEM %
É mais direto com a porcentagem, que mede em relação ao comprimento pai. Quando a largura do pai é 800px então 50% se tornaria 400px.
BOX MODEL
ALTURA E LARGURA
width x height
Usamos as propriedades width e height para definir a dimensão de qualquer elemento.
Elas podem assumir valores em comprimento (como px, mm, etc.), porcentagem (como 40%) ou nenhum (o valor padrão).
A propriedade min-width e min-height é usada para definir a largura e altura mínimas do elemento.
A propriedade max-width e max-height é usada para definir a largura e altura máximas do elemento.
Quando o valor é definido como nenhum, significa que não há largura máxima e altura máxima definidas para o elemento.
Na imagem temos a parte azul que define a largura e altura dimensão do elemento e agora vamos focar na parte verde que é o preenchimento da parte azul.
A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
PREENCHIMENTO
padding
Na imagem temos a parte azul que define a largura e altura dimensão do elemento e agora vamos focar na parte amarela que é a borda da parte azul.
A propriedade border como o nome sugere, é usado para criar borda para o elemento. Podemos alterar a cor, largura e estilo da borda de um elemento usando a border- propriedade.
PREENCHIMENTO
border
Na imagem temos a parte azul que define a largura e altura dimensão do elemento e agora vamos focar na parte laranja que é a margem da parte azul.
A propriedade border como o nome sugere, é um espaço em torno de um elemento que o separa de outros elementos.
Podemos definir o valor da margem em comprimento, porcentagem, automático e herança.
MARGEM
margin
A propriedade CSS box-sizing é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras (widths) e alturas (heights) dos elementos. É possível usar essa propriedade para emular o comportamento dos navegadores (browsers) que não suportam corretamente a especificação da propriedade CSS box model.
Valores:
content-box, padding-box e border-box
TAMANHO DO BOX
box-sizing
A propriedade position, encontrada no CSS, define como um elemento pode ser posicionado (renderizado) no documento (página).
Essa propriedade (position) pode ser acompanhada de outras, tais como, top (en-US), right (en-US), bottom (en-US), and left (en-US), que determinam como ficará a localização final do objeto, permitindo seu deslocamento.
Tipos de posicionamento:�relative, absolute, fixed, ou sticky
POSIÇÃO
position
Flexbox significa caixa flexível . É um módulo de layout para CSS com o objetivo de fornecer uma maneira eficiente de organizar e dimensionar os elementos do site para criar estruturas altamente adaptáveis.
A forma como o flexbox funciona é bastante simples na superfície: você tem um contêiner ( flex contêiner ) com filhos (quaisquer elementos contidos nele, chamados de itens flexíveis ), que são colocados ao longo das linhas flexíveis .
Linhas e itens podem ser manipulados em layout, tamanho, espaçamento e muito mais ao longo dos eixos vertical e horizontal usando uma infinidade de operadores. Isso permite que você aproveite melhor o espaço disponível e os elementos se organizem automaticamente de acordo com ele.
ORGANIZANDO OS MEUS ITENS
flex-box
CSS: APRENDENDENDO NA PRÁTICA
FLEXFROGGY
CSS: APRENDENDENDO NA PRÁTICA
MAPEANDO E APRENDENDO SOBRE AS PROPRIEDADES QUE VAMOS UTILIZAR NO PORTFÓLIO
Define um container flexível: inline ou bloco dependendo do valor fornecido. Ele permite um contexto flexível para todos os seus filhos diretos.
DIREÇÃO FLEXÍVEL
display
Define o eixo principal e, como consequência, a direção em que seus
flex-items são colocados. Isso também permite que você altere a ordem dos itens, que costumavam exigir a alteração do HTML subjacente.
Propriedades - Numeração de acordo com o que cada propriedade representa.
row → 1
row-reverse → 2
column → 3
column-reverse → 3
DIREÇÃO FLEXÍVEL
flex-direction
1
2
3
4
Define como o browser distribui o espaço entre os elementos de acordo com o eixo principal (definido pelo flex-direction) de um flex-container.
Propriedades:
justify-content: start;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
DIREÇÃO FLEXÍVEL
justify-content
A propriedade CSS align-items estabelece o valor align-self em todos filhos diretos como um grupo. A propriedade align-self estabelece o alinhamento de um certo item dentro do bloco que o contém.
Propriedades:
align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
DIREÇÃO FLEXÍVEL
align-items
SUBINDO O MEU PORTFÓLIO
REALIDADE