Uma forma fácil e rápida de se escrever um código em CSS

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Membro Entusiasta
  • 0

Tópico único Uma forma fácil e rápida de se escrever um código em CSS

Mensagem por Luiz 24/10/17, 11:57 am

Uma forma fácil e rápida de se escrever CSS

Uma forma fácil e rápida de se escrever um código em CSS AbXEgV5

Google escreveu:Cascading Style Sheets (CSS) é um simples mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web. Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos. Mas também pode ser escrito em forma de estilos inline ou dentro das tags de estilo.
Adaptado.

Um código crucial no Fórum dos Fóruns é o CSS. Usamos ele aqui basicamente para todas as questões que envolvem um mínimo de JavaScript ou que estão relacionadas à aparência do fórum. Como já devemos saber, é o CSS que cria e estiliza as nossas páginas HTML.

O Fórum dos Fóruns, sem o CSS, por exemplo, seria muito mais bonito feio, veja:

Spoiler:

Criando nossos estilos usando CSS e as ferramentas do desenvolvedor


Muitos de nós hoje, para criar nossos belíssimos códigos CSS com a melhor perfeição possível usamos as ferramentas do desenvolvedor, que estão sempre presentes nos navegadores mais modernos, como o Chrome ou o Firefox.

Veja a seguir o passo a passo de como criar seus próprios estilos!

Abrindo as ferramentas do desenvolvedor


Vamos criar nosso primeiro estilo em algum site. No exemplo a seguir, estaremos estilizando alguns elementos da página inicial do Fórum dos Fóruns.
Assim que chegarmos à página que queremos editar, devemos clicar em F12.

Selecionando o elemento


Assim que abrir as ferramentas do desenvolvedor — pressionando a tecla F12, como mencionado antes —, clique no botão de seta (veja) e posicione o cursor acima do elemento que quer estilizar (e em seguida clique com o botão direito), conforme mostrado na captura de tela a seguir:

Uma forma fácil e rápida de se escrever um código em CSS 8sOrWMZ
(Clique na imagem para expandir)

Criando os seletores


Assim que selecionar o elemento, como fizemos na imagem acima, crie um novo estilo, clicando no botão de adição ( + ), que pode ser encontrado na coluna dos estilos:

Uma forma fácil e rápida de se escrever um código em CSS QFVAES2
(Clique na imagem para expandir)

Assim, você poderá criar os seus próprios estilos para aquele elemento selecionado. Feliz
Lembre-se que você poderá usar seus próprios seletores também.

Aplicando as propriedades


Para criar os estilos e aplicar as propriedades, é só clicar um pouco depois da chave de abertura do bloco de estilos para inserir uma nova linha de estilo:

Uma forma fácil e rápida de se escrever um código em CSS PwSrSYa
(Clique na imagem para expandir)

Você pode repetir este processo quantas vezes quiser.

Salvando os estilos


Após estilizar todos os elementos que quiser, basta ir à Folha de Estilos que foi criada por você, em sua estilização. Para isso, basta clicar no link inspector stylesheet, que irá aparecer em qualquer estilo criado por você, como mostrado abaixo:

Uma forma fácil e rápida de se escrever um código em CSS NBMK8vl
(Clique na imagem para expandir)

No nosso exemplo, o código gerado foi este:
Código:
em.fa.fa-magic.desc-icon {
  background-color: #3e9ad2;
  color: #f35125;
  border-radius: 0px;
  box-shadow: inset 2px 2px #000;
  transform: rotateX(-50deg) scale(2);
}

em.fa.fa-refresh.desc-icon {
  transform: rotate(90deg) translateY(-50px);
  background-color: #444;
  border-radius: 20px;
}

Criando códigos diretamente pela Folha de Estilo das ferramentas de desenvolvimento


Lembrando que se você quiser editar seu código de maneira instantânea, você pode usar a folha de estilo das ferramentas de desenvolvimento. Para isso:


  1. Clique no símbolo de adição, conforme mostrado na imagem abaixo:

    Uma forma fácil e rápida de se escrever um código em CSS 7Ozb7tG
    (Clique na imagem para expandir)


  2. Clique no link "inspector stylesheet":

    Uma forma fácil e rápida de se escrever um código em CSS ZZ7MY2C
    (Clique na imagem para expandir)


  3. Edite o CSS de maneira direta à seu gosto:

    Uma forma fácil e rápida de se escrever um código em CSS 3oBQgpV
    (Clique na imagem para expandir)

Questões frequentes


Muitos de nós, ainda não decoramos todas as propriedades ou cores hexadecimal ou em outros formatos.
Aqui estão algumas dicas! Piscada

Encontrando uma cor hexadecimal


Se você quiser escolher uma cor de fundo em hexadecimal, mas você não decorou todos os milhares de possibilidades, você pode abrir a ferramenta disponibilizada pelo Google Chrome:

Uma forma fácil e rápida de se escrever um código em CSS UqgLVzT
(Clique na imagem para expandir)

Conhecendo tudo sobre o CSS


Se você quiser saber sobre mais propriedades ou seletores do CSS, não se esqueça de visitar:
Você também pode conferir o guia completo da linguagem de estilos CSS, na MDN:

Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 22/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos