Como adicionar cor ao seu site na Raspberry Pi

Seu site não será muito atraente, sem um pouco de cor. Você pode usar CSS para adicionar cor ao seu site na Raspberry Pi. A maneira mais rápida para ver como CSS funciona é tentar um exemplo. Em seu arquivo main.css, digite esta linha e, em seguida, guardá-lo:

h1 {color: red-}

Quando você recarregar sua página web (pressione F5 no Midori, se ele já está aberto lá), o texto de sua h1 indo agora é vermelho.

Esse exemplo simples encarna como o CSS funciona. Você começa por dizer o navegador as etiquetas que deseja aplicar um estilo a (o h1 tag, neste caso), e, em seguida, entre chaves, você lista as instruções de estilo.

Cada instrução começa por dizer que aspecto do estilo deve ser alterado (conhecido como o propriedade, e, neste caso, é a cor). Em seguida é uma vírgula, e então o que o estilo deve ser alterado para (conhecido como o valor, qual é vermelho neste exemplo). Finalmente, cada instrução deve terminar com um ponto e vírgula.

Tome cuidado com a forma como você pontuam o seu CSS. Mesmo nesse curto exemplo, um par de coisas podem dar errado. Não vai funcionar se você usar os suportes normais curvas (entre parênteses), ou os colchetes pontudas que você usa em HTML, por isso certifique-se de usar as chaves.

Preste atenção para o cólon eo ponto e vírgula também. Você precisa obter as pessoas certas nos lugares certos para que ele funcione. Se algo não está funcionando direito, um ponto e vírgula que falta muitas vezes é o culpado!

Podemos adicionar uma cor de fundo, também, como este:

h1 {color: red-background-color: amarelo-}

Mesmo se você for um Brit, você precisa de soletrar cor a maneira americana no seu CSS!

Como em HTML, não importa como você o espaço para fora seu CSS, mas você pode fazer um favor a si e torná-lo mais fácil de ler, incluindo algum espaço em branco e iniciar uma nova linha para cada instrução.

Há um número de cores que você pode fazer referência pelo nome (incluindo preto, branco, vermelho, verde, azul, cinza, roxo e amarelo), mas diferente do preto e branco, eles são muito brilhante e desenho animado para uso na maioria casos. A melhor maneira de especificar as cores é dando um número de cor, em vez de um nome da cor.

Isso permite que você use uma paleta de cores mais sutil e dá-lhe acesso às cores para os quais provavelmente não são ainda nomes (a menos que você trabalha em uma fábrica de tintas particularmente abrangente, talvez). Aqui estão alguns números de exemplo de cores:

  • #FFFFFF: Branco

  • #000000: Preto

  • #FF0000: Vermelho

  • #0000FF: Azul

  • #FFFF00: Amarelo

  • #008000: Verde

Você pode se surpreender ao ver as letras misturados nos números de cores, mas isso é porque as cores são expressas usando um sistema de número chamado hexadecimal que ultrapassa os números de 0 a 9 e utiliza as letras A, B, C, D, E, e F também.

Quando você contar em hexadecimal, você vai: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. O 10 representa 16 no nosso sistema de contagem normais e 11 representa 17. Aqui estão as três coisas que você precisa saber sobre hexadecimal:

  • Tal como no sistema de contagem normal, números à esquerda são maiores. Por exemplo, usando o nosso sistema normal de contagem, no número 39, o 3 tem um valor maior do que o 9 porque é na coluna das dezenas. Em hexadecimal, é o mesmo. No número hexadecimal 7F, o 7 vale mais do que o F porque o 7 é na coluna 16s.

  • O número hexadecimal mais alta de dois dígitos é FF.

  • Se você estiver usando quaisquer outros do que de A a F letras, você cometeu um erro.

O número de cores de seis dígitos é na verdade composta de três pequenos números calcada em conjunto, cada um sendo dois dígitos. Esses três números representam a quantidade de vermelho, verde e azul, que deve ser na cor, feita da esquerda para a direita.

Então preto é # 000000 porque não há vermelho, verde ou azul. azul é # 0000FF porque não há vermelho ou verde, mas não há a quantidade máxima de azul. amarelo é # FFFF00 porque o amarelo é feita quando você mistura a quantidade máxima de vermelho e verde, sem qualquer azul.

Você pode misturar suas próprias cores. Para azul marinho, é só usar um pouco menos azul do que azul puro e tente # 000080. Para verde limão vivas, pegue o número de verde (# 00800) E aumente a quantidade de verde para o máximo, dando o número da cor # 00FF00. Você pode usar quaisquer números válidos. # 767676 é bom (e uma espécie de prata), e assim é # 543ABC (Uma máscara atraente do roxo).

Você não tem que experimentar muito. Muitos recursos estão disponíveis online para ajudar a encontrar as cores que você pode usar, incluindo colorpicker, que funciona bem na Raspberry Pi e pode gerar um esquema de cores inteiro de sua cor escolhida. O código de cores para sua cor escolhida é mostrado no topo da tela.

Você usa seus códigos de cor no lugar dos nomes de cores em seu CSS, como este:

h1 {color: # FF0000-background-color: # FFFF00-}

Semelhante

menu