7 truques para aprender CSS

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, é bastante simples de aprender, especialmente se você tem 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 a escrever seu próprio CSS, você precisa saber como formatá-lo corretamente. Na verdade, existem duas maneiras corretas de chegar lá, mas uma delas mantém você organizado.

Como é comum o HTML ser o primeiro idioma que as pessoas aprendem quando desejam trabalhar com sites do WordPress, ajuda a aprender a sintaxe do CSS escrevendo-o primeiro de maneira semelhante ao HTML.

Aqui está a estrutura básica do CSS:

seletor .class {propriedade: valor;} #id seletor {propriedade: valor;}

É bem simples quando não há muitos estilos que você deseja implementar para um item em seu site, mas quando você começa a se familiarizar com o CSS, precisará de muito mais estilo para um elemento 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 do banco de dados CSS: classe, ID, seletor, propriedade e valor. Propriedades e valores também são chamados de instruções.

Este é um excelente ponto de partida para aprender a escrever seu próprio CSS e, uma vez iniciado, você pode se perguntar onde deve escrever tudo isso no final dos arquivos do WordPress.

Na sua instalação do WordPress, qualquer arquivo com extensão .css é um arquivo CSS, como você provavelmente já adivinhou. O arquivo principal que você deve procurar é a sua folha de estilos, chamada " style.css" É neste arquivo que você geralmente encontrará todo o estilo do tema.

2. Conveniente com seletores simples

Então você precisa aprender os seletores e as propriedades básicas, mas principalmente saber 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, além de exemplos em que você pode alterar o código para praticar rapidamente. Você também pode ler isso Durante Mathier Nebra em OpenClassrooms.

3. Memorize o modelo Box

Você pode procurar facilmente seletores e propriedades que não conhece em nenhum momento. Tudo o que você precisa fazer é pesquisar no Google ou no 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 aprender e com toda a honestidade, se eu conseguir memorizá-lo, você não deve ter problemas com isso. Em essência, o modelo de caixa inclui uma área de conteúdo, margens ou preenchimento interno, bordas ou bordas e a margem ou margem externa.

4. Aprender fazendo

Depois de se familiarizar com o CSS, é uma boa idéia praticar escolhendo um tema com um design completamente básico, no qual você fará suas alterações.

É importante entender como mudanças simples podem afetar um tema drasticamente às vezes e às vezes nem tanto. No final, pratique o máximo que puder, deve ajudá-lo a ver visualmente as alterações que você faz.

Nas coisas do projeto, quando você conseguir conectar os pontos, poderá não apenas escrever o CSS rapidamente, mas também conseguir resolver problemas no futuro, o que se torna uma tarefa essencial para web design e desenvolvimento.

5. Tem conteúdo dependendo da largura e altura

Depois de configurar um tema simples, você poderá começar a alterar o layout imediatamente, especificando diferentes comprimentos e larguras para as áreas do 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 se tornar um pouco complicado, porque você pode criar um layout apenas com CSS e principalmente com os flutuadores e o posicionamento. O problema é que essas propriedades não foram projetadas para criar apresentações inteiras.

No momento, é quantas pessoas exibem um layout totalmente correto. explore o código do tema que você escolheu para trabalhar nele.

7. CSS avançado

Neste ponto, você começa a acompanhar o CSS, mas há muito mais a descobrir:

• aulas apelido - Usado para definir um estado específico de um elemento, como o pairar do mouse e o posicionamento das imagens.
• Seletores complexos - você pode refinar seu estilo com seletores mais avançados.
• animações CSS3 - Criando uma animação fade ou outras transições.
• Responsivo com as consultas de mídia CSS3 - permitirá que você crie temas responsivos em pouco tempo.
• transformadas - Controle o tamanho e a forma das áreas de conteúdo selecionadas.
• At-regras - usado para importar itens como fontes e folhas de estilo para o seu tema.
• gradientes - Adicionado um gradiente ao seu tema sem precisar usar uma imagem.

Existem muitos elementos em que você pode realmente começar a aprender a dar mais estilo ao seu tema.

Era tudo o que havia para saber sobre o aprendizado de CSS para o seu blog WordPress. Sinta-se livre para compartilhar este tutorial com seus amigos em suas redes sociais favoritas.