10 exemplos de código CSS simples que você pode aprender em 10 minutos

10 exemplos de código CSS simples que você pode aprender em 10 minutos

Depois de começar a mexer em HTML, você provavelmente se interessará em adicionar mais impacto visual às suas páginas da web. CSS é a melhor maneira de fazer isso. CSS permite que você aplique alterações em toda a página sem depender de estilos embutidos.





Aqui estão vários exemplos simples de CSS para mostrar como fazer algumas mudanças básicas de estilo em sua página da web.



1. Código CSS básico para formatação fácil de parágrafo

O estilo com CSS significa que você não precisa especificar um estilo sempre que criar um elemento. Você pode simplesmente dizer 'todos os parágrafos devem ter este estilo específico' e pronto.





Digamos que você queira todos os parágrafos (

, uma das tags HTML que todos devem conhecer) um pouco maior do que o normal. E com texto cinza escuro, em vez de preto.

Relacionado: A folha de referências em HTML



O código CSS para isso é:

p { font-size: 120%; color: dimgray; }

Simples! Agora, sempre que o navegador renderiza um parágrafo, o texto herdará o tamanho (120 por cento do normal) e a cor ('esmaecido').



Se você estiver curioso para saber quais cores de texto simples você pode usar, verifique este Lista de cores CSS da Mozilla.

2. Exemplo de CSS para alterar maiúsculas e minúsculas

Deseja criar uma designação para parágrafos que devem estar em versalete? Um exemplo de CSS para isso seria:



p.smallcaps { font-variant: small-caps; }

Para fazer um parágrafo totalmente em versalete, use uma tag HTML ligeiramente diferente. Esta é a aparência:

Your paragraph here.

Adicionar um ponto e um nome de classe a um elemento especifica um subtipo desse elemento definido por uma classe. Você pode fazer isso com texto, imagens, links e praticamente qualquer outra coisa.

Se você deseja alterar um conjunto de texto para um caso específico, use estes exemplos de código CSS:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

O último coloca a primeira letra de cada frase em maiúscula.

As mudanças de estilo não se limitam a parágrafos. Um link pode ser atribuído a quatro cores diferentes: sua cor padrão, sua cor visitada, sua cor flutuante e sua cor ativa (que é exibida enquanto você clica nele). Use este exemplo de código CSS:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Com links, cada 'a' é seguido por dois pontos, não por um ponto.

Cada uma dessas declarações muda a cor de um link em um contexto específico. Não há necessidade de alterar a classe de um link para que ele mude de cor.

Embora o texto sublinhado indique claramente um link, às vezes parece melhor descartar esse sublinhado. Isso é feito com o atributo 'text-decoration'. Este exemplo de CSS mostra como remover sublinhados em links:

a { text-decoration: none; }

Qualquer coisa com a tag de link ('a') permanecerá sem sublinhado. Quer sublinhar quando o usuário passa o mouse sobre ele? Basta adicionar:

a:hover { text-decoration: underline; }

Você também pode adicionar esta decoração de texto aos links ativos para garantir que o sublinhado não desapareça quando o link for clicado.

Quer atrair mais atenção para o seu link? Um botão de link é uma ótima maneira de fazer isso. Este requer mais algumas linhas:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Vamos explicar este código de amostra CSS.

Incluir todos os quatro estados de link garante que o botão não desapareça quando um usuário passar o mouse ou clicar nele. Você também pode definir diferentes parâmetros para hover e links ativos, por exemplo, alterando o botão ou a cor do texto.

A cor de fundo é definida com a cor de fundo e a cor do texto com a cor. O preenchimento define o tamanho da caixa --- o texto é preenchido em 10px verticalmente e 25px horizontalmente.

O alinhamento do texto garante que o texto seja exibido no centro do botão, em vez de fora de um lado. A decoração de texto, como no último exemplo, remove o sublinhado.

Aplicativos de 2 jogadores em dispositivos separados

O código CSS 'display: inline-block' é um pouco mais complicado. Resumindo, permite definir a altura e a largura do objeto. Ele também garante que ele comece uma nova linha quando for inserido.

6. Exemplo de código CSS para criar uma caixa de texto

Um parágrafo simples não é muito empolgante. Se você deseja destacar um elemento em sua página, você pode querer adicionar uma borda. Veja como fazer isso com uma string de código CSS simples:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Este é direto. Ele cria uma borda roxa sólida, com cinco pixels de largura, ao redor de qualquer parágrafo de classe importante. Para fazer um parágrafo herdar essas propriedades, basta declará-lo assim:

Your important paragraph here.

Isso funcionará independentemente do tamanho do parágrafo.

Existem muitos estilos de borda diferentes que você pode aplicar; em vez de 'sólido', tente 'pontilhado' ou 'duplo'. Enquanto isso, a largura pode ser 'fina', 'média' ou 'espessa'. O código CSS pode até definir a espessura de cada borda individualmente, assim:

border-width: 5px 8px 3px 9px;

Isso resulta em uma borda superior de cinco pixels, uma borda direita de oito, uma borda inferior de três e um tamanho de borda esquerda de nove pixels.

7. Centralizar elementos com código CSS básico

Para uma tarefa comum, centralizar elementos com código CSS é surpreendentemente não intuitivo. Depois de fazer isso algumas vezes, torna-se muito mais fácil. Você tem algumas maneiras diferentes de centralizar as coisas.

Para um elemento de bloco (geralmente uma imagem), use o atributo margin:

.center { display: block; margin: auto; }

Isso garante que o elemento seja exibido como um bloco e que a margem de cada lado seja definida automaticamente. Se você deseja centralizar todas as imagens em uma determinada página, você pode até adicionar 'margin: auto' à tag img:

img { margin: auto; }

Para saber por que funciona assim, verifique o Explicação do modelo da caixa CSS no W3C .

Mas e se você quiser centralizar o texto com CSS? Use este CSS de amostra:

.centertext { text-align: center; }

Quer usar a classe 'centertext' para centralizar o texto em um parágrafo? Basta adicionar essa classe ao

marcação:

This text will be centered.

8. Exemplos CSS para ajustar o preenchimento

O preenchimento de um elemento especifica quanto espaço deve haver em cada lado. Por exemplo, se você adicionar 25 pixels de preenchimento à parte inferior de uma imagem, o texto a seguir será empurrado 25 pixels para baixo. Muitos elementos podem ter preenchimento, não apenas imagens.

Digamos que você queira que cada imagem tenha 20 pixels de preenchimento nos lados esquerdo e direito e 40 pixels na parte superior e inferior. A execução de código CSS mais básica para isso é:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Há uma instrução CSS mais curta, no entanto, que apresenta todas essas informações em uma única linha:

img { padding: 40px 25px 40px 25px; }

Isso define os preenchimentos superior, direito, inferior e esquerdo com o número certo. Graças a apenas dois valores usados ​​(40 e 25), você pode torná-lo ainda mais curto:

img { padding: 40px 25px }

Quando você usa apenas dois valores, o primeiro valor é definido para a parte superior e inferior, enquanto o segundo será para a esquerda e para a direita.

9. Destaque as linhas da tabela com codificação CSS

O código CSS faz com que as tabelas pareçam muito mais agradáveis ​​do que as grades padrão. Adicionar cores, ajustar bordas e tornar sua mesa responsiva às telas de dispositivos móveis é tudo fácil. Este exemplo simples de CSS mostra como destacar as linhas da tabela ao passar o mouse sobre elas.

tr:hover { background-color: #ddd; }

Agora, sempre que você passar o mouse sobre uma célula da tabela, essa linha mudará de cor. Para ver algumas das outras coisas legais que você pode fazer, confira o Página W3C em tabelas CSS sofisticadas .

10. Exemplo de CSS para deslocamento de imagens entre transparentes e opacos

O código CSS também pode ajudá-lo a fazer coisas legais com imagens. Aqui está um exemplo de CSS para exibir imagens com opacidade inferior, para que pareçam ligeiramente 'esbranquiçadas'. Quando você passa o mouse sobre as imagens, elas ficam totalmente opacas:

img { opacity: 0.5; filter: alpha(opacity=50); }

O atributo 'filtro' faz a mesma coisa que 'opacidade', mas o Internet Explorer 8 e anteriores não reconhecem a medição de opacidade. Para navegadores mais antigos, é uma boa ideia incluí-lo.

Agora que as imagens estão ligeiramente transparentes, você pode torná-las totalmente opacas ao passar o mouse:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 exemplos CSS com código-fonte

Com esses exemplos de código CSS, você deve ter uma ideia muito melhor de como o CSS funciona. Modelos CSS pode ajudar, mas entender os elementos brutos é vital.

Esses 10 exemplos fáceis de código CSS são recapitulados:

  1. Formatação fácil de parágrafo
  2. Alterar maiúsculas e minúsculas
  3. Alterar as cores do link
  4. Remova os sublinhados do link
  5. Faça um botão de link
  6. Crie uma caixa de texto
  7. Elementos de alinhamento ao centro
  8. Ajustar preenchimento
  9. Destacar linhas da tabela
  10. Tornar as imagens opacas

Revisando-os novamente, você notará vários padrões que podem ser aplicados a códigos futuros. E é aí que você sabe que realmente começou a se tornar um mestre em CSS. Mas lembrar disso pode ser difícil. Você pode querer marcar esta página para referência futura.

Compartilhado Compartilhado Tweet O email A folha de dicas de propriedades CSS3 essenciais

Domine a sintaxe CSS essencial com nossa folha de dicas de propriedades CSS3.

Leia a seguir Tópicos relacionados
  • Programação
  • Designer de Web
  • CSS
  • Scripting
Sobre o autor Christian Cawley(1510 artigos publicados)

Editor adjunto de segurança, Linux, DIY, programação e explicação técnica e produtor de podcasts realmente úteis, com vasta experiência em suporte de desktop e software. Um colaborador da revista Linux Format, Christian é um mexedor de Raspberry Pi, amante de Lego e fã de jogos retro.

Mais de Christian Cawley

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever