Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Imagem AVATAR
Hoje à(s) 03:19 pm por cheephard

» Logo Forum
Hoje à(s) 03:16 pm por cheephard

» Botões de mensagens estilo natalício
Hoje à(s) 03:11 pm por Holkis

» Temas Temporários
Hoje à(s) 02:54 pm por banzé

» Bloquear ícones nas mensagens privadas
Hoje à(s) 02:26 pm por Ketholy

» Caixa de busca desalinhado
Hoje à(s) 02:08 pm por Eduardo Lima

» Criar um dropdown do usuário ao clicar em perfil
Hoje à(s) 01:54 pm por Ketholy

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
239 usuários online :: 16 usuários cadastrados, 1 Invisível e 222 Visitantes :: 2 Motores de busca

banzé, beoowulf, cheephard, Gaaratsu, Holkis, James Watts, Jeckwilke, Ketholy, Lost154, LucasPofahl, Luiz, MatiasReis123, paulim78, ranzatti, Shek, uilya

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 em baixo

  • 0

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

Mensagem por Luiz em 24/10/17, 12:57 pm

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


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:

(Clique na imagem para expandir)

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:


(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:


(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:


(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:


(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:


    (Clique na imagem para expandir)


  2. Clique no link "inspector stylesheet":


    (Clique na imagem para expandir)


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


    (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:


(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:

avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5808
Pontos Ativos : 6646

Ver perfil do usuário https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum