Professor
LUCAS DEBIAN
Introdução ao
CSS
Índice
Índice
01 O que é Lógica de Programação? 05 Conceito de variáveis
02
01
Importância da Lógica de
Conceito de CSS
programação
06
04
Comandos de Entrada e
Propriedades
Saída de cor e fundo
de dados
03
02
Exemplo de Algoritmos -
Formas de aplicação do CSS
Pseudocódigo 07
05 Conhecendo o Visual
Bordas, margens e
Studio
padding
04 Estrutura Básica 08 Referências
03 Propriedades de texto e fonte 06 Layout com display, position e
flexbox
O que é o CSS?
CSS (Cascading Style Sheets) é uma linguagem de criação de estilos, que quando
combinados determinam qual será a aparência de uma página web. Enquanto o HTML cuida
da estrutura contida em uma página, é o CSS quem diz ao navegador com o que cada parte
da página deve se parecer.
Ou seja . . .
CSS é a maquiagem do nosso HTML.
O que é o CSS?
O CSS é um código em que você pode fazer alterações rápidas de layout. Por meio dele, é
possível separar formatos de conteúdos, bem como definir como serão exibidos em cada
página. Com linguagem, os programadores podem definir:
Fontes tipográficas do texto da página
Tamanho e expressividade dos elementos
Posição dos elementos na página
Efeitos visuais de movimento
O que é o CSS?
Com CSS podemos modificar os parágrafos p aumentando a sua fonte e peso adicionando
negrito, os títulos h1 para que tenham a fonte Roboto Slab, mover uma parte da página para
baixo de outra, entre muitos exemplos. Todas essas características visuais dos elementos
são representadas por propriedades, de forma que aprender CSS consiste em três etapas:
Entender como ele funciona
Conhecer a sintaxe de uma regra
Descobrir quais propriedades existem
O que é o CSS? Sintaxe do CSS
Uma regra CSS é composta de duas partes: Seletor e Declaração.
Seletor é a parte da regra que informa a qual ou quais elementos ela deve ser aplicada.
Declaração é a parte da regra que informa como os elementos referenciados pelo
seletor devem ser modificados.
As declarações são compostas por pares de chave e
valor separados por dois pontos
O que é o CSS? Sintaxe do CSS
Exemplo:
Essa regra informa para o navegador que todos os elementos p encontrados na
página devem ter a fonte Arial.
Formas de
aplicação do CSS
Formas de Aplicação
Existem três formas principais de aplicar CSS a um documento HTML: inline,
interno e externo
Inline:
O CSS inline é aplicado diretamente no elemento HTML usando o atributo style.
Exemplo:
<p style="color: blue;">Este texto está em azul.</p>
Formas de Aplicação
Interno
O CSS interno também é aplicado no próprio HTML, mas, dentro da tag head. Neste
caso, abre-se uma tag style para aplicar a estilização do elemento.
Exemplo:
Formas de Aplicação
Externo
Para usar o CSS externo, criaremos um arquivo CSS onde colocaremos toda as
sintaxes, e deixaremos nosso HTML apenas para a estrutura. Para fazer a chamada do
arquivo CSS no html, utilizaremos a tag “<link>”.
Exemplo:
.Propriedades de
texto e fonte
Propriedades de texto e fonte
As propriedades de texto e fonte em CSS permitem controlar a aparência do texto em
páginas web. Elas abrangem aspectos como família da fonte, tamanho, cor, estilo,
decoração e espaçamento. As propriedades CSS usadas para estilizar texto geralmente
se enquadram em duas categorias:
Estilos de fonte : propriedades que afetam a fonte de um texto, por exemplo, qual
fonte será aplicada, seu tamanho e se ela será em negrito, itálico, etc.
Estilos de layout de texto : propriedades que afetam o espaçamento e outros
recursos de layout do texto, permitindo a manipulação, por exemplo, do espaço
entre linhas e letras, e como o texto é alinhado dentro da caixa de conteúdo.
Propriedades de texto e fonte
As principais propriedades CSS para texto:
Color: Muda a cor do texto. Exemplo:
Propriedades de texto e fonte
Font-family: Define uma lista de fontes para ser utilizada no elemento (e seus
herdeiros). Os nomes das fontes são separados por vírgulas, na ordem da
preferida para a menos preferida. Fontes que possuem mais que uma palavra
como nome tem que estar entre aspas.
Propriedades de texto e fonte
Font-size: muda o tamanho do texto. Podemos utilizar unidades como px
(pixels), em (unidade relativa), %, pt (pontos), entre outras.
Propriedades de texto e fonte
Font-weight: Muda o peso da fonte. Valores incluem bold e normal.
Font-style: Muda o estilo da fonte. Valores incluem italic e normal
Propriedades de texto e fonte
Text-decoration: Muda a decoração do texto. Valores incluem underline e none
(por ex: para retirar o sublinhado de links.
Valores comuns:
none: Remove qualquer decoração de texto existente.
underline: Adiciona um sublinhado ao texto.
overline: Adiciona um sobrelinhado ao texto.
line-through: Adiciona um tachado ao texto.
blink: Faz o texto piscar (não suportado em todos os navegadores).
dashed: Exibe uma linha tracejada.
dotted: Exibe uma linha pontilhada.
wavy: Exibe uma linha ondulada.
double: Exibe uma linha dupla
Propriedades de texto e fonte
Line-height: muda a altura de cada linha, ou entrelinha. É comum utilizar a
unidade em, pois assim deixamos a entrelinha proporcional ao tamanho da
fonte.
Propriedades de texto e fonte
Text-indent: muda a indentação da primeira linha de um bloco de texto
Text-transform: muda a "caixa" do texto. Valores incluem uppercase (caixa-alta),
lowercase (caixa-baixa) e capitalize (primeira letra maíuscula e o restante
minúsculas).
Propriedades de texto e fonte
Word-spacing: determina o espaçamento entre palavras.
Letter-spacing: determina o espaçamento entre letras.
Podemos compactar todas essas
alteração em uma linha
Propriedades de texto e fonte
Para evitar o excesso de declarações, podemos compactar praticamente todas
estas características usando a propriedade font:
Não é necessário escrever todos os valores, podemos omitir alguns. O
importante é que a propriedade font pode ajudar a economizar espaço no nosso
arquivo CSS e, em um arquivo complexo, diminuir bastante o seu tamanho.
Função Propriedade Exemplo
Define a cor do texto color color: #333; / color: rgb(50,50,50);
Alinha o texto text-align text-align: left; / center; / justify;
Decoração do texto text-decoration text-decoration: underline; / none;
Estilo de decoração text-decoration-style text-decoration-style: wavy;
Cor da decoração text-decoration-color text-decoration-color: red;
Espessura da decoração text-decoration-thickness text-decoration-thickness: 2px;
Conjunto de decoração (shorthand) text-decoration text-decoration: underline wavy red 2px;
Transforma o texto text-transform text-transform: uppercase; / capitalize;
Recuo da primeira linha text-indent text-indent: 30px;
Espaçamento entre letras letter-spacing letter-spacing: 1px;
Espaçamento entre palavras word-spacing word-spacing: 6px;
Sombra no texto text-shadow text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
Espaçamento entre palavras word-break word-break: break-word;
Quebra de linha automática word-wrap / overflow-wrap overflow-wrap: break-word;
Comportamento de espaços em branco white-space white-space: nowrap; / pre; / normal;
Direção do texto direction direction: rtl; (direita para esquerda)
Regras tipográficas de linguagem text-rendering* text-rendering: optimizeLegibility; (melhor em
SVG)
Altura da caixa da linha vertical-align vertical-align: middle; (em textos dentro de tabelas
ou inline)
Position
Propriedades de texto e fonte
A propriedade position em CSS é utilizada para controlar o posicionamento de
elementos em relação ao fluxo normal do documento e ao viewport. Ela possui
cinco valores principais: static, relative, absolute, fixed e sticky, cada um com
seu próprio comportamento específico.
Static:
É o valor padrão de todos os elementos. O elemento segue o fluxo normal do
documento, e as propriedades top, right, bottom e left não têm efeito.
Propriedades de texto e fonte
Relative:
O elemento é posicionado em relação à sua posição normal no fluxo do
documento. As propriedades top, right, bottom e left podem ser usadas para
deslocar o elemento a partir dessa posição original.
Absolute:
O elemento é removido do fluxo normal do documento e posicionado em
relação ao seu ancestral posicionado mais próximo (aquele que tem position
diferente de static)
Propriedades de texto e fonte
Fixed:
O elemento é posicionado em relação ao viewport (janela do navegador). Ele
permanece fixo na tela, mesmo quando a página é rolada. As propriedades top,
right, bottom e left são usadas para definir sua posição em relação ao viewport.
Sticky:
O elemento se comporta como relative até que um determinado limite (definido
pelas propriedades top, right, bottom ou left) seja atingido durante a rolagem.
