Aprender CSS pode ser doloroso, especialmente quando você não sabe por onde começar.
CSS é uma linguagem de estilo e não uma linguagem de programação como JavaScript ou PHP, na verdade é muito fácil de aprender, especialmente se você tiver algum conhecimento de HTML.
Hoje vou oferecer algumas dicas que podem ajudá-lo a aprender CSS.
1. Construção básica
O que você precisa saber primeiro: Para aprender como escrever seu próprio CSS, você precisa saber como formatá-lo corretamente. Na verdade, existem duas maneiras decentes de fazer isso, mas uma delas mantém você organizado.
Como é comum que o HTML seja a primeira linguagem que as pessoas aprendem quando desejam trabalhar com sites WordPress, é útil aprender a sintaxe CSS escrevendo-a primeiro de maneira semelhante ao HTML.
Aqui está a estrutura básica do CSS:
seletor .class {propriedade: valor;} #id seletor {propriedade: valor;}
É muito simples quando não há muitos estilos que você deseja implementar para um elemento em seu site, mas quando você começar a se familiarizar com o CSS, precisará de muito mais do que um estilo. para um elemento, o que tornará essa estrutura inadequada.
É por isso que existe uma maneira mais eficiente e organizada de escrever seu CSS:
seletor de classe {property: value; Propriedade 2: valor 2; Propriedade 3: valor 3; } #id seletor {propriedade: valor; Propriedade 2: valor 2; Propriedade 3: valor 3; }
Agora você pode começar a examinar os termos usados neste exemplo. Cada um desses termos são os blocos de construção básicos do CSS: classe, ID, seletor, propriedade e valor. Propriedades e valores também são chamados de declaração.
Este é um ótimo ponto de partida para aprender como escrever seu próprio CSS e, uma vez que você comece, você pode se perguntar onde escrever tudo isso no final de seus arquivos WordPress.
Na instalação do WordPress, qualquer arquivo com extensão .css é um arquivo CSS, como você provavelmente já deve ter adivinhado. O arquivo principal que você deve procurar é a sua folha de estilo com o nome " style.css" É neste arquivo que geralmente você encontrará todo o estilo do tema.
2. Conveniente com seletores simples
Em seguida, você precisa aprender seletores e propriedades básicas, mas, mais importante ainda, como eles funcionam em um tema. Seletores como h1, h2
et h3
para cabeçalhos e p
por exemplo, texto de parágrafo, bem como propriedades como font-family
e “cor de fundo” para a cor de fundo.
Existe uma maneira fácil de praticar essas novas habilidades e realmente ver as alterações que você faz, sem ter que iniciar seu próprio blog WordPress. W3Schools tem uma tonelada de informações sobre CSS, bem como exemplos onde você pode modificar seu código para praticar rapidamente. Você também pode ler isto Durante Mathier Nebra em OpenClassrooms.
3. Memorize o modelo Box
Você pode encontrar facilmente seletores e propriedades que não conhece em nenhum momento. Tudo que você precisa fazer é fazer uma pesquisa simples no Google ou Bing.
Esse pode ser o caso de muitos (ou mais) coisas da vida, mas o modelo da caixa deve ser uma exceção.
Essencialmente, esses são os elementos básicos do layout CSS que você precisa dominar para entender muitas propriedades. O layout da caixa também inclui muitos elementos que você pode personalizar.
Felizmente, não é difícil de aprender e, com toda a franqueza, se eu puder memorizá-lo, você não terá problemas com ele. Em essência, o modelo de caixa inclui uma área de conteúdo, as margens internas ou preenchimento, as bordas ou borda e a margem externa ou margem.
4. Aprender fazendo
Depois de começar a se familiarizar com CSS, é uma ótima ideia praticar a escolha de um tema que tenha um design totalmente básico, no qual fazer suas alterações.
É importante entender como mudanças simples podem afetar drasticamente um tema às vezes e outras vezes nem tanto. Em última análise, praticar o máximo que puder deve ajudá-lo a ver visualmente as mudanças que está fazendo.
No projeto das coisas, uma vez que você é capaz de conectar os pontos, você não pode apenas escrever CSS rapidamente, mas também precisa ser capaz de solucionar problemas no futuro, o que se torna uma tarefa essencial para você. design e desenvolvimento web.
5. Tem conteúdo dependendo da largura e altura
Depois de instalar um tema simples com o qual possa trabalhar, você pode começar a alterar imediatamente o layout, especificando diferentes comprimentos e larguras para as áreas de conteúdo.
Isso permitirá que você se familiarize com os layouts dos temas do WordPress
6. flutuadores e posicionamento
É aqui que o CSS tende a ser um pouco complicado, já que você pode criar um layout apenas com CSS e especialmente com flutuadores e posicionamento. O problema é que essas propriedades não foram projetadas para criar apresentações inteiras.
No momento, é assim que muitas pessoas exibem um layout totalmente correto. explore o código do tema que você escolheu para trabalhar.
7. CSS avançado
Nesse ponto, você vai começar a se manter fiel ao CSS, mas há muito mais para descobrir:
- aulas apelido - Usado para definir um estado específico de um elemento, como passar o mouse e posicionamento da imagem.
- Seletores complexos - você pode ajustar seu estilo com seletores mais avançados.
- animações CSS3 - Criação de uma animação de fade ou outras transições.
- Responsivo com consultas de mídia CSS3 - permitirá que você crie temas responsivos em nenhum momento.
- transformadas - Controle o tamanho e a forma das áreas de conteúdo selecionadas.
- At-regras - usado para importar coisas como fontes e folhas de estilo para o seu tema.
- gradientes - Adicionando um gradiente ao seu tema sem a necessidade de usar uma imagem.
Existem muitos elementos em que você pode realmente começar a aprender a dar mais estilo ao seu tema.
Isso é tudo que você precisa saber para aprender CSS para o seu blog WordPress. Sinta-se à vontade para compartilhar este tutorial com seus amigos em suas redes sociais favoritas.