【Introdução ao CSS】Aprenda com Copiar e Colar! Guia Completo de Propriedades Básicas de Design Web
Introdução
O CSS (Cascading Style Sheets) é responsável pela "aparência" de um site. O design de tudo o que os usuários veem, incluindo a cor e o tamanho do texto, o layout e as animações, é criado com CSS.
Com base nos pontos-chave de 46 artigos, este guia seleciona e apresenta cuidadosamente as propriedades de CSS mais essenciais e fundamentais que os iniciantes em desenvolvimento web devem aprender primeiro. Cada item inclui um link para uma explicação mais detalhada e código que você pode copiar e colar para usar imediatamente. Vamos começar obtendo uma visão geral com este artigo e, em seguida, aprofundar nos tópicos que lhe interessam.
Índice
- 1. Primeiras Coisas a Saber! Regras Básicas de CSS
- 2. Estilizando o Texto (Tipografia)
- 3. Dominar o Espaçamento é Dominar o Layout (O Modelo de Caixa)
- 4. Organizando Elementos Livremente (Layout)
- 5. Definindo a Impressão de um Site com Cor e Fundos
- 6. Engajando Usuários com Decorações e Animações
- 7. Um Passo Adiante com Técnicas Avançadas de CSS
1. Primeiras Coisas a Saber! Regras Básicas de CSS
A base do CSS é especificar "a qual elemento" se aplica "qual estilo". Vamos ver algumas regras para isso.
Seletores (class / id / tag)
É assim que você especifica a qual elemento HTML um estilo se aplica. A distinção básica é usar class para fins gerais, id para um elemento único específico e um seletor de tag como p para todos os parágrafos.
Reset de CSS
Este é o conceito de redefinir os estilos padrão que os navegadores têm, como o sublinhado em links, para evitar inconsistências de design.
2. Estilizando o Texto (Tipografia)
A impressão de um site muda drasticamente com a aparência de seu texto. Aqui estão os fundamentos para criar expressões de texto legíveis e atraentes.
Cor do Texto (color)
Esta é a propriedade mais básica para especificar a cor do texto. Usar texto vermelho para avisos ou mensagens de erro permite transmitir informações com precisão.
Peso da Fonte (font-weight)
Isso torna o texto em negrito para enfatizar partes importantes.
Estilo Itálico (font-style)
Isso torna o texto em itálico. É usado como um acento para citações ou em designs.
Tamanho da Fonte (font-size)
Isso ajusta o tamanho do texto. Usar unidades em permite que você especifique um tamanho relativo ao elemento pai.
Altura da Linha (line-height)
Isso ajusta o espaçamento entre as linhas do texto, melhorando a legibilidade em passagens longas.
Espaçamento entre Letras (letter-spacing)
Isso ajusta o espaço entre os caracteres. Espaçá-los um pouco nos títulos pode criar uma impressão sofisticada.
Alinhamento do Texto (text-align)
Isso alinha horizontalmente elementos em linha, como texto, dentro de seu elemento pai.
3. Dominar o Espaçamento é Dominar o Layout (O Modelo de Caixa)
Todos os elementos HTML são tratados como "caixas", e ajustar o espaço ao redor deles é fundamental para o layout.
Borda (border)
Isso desenha uma linha ao redor de uma caixa. Você pode criar vários estilos como linhas sólidas ou pontilhadas.
Espaçamento Interno e Externo (padding / margin)
padding ajusta o espaço dentro de uma caixa, enquanto margin ajusta o espaço fora dela. Dominar estes é chave para layouts bonitos.
4. Organizando Elementos Livremente (Layout)
Esta é a técnica para não apenas empilhar elementos verticalmente, mas também para organizá-los lado a lado ou ajustá-los.
Os Fundamentos do Layout Lado a Lado (display: flex)
Esta é a técnica mais poderosa e difundida no layout web moderno. Simplesmente especificando-a em um elemento pai, você pode organizar facilmente os elementos filhos lado a lado.
Flutuação (float)
Esta é uma técnica de layout clássica usada para coisas como ajustar texto ao redor de uma imagem.
Bloco em Linha (display: inline-block)
Uma propriedade conveniente que permite que os elementos sejam organizados lado a lado enquanto também têm largura e altura.
Controle de Altura e Largura (width / height)
Isso especifica o tamanho de uma caixa. Especificar uma porcentagem relativa ao elemento pai, como width: 100%, é fundamental para o design responsivo.
Ocultar Elementos (display: none)
Isso oculta completamente um elemento da tela. Como também é removido do layout, ele se comporta como se o elemento nunca tivesse existido.
Layout Prático de 2 Colunas
Usando display: flex, você pode criar facilmente um layout comum de 2 colunas, como uma barra lateral e conteúdo principal.
5. Definindo a Impressão de um Site com Cor e Fundos
Cor e fundo são elementos importantes que determinam a atmosfera geral de um site.
Cor de Fundo (background-color)
Isso define a cor de fundo de um elemento. Especificá-lo na tag `body` define a cor de fundo para todo o site, criando um design unificado.
Degradê (linear-gradient)
Isso cria uma transição de cor suave (degradê) no fundo. Pode expressar um design mais profundo e moderno do que uma única cor sólida.
Translucidez (rgba)
Isso permite que você especifique a transparência de uma cor. É útil para coisas como sobrepor texto a uma imagem de fundo, onde você pode manter a legibilidade enquanto ainda permite que o fundo apareça.
6. Engajando Usuários com Decorações e Animações
Estas são técnicas para criar um site interativo e atraente.
Cantos Arredondados (border-radius)
Isso arredonda os cantos de uma caixa, dando-lhe uma impressão mais suave. É frequentemente usado no design de botões e cartões.
Adicionando Sombras (box-shadow)
Isso adiciona uma sombra a um elemento, criando uma sensação de profundidade. É eficaz para fazer com que elementos como botões pareçam flutuar.
Layout de Cartão
Crie um design de estilo de cartão que organiza as informações de forma organizada, combinando cantos arredondados e sombras.
Efeitos ao Passar o Mouse (:hover)
Isso muda o estilo de um elemento quando o cursor do mouse está sobre ele, fornecendo feedback visual.
Desativando Botões (:disabled)
Este é o estilo usado quando um botão não deve ser clicável intencionalmente, como quando a entrada de um formulário está incompleta.
Animação (@keyframes)
Este é um recurso poderoso para adicionar movimento aos elementos. Permite uma ampla gama de expressões, como fazer um elemento piscar, aparecer gradualmente ou deslizar.
Linha Sob o Título
Use a propriedade border-bottom para desenhar uma linha sob um título, o que define claramente as seções.
7. Um Passo Adiante com Técnicas Avançadas de CSS
Depois de aprender o básico, vamos também aprender técnicas para escrever um código mais eficiente e gerenciável.
Variáveis de CSS (:root)
Defina valores como as cores do tema como "variáveis" e reutilize-os em vários lugares para melhorar drasticamente a manutenibilidade.
Conteúdo Rolável (overflow)
Isso fixa a altura de um elemento e exibe qualquer conteúdo que transborde com uma barra de rolagem.
Design de Formulários
Estilizar os campos de entrada no foco ou personalizar os botões de rádio é importante para melhorar a usabilidade do formulário.
Conclusão
Neste guia, organizamos e apresentamos propriedades básicas de CSS por finalidade. Embora cada função seja simples por si só, combiná-las abre infinitas possibilidades de design.
Primeiro, tente usar este artigo de resumo como referência para experimentar as técnicas que lhe interessam. Em seguida, copiando e colando o código das páginas de explicação individuais, esperamos que você experimente a diversão do CSS vendo-o em ação.