FRONTEND - SENAC
CRIAÇÃO DE COMENTÁRIOS EM CSS
É importante sabermos que a criação de comentários no
CSS é algo bastante simples. Basta inserirmos o conteúdo
do comentário entre as barras (/* */). Vejamos:
/* Tudo o que estiver entre as barras vira comentário */
Simples mesmo, não é?! Mais adiante, iremos praticar a
inserção de comentários na folha de estilos CSS.
Vamos em frente!
ATRIBUTOS OU PROPRIEDADES E CLASSES
Atributos
Os atributos ou propriedades são informações de um elemento que permitem a
formatação total de sua aparência, posição, dimensão e outros aspectos.
Desse modo, são exemplos de atributos a borda, o background, a largura e a
altura.
Classes
Já as classes são um conjunto de atributos predefinidos com o objetivo de
formatar um elemento. Esse conjunto de informações facilita a configuração dos
elementos HTML.
Podemos aplicar a mesma classe em vários elementos distintos. Lembre-se! As
classes são um tipo de seletor.
SELETORES
Você sabe para que serve um seletor?
Os seletores são a declaração que o CSS utiliza para identificar os elementos do HTML. Por
meio dos seletores, podemos aplicar a formatação em quase qualquer parte de uma página
web.
Algumas das tags que aprendemos também são seletores. Se bem trabalhadas, essas tags
podem ser de grande ajuda no dia a dia de um desenvolvedor.
A estrutura para regras do CSS é:
seletor {propriedade: valor;}
Existem inúmeros seletores. No entanto, listamos apenas os mais importantes no quadro a
seguir:
SELETORES
PROPRIEDADES DE FOLHA DE ESTILO
Na tabela que acabamos de ver, pudemos notar que
tanto as classes como o ID são seletores. Nesse sentido,
ambos desempenham um papel fundamental no
desenvolvimento web.
No CSS, as classes possuem uma função muito
importante. Vamos entender por quê!
O ID possibilita a identificação de um elemento por vez.
Já as classes permitem identificar mais de um elemento
ao mesmo tempo e aplicar formatação de forma
exemplar.
EXERCÍCIO 01
EXERCÍCIO 01 - RESPOSTA
html {
font-size: small;
color: blue;
}
#ex1 {
background-color: yellow;
color: red;
}
#ex2 {
background-color: yellow;
color: red;
}
#ex3 {
background-color: yellow;
color: red;
}
#ex4 {
background-color: yellow;
color: red;
}
<p>No all property:</p>
<div id="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>all: inherit:</p>
<div id="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>all: initial:</p>
<div id="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>all: unset:</p>
<div id="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
EXEMPLO 02
EXEMPLO 02 - RESPOSTA
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
<h1>Meu primeiro CSS</h1>
<p>Este é um parágrafo estiloso!</p>
EXEMPLO 03
EXEMPLO 03 - RESPOSTA
h1{
text-align: center;
color: red;
}
h2{
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
EXEMPLO 04
EXEMPLO 04 - RESPOSTA
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
PROPRIEDADES DE FOLHA DE ESTILO
Na tabela que acabamos de ver, pudemos notar que tanto as classes como o ID são seletores. Nesse
sentido, ambos desempenham um papel fundamental no desenvolvimento web.
No CSS, as classes possuem uma função muito importante. Vamos entender por quê!
O ID possibilita a identificação de um elemento por vez. Já as classes permitem identificar mais de um
elemento ao mesmo tempo e aplicar formatação de forma exemplar.
Aplicação no CSS
Na folha de estilo, a propriedade class vem precedida por um ponto (.).
.nomedaclasse { propriedade: valor;}
Aplicação no HTML
<p class='nome da classe'>Seu texto </p>
É possível aplicar mais de uma class em cada elemento:
<p class='primeira da classe segunda class'> Seu texto </p>
PROPRIEDADES DE FOLHA DE ESTILO
Uma coisa muito importante que devemos
saber sobre o ID é que ele deve ser único
nos elementos. Vamos entender melhor
por meio de uma analogia?
Pense no seu número de CPF. Não há
repetição de número de CPF, certo?
O ID funciona do mesmo modo! Não
existe um número de ID igual a outro.
PROPRIEDADES DE FOLHA DE ESTILO
No CSS, o ID deve ser descrito da seguinte forma:
#seuID {propriedade: valor;} Exemplo: #menu{ border: 5px;}, #footer{ top: 30px;}
Já no HTML, o ID deve ser registrado do seguinte modo:
<p id='paragrafo1'>Seu texto</p>
<div id='amigo1'> Seu texto </div>Dica rápida!
É muito importante não utilizarmos o mesmo nome para os IDs e as classes. Desse
modo, evitamos conflitos. Também não é aconselhável colocar ID eclass no mesmo
elemento. No entanto, isso é possível. Vejamos:
<p id='amigo1' class='amigo2'> Seu texto </p>
<p id='amigo3' class='amigo2'> Seu texto </p>
INSERÇÃO DE IMAGENS
Pode parecer um pouco estranho, mas podemos inserir uma imagem na página web por meio do
CSS. A propriedade que possibilita a inserção de imagem pelo CSS é o background. A
propriedade background é dividida de vários modos e pode assumir valores específicos. Clique em
cada modo para conhecê-lo.
LARGURA, ALTURA, BORDA, MARGIN E PADDING
O primeiro passo é entender como os elementos são estruturados na página HTML. Para cada
elemento de HTML, além da altura e largura, temos o espaço interno, a borda e a margem. A
hierarquia você pode ver na imagem a seguir:
Todo elemento possui largura e altura, para ambas medidas temos,
respectivamente, as propriedades width e height. O uso dessas
propriedades é muito simples , basta definir os tamanhos com valores
numéricos, conhecidos como unidades de medida no CSS.
As unidades de medidas são formas
diferentes de definir o tamanho dos
blocos. Alguns deles são, pixels,
porcentagem, points, etc., onde os dois
são bastante utilizados e daremos um
maior foco nesse momento inicial.
LARGURA, ALTURA, BORDA, MARGIN E PADDING
CSS –BORDAS
A border-stylepropriedade especifica que tipo de borda exibir.
Os seguintes valores são permitidos:
●dotted- Define uma borda pontilhada
●dashed- Define uma borda tracejada
●solid-Define uma borda sólida
●double- Define uma borda dupla
●groove- Define uma borda ranhurada 3D. O efeito depende do valor da cor da borda
●ridge- Define uma borda 3D estriada. O efeito depende do valor da cor da borda
●inset-Define uma borda de inserção 3D. O efeito depende do valor da cor da borda
●outset- Define uma borda inicial 3D. O efeito depende do valor da cor da borda
●none-Não define borda
●hidden- Define uma borda oculta
CSS –BORDAS
border: 3px solid yellow;
SINTAXE DA BORDA:
border-width: 30px; // Estiliza a sua largura
border-style: solid; // Estiliza seu estilo
border-color: blue; // Estiliza sua cor
CSS –PADDING
As propriedades CSS padding são usadas para gerar espaço ao redor do conteúdo de um elemento, dentro
de qualquer borda definida.
Com CSS, você tem controle total sobre o preenchimento. Existem propriedades para definir o
preenchimento para cada lado de um elemento (superior, direito, inferior e esquerdo).
padding: 10px 15px 20px 25px;
top right left bottom
CSS –MARGIN
Margin é uma propriedade CSS que define o
espaço vazio em torno de um elemento HTML . As
margens garantem que a região especificada em
torno de um elemento permaneça desocupada por
qualquer elemento vizinho. Por exemplo, na figura
ao lado, observamos que o elemento tem uma
margem de 20 pixels nos quatro lados.
margin: 20px 20px 20px 20px;
top right left bottom
CSS –BOX-SHADOW
box-shadow: 0 0 20px cor;
CSS –BACKGROUND COLOR
CSS –BACKGROUND IMAGE
CSS –BACKGROUND IMAGE
CSS –BACKGROUND IMAGE
CSS –Z-INDEX
CSS –Z-INDEX
CSS –TEXT OVERFLOW PROPERTY
CSS –OVERFLOW
CSS –OVERFLOW
CSS –OVERFLOW
CSS - MEDIA QUERIES (MOBILE FIRST)
Alinhar Media Queries com definidos breakpoints (pontos de quebras das
larguras dos dispositivos) nos permite gerar uma boa experiência do
usuário nos diferentes tamanhos de tela
CSS - MEDIA QUERIES (MOBILE FIRST)
Existem mais de 18 mil modelos de celular,
divididos entre mais de 300 marcas.
O display mais apreciado é o de 5,7 polegadas,
mas ainda assim temos um grande número de
diferentes tamanhos de tela.
Projetar uma boa experiência do usuário nos
diferentes tamanhos de tela dos dispositivos é
um baita desafio.
CSS - MEDIA QUERIES (MOBILE FIRST)
O que são Media Queries?
É uma regra na CSS que te possibilita incluir um bloco de propriedades
se, e somente, se uma determinada condição for verdadeira.
Como estamos falando de mobile first e o desafio em lidar com os
diferentes tamanhos de tela, fazemos uso desse método para enfrentar o
problema.
CSS - MEDIA QUERIES (MOBILE FIRST)
Desde o planejamento até a programação, a dupla Media Queries e Breakpoints
será uma grande aliada para conseguirmos um melhor êxito na experiência do
usuário e no trato com os diferentes tamanhos de tela.
Através das Media Queries é possível combinar diferentes lógicas e assim aplicar
breakpoints de acordo com a regra estabelecida.
O mais comum no mercado é considerar dois ou três breakpoints: Celular, Tablet e
Desktop.
CSS - MAX-WIDTH
Usando largura, largura máxima e margem: auto;
Um elemento de nível de bloco sempre ocupa toda a largura disponível (se estende
para a esquerda e para a direita o máximo possível).
Definir o width de um elemento de nível de bloco impedirá que ele se estenda até
as bordas de seu contêiner. Em seguida, você pode definir as margens como
automáticas, para centralizar horizontalmente o elemento em seu contêiner. O
elemento ocupará a largura especificada e o espaço restante será dividido
igualmente entre as duas margens.
CSS - MAX-WIDTH
https://www.w3schools.com/css/tryit.asp?filename=trycss_max-width
CSS- SELETORES COMBINATÓRIOS
SELETORES CSS
SELETORES CSS
SELETORES CSS
SELETORES FILHOS
TODOS SELETORES CSS
CSS - PROPRIEDADE DISPLAY
Para entender o que faz a propriedade display, é preciso lembrar que existem dois tipos de
elementos HTML. O elemento em bloco ou block ocupa 100% da largura disponível e para ele é
sempre iniciado em uma nova linha. Um exemplo são os títulos, divs e parágrafos nos quais,
mesmo se os seus conteúdos forem o de apenas uma palavra, toda a linha correspondente
deverá ser reservada a cada elemento.
Já os elementos em linha ou inline ocupam apenas o espaço necessário para exibir o seu
conteúdo. Por exemplo: imagens, links, entre outros. A propriedade display permite modificar a
forma como esses elementos são renderizados. Dessa forma, podemos organizá-los de
diferentes maneiras na página HTML.
CSS - PROPRIEDADE DISPLAY
DISPLAY VS VISIBILITY
Utilizando o display: block; o
elemento hidden escondido volta a
aparecer na tela.
Utilizando o comando visibility: visible; o
Elemento que não estava visível, passa a
ficar visível.
display:none retira o elemento do layout da
página.
visibility:hidden deixa de mostrar o
elemento, ou seja, ele deixa de ser visível na
página mas seu espaço continua ocupado, ou
seja, o layout da página não é alterado por
causa disto.
DISPLAY BLOCK VS DISPLAY INLINE
CSS - PROPRIEDADE DISPLAY
A sintaxe da propriedade display é: display: value;
No qual o atributo value pode conter os seguintes valores:
●inline;
●block;
●contents;
●flex;
●grid;
●inline-block;
●inline-flex;
●inline-grid;
●inline-table;
●list-item;
●run-in;
●table;
●table-caption;
●table-column-group;
●table-header-group;
●table-footer-group;
●table-row-group;
●table-cell;
●table-column;
●table-row;
●none;
●initial;
●inherit.
CSS - PROPRIEDADE DISPLAY INLINE
Renderizando o elemento HTML embutido no bloco: inline
O valor CSS display inline é utilizado quando queremos que os elementos fiquem
posicionados lado a lado. É importante dizer que, ao utilizar esse valor, as
propriedades width (largura) e height (altura) serão ignoradas se forem definidas no
código CSS.
display: inline;
CSS - PROPRIEDADE DISPLAY BLOCK
Renderizando o elemento HTML como um bloco: block
Quando atribuímos o valor CSS display block à propriedade, significa que o elemento
será posicionado em uma nova linha.
display: block;
CSS - PROPRIEDADE DE LARGURA E ALTURA: INLINE-BLOCK
Ao utilizarmos o valor CSS display inline-block podemos organizar os elementos lado a
lado e definirmos as propriedades de largura e altura, pois elas não serão ignoradas
pelo navegador.
display: inline-block;
CSS - PROPRIEDADE DISPLAY: CONTENTS
Alterando comportamento do elemento filho em relação ao elemento pai: display:
contents
Quando a propriedade display é definida como contents, significa que as
características da caixa delimitadora do espaço do elemento serão ignoradas e ele
fará parte do elemento pai. Vale ressaltar que outras propriedades definidas para o
elemento continuam valendo, como a cor e o estilo da fonte.
display: contents;
CSS - FORMA RESPONSIVA E FLEXÍVEL
O valor CSS display flex é utilizado para organizar os elementos HTML de forma
responsiva. Na prática, ao definirmos um elemento com esse valor, ele funciona como
um container para agrupar os elementos filhos, que são considerados flex-itens e são
organizados nos sentidos horizontal ou vertical.
Ao definirmos o display como flex, podemos utilizar outras propriedades adicionais
para estabelecer como os elementos serão dispostos na página ou em um espaço
específico.
CSS - FORMA RESPONSIVA E FLEXÍVEL
◼flex-direction: determina a direção em que os elementos serão dispostos, que pode ser row (linha) ou
column (coluna), ou ainda, row-reverse e column-reverse para exibir os itens na posição invertida;
◼flex-wrap: para definir como o conteúdo de um elemento será exibido dentro do espaço. Em caso de
texto, por exemplo, ele pode ser forçado a permanecer na mesma linha ou dividido conforme a
necessidade. Os valores possíveis são: nowrap para não quebrar a linha, wrap para quebrar e wrap-
reverse, em que o conteúdo é preenchido no sentido de baixo para cima;
◼flex-flow: representa uma forma abreviada de escrever os valores dos atributos flex-direction e flex-
wrap;
◼justify-content: indica como os elementos filhos serão alinhados horizontalmente no espaço definido
como container. Os valores possíveis são: flex-start, flex-end, center, space-between, space-around e
space-evenly;
◼align-itens: representa o alinhamento vertical dos elementos pertencentes ao container. Os valores
possíveis são: flex-start, flex-end, stretch, center e baseline;
◼align-content: funciona semelhante ao align-itens, entretanto, alinha o conteúdo verticalmente em
relação às linhas.
CSS - FORMA CONTAINER DE GRADE: GRID
CSS display grid permite organizar os elementos da página de forma horizontal e
forma vertical, simultaneamente. Para isso, ele também conta com uma série de
propriedades adicionais para ajudar a definir como os itens serão dispostos na página
ou no espaço disponível.
Basicamente, o grid é formado por um conjunto de linhas e colunas. Se nada for
especificado, os elementos são organizados em bloco, ou seja, um em cada linha. Por
isso, é preciso definir outras propriedades para organizar no formato desejado.
CSS - FORMA CONTAINER DE GRADE: GRID
◼column-gap: define o espaço entre as colunas;
◼row-gap: define o espaço entre as linhas;
◼ gap: estabelece o mesmo espaço de distanciamento entre linhas (row-gap) e colunas (column-
gap);
◼grid-area: determina a área do elemento, ou seja, quantas linhas e colunas o item ocupará no
grid;
◼grid-auto-columns: define o valor automático para a coluna;
◼grid-auto-flow: indica o sentido em que os itens serão inseridos automaticamente na grade;
◼grid-auto-rows: define o valor automático para a linha do grid;
◼grid-column-start: especifica o início do grid;
◼grid-column-end: especifica o final do grid;
◼grid-column: define a junção das propriedades grid-column-start e grid-column-end;
CSS - FORMA CONTAINER DE GRADE: GRID
◼grid-row-gap: indica o tamanho do espaço entre as linhas;
◼grid-column-gap: indica o tamanho do espaço entre as colunas do grid;
◼grid-gap: representa a junção das propriedades grid-row-gap e grid-column-gap;
◼grid-row-start: indica a linha em que o item será posicionado;
◼grid-row-end: indica em que linha será o fim do item;
◼grid-row: representa a união das propriedades grid-row-start e grid-row-end;
◼grid-template: representa a união das propriedades grid-template-rows, grid-template-columns e
grid-areas;
◼grid-template-areas: especifica a área do grid com o nome dos itens do grid;
◼grid-template-columns: estabelece o tamanho das colunas e a quantidade para o layout grid;
◼grid-template-rows: indica o tamanho das linhas do grid.
CSS - FORMA COMO UMA TABELA : TABLE
O CSS display table faz com que o elemento tenha as características de uma tabela.
Ela funciona de forma semelhante à definição de tabelas por código HTML, entretanto,
a formatação é feita por meio de propriedades CSS.
Portanto, o valor display igual a table indica a estrutura da tabela. Será preciso definir
outros elementos, de que falaremos a seguir, para construir a formatação da tabela
conforme a quantidade de linhas, colunas e demais complementos.
display: table;
CSS - FORMA COMO UM ITEM DE LISTA: LIST-ITEM
Renderizando o elemento HTML como um item de lista: list-item
O elemento indicado com o display igual a list-item é exibido com as características de
um item de uma lista. Ele pode ser utilizado em conjunto com as propriedades list-
style-type e list-style-position para definir o estilo do item.
display: list-item;
CSS - DESATIVANDO ELEMENTO NO BLOCO: NONE
Quando definimos um elemento com CSS display none, significa que ele e os seus
elementos filhos não são exibidos na tela.
display: none;
FLEXBOX CSS
Flexbox é um recurso CSS3 que serve de modelo para desenvolvimento de layouts para websites
e aplicações web visando organizar elementos dentro de contêineres de forma flexível conforme
sua necessidade.
E essa flexibilidade se caracteriza pela capacidade de alterar a largura e / ou a altura dos
elementos (que são tratados como itens filhos) para se adequarem ao espaço disponível
em qualquer dispositivo de exibição. Um recipiente flexível expande os itens para preencher o
espaço livre disponível ou encolhe-los para evitar o transbordamento.
Além disso, permite que se alinhem os itens horizontalmente e verticalmente, ordenando-os em
diferentes posições no layout independente de como aparecem no documento HTML, e também
permite que disponha os itens na horizontal (linhas) e na vertical (colunas).
FLEXBOX CSS (UNIDIMENSIONAL)
Por padrão, ou melhor dizendo, quando Main Axis está na horizontal, main-size corresponde a largura,
mas se setarmos Main Axis para horizontal main-size será a altura. E também por padrão, podemos dizer
que Main Axis começa no ponto extremo à esquerda (main-start) e termina a direita (main-end) e Cross
Axis começa no ponto extremo acima (cross-start) e termina abaixo (cross-end).
FLEXBOX CSS- PROPRIEDADES PARA O ELEMENTO-PAI
Quando utilizamos o Flexbox, é muito importante saber quais
propriedades são declaradas no elemento-pai (por exemplo,
uma div que irá conter os elementos a serem alinhados) e quais
serão declaradas nos elementos-filhos. Abaixo, seguem
propriedades que devem ser declaradas utilizando o elemento-
pai como seletor (para alinhar elementos-filhos):
display
Esta propriedade define um flex container; inline ou block dependendo dos valores passados. Coloca
todos os elementos-filhos diretos num contexto Flex.
FLEXBOX CSS - FLEX-DIRECTION
Estabelece o eixo principal, definindo assim a direção em
que os flex items são alinhados no flex container. O
Flexbox é (com exceção de um wrapping opcional) um
conceito de layout de uma só direção. Pense nos flex items
inicialmente posicionados ou em linhas horizontais ou em
colunas verticais.
FLEXBOX CSS - FLEX-WRAP
Por padrão, os flex items vão todos tentar se encaixar em
uma só linha. Com esta propriedade você pode modificar
esse comportamento e permitir que os ítens quebrem para
uma linha seguinte conforme for necessário.
FLEXBOX CSS - FLEX-FLOW (SHORTHAND)
FLEXBOX CSS - JUSTIFY-CONTENT
Esta propriedade define o alinhamento dos itens ao
longo do eixo principal. Ajuda a distribuir o espaço
livre que sobrar no container tanto se todos os flex
items em uma linha são inflexíveis, ou são flexíveis mas
já atingiram seu tamanho máximo. Também exerce
algum controle sobre o alinhamento de itens quando
eles ultrapassam o limite da linha.
FLEXBOX CSS - JUSTIFY-CONTENT
.flex-container {
justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly;
}
FLEXBOX CSS –ALIGN ITEMS
FLEXBOX CSS –ALIGN-CONTENT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
CSS - GRID LAYOUT
GRID LAYOUT
GRID LAYOUT
GRID LAYOUT
CSS - GRID LAYOUT x FLEX-BOX
EXERCÍCIO - GRID LAYOUT
EXERCÍCIO - GRID LAYOUT
EXERCÍCIO - GRID LAYOUT
