Estilização e Layout

Transforme o visual das páginas com CSS

O que é CSS?

CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML

Formas de Adicionar o CSS

Externo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
</html>

Interno

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: black;}
</style>
</head>
</html>

Inline

<!DOCTYPE html>
<html>
<body>
<h1 style= "color:blue;text-align:center;">
This is a heading
</h1>
</body>
</html>

Sintaxe CSS

selector {property: value (declaration);}
h1 {color: blue; font-size: 12px;}

Exemplo

p {
color: red;
text-align: center;
}

  • p: selector que aponta para a tag <p> do HTML
  • color: propriedade, e red, o seu respectivo valor
  • text-align: propriedade e center, o seu respectivo valor

Seletores CSS

Cada seletor tem um peso, e a soma dos pesos será levada em conta para que determinada declaração seja mais específica. A cascata perde prioridade e é priorizada a especificidade da declaração.

#id

<p id="exemplo">Hello World!</p>

#exemplo {
text-align: center;
}

.class

<h1 class="center">Red Heading</h1>

.center {
color: red;
}

Hierarquia dos Seletores

<p id="unico">O id é único.</p>
<p class="qualquer">A class específica.</p>
<p>Frase genérica.</p>

#unico {color: blue;}
.qualquer { color: red;}
p {color: black;}

O id é único.

A class é específica.

Frase genérica.

Seletor Universal

Aplica para todos os elementos dentro do seletor, muito usado para resetar "margin" e "padding" do padrão dos navegadores.

* {
text-align: center;
}

Agrupamento de Seletores

h1 {color: red;}
h3 {color: red;}
p {color: red;}

h1, h3, p {color: red;}

Resumo dos Seletores

  • #firstname: Seleciona o elemento com id="firstname"
  • .intro: Seleciona os elementos com class="intro"
  • p .intro: Seleciona apenas elementos <p> com class="intro"
  • *: Seleciona todos os elementos
  • p: Seleciona todos os elementos <p>
  • div, p: Seleciona todos os elementos <div> e todos os <p>

Pseudo-Classes

São utilizadas para definir estados específicos de um elemento

  • :hover: Aplica estilos quando o mouse passa sobre um elemento
  • :active: Aplica estilos quando um elemento está sendo ativado pelo usuário (como quando um botão é pressionado)
  • :focus: Aplica estilos quando um elemento tem foco, como quando um campo de entrada de texto está pronto para receber entrada do usuário
  • :first-child: Aplica estilos ao primeiro filho de um elemento pai
  • :last-child: Aplica estilos ao último filho de um elemento pai
  • :nth-child(x): Aplica estilos a filhos de um elemento pai em uma ordem específica (por exemplo, um número específico de um filho ou até mesmo filhos pares ou ímpares)

Exemplo de Estados de um Link

/* unvisited link */
a:link {color:#FF0000;}
/* visited link */
a:visited {color:#00FF00;}
/* mouse over link */
a:hover {color:#FF00FF;}
/* selected link */
a:active {color:#0000FF;}

Pseudo-Elementos

São usados para adicionar estilos especiais a determinadas partes de um elemento. Usado para estilizar a primeira letra ou linha de um elemento, ou até mesmo inserir conteúdo antes ou depois de um elemento, por exemplo.

::before e ::after

/* Pode adicionar um ícone decorativo antes e depois de um texto */
p::before, p::after {
content:"★"
}

Oiee, aqui é a Amanda!

::first-letter

/* Permite estilizar a primeira letra de um bloco de texto */
p::first-letter {
font-size: 16px;
font-weight: 500;
}

Era uma vez

::first-line

/* Permite estilizar a primeira linha de um bloco de texto, que pode ser útil para aplicar estilos de abertura em artigos e postagens de blog */
p::first-line {
color: blue
font-variant: small-caps;
}

Primeira linha do artigo.
Restante do texto.
Mais um pouco de texto.

::selection

/* Aplica estilos ao texto selecionado pelo usuário */
::selection {
color: white
background-color: black;
}

Modelo CSS Box

1. Top

4. Left

Margin

Border

Padding

Content
(width x height)

2. Right

3. Bottom

Manipulando Margin e Padding

Para escrever o valor dessas propriedades é necessário uma lógica na ordem das informações.

padding-top: 56px;
padding-right: 0px;
padding-bottom: 50px;
padding-left: 20px;

Quando o valor é o mesmo para todos, basta colocar todos os valores em uma única propriedade.

padding: 10px; /* aplica para todos os lados da caixa */

Mas quando os valores começam a divergir, existe uma ordem certa e a quantidade correta de valores para corresponder.

2 Valores (Top-Bottom e Right-Left)

padding: 10px auto;
/* top: 10px right: auto bottom: 10px left: auto */

3 Valores (Top, Right-Left e Bottom)

padding: 10px auto 20px;
/* top: 10px right: auto bottom: 20px left: auto */

4 Valores (Top, Right, Bottom e Left)

padding: 56px 0px 50px 20px;
/* top: 56px right: 0px bottom: 50px left: 20px */

Tabelas com CSS

Entendendo alguns conceitos básicos de CSS com a estrutura de uma tabela.

Bordas (Border)

table, th, td {
border: 1px solid red;
border-spacing: 15px; /* espaço entre as células */
}

Unificando Bordas

table {
border-collapse: collapse;
}

Tamanho (Width e Height)

table {
width: 100%;
/* define a ocupação total da largura em relação ao container pai */
}
th {
height: 70px;
/* define a célulada tabela para ocupar 70 pixels */
}

Alinhamento Horizontal e Vertical

  • Horizontal: propriedade text-align para os conteúdos de <th> ou <td>, com os valores left, center ou right. Essa propriedade também atende a "caixas" com display inline, como textos e imagens.
  • Vertical: propriedade vertical-align para os conteúdos de <th> ou <td>, com os valores top, bottom ou middle.

td {
text-align: center; /* horizontal */
height: 50px;
vertical-align: bottom; /* vertical */
}

Preenchimento (Padding)

Controlando espaços entre o conteúdo e suas bordas.

th, td {
padding: 15px;
text-align: left;
}

Inserindo Highlights

Utilize o seletor :hover para destacar uma linha <tr> quando o cursor do mouse estiver sobre ela.

tr:hover { background-color:coral; }

Alternando Cores de Linhas

Utilize o seletor nth-child() para alternar as cores de fundo das linhas d eum tabela.

tr:nth-child(even) { background-color: lightgray; }

Exemplo

table {
border-collapse: collapse;
margin: auto;
text-align: center;
width: 80%;
}
th, td {
border: 1px solid "color";
padding: 10px 20px;
}
th {
background-color: "color";
}
tbody tr:nth-child(odd) {
background-color: "color";
}
tbody tr:hover {
background-color: "color";
}

Nome Sobrenome Idade
Amanda Coelho 19 anos
Mateus Silva 23 anos
Ayla Nogueira 20 anos
Manuela Marques 18 anos

Display Flex

O que é o Flexbox?

O Flexbox é um método que nos ajuda a organizar elementos em uma direção (horizontal ou vertical) e controlar suas dimensões, alinhamentos, ordem de aparecimento e mais. Para isso, precisamos de pelo menos dois elementos - um elemento pai chamado container flexível e pelo menos um elemento filho chamado item flexível.

.container {
display:flex;
}

Associando display:flex ao container, ele passa a ter comportamento flexível e todos os seus filhos imediatos, tornam-se itens flex. Isto é, filhos dos itens flexíveis não são afetados.

Propriedades do Container Flex

  • flex-direction: Esta propriedade define a direção dos itens flexíveis dentro de um container flexível.
  • justify-content: Controla o alinahmento dos itens flexíveis no eixo principal (horizontal se flex-direction:row, vertical se for column).
  • align-items: Define o comportamento padrão para como os itens são alinhados no eixo cruzado (perpendicular ao eixo principal).
  • flex-wrap: Esta propriedade espeficica se os itens devem ser quebrados em várias linhas ou permanecer numa única linha. O valor wrap permite que os itens sejam distribuídos em linhas ou colunas adicionais se não houver espaço suficiente no container.

display: flex;
flex-direction: row (padrão) | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
flex-wrap: nowrap | wrap | wrap-reverse;