Capítulo 3 - CSS
Capítulo 3: CSS
Introdução ao CSS
O que é CSS?
CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a
apresentação de um documento escrito em HTML. Com CSS, você pode controlar o layout,
cores, fontes, espaçamento e muito mais, tornando suas páginas web visualmente
atraentes e funcionais.
Como Aplicar CSS a um Documento HTML
Existem três maneiras principais de aplicar CSS a um documento HTML:
1. CSS Inline:
Aplicado diretamente aos elementos HTML usando o atributo style .
<p style="color: blue; font-size: 20px;">Este é um parágrafo estilizado.
</p>
2. CSS Interno:
Aplicado dentro da seção <head> do documento HTML usando a tag <style> .
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>Este é um parágrafo estilizado.</p>
</body>
3. CSS Externo:
Aplicado através de um arquivo CSS externo, que é linkado ao documento HTML.
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p>Este é um parágrafo estilizado.</p>
</body>
[Link]:
p {
color: blue;
font-size: 20px;
}
Seletores e Propriedades
Seletores Básicos
Seletores são usados para selecionar os elementos HTML que você deseja estilizar.
Seletores de Tag:
p {
color: blue;
}
Seletores de Classe:
.minha-classe {
font-size: 20px;
}
Seletores de ID:
#meu-id {
background-color: yellow;
}
Propriedades de Estilo
Propriedades CSS definem como os elementos HTML serão exibidos.
Cores:
p {
color: #ff0000; /* Vermelho */
background-color: #ffff00; /* Amarelo */
}
Fontes:
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
Espaçamento:
.espacamento {
margin: 20px;
padding: 10px;
}
Layout e Posicionamento
Modelo de Caixa (Box Model)
O modelo de caixa define como os elementos são renderizados na página, incluindo
margens, bordas e preenchimentos.
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Posicionamento
CSS oferece várias opções para posicionar elementos na página.
Posicionamento Relativo:
.relativo {
position: relative;
top: 10px;
left: 20px;
}
Posicionamento Absoluto:
.absoluto {
position: absolute;
top: 50px;
right: 30px;
}
Posicionamento Fixo:
.fixo {
position: fixed;
bottom: 0;
right: 0;
}
Posicionamento Sticky:
.sticky {
position: sticky;
top: 0;
}
Flexbox
Flexbox é um layout que permite alinhar e distribuir espaço entre itens em um contêiner.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
Grid Layout
Grid Layout é um sistema de layout bidimensional que permite criar layouts complexos.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
}
Responsividade
Media Queries
Media queries permitem aplicar estilos diferentes com base nas características do
dispositivo, como largura da tela.
/* Estilos para telas menores que 600px */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* Estilos para telas maiores que 600px */
@media (min-width: 601px) {
body {
background-color: lightgreen;
}
}
Design Responsivo
Design responsivo garante que sua página se ajuste bem a diferentes tamanhos de tela.
.responsivo {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
Animações e Transições
Transições CSS
Transições permitem alterar as propriedades CSS de forma suave ao longo do tempo.
.transicao {
transition: background-color 0.5s ease;
}
.transicao:hover {
background-color: lightcoral;
}
Animações com @keyframes
Animações permitem criar mudanças de estilo mais complexas ao longo do tempo.
@keyframes exemplo {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.animacao {
animation-name: exemplo;
animation-duration: 4s;
}
Este é um resumo abrangente do capítulo sobre CSS. Se precisar de mais detalhes sobre
algum tópico específico ou tiver alguma dúvida, sinta-se à vontade para perguntar!
